手把手教你怎么写jQuery插件

[原创做品]手把手教你怎么写jQuery插件

　　此次随笔，向你们介绍如何编写jQuery插件。啰嗦一下，很但愿各位IT界的‘攻城狮’们能和你们一块儿分享，一块儿成长。点击左边我头像下边的“加入qq群”，一块儿分享，一块儿交流，固然，能够一块儿吹水。哈，不废话，进入正题。

　　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);

 

这样，看起来就精简多了。

调用：

　　在引入插件以后，直接调用就行。

1 <script>2  $("#user-info").userInfo();3 <script">

这样会在dom的id="user-info"里输出插件的默认值，即显示结果是：Steven Zhu  zhuttymore@126.com

要改变里面的值，只须要加入你想要的参数就行。以下：

<script>
 $('#user-info').userInfo({
 name: 'Sun Zhu',
 email: '734271284@qq.com',
 size: '16px',
 align: 'right'
 });<script">

这样就改变默认值了。输出结果就是：Sun Zhu 734271284@qq.com，文字右对齐。

原创做品，转载请注明出处：http://zhutty.cnblogs.com

在此特别感谢我在上海的朋友：Oliver。这货是很牛的程序员，初次写jquery插件时，多亏他的引导。