动态脚本函数

蛮久之前在GitHub 上用hexo 搭过博客

使用了网易云家的评论系统

由于当时对模板引擎的不太理解

我自己写的脚本和评论需要的脚本只能放在全局

>于是就出现了第一个问题: 

如何让全局的脚本在不同网页,执行或者不执行?

这个挺好解决的,通过监听当前网页的 Window.location.href

动态的让脚本选择执行环境

代码栗子: 

var url = '', flag = false;
var timer = setInterval(function () {
    function clear(){
        clearInterval(timer));
    };
    url = window.location.href;
    flag = /\/post\//.test(url);
    flag ? (next(), clear() : clear();
}, 100);

>第二个问题: 

当我在需要评论系统的地方动态创建HTML元素后

再动态的引入评论系统所依赖的多个脚本时

就会因为动态创建的脚本之间的执行顺序

导致问题

代码栗子: 

<div class="box"></div>
<script>
    next();

    function next() {
        var box = document.getElementsByClassName('box')[0];

        console.log('0');
        var script1 = document.createElement('script');
        script1.src = '1.js'; // console.log('1');
        box.appendChild(script1);

        var script2 = document.createElement('script');
        script2.innerHTML = `console.log('2');`;
        box.appendChild(script2);

        console.log('3')
    }
</script>
<script>
    console.log('4');
</script>

console中最终输出是 0 2 3 4 1

如果动态创建的脚本给的是一个src地址的话

他会在其他脚本执行结束后才执行

那怎样才能让他按照我们想要的顺序执行(0->1->2->3->4)呢

解决方法一:

<div class="box"></div>
<script>
    next();

    function next() {
        var box = document.getElementsByClassName('box')[0];

        console.log('0');

        var script1 = document.createElement('script');
        script1.src = '1.js'; // console.log('1');
        box.appendChild(script1);
        window.onload = function () {
            var script2 = document.createElement('script');
            script2.innerHTML = `console.log('2');`;
            box.appendChild(script2);

            console.log('3');
            console.log('4');
        }
    }
</script>

把所有晚于script1执行的方法都放入window.onload方法中

让他们在页面加载完毕后执行

console中最终输出是 0 1 2 3 4

那还有更好的方法么?

解决方法二:

<div class="box"></div>
<script>
    function loadJs(el, src, callback) {
        var script = document.createElement('script');
        var loaded;
        script.src = src;
        if (typeof callback === 'function') {
            script.onload = script.onreadystatechange = function () {
                if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) {
                    script.onload = script.onreadystatechange = null;
                    loaded = true;
                    callback();
                }
            }
        }
        el.appendChild(script);
    }

    next();

    function next() {
        var box = document.getElementsByClassName('box')[0];

        console.log('0');
        loadJs(box, '1.js', function () {
            var script2 = document.createElement('script');
            script2.innerHTML = `console.log('2');`;
            box.appendChild(script2);
            console.log('3');
            console.log('4');
        });
    }
</script>

封装一个loadJs方法

script1执行完毕后再执行一个回调

把需要在他后面加载的方法放入回调执行

console中最终输出是 0 1 2 3 4

最后

如果有什么问题,或者有更好的方法,欢迎评论!

发现 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注