标签：window 原则 ref 还原 sel 插入 demo ons mod
jQuey是一个非常好用的javascript类库，提供了非常多的接口给程序员使用。但在某些具体方面，并没有完全提供解决方法，这就要求我们自己实现。jQuery官方也提供jQuery拓展的标准。编写jQuery插件时，应该注意一下几点原则：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
这三个原则非常重要，否则，这个插件将会失去插件的意义。
jquery插件命名，一般在前面加上jquery，这样别人就知道这是jQuery插件。如：jquery.modelselect.min.js
加了min表示压缩版，压缩版一般处理方式是去掉空格换行，也有些公司为了保护代码，直接重构变量和私有函数名，不过这样做在一般程序员是有效的，但在高手面前，并没什么卵用，有人一样能把它还原。
OK, jQuery插件的标准代码格式如下，（需要使用闭包，对于javascript闭包，我们后面再谈）：
1 (function ($) { 2 //插件内部代码 3 })(jQuery);
以上代码的第三行，可以是window.jQuery或者$,按照官方的解释，这三者是等价的。
在这写一个小demo, 就是插入一个个人信息。
1 (function ($) { 2 $.fn.userInfo = function (options) { //定义插件方法名 3 var dft = { 4 //定义一个对象，设置默认值 5 name: ‘Steven Zhu‘, //名 6 email: ‘zhuttymore@126.com‘, //链接 7 size: ‘14px‘, //文字大小 8 align: ‘center ‘//文字位置，left || center || right 9 }; 10 var opt = $.extend(dft, options);//这个很关键，待会跟你说。 11 var style = ‘style="font-size:‘ + opt.size + ‘;text-align:‘ + opt.align + ‘;"‘; //调用默认的样式 12 var name = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank" >‘ + opt.name + ‘</a></p>‘; 13 var email = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank">‘ + opt.email + ‘</a></p>‘; 14 $(this).append(name); 15 $(this).append(name); 16 } 17 })(window.jQuery);
好了，说说$.extend(), 这个方法，他的作用就是扩展，以上这段代码就是将options拓展到dft,最后赋给opt.这样写为了可读性。
所以这段代码还可以这样。
options = $.extend({//here is default values},options);
这样，看起来就精简多了。
我们再写插件时，把当前对象return回去，这样返回的又是jQuery对象，这样可以链式操作。结合上面一段，代码修改如下：
1 (function ($) { 2 $.fn.userInfo = function (options) { //定义插件方法名 3 options = $.extend({ 4 //定义一个对象，设置默认值 5 name: ‘Steven Zhu‘, //名 6 email: ‘zhuttymore@126.com‘, //链接 7 size: ‘14px‘, //文字大小 8 align: ‘center ‘//文字位置，left || center || right 9 },options);
10 var style = ‘style="font-size:‘ + opt.size + ‘;text-align:‘ + opt.align + ‘;"‘; //调用默认的样式 11 var name = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank" >‘ + opt.name + ‘</a></p>‘; 12 var email = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank">‘ + opt.email + ‘</a></p>‘; 13 this.append(name); 14 this.append(name); 15 16 return this; 17 } 18 })(window.jQuery);
调用：
在引入插件之后，直接调用就行。
1 <script> 2 $("#user-info").userInfo(); 3 <script">
这样会在dom的id="user-info"里输出插件的默认值，即显示结果是：Steven Zhu zhuttymore@126.com
要改变里面的值，只需要加入你想要的参数就行。如下：
1 <script> 2 $(‘#user-info‘).userInfo({ 3 name: ‘Sun Zhu‘, 4 email: ‘734271284@qq.com‘, 5 size: ‘16px‘, 6 align: ‘right‘ 7 }); 8 <script">
这样就改变默认值了。输出结果就是：Sun Zhu 734271284@qq.com，文字右对齐。
上面的这样写会有一个弊端，就是不是很好拓展。因为一个插件，往往会有多个方法。一下是改进的结构。
1 /** 2 * Created by Steven on 2015/07/10/0010. 3 * @email zhuttymore@126.com 4 */ 5 6 (function ($) { 7 8 $.fn.extend({ 9 slider:function (opt) { 10 opt = $.extend({ 11 12 }, opt); 13 //do something here 14 15 16 17 return $.each(this,function(index,ele){}); 18 } 19 }); 20 21 })(jQuery);
转载出处：http://zhutty.cnblogs.com
标签：window 原则 ref 还原 sel 插入 demo ons mod
原文地址：http://www.cnblogs.com/maomao93/p/6767425.html
