Wind.js

优质
小牛编辑
138浏览
2023-12-01

Wind.js是一个异步加载js 和 css 的类库,核心是基于 head.js 的,phpwind 团队在 head.js 基础上封装了一些方法,可以更加方便的异步加载 js 和 css。 此文件在public/static/js/wind.js

异步加载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