0

私はjavascriptで何かを達成しようとしてきましたが、失敗しました。次のオブジェクトを見てください

app.Behaviors.pageColor = {
color: 'red',
height: '200px',
width: "200px",
init: function(){

    $("div").css({
        background: this.color,
        height: this.height,
        width: this.width
    });


}
};

これは単なるダミー オブジェクトですが、実行できないことが 2 つあります。まず、 $("div").css(); の代わりに js が呼び出されるコンテナーである変数が必要です。次に、init 関数を呼び出さずに実行したいので、data-behavior 属性が一致し、js が動作に追加されると、init 関数が実行されます。私の行動の話を説明すると、これが私のすべての JS をまとめる方法です。

// Create the object
var app = window.app || {};

// Create the Behaviors object to store methods
app.Behaviors = {}

// Creates methods of the Behaviors object
app.LoadBehavior = function(context){
if(context === undefined){
    context = $(document);
}
context.find("*[data-behavior]").each(function(){
    var me = $(this);
    var behaviors = me.attr('data-behavior');

    $.each(behaviors.split(" "), function(index,behaviorName){
        try{
            var BehaviorClass = app.Behaviors[behaviorName];
            var initalizedBehavior = new BehaviorClass(me);
        }
        catch(e){
            // No Operation
        }
    }); // each
}); // find 
}; // LoadBehavior function

// Call the ready function
$(document).ready(function(){
app.LoadBehavior();

/*** Call this init when the behavior is found, not by declaring it here. ***/
app.Behaviors.pageColor.init();

//Debugging
console.log(app);
});

これにより、検出された data-behavoirs 属性に基づいて、アクセスするための Behaviors オブジェクトが作成されます。

ご不明な点や詳しい情報が必要な場合はお尋ねください。ありがとう！

4

2 に答える 2

0

コメントありがとうございます。私はプラグインのアイデア (elclanrs) を検討し、それらの mozilla ドキュメント (andrew) を読みました。ありがとう!

私が思いついたものをお見せします。だから私が変更したのは、application.jsで準備ができているドキュメントだけです

// Call the ready function
$(document).ready(function(){

// Run the above function
app.LoadBehavior();

// Look for an init function in objects.
$.each(app.Behaviors, function(key, value){

    //If
      // The Behavoir is an object
      // The data-behavior matching the object is found in the dom
      // The object has an init function
    if($.type(value) === 'object' && $("*[data-behavior="+key+"]").length && jQuery.isFunction(value.init) ){
        return value.init(key);
    }

}); //each

});

アンドリューが言ったようにそれを行うことができ、とにかく呼び出されたときに実行される関数を使用できるため、これは動作オブジェクト内のすべてのオブジェクトを検索します。次に、init 関数を探して実行します。

このようにして、リテラル表記オブジェクトを使用できます (個人的に気に入っています/ここでの目標でした)。

質問: each 内の if ステートメントについて何かおかしなことはありますか? これには落とし穴は考えられませんが、批評をお待ちしています。私の app.js と object.js は同じままです。

于 2013-08-06T19:33:19.513 に答える
0

オブジェクトではなく、を呼び出すときと同じように、オブジェクトを作成するときに呼び出される関数var initalizedBehavior = new BehaviorClass(me);を記述します。これはオブジェクト指向プログラミングの Javascript バージョンです。次のようになります。

app.Behaviors.pageColor = function(selector) {
  // These were your properties:
  this.color = 'red',
  this.height = '200px';
  this.width = "200px";

  // This was the `init` property:
  $(selector).css({
    background: this.color,
    height: this.height,
    width: this.width
  });
}

パターンの詳細については、https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript を参照してください。

于 2013-08-03T01:33:19.690 に答える