? ? ? ?我們發現在一個正常的項目中,我們要
在頁面上導入大量 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("任務完成后的路徑"));
});