码迷,mamicode.com
首页 > Web开发 > 详细

js文件动态添加的实现

时间:2016-09-14 10:52:13      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

基于AMD和CMD的模块开发和按需加载,给我们的开发过程带来了便捷。

今天就来就分享一个自己在项目开发中用到的一个按需加载js的一个方法,不多说,直接ps代码啦

/**
 * JS 加载到顶部
 * @param {String} url
 * @param {Boolean} 请求并加载
 * @param {Function} fn
 * @return {Boolean}
 */
function requireJs(url, multi, fn) {
    if (typeof multi == ‘function‘) {
        var _temp = fn;
        fn = multi;
        multi = _temp;
    }
    var ss = document.getElementsByTagName(‘script‘);
    var loaded = false;
    for (var i = 0; i < ss.length; i++) {
        if (ss[i].src && ss[i].getAttribute(‘src‘) == url) {
            loaded = true;
            break;
        }
    }
    if (loaded) {
        if (fn && typeof fn != ‘undefined‘ && fn instanceof Function){
            fn();
            return false;
        } 
    }
    var s = document.createElement(‘script‘),
    b = false;
    s.setAttribute(‘type‘, ‘text/javascript‘);
    if (multi) {
        this.loadJs = fn;
        var noArg = url.indexOf(‘?‘) == -1;
        s.setAttribute(‘src‘, url + (noArg?‘?‘:‘&‘) + ‘callback=WYSIWYG.loadJs‘);
    } else {
        s.setAttribute(‘src‘, url);
        s.onload = s.onreadystatechange = function () {
            if (!b && (!this.readyState || this.readyState == ‘loaded‘ || this.readyState == ‘complete‘)) {
                b = true;
                if (fn && typeof fn != ‘undefined‘ && fn instanceof Function) fn();
            }
        };
    }
    document.getElementsByTagName(‘head‘)[0].appendChild(s);
}

该方法会检查页面是否已经引入了需要引入的js,如果没有,则加载该js,如果已经存在,则不加载;总之会在判断完成后在执行回调。

js文件动态添加的实现

标签:

原文地址:http://www.cnblogs.com/oygg/p/5870916.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!