2016-10-24 2 views
0

私はこのリソースを見つけましたjQuery Prototypal Inheritance Boiler Plate私はカスタムプラグインの基礎として使いたいと思っています。私は自分のアプリケーション用にビルドしていますが、このオブジェクト自体のメソッドにアクセスする方法を理解するのは難しいです。 (私はコメントを残したコードスニペットを参照してください/ *これはうまくいかない* /)プロトタイプ継承パターンのメソッドにアクセスするには?

私は同じオブジェクト内のメソッドを呼び出すことはできますが、成功しませんそうすることで。私はこれがどう機能するかについていくつかの誤解があると信じていますので、あなたの助言を得ることを願っています。ありがとう!機能(MSG);:

/*! 
 
* jQuery prototypal inheritance plugin boilerplate 
 
* Author: Alex Sexton, Scott Gonzalez 
 
* Further changes: @addyosmani 
 
* Licensed under the MIT license 
 
*/ 
 

 
// 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 
 
    console.log("myMethod triggered"); 
 
    // this.$elem.append('<p>'+msg+'</p>'); 
 
    } 
 
    myQuestion: function (msg) { 
 
    /* ========================= */ 
 
    /* This doesn't seem to work */ 
 
    /* ========================= */ 
 
    this.myMethod(msg); 
 
    } 
 
}; 
 

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

答えて

0

あなたは、あなたのMyMethodは後に不足しています

このようにします。唯一の構文エラーではなく、実行時エラーが発生します欠落している場合を除き

/*! 
 
* jQuery prototypal inheritance plugin boilerplate 
 
* Author: Alex Sexton, Scott Gonzalez 
 
* Further changes: @addyosmani 
 
* Licensed under the MIT license 
 
*/ 
 

 
// 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 
 
    console.log("myMethod triggered"); 
 
    // this.$elem.append('<p>'+msg+'</p>'); 
 
    },          //<---- missing , 
 
    myQuestion: function (msg) { 
 
    /* ========================= */ 
 
    /* This doesn't seem to work */ 
 
    /* ========================= */ 
 
    this.myMethod(msg); 
 
    } 
 
}; 
 

 
myObject.myQuestion()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

「」。それは完全に動作します。その下にあるオブジェクトのちょうど単純な形がうまくいきます。

var myObject = { 
    myMethod: function(msg){ 
    console.log("myMethod triggered " + msg); 

    }, 
    myQuestion: function (msg) { 
    this.myMethod(msg); 
    } 
}; 

myObject.myQuestion("from myQuestion"); 
関連する問題