JavaScript浏览器端框架/解决方案架构的组件是什么？

Question

JavaScript浏览器端Web应用程序体系结构的组件是什么？我知道以下几项，并期望获得最完整的列表。

1. 在所有浏览器中表现相同的标准化DOM API。
2. Ajax Wrapper提供更好的API来访问XHR对象。
3. 使写入小部件更容易的模板引擎。
4. 模块加载系统。 ...等等？

什么是构建复杂网络应用的客户端JavaScript体系结构的基本组件？

Answer 1

您提供的列表相当不错。这里有一些额外的考虑因素

1）一个好的框架具有良好的文件结构和命名空间的做法。我是特别喜欢组织库的可能有以下文件/路径的一种方式：

a. projectRoot/js/lib/ams/xml/Document.js 
b. projectRoot/js/lib/ams/util/util.js 
c. projectRoot/js/lib/ams/util/base64.js 
d. projectRoot/js/lib/ams/util/HashMap.js 

这将定义以下类和命名空间

a. ams.xml.Document: Class definition 
b. ams.util: Namespace definition. Use this file to put functions on a NS, such as ams.util.toArray(). Technically, this could/should go right in the 'ams' folder, but since there are other things on the 'util' namespace, a folder is created. For an example of a namespace definition without 
c. ams.util.base64: Namespace definition. Use this file to put functions on a NS, such as ams.util.base64.encode(). Since there are no namespaces below base64, no folder is necessary. 
d. ams.util.HashMap: Class definition on the util namespace 

2）规范定义的方式类来协助继承。我个人更喜欢用原型继承的伪经典号模型，使用继承的辅助功能，如：

ns.inherits = function(childCtor, parentCtor) { 
    function tempCtor() {}; 
    tempCtor.prototype = parentCtor.prototype; 
    childCtor.superclass = parentCtor.prototype; 
    childCtor.prototype = new tempCtor(); 
    childCtor.prototype.constructor = childCtor; 
}; 

这将被用作这样的：

ns.BaseClass = function(arg){ 
    this._privateProp = arg; 
}; 
ns.BaseClass.prototype._privateProp = null; 

ns.Class = function(arg1, arg2){ 
    ns.Class.superclass.constructor.call(this, arg1); 
    this.publicProp = arg2; 
}; 
ns.inherits(ns.Class, ns.BaseClass) 
ns.Class.prototype.publicProp = null; 

3）肯定得到一个好的模块加载系统就位。你不需要维护一个JavaScript文件及其依赖关系的平面列表。一个很好用的是谷歌的“封闭库”。这可能需要一点点才能建立，但这是非常值得的。查看“plovr”使开发更容易一些。封闭的美妙之处在于有一个编译器，它可以让你创建一个解决了依赖关系的静态js文件，并将这些文件连接并缩小。语法也不错，例如从2继续）以上：

在./ns/Class.js

goog.provide('ns.Class'); 
goog.require('ns.BaseClass'); 

ns.Class = function(arg1, arg2){ 
... 

封闭框架也将确保“NS”之前存在你尝试在其上定义'Class'（因为它知道你将提供ns.Class），从而防止出现null对象错误。

4）如果您打算在客户端上添加大量逻辑，您应该考虑创建某种形式的模型类来协助您的视图与后端服务器状态的同步。很多人称这为MVC，但这有点不恰当，因为它通常是指基于PHP和静态页面生成的系统。对于更复杂的基于JavaScript的Web应用程序，MVVM结构更合适。

5）根据你想要多少创建HTML框架来负责，如果你打算像集装箱创造的东西，面板，按钮等，你可能想建立自己的事件系统，跳过DOM。想象一下你有一个基本的Panel类，它提供了一个简单的DIV附加功能。然后你调用Panel :: add，并给它一个Button的实例（它通过点击处理程序管理一个DUT 或 DIV - 同样的事情）。您可能想要从面板派发'添加'事件，但如果您想要这样做，则不需要DOM。无论如何，只有您的框架的其他实例会知道如何处理“添加”。实际上，你可能只需要捕获DOM事件（也许可以创建一个domEvent util ...），然后在你的框架内调度事件。你为什么要这样做？速度和控制。 Dom事件体积大，价格昂贵，并且从一个浏览器到另一个浏览器的行为不同。此外，它很高兴能够表达是不依赖于DOM

6）想想你的架构（这大概会在几个项目共享之间的差值的方式对事件），并使用它的一个项目。他们可能应该有不同的命名空间和文件结构。按照上面的namespaceing约定将离开你喜欢的东西

projectRoot/js/src/app/MainPanel.js 
projectRoot/js/src/app/ViewPort.js 
projectRoot/js/src/app/... 

希望这一切都有助于。祝你好运！