Question

我想为现有的jQuery插件创建一个Script＃wrapper。 jQuery插件实现了“使用DOM到对象桥模式的原型继承”，可以在this link上找到

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

Answer 1

脚本#github存储库中的代码中说明了为jQuery插件构建导入库。

特别是：

jQuery和jQuery UI导入库：https://github.com/nikhilk/scriptsharp/tree/cc/src/Libraries/jQuery ...您的模式看起来有点类似于jQuery UI小部件。
各种jQuery插件的示例，例如Lightbox和Isotope：https://github.com/nikhilk/scriptsharp/tree/cc/samples/Photos

希望这些可以作为入门指南......

Script＃Wrapper for Prototypal Inheritance jQuery Plugin

1 个答案: