关于组件化开发的思考

too young to simple！

大四上学期那会，在南昌科泰华软件有限公司的实习期间，有一个“自助拍照机”的项目，当时不知在哪一个博文看到了以为单页应用真的艹鸡棒，并且暑假也作过一段时间移动端的H5，想一想恰好有新项目来了，能够用这个‘自助拍照机’项目来练练手。当时我心里就这么愉快的决定了，但是公司另外一个前端因为对这个没有概念（我心里真特么是秀才遇到兵）。因而我跟他和另两个作java后台的讨论的下：

单页应用优势：页面无刷新，用户体验好。

单页应用缺点：另外一个前端没作过大型项目的单页应用，后台以为代码维护困难，特别是若是后期若是要加功能的话，更改难度大。

后来由于和前端闹了一些矛盾，和另外一个前端吵了一架（如今想一想也怪当时冲动，为了工做不必伤感情），后来经理调解了，经理以为公司这种项目没作过单页，并且正如晨晨（作java后台的）所说，后期维护困难，仍是按照之前的思路，不要作单页应用。

---------------------------分割线--------------------------------

2016年初顺利到深圳一家公司（第四次元科技有限公司）谋生了，公司CTO（江湖人称俊哥，有着一副21.2岁的外表，实际上是84年的+_+0）对前端实现手段放得开，因此咱们也能自由发挥，之前不敢或者公司不让用的剑法在这里都用于实现了，刚入职是2.16.2.2九、如今2016.4.23了，用了sass预处理，也小小的重构了之前的页面（感受就是把之前人写的页面重写，而后接口粘过来~把多余的插件都删掉了，只留下了一个jQuery），也认识了一个感受技术挺踏实的一个前端，名：成功。虽然他起点不高，可是很努力，在公司也不多看他讲话，几乎都在埋头作项目，我就给他取名em吧，由于他切页面真的很喜欢用em标签，常常把em看成块或者盒子来用。另外一个西南交大的”松松“，我眼中的学霸，学习能力很强，之后也能独挡一面。-----------------哎哟我草，彻底脱离主题了。。。。

进入正题了----

用了3周写一个boss管理系统，开始没想到这么复杂，我把他写成了单页应用了，控制页面全部的点击事件或者方法在一个js里面，差很少有1300行js。整个页面都是js生成的，想起了react，若是公司一股脑说必定要用react或许会是另外一个天地。由于有一个侧边栏点击而后页面中间content这块显示相应内容，可是呢，中间生成的内容也有两个点击控制区域，content分content-header和content-content，content-header有天，周，月可点，点击content显示相应的内容；content-conten也有查看详情按钮，点击次查看详情按钮和点击侧边栏效果差很少，存在很强的耦合性。content-conten除了一个和点击侧边栏效果几乎同样的clickbutton，还有一个内容查看显示状态不同的clickbutton，分别是分表格显示信息和图标显示信息。能够相互切换。大爷听到这里可能晕了，你特么到是贴张图出来啊。哦，我不贴。

根据我多年逛各类草根（liu）社区的经验，每一个客官的口味是不同的，若是把全部的客官部分老弱病残都来看狂野欧美风格，那可能80岁的老头要看吐血了。因此，我把想到了我远房亲戚webpack，es2015的export，之因此叫远房亲戚，是由于我只据说过它们的大名和偶尔打打电话，历来没用过实际项目。

因此朕的洪荒之力从凳子上的两个球一直到大脑皮层，称新版本刚上线，时间也不紧，那我就来用webpack+es6+bable来改良这个单页应用吧。

具体思路是把侧边栏点击中间显示内容和content-header和content-content里面的clickbutton分离出来，写成一个个组件。webpack来打包，es6的模块管理工具开控制组件，bable来转6转5

 

等适当实际我把这个系统的网址贴不来吧