现在前端 er 在讨论什么, 模块化, 组件化, 工程化无疑是逃不掉的话题. 在前端向全端转变的路上, 我们一定要理解这些东西, 对自己的项目和工作会有很大的帮助.
模块化和组件化
很多人会混淆模块化开发和组件化开发. 但是严格来讲, 组件 (component) 和模块 (module) 应该是两个不同的概念. 两者的区别主要在颗粒度方面.
简单讲, module 侧重的是对属性的封装, 重心是在设计和开发阶段, 不关注 runtime 的逻辑. module 是一个白盒; 而 component 是一个可以独立部署的软件单元, 面向的是 runtime, 侧重于产品的功能性. component 是一个黑盒, 内部的逻辑是不可见的.(用我自己的话来说就是模块是在文件层面上, 对代码和资源的拆分, 比如 js 模块, CSS 模块. 组件是在 UI 层面上的拆分, 比如页头, 页脚, 评论区等)
借用大牛 @张云龙的一张图, 解释如下:
模块化中的模块一般指 js 模块, 比如一个用来格式花时间的模块.
而从 UI 拆分下来的每个包含模板 (html)+ 样式(CSS)+ 逻辑(JS) 功能完备的结构单元, 我们称之为组件. 比如 vue 组件包含了 template,style,script. 它的 script 可以由许多 js 模块组成.
组件和模块
还有一张图, 解释了 js 模块, css 模块, UI 组件等概念.
前端工程化
概念如下: 前端工程化是使用软件工程的技术和方法来进行前端项目的开发, 维护和管理(曾经的前端开发可不是这样的, 不然为什么要说工程 "化" 呢?).
这里顺带说下软件工程的概念: 应用计算机科学理论和技术以及工程管理原则和方法, 按预算和进度, 实现满足用户要求的软件产品的定义, 开发, 和维护的工程或进行研究的学科
前端工程化包含如下:
1. 代码规范: 保证团队所有成员以同样的规范开发代码.
2. 分支管理: 不同的开发人员开发不同的功能或组件, 按照统一的流程合并到主干.
3. 模块管理: 一方面, 团队引用的模块应该是规范的; 另一方面, 必须保证这些模块可以正确的加入到最终编译好的包文件中.(以上两点可以总结为模块化或者组件化开发.)
4. 自动化测试: 为了保证和并进主干的代码达到质量标准, 必须有测试, 而且测试应该是自动化的, 可以回归的.
5. 构建: 主干更新以后, 自动将代码编译为最终的目标格式, 并且准备好各种静态资源,
6. 部署. 将构建好的代码部署到生产环境.
当前端向大前端发展的时候, 我们的岗位也就从 web 前端工程师 ->web 全栈工程师
最后放个大招; 一张图让你明白什么是大前端!
前端技术栈
参考链接:
- https://zhuanlan.zhihu.com/p/30122317
- http://www.cnblogs.com/ihardcoder/p/5378290.html
侵删.
来源: http://www.jianshu.com/p/171996f5b12c