jQuery插件制作的实例教程(2)

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代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpfwz.html