6.1 简要阐述一下前端工程化
背景:
前端工程化是前后端分离的必然产物,它通过软件工程思想从模块化、组件化、规范化、自动化四个方面出发,解决了以下几种问题:
如何进行高效的多人协作?
如何保证项目的可维护性?
如何提高项目的开发质量?
6.1.1 模块化:
- js模块化
在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等。
规范确定了,然后就是模块的打包和加载问题:
目前Webpack远比SystemJS流行。Safari已经支持用type="module"加载了。
Webpack的强大之处不仅仅在于它统一了JS的各种模块系统,取代了Browserify、RequireJS、SeaJS的工作。更重要的是它的万能模块加载理念,即所有的资源都可以且也应该模块化。
-
css模块化
css module、css next
资源模块化后,有三个好处:
- 依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线,无需额外处理CSS预处理器的依赖关系,也不需处理代码迁移时的图片合并、字体图片等路径问题;
- 资源处理集成化。现在可以用loader对各种资源做各种事情,比如复杂的vue-loader等等。
- 项目结构清晰化。使用Webpack后,你的项目结构总可以表示成这样的函数: dest = webpack(src, config)
6.1.2 组件化:
模块化只是在文件层面上,对代码或资源的拆分;而组件化是在设计层面上,对UI(用户界面)的拆分。
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。
首先,传统前端框架/类库的思想是先组织DOM,然后把某些可复用的逻辑封装成组件来操作DOM,是DOM优先;而组件化框架/类库的思想是先来构思组件,然后用DOM这种基本单元结合相应逻辑来实现组件,是组件优先。这是两者本质的区别。
其次,组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。
6.1.3 规范化:
模块化和组件化确定了开发模型,而这些东西的实现就需要规范去落实。
规范化其实是工程化中很重要的一个部分,项目初期规范制定的好坏会直接影响到后期的开发质量。
包括以下内容:
- 目录结构的制定(components、containers、config等等)
- 编码规范(es-lint、css-lint)
- 前后端接口规范
- 文档规范
- 组件管理
- Git分支管理
- Commit描述规范
- 定期CodeReview
其中编码规范最好采取ESLint和StyleLint等强制措施,配置git hooks可以实现Lint不过不能提交代码等机制,因为人是靠不住的。
6.1.4 自动化:
遵循理念:
任何简单机械的重复劳动都应该让机器去完成。
- 持续集成
- 自动化构建
- 自动化部署
- 自动化测试
前端自动化测试能够提高代码质量、减少人肉测试等,这些优点是不言而喻的。
以上就是前端工程化的一些概念的概述,高级前端不只用别人搭好的脚手架去开发页面,平时还要多注意周边知识的积累,多自己搭框架,多去研究原理,熟悉各种前端思想与架构。