2013-03-26 52 views
0

我想爲現有的jQuery插件創建一個腳本#封裝。該jQuery插件實現了「原型繼承與DOM到對象的橋模式」,可以在this link腳本#封裝原型繼承jQuery插件

// myObject - an object representing a concept that you want 
// to model (e.g. a car) 
var myObject = { 
    init: function(options, elem) { 
    // Mix in the passed-in options with the default options 
    this.options = $.extend({}, this.options, options); 

    // Save the element reference, both as a jQuery 
    // reference and a normal reference 
    this.elem = elem; 
    this.$elem = $(elem); 

    // Build the DOM's initial structure 
    this._build(); 

    // return this so that we can chain and use the bridge with less code. 
    return this; 
    }, 
    options: { 
    name: "No name" 
    }, 
    _build: function(){ 
    //this.$elem.html('<h1>'+this.options.name+'</h1>'); 
    }, 
    myMethod: function(msg){ 
    // You have direct access to the associated and cached 
    // jQuery element 
    // this.$elem.append('<p>'+msg+'</p>'); 
    } 
}; 


// Object.create support test, and fallback for browsers without it 
if (typeof Object.create !== 'function') { 
    Object.create = function (o) { 
     function F() {} 
     F.prototype = o; 
     return new F(); 
    }; 
} 


// Create a plugin based on a defined object 
$.plugin = function(name, object) { 
    $.fn[name] = function(options) { 
    return this.each(function() { 
     if (! $.data(this, name)) { 
     $.data(this, name, Object.create(object).init( 
     options, this)); 
     } 
    }); 
    }; 
}; 

// Usage: 
// With myObject, we could now essentially do this: 
// $.plugin('myobj', myObject); 
// and at this point we could do the following 
// $('#elem').myobj({name: "John"}); 
// var inst = $('#elem').data('myobj'); 
// inst.myMethod('I am a method'); 
+3

再次什麼是問題? – 2013-03-26 12:36:08

回答