我们发现在一个正常的项目中，我们要

在页面上导入大量 js 文件，jQuery 文件，jQuery 各种插件的文件，甚至是其他 javascript 库

文件，这样大量的 javascript 文件的导入，使得我们的 javascript 异常的复杂、难以管理和维

护，大大的增加了我们项目的管理和维护成本，那么有什么办法可以很友好的管理我们页面

的各种各样的 js 代码吗？有，就是 js 的模块化管理

---

          RequireJS 是一个非常小巧的 javascript 模块载入框架，是 AMD（Asynchronous Module

 Definition，异步模块加载机制）规范最好的实现之一。最新版的 requireJS 压缩后只有 14k，

堪称非常轻量。它还同时可以和其他的框架协调工作，使用 requireJS 必将使我们的前端代

码质量得以提升

---

RequireJS的好处是

它非常适合在浏览器中使用,但它也可以用在其他脚本环境,

就像 Rhino and Node. 使用 RequireJS 加载模块化脚本将提高代码的加载速度和质量

使用闭包写了一个最简单的函数，弹出一句话，我们使用闭包的好处就是避免全局变量

的出现，这样就防止了全局变量的污染

---

Hello requireJS

Hello requireJS

我们发现此时的页面加载已经完成了，并不像前面我们传统的一样在等待 js 运行完成

后页面再加载，而是页面加载完成后才运行 js 代码，这样在运行效率上就大大的提高了。

---

我们发现此时的页面加载已经完成了，并不像前面我们传统的一样在等待 js 运行完成

后页面再加载，而是页面加载完成后才运行 js 代码，这样在运行效率上就大大的提高了。

基本  API

requireJS 会定义三个变量：define、require、requirejs。

  require === requirejs，一般使用 require 更简短。

  define 从名字就可以看出这个 api 是用来定义一个模块。

  require 加载依赖模块，并执行加载完后的回调函数。

全局配置

require.config({paths : {//这样配置，减轻本地服务器的压力"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],//将本地的js文件同样配置，之后引用"test01" : ["js/test01"],"test02" : ["js/test02"]}});然后再页面中使用下面的方式来使用 requirejs：require(["jquery","t1","t2"],function(){

alert("页面加载成功~~");

},function(){

alert("页面加载失败~~")

});在官方提供了一种基于标签属性的方式：将所有的配置和导入 js 都放在了 main.js 中，这样在页面只要这样一个标签就行了。

我们使用gulp中插件，如gulp-less

1、先在本地下载插件

cnpm install gulp-less --save-dev

2、在入口js文件（gulpfile.js或者index.js）中，写代码（任务代码）

var g = require("gulp");

var gxx = require("gulp-xxxx");

g.task("任务名",function() {

g.src("目标路径")

.pipe(插件方法，如test_less())

.pipe(g.dest("任务完成后的路径"));

});