我们发现在一个正常的项目中,我们要
在页面上导入大量 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("任务完成后的路径"));
});