0

我一直在尝试用 javascript 实现某些目标，但没有成功。看看下面的对象

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

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


}
};

这只是一个虚拟对象，但有两件事我无法做到。首先，而不是 $("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);
});

因此，这会根据它找到的数据行为属性创建一个 Behaviors 对象供我访问。

请询问您是否有任何问题或需要更多信息。谢谢！

4

2 回答 2

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 回答
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

});

所以这个发现是行为对象中的任何对象，我正在测试，因为你可以像安德鲁所说的那样做，并使用一个无论如何调用时都会运行的函数。然后它寻找一个初始化函数并运行它。

这样，我可以使用文字符号对象（我个人喜欢/这是我的目标）。

问题：我在 each 中的 if 语句有什么奇怪的地方吗？我想不出这有什么陷阱，但我愿意接受任何批评。我的 app.js 和 object.js 保持不变。

于 2013-08-06T19:33:19.513 回答