防止过度的模块化/组件化
2016-01-22 10:21
281 查看
RequireJS,SeaJS,Backbone,React,AngularJS，这些框架都注重模块化/组件化，这的确是前端发展的趋势，但前端毕竟不同于后端，更区别于桌面，所以桌面的组件化开发方式不能照搬过来，而应“拿来主义”，有所取舍。
每一个页面都是HTML, CSS, JAVASCRIPT三者的结合，HTML负责结构， CSS负责样式，Javascript负责控制，它们本来就有着良好的分工，它们本来就是天然的MVC，虽然JS可以操控HTML和CSS，但也不应该所有都JS化。EXTJS就是走了这一步，才使得框架极为笨重。
一般性况下，浏览器渲染一个静态页面是很迅速的，JS做的不应太重，React最令人欣喜的是对DOM操作性能的提升，它的组件化并没有使JS与HTML、CSS解耦，所以不应过分滥用。试想，本来一个简单的HTML页面，有着良好的html, css , js分离，js也很简单，如果弄一个空的Html结构（
我觉得这么做真是舍近求远，多此一举，本来浏览器在加载结构时就会建DOM，渲染绘制，现在加载完发现只有一个空白面板，后续加载大量的JS，再通过修改DOM的方式加载上去，虽然有React这样的框架可以优化DOM操作，但是React也提倡DOM操作最小化呀！
React适合DOM操作频繁的应用，而不应把自己的应用给强制组件化去适应React，也就是说，不要为了框架而框架。框架只是辅助的工作和手段，是为了提升性能、扩展性、或减少不规范和差异性而存在的。
要防止过度的模块化/组件化！
上图中的页面主体除了头尾有三部分内容，先不讨论头尾,主体部分中的1、2都是静态内容，当然第二部分最好是可动态变动的（从后台取的），不过目前它们都是静态的HTML，而第3部分内容是根据AJAX加载的。这个页面非常简单，只用一个ajax然后在回调里操作DOM即可，对JS的优化可以把第3部分使用React实现，以优化DOM操作，但如果把第1.2都组件化了是不是也可以呢？
如果那样，在JS加载之前用户看到的几乎啥也没有，而组件化并没有带来性能提升，不过扩展性好了一些，以后数据变成从后台取时，全部城市这一块将更容易维护。但这一块的组件化应推迟到数据动态化后再操作更为合适。
结合后台技术，这个页面也可以使用后台模板技术（Node的EJS、Fade模板，或Java的Freemarker，或PHP的Smarty模板）把整个HTML静态化了，这样增加了很多页面，但把JS最小化了（几乎可以不使用JS了），此时访问的URL可能是这样的：
page.html?city=beijing&page=2
或REST风格的page/beijing/2
每点击翻页都做了一次跳转，对于这样的内容展示页面，做跳转并非不友好。内容展示型的页面不应有太多的组件化。
模板技术需要配合CMS系统进行动态生成，比如增加一个城市或增加一个图片时，即要把相关城市的静态页面全部生成一遍，生成新页面时不能对用户的访问造成中断，因此需要采取一些策略，比如做延迟、使用缓存等。
模块化/组件化从长远来说可以促进前端的工程化水平,为前端开发带来了很好的扩展性，但过度的模块化和组件化也会降低网站的性能，对SEO的影响也需要考虑，因此必须有所权衡。
每一个页面都是HTML, CSS, JAVASCRIPT三者的结合，HTML负责结构， CSS负责样式，Javascript负责控制，它们本来就有着良好的分工，它们本来就是天然的MVC，虽然JS可以操控HTML和CSS，但也不应该所有都JS化。EXTJS就是走了这一步，才使得框架极为笨重。
一般性况下，浏览器渲染一个静态页面是很迅速的，JS做的不应太重，React最令人欣喜的是对DOM操作性能的提升，它的组件化并没有使JS与HTML、CSS解耦，所以不应过分滥用。试想，本来一个简单的HTML页面，有着良好的html, css , js分离，js也很简单，如果弄一个空的Html结构（
<body></body>），上面东西都组件化加上去，可否？
我觉得这么做真是舍近求远，多此一举，本来浏览器在加载结构时就会建DOM，渲染绘制，现在加载完发现只有一个空白面板，后续加载大量的JS，再通过修改DOM的方式加载上去，虽然有React这样的框架可以优化DOM操作，但是React也提倡DOM操作最小化呀！
React适合DOM操作频繁的应用，而不应把自己的应用给强制组件化去适应React，也就是说，不要为了框架而框架。框架只是辅助的工作和手段，是为了提升性能、扩展性、或减少不规范和差异性而存在的。
要防止过度的模块化/组件化！
上图中的页面主体除了头尾有三部分内容，先不讨论头尾,主体部分中的1、2都是静态内容，当然第二部分最好是可动态变动的（从后台取的），不过目前它们都是静态的HTML，而第3部分内容是根据AJAX加载的。这个页面非常简单，只用一个ajax然后在回调里操作DOM即可，对JS的优化可以把第3部分使用React实现，以优化DOM操作，但如果把第1.2都组件化了是不是也可以呢？
如果那样，在JS加载之前用户看到的几乎啥也没有，而组件化并没有带来性能提升，不过扩展性好了一些，以后数据变成从后台取时，全部城市这一块将更容易维护。但这一块的组件化应推迟到数据动态化后再操作更为合适。
结合后台技术，这个页面也可以使用后台模板技术（Node的EJS、Fade模板，或Java的Freemarker，或PHP的Smarty模板）把整个HTML静态化了，这样增加了很多页面，但把JS最小化了（几乎可以不使用JS了），此时访问的URL可能是这样的：
page.html?city=beijing&page=2
或REST风格的page/beijing/2
每点击翻页都做了一次跳转，对于这样的内容展示页面，做跳转并非不友好。内容展示型的页面不应有太多的组件化。
模板技术需要配合CMS系统进行动态生成，比如增加一个城市或增加一个图片时，即要把相关城市的静态页面全部生成一遍，生成新页面时不能对用户的访问造成中断，因此需要采取一些策略，比如做延迟、使用缓存等。
模块化/组件化从长远来说可以促进前端的工程化水平,为前端开发带来了很好的扩展性，但过度的模块化和组件化也会降低网站的性能，对SEO的影响也需要考虑，因此必须有所权衡。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总