var MNDialog = $("#header").MNDialog({ sId : "#footer", //覆盖默认值 fCloseCallback : dialog,//回调函数 oContentHtml : function(_aoCallback){ _aoCallback(_oEditGrpDlgView.el); } } }); // 调用提供的函数 MNDialog.close; function dialog(){ }
点评
1. 自调用匿名函数
(function($, window) { // jquery code })(jQuery, window);
用处:通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。
2. 匿名函数为什么要传入window
通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery.min.js:
(function(a,b){})(jQuery, window); // jQuery被优化为a, window 被优化为 b
3. 全局变量this定义
var _oSelf = this, $this = $(this);
使得在插件的函数内可以使用指向插件的this
4. 插件配置
this.oConfig = $.extend(defaults, _aoConfig);
设置默认参数,同时也可以再插件定义时传入参数覆盖默认值
5. 初始化函数
一般的插件会有init初始化函数并在插件的尾部初始化
6. 私有函数、公有函数
私有函数:插件内使用,函数名使用”_”作为前缀标识
共有函数:可在插件外使用,函数名使用”this.”作为前缀标识,作为插件的一个方法供外部使用
7. return this
最后返回jQuery对象,便于jQuery的链式操作
写法二
主体结构
(function($){ $.fn.addrInput = function(_aoOptions){ var _oSelf = this; _oSelf.sVersion = 'version-1.0.0'; _oSelf.oConfig = { nInputLimitNum : 9 }; // 插件配置 $.extend(_oSelf.oConfig, _aoOptions); // 调用这个对象的方法,传递this $.fn.addrInput._initUI.call(_oSelf, event); $.fn.addrInput._initEvents.call(_oSelf); // 提供外部函数 this.close = function () { _close(); } //返回jQuery对象,便于Jquery的链式操作 return _oSelf; } $.fn.addrInput._initUI = function(event){ var _oSelf = this, _oTarget = $(event.currentTarget); } $.fn.addrInput._initEvents = function(){} })(window.jQuery);
点评
1. 美观
插件的方法写在外部,并通过在插件主体传递this的方式调用
2. 定义插件版本号
不过在这里还是没有用到
3. 关于call
这里的第一个参数为传递this,后面的均为参数
语法:
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
4. 关于”this”
在插件的方法中,可能有用到指向插件的this、和指向事件触发的this,所以事件触发的this用event来获取:event.cuerrntTarget
event.currentTarget:指向事件所绑定的元素,按照事件冒泡的方式,向上找到元素
event.target:始终指向事件发生时的元素
如:
html代码
<div> <a href="#">click here!</a> </div>
js代码