首页手记 jquery组件写法（外面看到的大家共享下）

jquery组件写法（外面看到的大家共享下）

标签：

JQuery

jQuery组件写法

知识点：
什么是插件
jQuery插件的模式
jQuery插件的Lightweight Start模式（入门级插件模式）

8.1 插件（Plug-in）
“插件”这个关键字，估计大家在日常生活中经常有所耳闻。例如：各网页浏览器，允许用户安装一些插件，增强用户体验，常见的Adobe Flash播放器，银行安全交易插件等。对于不做编程的朋友来说，是一个无所谓的词，但是对于咱们IT技术行业的朋友来说，是必须要了解，知道的。
咱们不是学者，不做特别规范的学术性研究，只要能够理解、够用就可以了。
因为咱们只是编程行业，所以将插件首先约束在编程领域试着理解。“插件”，是一段程序，它是与主应用程序交互，并扩展、替代主应用程序特定模块（功能）。
在js及js的一些框架Jqurey、ExtJs、Prototype···也比较流行以开发插件的形式，增强其程序的健壮性、伸缩性、安全性。其中JQuery的流行程度、市场占有率是最高的，当然也是咱们本次学习的主题。
以下两个网址是官方资料，感兴趣的朋友可以去了解一下。
jQuery官网：http://jquery.com/
jQuery官网插件，有许多比较稳定、实用的插件，如果您感兴趣，也可以向官方贡献你的代码：http://plugins.jquery.com/

    下面一段代码展示了jQuery插件Django Superformset 的写法：
    /*

django-superformset
https://github.com/jgerigmeyer/jquery-django-superformset
Based on jQuery Formset 1.1r14
by Stanislaus Madueke
Original Portions Copyright (c) 2009 Stanislaus Madueke
Modifications Copyright (c) 2013 Jonny Gerig Meyer
Licensed under the BSDv3 license.
*/

(function ($) {

'use strict';

var methods = {
    init: function (opts) {
        var vars = {};             var opti = $.extend({}, $.fn.superformset.defaults, opts);
        var wrapper = vars.wrapper = $(this);
        var rows = vars.rows = wrapper.find(options.rowSel);             var c = rows.closest(options.containerSel);

//@余下的代码略···
}(jQuery));

    完整代码示例下载：http://plugins.jquery.com/django-superformset/
    另外，谢谢Jonny Gerig Meyer代码。
    如果您还帮助别人解决一些常见的问题，或者想按照自己的想法写一些有趣并可以重复使用的一些插件，那么请跟紧我的步伐，继续学习

8.2 模式
学习任何知识首先需要了解一下基础和一些规则，才能够在其上面构建自己需要的东西。学习jQuery插件也不例外，在很多社区都有一些最佳实践，我们先看看一些最基本的jQuery插件知识。
第一种写法如下，
代码1：
$.fn.myPluginName = function(){
//@您的插件业务逻辑
}
代码2：
(function ($) {
$.fn.myPluginName = function(){
//@您的插件业务逻辑
}
})(jQuery);
代码1与代码2有什么不同，相信对于大家已经明朗化了。第一，将带有 $.fn.myPluginName的代码放入闭包中，可以与外部环境隔离，防止产生冲突，还可以将闭包看做一个模块，以结构化代码的作用；第二，将jQuery以参数的形式传递进去，映射到$符上，可以防止在其它JavaScript库之间产生冲突。
第二种写法如下，
我们可以利用jQuery的jQuery.extend(),能够一次定义多个函数，这种写法的主要意义就是在语义表达上更好。
代码3：
(function ($) {
$.extend($.fn, {
myPlugin : function () {
//@您的插件业务逻辑
}
});
})(jQuery)
8.3 Lightweight Start模式
通过上边的介绍，大家已经具备jQuery插件的基础知识了。下面通过一段简单的代码向大家展示一下Lightweight Start模式，具体解释请看代码注释。
代码4：
/*

jQuery Lightweight 插件
新浪微博：@席新亮_javascript_html5
QQ：939898101

Email：939898101@qq.com
*/

/*
 *1,在代码开始之前，加一个分号，可以防止没有正常关闭的插件
 *2,undefined是ECMAScript3中定义的，可以修改，但在ECMAScript5中undefined不能修改。

undefined没有真正传递进来以保证是真正的undefined
3，把window与document传递进来作为局部变量，可以减少作用域的访问，加快速度，以及降低引用同一个插件的影响
/
; (function ($, window, document, undefined) {
//私有默认变量
var myPluginName = "defaultName",
defaults = {
otherName : "value"
};
//私有构造插件的函数
var ctorPlugin = function (element, options) {
this.element = element;

             //利用jQuery 的extend 方法合并对象                     this.opti defaults, options);

            this._default = defaults;
            this.name = myPluginName ;
            this.init();
        };
    //原型链上添加方法

    ctorPlugin .prototype.init = function () {

        //执行一些初始化的逻辑，然后就可以访问DOM，进行一些业务处理  

    };

    //将插件包装起来，利用模块模式，防止多次实例出现

    $.fn[myPluginName ] = function (options) {

        return this.each(function () {

            var myPluginNameStr =  "plugin_"   myPluginName ;

            if (!$.data(this, myPluginNameStr )) {

                $.data(this, myPluginNameStr   , new ctorPlugin (this, options));

            }

        });

    };

})(jQuery, window, document);

用法如下：  elementStr为获取节点的指定字符
$(elementStr). defaultName({
    otherName : "your value"
});
通过以上代码可以看出：

必须有分号
将window、document、undefined作为参数传入
一些基本的（私有）默认对象
简单的插件构造函数，执行一些初始化
扩展默认值的一些选项
一个包装器避免多次创建
8.4 扩展视野
jQuery 插件官方学习：http://learn.jquery.com/plugins/

点击查看更多内容