如何改造jquery 插件符合amd 规范示例
2015-08-21 00:00
821 查看
摘要: jquery amd 插件写法示例
// UMD dance - https://github.com/umdjs/umd !function(root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else { factory(root.jQuery); } }(this, function($) { 'use strict'; // Default options var defaults = { }; // Constructor, initialise everything you need here var Plugin = function(element, options) { this.element = element; this.options = options; }; // Plugin methods and shared properties Plugin.prototype = { // Reset constructor - http://goo.gl/EcWdiy constructor: Plugin, someMethod: function() { } } // Create the jQuery plugin $.fn.plugin = function(options) { // Do a deep copy of the options - http://goo.gl/gOSSrg options = $.extend(true, {}, defaults, options); return this.each(function() { var $this = $(this); // Create a new instance for each element in the matched jQuery set // Also save the instance so it can be accessed later to use methods/properties etc // e.g. // var instance = $('.element').data('plugin'); // instance.someMethod(); $this.data('plugin', new Plugin($this, options)); }); }; // Expose defaults and Constructor (allowing overriding of prototype methods for example) $.fn.plugin.defaults = defaults; $.fn.plugin.Plugin = Plugin; }); // 用例,jquery.plugin 是上面插件的标示符 require(['jquery', 'jquery.plugin'], function($) { $('.test li').plugin({ test: 'option1', test2: 'option2' }); });
相关文章推荐
- jQuery+CSS动态改变class
- JQuery中Ajax的操作
- jquery——zTree, 完美好用的树插件
- JQuery CSS操作及jQuery的盒子模型
- 一些实用的 jQuery 技巧
- 超简洁的jquery操作页面中iframe内的dom元素
- jQuery中的closest()和parents()的区别
- 直接从google中引入jquery.js
- [转]jquery后代和子元素的区别
- jQuery插件开发方式
- 自定义JQuery插件(附图片轮播banner实现)
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调
- 很容易学习的JQuery库 : (三) 事件
- jQuery实现页面滚动时顶部动态显示隐藏
- jQuery代码优化 事件委托篇
- jQuery Ajax 实例
- Jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- js/jquery 去掉空格.回车.换行
- jQuery的ajax返回html类型不能获取片段html代码
- jquery选择器大全