JavaScript不同的编程风格

我正在尝试学习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）创建匿名函数对象Tree作为自执行匿名函数：

这是从melonJS画布渲染器中获取的。为什么他们需要将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();
})();

至于问题#2，这样做有几个原因。现在可能有比我列出的更多的，但这些都是我脑海中浮现的，基本上可以归结为"这很好"、"函数范围，该死的"one_answers"树本身是未定义的"；

因此，首先，自初始化功能允许您编写

Tree.doStuff()

代替

Tree().doStuff()

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

关于问题的第二部分：1） dot语法的意思是"我想访问那个对象的这个属性"，为了做到这一点，必须从函数中返回一个对象。

2）如果我们声明像这样的方法

Tree = (function () {
 var api = {},
     nodeList = [];
 doStuff2 = function () {
     console.log("hej2");
 };
...

doStuff2封装在一个函数中，JavaScript有函数范围，所以它基本上是一个私有方法。不行。

3）如果我们试着把这些方法放在Tree上，比如：

Tree = (function () {
 var api = {},
     nodeList = [];
 Tree.doStuff2 = function () {
     console.log("hej2");
 };
...

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

有几种方法可以利用这种模式，有优点也有缺点。

请尽我所能，告诉我是否应该澄清、补充或更正。

相关内容

最新更新

热门标签：