加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

JsLoader Library动态加载js

(2012-07-02 18:09:10)
标签:

jquery

动态加载

js

it

分类: jquery那些事

JsLoader Library


文章作者:Vic Yuan

转载请注明出处:http://simplesys.cn

JsLoader.js




function JsLoader() {
        var jsQueue = new Array();
        var funQueue = new Array();
        var parArr = new Array();
        var domainArr = new Array();
        var parStr = '';
        var loadCount = 0;
        var isfinish = false;
        var dir = '';

        // 浏览器类型
    Browser = {
                ie :/msie/.test(window.navigator.userAgent.toLowerCase()),
                moz :/gecko/.test(window.navigator.userAgent.toLowerCase()),
                opera :/opera/.test(window.navigator.userAgent.toLowerCase()),
                safari :/safari/.test(window.navigator.userAgent.toLowerCase())
        };

        // 添加js文件
        this.load = function(url) {
                if (typeof (url) == 'object') {
                        jsQueue = jsQueue.concat(url);
                } else if (typeof (url) == 'string') {
                        jsQueue.push(url);
                }
        }

        // 加载js
        this.start = function() {
                for ( var i = 0; i < jsQueue.length; i++) {
                        loadJS(jsQueue[i]);
                }
        }

        this.call = function(fun) {
                if (isfinish) {
                        fun();
                } else {
                        funQueue.push(fun);
                }
        }

        // 构造参数
        this.build = function() {
                if (parArr.length > 0) {
                        // parStr = parArr.join('&amp;');
                        parStr = parArr.join('&');
                }
        }

        // 增加参数
        this.parameter = function(par) {
                if (typeof (par) == 'object') {
                        for ( var key in par) {
                                parArr.push(escape(key) + '=' + escape(par[key]));
                        }
                } else if (typeof (par) == 'string') {
                        parArr.push(par);
                }
        }

        // js地址目录 方便多语言 默认为空
        this.folder = function(folder) {
                dir = folder;
        }

        // 添加域名 用于动静分离,服务器减压,加快下载速度
        this.domain = function(url) {
                if (typeof (url) == 'object') {
                        domainArr = domainArr.concat(url);
                } else if (typeof (url) == 'string') {
                        domainArr.push(url);
                }
        }

        function loadJsFunc(sUrl, fCallback) {
                var _script = document.createElement_x('script');
                var hd = document.getElementsByTagName_r('head')[0];
                _script.setAttribute('type', 'text/javascript');
                _script.setAttribute('src', sUrl);
                document.getElementsByTagName_r('head')[0].appendChild(_script);
                if (this.Browser.ie) {
                        _script.onreadystatechange = function() {
                                if (this.readyState == 'loaded'
                                                || this.readyState == 'complete') {
                                        fCallback();
                                }
                        };
                } else if (this.Browser.moz) {
                        _script.onload = function() {
                                fCallback();
                        };
                } else {
                        fCallback();
                }
        }

        function loadJS(jsurl) {
                var tmpStr = '';
                var dStr = '';
                if (parStr.length > 0) {
                        tmpStr = (jsurl.indexOf('?') > 0 ? '&' : '?') + parStr;
                }
                var dl = domainArr.length;
                if (dl > 0) {
                        dStr = dl > 1 ? domainArr[jsurl.length % dl] : domainArr[0];
                }
                loadUrl = dStr + dir + jsurl + tmpStr;
                loadJsFunc(loadUrl, loadFinish);
        }

        function loadFinish() {
                loadCount++;
                if (loadCount == jsQueue.length) {
                        isfinish = true;
                        for ( var i = 0; i < funQueue.length; i++) {
                                funQueue[i]();
                        }
                }
        }
}

Demo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JsLoader Demo</title>
</head>
<body>
<div id="message">loading...</div>
</body>
<script type="text/javascript" src="JsLoader.js"></script>
<script>
var jsArr = new Array();

jsArr.push('includes/js/jquery/jquery.js');
jsArr.push('includes/js/hoverIntent.js');
jsArr.push('admin/js/common.js');
jsArr.push('includes/js/jquery/jquery.color.js');
jsArr.push('includes/js/wp-ajax-response.js');
jsArr.push('includes/js/wp-lists.js');
jsArr.push('includes/js/jquery/ui.core.js');
jsArr.push('includes/js/jquery/ui.resizable.js');
jsArr.push('includes/js/quicktags.js');
jsArr.push('admin/js/edit-comments.js');
jsArr.push('includes/js/jquery/ui.sortable.js');
jsArr.push('admin/js/postbox.js');

var manager = new JsLoader();
manager.load(jsArr);
//manager.load('admin/js/dashboard.js'); // 也可以使用这种方式添加js文件

manager.parameter({version:'2.0',language:'zh-cn'});
// manager.parameter('lang=zh'); // 这种方法也可以添加参数
manager.build();
manager.folder('/wp-');
// manager.domain('http://domain1/'); // 添加域名
manager.domain(new Array('http://simplesys.cn','http://www.simplesys.cn')); // 也可以使用数组的方式
manager.start(); // 加载js
manager.call(fnInit);
function fnInit(){
        document.getElementByIdx_x('message').innerHTML = 'init';
}
</script>
</html>

下载:

JsLoader Library-v1.2

JsLoader Library-v1.0

0

阅读 收藏 喜欢 打印举报/Report
前一篇:CMake命令实践
后一篇:动态加载css
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有