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