前端模块化、工程化

　　先谈谈前端工程化，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 结合起来。

1. 多人分支协做流程：用 git flow 来管理代码分支

2. 代码自动发布：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] 前端工程化概述