Question

我一直在尝试用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);
});

因此，根据它找到的数据行为属性，这将为我创建一个行为对象。

如果您有任何疑问或需要更多信息，请询问。谢谢！

Answer 1

您想要编写一个函数而不是一个对象，当您创建对象时，就像调用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

Answer 2

感谢您的评论。我考虑了插件的想法（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函数并运行它。

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

问题：对于我在每个内部的if语句，有什么看起来很奇怪吗？我想不出有任何陷阱，但我会喜欢任何批评。我的app.js和object.js保持不变。

javascript对象中的默认函数返回

2 个答案: