Question

我正在尝试学习新的JavaScript编程风格及其能力。我发现我认为有三种不同的发展方式，老实说不明白何时以及为何使用它们。我正在寻找一些关于此的指导，除非它纯粹是一种风格的东西。

我为每种风格提出内联问题：

1）面向JavaScript面向对象的编程： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

创建Tree构造函数或调用new node()有什么好处而不是使用new？在其他示例中，我只能返回节点，或者仅仅是node函数产生的结果，这非常好。
为什么我会像Tree.prototype.doStuff = function() {那样追溯性地添加一个类成员，就像一个函数一样？为什么我不能从一开始就包含这个功能？

-

(function () {

    var Tree = function () {
         this.nodeList = [];
         this.nodeList.push(new node("A", 100, 100), etc...);
         etc...
    };

    var node = function (name, x, y) {
         this.el = document.createElement("span");
         this.el.innerHTML = name;
         etc...
         return this;
    };

    var tree1 = new Tree();

    Tree.prototype.doStuff = function() {
          ...
    }

    var myFunc = tree1.doStuff;

    myFunc.call(tree);

})();

2）创建匿名函数对象树作为自执行匿名函数：

这取自melonJS canvas renderer。为什么他们需要将Tree创建为自调用函数，并将方法存储为api对象的属性？我不明白这种风格的意义。

-

(function () {

  Tree = (function () {
     var api = {},
         nodeList = [];

     api.init = function () {
          nodeList = [];
          nodeList.push(node("A", 100, 100), etc...);
     };

     api.node = function (name, x, y) {
        var el = document.createElement("span");
        el.innerHTML = name;
        etc...
        return el;
     };

     api.doStuff = function () {
         ...
     };

     return api;
  })();
})();

3）使用函数创建对象命名空间：

这是我习惯的方式。这对其他款式有什么好处？

-

(function () {

    var Tree = Tree || {};

    var Tree = {
        nodeList : [],
        init : function () {
             this.nodeList = [];
             this.nodeList.push(node("A", 100, 100), etc...);
             this.doStuff();
        },
        node : function (name, x, y) {
            var el = document.createElement("span");
            el.innerHTML = name;
            etc...
            return el;
        },
        doStuff : function () {
            ...
        }
    };
    Tree.init();
})();

Answer 1

对于问题＃2，有一些原因可以这样做。现在可能比我列出的还要多，但是这些是我想到的，并且基本归结为＆＃34;它很好＆＃34;，＆＃34;功能范围，frick yeah＆＃34;和＃34;树本身未定义＆＃34 ;;

所以，首先，自我初始化功能可以让你写

Tree.doStuff()

而不是

Tree().doStuff()

哪个看起来不错。此外，使用自初始化语法，Tree()仅在初始加载时调用，而Tree().doStuff()每次都调用Tree()。优点，缺点取决于用例。

对于问题的第二部分： 1）点语法意味着＆＃34;我想在该对象上访问该属性＆＃34;，为了做到这一点，必须从该函数返回一个对象。

2）如果我们声明像

这样的方法

Tree = (function () {
 var api = {},
     nodeList = [];

 doStuff2 = function () {
     console.log("hej2");
 };
...

doStuff2封装在一个函数中，JavaScript具有函数范围，因此它基本上是一个私有方法。 NO-GO。

3）如果我们尝试将方法放在Tree上，就像这样：

Tree = (function () {
 var api = {},
     nodeList = [];

 Tree.doStuff2 = function () {
     console.log("hej2");
 };
...

然后Tree中未定义Tree。如果你还没有，我建议你找一个关于模块模式的好指南，也许是这个：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

有两种方法可以强调这种模式，有优点和缺点。

尽我所能回答，请告诉我是否应该澄清，添加或更正。

JavaScript不同的编程风格

1 个答案: