标签：

前言

今天突然想吃红烧肉了，然后问大厨朋友怎么做，大厨哥们见你学艺诚意蛮高，于是扔过来两本书：

还能好好做朋友吗？你心里万马奔腾，但还没等吐槽出来，大厨哥们就很专业的分析：肉质是口感的关键，酱油是色味的保证，你基础不牢怎么能做出好的红烧肉呢？

站在前人的肩膀上

一套Web代码，多平台应用

前端好热闹

因为设备的进化太快、多平台也需要web开发的需求旺盛，所以现在前端变得前所未有的热闹。各大互联网巨头都推出了自己的前端框架，但框架虽多，核心思想都只有一个：组件化开发。
何为组件化开发呢？搭过积木吗？组件化就是讲一个个页面功能体做成一个个的积木块，开发的时候再将各个部分拼接出一个页面，如下每个框就是一个组件：

一个网站由多个页面组成，一个页面由多个组件组成，然后大组件又可以由小组件组成，将小组件拼成大组件，将大组件拼成大组件，再拼成页面模块，这就是组件化开发。

So Easy？Too Naive！

这里看到的组件化只是UI表现层的组件化，完整的组件化还包括交互事件、展现样式、数据交互，也就是说组件拥有自己的属性、方法以及数据交互能力。比如常见的搜索提示列表，用户输入信息传到服务器上，服务器根据用户输入词查找后将数据返回前端，再由前端展示，效果如下：

常用的UI库如Bootstrap实现了样式和动画的封装，但是数据交互方面还要自己处理。自己写也是可以的，服务器将数据返回来，然后前端用字符拼接或者DOM模板技术合成HTML放入网页中，这一步俗称渲染。当然渲染可以在前端做，也可以在服务器端完成。简单的字符串拼接大概是这样的：
<input type="text" id="" value="红烧肉" />
<input type="button" id="" value="搜索" />
<ul id="test-ul"> </ul>
<script type="text/javascript">
var temp = ‘‘,
list = [‘红烧肉 罐头‘, ‘红烧肉 调料‘, ‘红烧肉 猪肉‘, ‘红烧肉 包邮‘], 
listNode = document.getElementById(‘test-ul‘);
for (let n = 0, len = list.length; n < len; n++) {
temp +=‘<li>‘ + list[n] + ‘</li>‘;
}
listNode.innerHTML = temp;
</script>
上面只是示例，实际工程中用的更多的是模板技术，现在模板技术多如牛毛，比如模板的Dust.js、doT.js，MVVM框架级的Angularjs、Knockoutjs等，王婆们都说自己瓜最甜了，选择困难症患者们你们准备好了吗？

从上面来看，为了实现组件化开发，我们至少要使用几个框架来组织代码，如果业务负责弹性较大的话，这样一套底层架构可不是随随便便简简单单就能做出来的。而如果自己制作UI的话，那工作量起码还得翻几倍，在人员不增的情况下，也就意味着开发周期翻几倍。想一想现在的互联网发展速度吧，等你花几周时间做出一套还算精致的UI，你那原本价值几百亿美刀的idea可能已经被10cent、100du这些公司做了，泪流满面之际你终于想起了火云邪神说的：

天下武功，唯快不破。

选择一个好用的开发环境

WeX5中的可视化开发

WeX5的缺点

天哪，我只是想吃顿红烧肉啊

标签：

原文地址：http://blog.csdn.net/justeptech/article/details/51909528