動(dòng)態(tài)加載js

CNZPH 發(fā)布于2019-08-20 10:37 / 2333人閱讀

摘要：在前端開發(fā)中，經(jīng)常需要用從后臺(tái)獲取動(dòng)態(tài)數(shù)據(jù)，因此不能寫死，而要?jiǎng)討B(tài)加載。問(wèn)題描述實(shí)習(xí)期間在做一個(gè)需求的過(guò)程中碰到需要從后臺(tái)動(dòng)態(tài)加入的問(wèn)題。因此不能采取上述方法來(lái)動(dòng)態(tài)加載。

在Web前端開發(fā)中，經(jīng)常需要用ajax從后臺(tái)獲取動(dòng)態(tài)數(shù)據(jù)，因此不能寫死，而要?jiǎng)討B(tài)加載js。
問(wèn)題描述：實(shí)習(xí)期間在做一個(gè)需求的過(guò)程中碰到需要從后臺(tái)動(dòng)態(tài)加入js的問(wèn)題。

首先，我給出的解決方案是：

其中向url_demo發(fā)送http請(qǐng)求，返回一個(gè)json串，其中包括我們想要的url，這里的url是一段js，獲取url后賦值給內(nèi)部嵌入了一段腳本之后，就不能修改其屬性值了。因此不能采取上述方法來(lái)動(dòng)態(tài)加載js。
解決方案可修改為：

也就是多帶帶拎一個(gè)，里面不加任何js代碼，然后用另外的編寫js腳本前一個(gè)的src屬性進(jìn)行修改，達(dá)到頁(yè)面動(dòng)態(tài)加入js的要求。
后來(lái)導(dǎo)師說(shuō)上面的做法有點(diǎn)low，而且“極具創(chuàng)造力”（不過(guò)發(fā)現(xiàn)了一個(gè)問(wèn)題然后解決了，還是不錯(cuò)滴），就要我去找loadjs的常規(guī)方法，這里借用一下玉伯seajs里的loadJs方法，學(xué)習(xí)一下大神的寫法：

function loadJs(url , callback){
    var node = document.createElement("script");
    node[window.addEventListener ? "onload":"onreadystatechange"] = function(){
        if(window.addEventListener || /loaded|complete/i.test(node.readyState)){
            callback();
            node.onreadystatechange = null;
        }                                                                             
    }
    node.onerror = function(){};
    node.src = url;
    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(node,head.firstChild); 　
}

用法如下：

$(function(){
        $.ajax({
            type: "GET",
            data: {captchaType:1},
            url: "demo_url",
            dataType: "jsonp",
            jsonp: "callback"
        }).done(function(json){
            if (json.code == 0) {
                //參數(shù)url和回調(diào)函數(shù)
                loadJs(json.url, fCb);
            }
        });
        function fCb(){
            //回調(diào)函數(shù)，第一次需要用到上述url對(duì)應(yīng)js腳本的函數(shù)
            init("container1", "point");
        }
})

好啦，還是看的、學(xué)的太少了，以后要多看大牛的寫法，只有看得多了，才能不會(huì)一頭鉆進(jìn)死胡同里。