[圖片上傳中...(20171218161903.png-3cfb99-1513585405198-0)]
基于以上代碼，引起的思考
1.移動端采用的flexible布局篡悟，so第一個script標(biāo)簽為flexible源碼；
2.第二段為埋點(diǎn)
3.第三段為配置數(shù)據(jù)
4.第四段埋點(diǎn)所用的第三方庫
與js執(zhí)行順序有關(guān)
動態(tài)加載script到頁面的方法
第一種就是利用ajax方式藤抡，把script文件代碼從后臺加載到前臺辫封，然后對加載到的內(nèi)容通過eval()執(zhí)行代碼。（幾乎很少使用廉丽，不安全倦微，容易被攻擊）第二種是，動態(tài)創(chuàng)建一個script標(biāo)簽正压，設(shè)置其src屬性欣福，通過把script標(biāo)簽插入到頁面head來加載js，相當(dāng)于在head中寫了一個<script src="..."></script>,只不過這個script標(biāo)簽是用js動態(tài)創(chuàng)建的
比如說是我們要動態(tài)地加載一個callbakc.js焦履，我們就需要這樣一個script標(biāo)簽：
<script type="text/javascript" src="call.js"></script>
如下代碼就是如何通過js來創(chuàng)建這個標(biāo)簽（并且加到head中）：
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'call.js';
head.appendChild(script);
當(dāng)加載完call.js拓劝， 我們就要調(diào)用其中的方法。不過在header.appendChild(script)之后我們不能馬上調(diào)用其中的js嘉裤。因為瀏覽器是異步加載這個js的郑临，我們不知道他什么時候加載完。然而我們可以通過監(jiān)聽事件的辦法來判斷helper.js是否加載完成屑宠。（假設(shè)call.js中有一個callback方法）
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () {
if (this.readyState == 'complete')
callback();
}
script.onload= function(){
callback();
}
script.src= 'helper.js';
head.appendChild(script);
我設(shè)了2個事件監(jiān)聽函數(shù)厢洞， 因為在ie中使用onreadystatechange, 而gecko,webkit 瀏覽器和opera都支持onload。事實(shí)上this.readyState == 'complete'并不能工作的很好典奉，理論上狀態(tài)的變化是如下步驟：
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
但是有些狀態(tài)會被跳過躺翻。根據(jù)經(jīng)驗在ie7中，只能獲得loaded和completed中的一個卫玖，不能都出現(xiàn)公你，原因也許是對判斷是不是從cache中讀取影響了狀態(tài)的變化，也可能是其他原因假瞬。最好把判斷條件改成this.readyState == 'loaded' || this.readyState == 'complete'
參考jQuery的實(shí)現(xiàn)我們最后實(shí)現(xiàn)為：
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onload = script.onreadystatechange = function() {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
help();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
} };
script.src= 'helper.js';
head.appendChild(script);
還有一種簡單的情況就是可以把help()的調(diào)用寫在helper.js的最后陕靠，那么可以保證在helper.js在加載完后能自動調(diào)用help(),當(dāng)然最后還要能這樣是不是適合你的應(yīng)用迂尝。
另外需要注意：
1.因為script標(biāo)簽的src可以跨域訪問資源,所以這種方法可以模擬ajax，解決ajax跨域訪問的問題懦傍。
2.如果用ajax返回的html代碼中包含script雹舀，則直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代碼粗俱，jQuery也是先解析傳入的參數(shù)说榆，剝離其中的script代碼，動態(tài)創(chuàng)建script標(biāo)簽寸认，所用jQuery的html方法添加進(jìn)dom的html如果包含script是可以執(zhí)行的签财。如：
jQuery("#content").html("<script>alert('aa');</script>");
