Wind.js是一個異步加載js 和 css 的類庫，核心是基于 head.js 的，phpwind 團隊在 head.js 基礎上封裝了一些方法，可以更加方便的異步加載 js 和 css。 ## 異步加載js Wind.use()方法可以異步加載 js，比如我們要異步加 noty，加載完后就提示信息 ``` Wind.use('noty', function () { noty({ text: "noty加載成功了", type: 'success', layout: 'center', callback: { afterClose: function () { alert('noty 關閉了！'); } } }); }); ``` 上面的 `noty`，其實是noty.js 的別名，它真實的路徑在`public/static/js/noty/noty.js`，我們事先已經為它設置了 `noty`,所以Wind.js 會自動根據別名來加載這個 js，當然也可以直接使用 js 的絕對地址加載它；所以可以使用 Wind.js異步加載任何一個 js 代碼。 ``` Wind.use('__STATIC__/js/noty/noty.js', function () { noty({ text: "noty加載成功了", type: 'success', layout: 'center', callback: { afterClose: function () { alert('noty 關閉了！'); } } }); }); ``` 同時 Wind.js 支持任意多個 js 文件加載，只要不斷地增加 use方法的參數就可以了； 比如我們一次加 noty,和 noty3,回調方法會在兩個 js 都加載完成后才會執行，這樣你可以把 Wind.use()當成一個 js 依賴庫的導入方法。 ``` Wind.use('noty', 'noty3',function () { // noty noty({ text: "noty加載成功了", type: 'success', layout: 'center', callback: { afterClose: function () { alert('noty 關閉了！'); } } }); // noty3 new Noty({ text: "noty3加載成功了", type: 'success', layout: 'topCenter', modal: true, animation: { }, timeout: 500, callbacks: { afterClose: function () { alert('noty3 關閉了！'); } } }).show(); }); ``` ## 異步加載 css Wind.css(),可以異步加載css，比如我們要異步加 ueditor的 css，加載完后就提示信息。 ``` Wind.css('ueditor',function(){ alert('ueditor css 加載完成！'); }); ``` 上面的 `ueditor`，其實是ueditor css的別名，它真實的路徑在`public/static/js/ueditor/themes/default/css/ueditor.min.css`，我們事先已經為它設置了 `ueditor`,所以Wind.js 會自動根據別名來加載這個css，當然也可以直接使用css的絕對地址加載它；所以可以使用 Wind.js異步加載任何一個css代碼。 ``` Wind.use('__STATIC__/js/ueditor/themes/default/css/ueditor.min.css', function () { alert('ueditor css 加載完成！'); }); ``` > Wind.css()一次只能加載一個 css