设计模式：Web App 系统架构（二）

平凡定义

具体的App通常有一个这样的开始
app.js

var app = document.createElement('div');//创建App容器
document.body.appendChild(app); // 将容器挂载到DOM

这是最简单的App挂载，即其平凡态。这与简单的JS操纵DOM毫无区别，这也是和谐的地方。
首先，一个符合规范的App不应该依赖HTML DOM中的特定节点，除了最基本的body。
之后一切影响DOM的操作都应该封锁在这个app容器之中。
这样做的原因是为了降低耦合度。

拓展方法

以React为例，它会在JS的运行环境中维护一个组件树，然后渲染到HTML DOM上。

React并不真实地操作DOM节点，而是采用一种渲染的方式，这种Virtual DOM的做法是React高性能的原因之一。

// CommonJS 依赖
var React = require('react'); 
var ReactDOM = require('react-dom'); 
//Todo: Create A React Class <App />
var app = document.createElement('div');//创建App容器
document.body.appendChild(app); // 将app容器挂载到DOM
// 在app容器内渲染应用界面
ReactDOM.render(<App />, app);

打包的可能

使用webpack可以将有着相互依赖的资源打包成一个文件。

但CSS文件与JS文件就没有办法直接打包在一个文件里，那么如何能够最终只执行一个文件即可呢？

可以用JS生成一个link标签并附加在DOM里，这样就解决了必须要用CSS的情况。

可能是受了React的JSX语言的影响，我认为，CSS完全没有单独存在的必要。，我认为一切都可以用JS完成，没有任何不方便的地方。

JSX语言设计的精髓在此，糅合HTML、CSS、JS却没有别扭之感。

通讯

我们并不假设此前端与后端的通讯方式，使用Ajax也好，WebSocket也好，反正统统使用JS实现即可。