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/