具体问题:Javascript集成模式

一般来说,我们可以使用静态加载动态加载的方式将JS文件直接与页面集成:

//静态加载
<script src="jquery.js" type="text/javascript"></script>
//动态加载
include = function(url) {
    var h = document.getElementsByTagName('head');
    var n = document.createElement('script');
    n.type = 'text/javascript';
    n.src = url;
    h[0].appendChild(n);
}
当网站规模非常大时,我们可以考虑在页面上集成一个JS主文件,从主文件中逐级调用其它文件:
<head>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript"></script>
        topFunction();
    </script>
    <!--html content -->
    <script type="text/javascript"></script>
        bottomFunction();
    </script>
<body/>
这样一来引发的新问题是,当我们在页面上甚至Javascript中调用某个函数时,该JS文件还未加载完成。或者是加载的JS文件数量众多,严重影响到页面的加载速度。为解决这些问题,我们将引入异步思路。 一种使用异步的办法是利用**DOM事件机制**:
//异步加载JS
include = function() {
    var h = document.getElementsByTagName('head');
    var n = document.createElement('script');
    n.type = 'text/javascript';
    n.src = 'url';
    h[0].appendChild(n);
}
if (window.attachEvent) {
    window.attachEvent('onload', include);
} else if (window.addEventListener) {
    window.addEventListener('load', include, false);
}
我们也可以给它添加一个**回调函数**,在加载完成时调用。
include = function() {
    var h = document.getElementsByTagName('head');
    var n = document.createElement('script');
    n.type = 'text/javascript';
    n.src = 'url';
    h[0].appendChild(n);
    callback = function() {
        if (document.readyState == 'complete') {
            //do somethings;
        }
    }
    if (window.attachEvent) {
        window.attachEvent('onReadyStateChange', callback);
    } else if (window.addEventListener) {
        window.addEventListener('readyStateChange', callback, false);
    }
}
集成JS文件中事件机制的风险在于,你无法预料页面上会发生什么。一旦页面上使用onEvent=""的写法,你的事件会彻底改变页面的行为。 **SetTimeout** 更优秀的方法是采用SetTimeout函数,这样,你的代码不必再依赖于DOM.
counter = 0;
include = function() {
    var h = document.getElementsByTagName('head');
    var n = document.createElement('script');
    n.type = 'text/javascript';
    n.src = 'url';
    h[0].appendChild(n);
    callback = function() {
        if (typeof complete != 'function' && counter < 3) {
            counter++;
            setTimeout(callback, 100);
        } else {
            complete();
        }
    }
    setTimeout(callback, 100);
}
**模块化Javascript**,重构…… 使用诸如RequireJS这样的框架,可以解决JS部分加载的问题,但最大的难点在于重构现有的代码,以及引入远程JS. RequireJS也是使用一个主文件进行加载:
<html>
    <head>
        <title>My Sample Project</title>
            <script data-main="main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>
main.js
require(["scripts/util"], function(util) {
    console.log("util is loaded.")
});
,
© 2018 Silent River All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero