前端模块化、工程化

　　先谈谈前端工程化，web前端越来越像“应用程序”，处理的业务繁杂，需要用的html，css，js等文件越来越多；因此不得不用工程化的思想去组织管理这些文件；当然关于前端工程化在细节上见仁见智；以下是个人的理解：

　　首先是业务需求文档的规范化；

　　其次是开发过程中的管理：版本控制(git/svn)，js模块化(AMD,CMD,ES6)，MVVM框架(react,vue)等

　　再其次是测试阶段：自动化测试js接口函数等(karma,mocha)，数据mooc

　　最后是打包部署：构建工具进行丑化、合并等

构建工具grunt && gulp

　　Grunt 是最先流行起来的前端工程，其核心思想是基于配置的工作流模式，定义一个配置文件，声明工作流各个环节的相关配置，调用 grunt 就能完成打包编译；

　　 Gulp 几乎取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不同的 task，然后将 task 串联起来；

　　 Gulp入门教程

开发效率

　　通常的前端开发过程是，修改前端代码，调用命令编译代码，然后浏览器 F5 刷新。这个过程可以做到自动化，通过代码监控工具，指定要监控的目录和文件，如果对应文件有改变，调用编译工具编译源码，然后通过 livereload 自动刷新浏览器；

数据mock

　　现代化前端项目开发大多是前后端分离的方式，也就是后端基本是提供 API 服务，在真实开发环境中，通常的问题是，后端 API 极其不稳定或者没开发，为了不阻碍前端的开发，通常的做法是，前后端先约定 API 接口定义，然后前端根据定义 mock 接口。

　　对于大公司来说，可能有 mock 平台来实现这一功能，但对于小公司小项目来说，可能只能自己实现，我们可以利用一些开源的数据 mock 工具来在前端工程中实现；

　　mockjs官网

部署需求

　　一个前端工程通常是多人维护的，所以会用代码管理工具(默认 git) 来管理源码，然后将开发流程和部署流程和 git 结合起来。

多人分支协作流程：用 git flow 来管理代码分支
代码自动发布：git hook

javascript的模块化历程

　　先简短介绍下js模块化演进史：

　　　　1.问题困扰：JavaScript语言没有模块功能，在业务处理中经常需要模块化开发，模块化开发方便管理代码，能有效组功能；因此开启了漫长模块化之路；

　　　　2.使用立即执行函数创建独立的命名空间；把一个立即执行函数看做一个模块，函数中的变量、方法是私有的；

　　　　3.nodejs出现，推出commonjs规范了JavaScript在服务器端的模块化标准；commonjs只能同步加载模块；

　　　　4.浏览器中的js文件需要从服务器端下载，只有异步加载模块的方式才不会造成阻塞，显然commonjs不适合，因此推出AMD规范，requirejs是浏览器端异步加载模块的工具；

　　　　5.至此服务器端、浏览器端模块化规范都已出现；

　　　　6.浏览器端由于AMD规范的requirejs自身问题(加载时需要先规定好依赖顺序等)，产生了CMD规范的seajs(可以按需加载)

　　　　7.ECMA组织推出ES6版本，其中定义了module关键字作为模块加载工具；

　　commonjs && ( AMD && CMD )区别

　　　　AMD写法：

define(['a.js','b.js','c.js','d.js','e.js'],function(a,b,c,d,e){
    // 缺点：
    // 1.需要事先写好依赖关系，如果依赖众多，在样式上难看
    // 2.定义的时候会预加载依赖，同时执行依赖文件（如果依赖众多，严重影响浏览器加载时间，而且有些依赖可能在触发某些事件后才会用到）
})

　　　　CMD写法：

define(function(require,exports,module){
    var a = require('a.js');
    a.hello();

     var b = require('b.js');
     $('').click(function(){ b.hello(); });

     $('').click(function(){
            var c = require.async('c.js');
            c.hello();
      });
     // 1.预先加载require引入的文件，但不执行
     // 2.只有调用依赖中的函数时才执行依赖
     // 3.通过require.async()，可以做到懒加载，只有触发事件时才会加载c.js文件
})

参考：(优质的文档能够准确，快速地理解掌握知识点；感谢以下文档)

[1] JavaScript的模块化历程

[2] 前端工程化概述

来源：https://www.cnblogs.com/RocketV2/p/8562652.html

标签

js模块化开发