从QQ登录的js sdk中，研究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，那么你肯定会比其他同类插件更受欢迎。

其实说白了，这就是一种“偷懒”行为。但是正是因为“偷懒”，才会更受欢迎。因为会“偷懒”的人，能更好的为用户服务。所以快来“偷懒”吧。

版权声明：本文为博主原创文章，未经博主允许不得转载。