理解前端工程化、组件化、项目结构设计

前端工程化：

当前前端已由 过去的webPage （一个页面，引些jq插件。。） 转向 webApp，业务逐渐复杂，是一个独立的工程。

因此会产生一些问题：

1，如何进行高效的多人协作。

2，如何保证项目的可维护性

3，如何降低项目的生产风险：打包，部署。

可以从如下四方面理解：

a，模块化，组件化，规范化，自动化。

模块化：JS模块化，css模块化

规范化：前后端分离，编码规范。工程目录的规范，组件的规范等。

自动化：图片的合并，代码的合并。测试，打包，部署。都有专门工具来完成。

组件化：

组件就是将一段UI样式和其对应的功能作为独立的整体去看待，为了增加复用性，灵活性，提高系统设计，从而提高开发效率。而不仅仅是自以为的抽象，引用。

一个通用的，可扩展性高的组件，必然是有非常合理的命名的，类似list,data,content,name,key,callback,className等名词，绝对不会出现我们系统中的业务名词。这些名词和任一产品和应用都无关，它与自身抽象的组件有关，只表明组件内部的数据含义，偶尔也会代表其结构，所以只有这样，才能让用户通用。

我们在组件化时，也需要遵循这种设计原则，库往往是想让广大开发者通用，而我们可以降低scope，做到在整个app内通用即可。好的组件化必然有好的设计思维和用户体验。

组件化的演变，是前端学习后端的过程（mvc），是业务逻辑不断往前端迁移的过程。

 

 

总的来说是前端开发有规范可循。

 

 

项目架构设计：

前端项目架构设计应该关注，

1：项目的技术选型，选择适合项目的技术体系。

2：代码层面的拆分，互相引用。包括：业务层，操作数据层，路由层，服务层（连接数据库）。每个部分各自完成自己的任务，互相引用。在大型项目中，避免项目不可维护。

3：性能方面的优化