從QQ登入的jssdk中，研究html、css以及js的解耦

       研究過騰訊提供的QQ登入js sdk版本(飛機票)的讀者，可能會注意到，只要引入一個js，然後再設定一個span標籤，就可以使用js例項化出一個QQ登入按鈕來。如果你檢視頁面原始碼，會發現頁面自動引入了很多個js檔案，這是為什麼呢？？

       其實很簡單，就是從你引入的這個js，會動態載入其他js或css等資原始檔。這個技術並不複雜，也很常見。如果你瞭解chrome外掛的話，你就會發現，這些外掛就可以隨意更改頁面樣式、新增各種js、css等頁面資源。

       我們先不說這樣做有什麼好處，先就跟大家分享一下我自己寫的程式碼吧：

//引入js
function addlinkscript(addrs){
  for(var i=0;i<addrs.length;i++){
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src=addrs[i];
    document.head.appendChild(script);
  }
}

//引入css
function addlinkcss(addrs){
  for(var i=0;i<addrs.length;i++){
    var script = document.createElement("link");
    script.rel="stylesheet";
    script.href=addrs[i];
    document.head.appendChild(script);
  }
}

//##############################################################################

//載入js函式
function loadScript(){
  var addr =["http://cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"];
  addlinkscript(addr);
}

//載入css
function loadcss(){
  var addr = ["http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css",
  "http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"];
  addlinkcss(addr);
}


//主函式切入點
(function main(){
  loadScript();
  loadcss();
})();

       只要把上面的程式碼放入一個js中，在某個頁面上引入這個js，即可自動在頁面上載入bootstrap.css、bootstrap.min.css、jquery.min.js這三個資原始檔。相信你已經看到，其實這些資原始檔是你可以自己去選擇的。

       程式碼分享完了，但是我們為什麼要這麼做的？？

       我們完全可以自己去在頁面上載入這些資原始檔。但是，如果對於一個大專案而言，使用各種js或jquery外掛等，會引用各種js檔案，如果你不瞭解，那麼這會讓你很頭疼的。如果你想使用的外掛，需要你引用10個js和css，而且名字很相似，你不小心落了一個，你很難發現是哪一個。

       如果你選擇了這種方式，使用者只需要載入一個外掛連結的js，外掛所需要的js和css自動載入到頁面中，在不影響功能的基礎上，同時減少了開發人員的任務量，降低了由於缺少js的bug出現機率。更重要的是我們把html和各種資原始檔進行了解耦。如果我們完全可以從服務端修改這個連結的js，來修改外掛的功能，相當於網頁版的線上升級功能（安全性在這裡暫不做考慮）。我們何樂而不為呢！！

       如果你是一個jquery外掛的開發人員，如果你提供一個這樣的js，那麼你肯定會比其他同類外掛更受歡迎。

       其實說白了，這就是一種“偷懶”行為。但是正是因為“偷懶”，才會更受歡迎。因為會“偷懶”的人，能更好的為使用者服務。所以快來“偷懶”吧。