#JQurey 插件模型探讨 持续更行中#

在学习下面插件以前 应该理解这2个点：

基础知识1、

js中组合构造函数模式和原型模式创建对象是最常见的方法。

构造函数模式用于定义实例属性，原型模式用于定义方法和共享属性。优点如下

①每个实例都会有自己的一份实例属性的副本，又同时共享对方法的引用，最大限度地节省了内存。
②这种混合模式还支持向构造函数传递参数。

function Student(name,age,class){ this.name = name; this.age = age; this.class = class; this.friends = ["Tom","Lily"];}Student.prototype = { constructor:Student, sayName : function(){  alert(this.name); }}var s1 = new Student("xy1",23,"classA");s1.friends.push("Jerry");var s2 = new Student("xy2",23,"classB");alert(s1.friends);结果"Tom,Lily,Jerry";alert(s2.friends);结果"Tom,Lily"alert(s1.friends == s2.friends);结果falsealert(s1.sayName == s2.sayName);结果false

 

这种方式创建对象，是目前使用最广泛，认同度最高的一种方式。甚至可以书是一种默认的模式。

基础知识2、

构造函数的继承方式主要有2种

（1）构造函数绑定（简单）

  如有一个动物对象的类

　function Animal(){　　　　this.species = "动物";　　}

还有一个猫对象的类

function Cat(name,color){　　　　this.name = name;　　　　this.color = color;　　}

如何建立者2个类的继承关系呢？

构造函数绑定的意思是：通过apply或call方法间接调用要继承的父类（函数），即将父类的构造函数绑定在子类对象上!

　function Cat(name,color){　　　　Animal.apply(this, arguments);　　　　this.name = name;　　　　this.color = color;　　}　　var cat1 = new Cat("大毛","黄色");　　alert(cat1.species); // 动物

（2）prototype模式  （常见）

因为构造函数也有原型，而通过修改原型的方式也可以继承父类animal

这里，因为猫的所有实例都继承猫的原型，cat.prototype,所以可以将cat.prototype指向animal的实例，那么猫所有的实例就能继承父类animal类了。

　  Cat.prototype = new Animal();　　Cat.prototype.constructor = Cat;　　var cat1 = new Cat("大毛","黄色");　　alert(cat1.species); // 动物

Cat.prototype.constructor = Cat;

原来，任何一个prototype对象都有一个constructor属性，指向它的构造函数。如果没有"Cat.prototype = new Animal();"这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal。

因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat

        ---------------------------------------------  jq插件模式开始     ---------------------------------------------                                                         

一、jQuery Boilerplate不是jquery插件开发的银弹，他并没有提供各种模式的完美解决方案，当然这也不是他所追求的目标，他的目的只是提供一个最基础的模板，对于初学者而言，你只需要在这个模板的基础上做相应的修改即可。来看一下jQuery Boilerplate提供的一个基础模板（是不是觉得很熟悉呢？没错，bootstrap就是这个模式）：

  // 这个分号的作用是防止和其他jquery插件合并时，别人不规范的jquery插件忘记使用分号结束    //影响到我们当前的插件，导致无法运行的问题。     ;(function ( $, window, document, undefined ) {            // undefined作为形参的目的是因为在es3中undefined是可以被修改的            //比如我们可以声明var undefined = 123,这样就影响到了undefined值的判断，幸运的是在es5中,undefined不能被修改了。            // window和document本身是全局变量，在这个地方作为形参的目的是因为js执行是从里到外查找变量的（作用域），把它们作为局部变量传进来，就避免了去外层查找，提高了效率。            // 声明默认属性对象            var pluginName = "defaultPluginName",                    defaults = {                    propertyName: "value"            };            // 构造函数            function Plugin ( element, options ) {                    this.element = element;                    // 将默认属性对象和传递的参数对象合并到第一个空对象中                    this.settings = $.extend( {}, defaults, options );                    this._defaults = defaults;                    this._name = pluginName;                    this.init();            }            // 为了避免和原型对象Plugin.prototype的冲突，这地方采用继承原型对象的方法            $.extend(Plugin.prototype, {                    init: function () {                                // 初始化，由于继承自Plugin原型，                                // 你可以在这里直接使用this.element或者this.settings                            console.log("xD");                    },                    yourOtherFunction: function () {                            // some logic                    }            });            // 对构造函数的一个轻量级封装，            // 防止产生多个实例            $.fn[ pluginName ] = function ( options ) {                    this.each(function() {                            if ( !$.data( this, "plugin_" + pluginName ) ) {                                    $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );                            }                    });                    // 方便链式调用                    return this;            };    })( jQuery, window, document );

git英文源码  git英文源码 git英文源码：

jquery-patterns/patterns/jquery.basic.plugin-boilerplate.js

/*! * jQuery lightweight plugin boilerplate * Original author: @ajpiano * Further changes, comments: @addyosmani * Licensed under the MIT license */// the semi-colon before the function invocation is a safety// net against concatenated scripts and/or other plugins// that are not closed properly.;(function ( $, window, document, undefined ) {    // undefined is used here as the undefined global    // variable in ECMAScript 3 and is mutable (i.e. it can    // be changed by someone else). undefined isn't really    // being passed in so we can ensure that its value is    // truly undefined. In ES5, undefined can no longer be    // modified.    // window and document are passed through as local    // variables rather than as globals, because this (slightly)    // quickens the resolution process and can be more    // efficiently minified (especially when both are    // regularly referenced in your plugin).    // Create the defaults once    var pluginName = "defaultPluginName",        defaults = {            propertyName: "value"        };    // The actual plugin constructor    function Plugin( element, options ) {        this.element = element;        // jQuery has an extend method that merges the        // contents of two or more objects, storing the        // result in the first object. The first object        // is generally empty because we don't want to alter        // the default options for future instances of the plugin        this.options = $.extend( {}, defaults, options) ;        this._defaults = defaults;        this._name = pluginName;        this.init();    }    Plugin.prototype = {        init: function() {            // Place initialization logic here            // You already have access to the DOM element and            // the options via the instance, e.g. this.element            // and this.options            // you can add more functions like the one below and            // call them like so: this.yourOtherFunction(this.element, this.options).        },        yourOtherFunction: function(el, options) {            // some logic        }    };    // A really lightweight plugin wrapper around the constructor,    // preventing against multiple instantiations    $.fn[pluginName] = function ( options ) {        return this.each(function () {            if (!$.data(this, "plugin_" + pluginName)) {                $.data(this, "plugin_" + pluginName,                new Plugin( this, options ));            }        });    };})( jQuery, window, document );