重复造轮子之js/css的include库

因为不太会用requirejs和seajs之类的模块化等相关的库,也不太喜欢这些东西,总感觉这些东西写后台会更有用,对于前端web来说意义不是特别大(好吧,也许就是我不太会用!),但是有时候又需要根据实际需求动态的引入一些js,比如说小于IE8引用jquery1.x版本,高于IE8则可以引用更小巧更高效的jquery2.x,再比如判断浏览器特性不支持什么功能就不用引用相应的插件等等,于是乎自己写了一个js/css的include库。

2016年12月01日更新:(采用递归方式,减小体积,可自行使用代码压缩工具压缩)

var include = function (res,callback) {
    var fn=arguments.callee,d=document,h=d.querySelector('head'),j='script',c='link',r,tag;
        if(res.length){
            r = res.shift();
            /\.js$/i.test(r)?(
                tag = d.createElement(j),
                tag.onload = tag.onerror = function(){fn(res,callback)},
                tag.onreadystatechange=function(){/loaded|complete/i.test(tag.readyState)&&fn(res,callback)},
                tag.async = !0,
                tag.type='text/javascript',
                tag.src = r,
                h.appendChild(tag)
            ):(
                tag = d.createElement(c),
                tag.href = r,
                tag.rel = 'stylesheet', 
                tag.type = 'text/css',
                h.appendChild(tag),
                fn(res,callback)
            )
        }else{
            callback&&callback();
        }
}

压缩版(452B):

var include=function(e,t){var n,a,c=arguments.callee,r=document,l=r.querySelector("head"),s="script",d="link";e.length?(n=e.shift(),/\.js$/i.test(n)?(a=r.createElement(s),a.onload=a.onerror=function(){c(e,t)},a.onreadystatechange=function(){/loaded|complete/i.test(a.readyState)&&c(e,t)},a.async=!0,a.type="text/javascript",a.src=n,l.appendChild(a)):(a=r.createElement(d),a.href=n,a.rel="stylesheet",a.type="text/css",l.appendChild(a),c(e,t))):t&&t()};

调用方法:

!function() {
    var res=[];
    //按顺序引入资源
    res.push('xxxx.css');
    res.push('jquery.js');
    res.push('tools.js');
    res.push('xxxx.js');
    include(res,function(){
        //do some thing
    })
}()

资源建议按需要调用的顺序引入,并且建议先引入css,然后因为只是单纯的createElement,所以路径必须要你正常引入页面script标签一样的写法写路径。当所有资源全部include完毕后才会调用回调函数,写的比较粗糙,但是基本够用。


本文地址:http://darren.ink/archives/48

相关文章:

标签: javascript, 原创

添加新评论