javascript对象中的默认函数返回

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/zh-CN/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保持不变。