文档章节

从QQ登录的js sdk中,研究html、css以及js的解耦

白志华
 白志华
发布于 2015/10/18 10:55
字数 795
阅读 8
收藏 0

       研究过腾讯提供的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,那么你肯定会比其他同类插件更受欢迎。


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


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

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/38828149

共有 人打赏支持
白志华
粉丝 29
博文 265
码字总数 57524
作品 0
长沙
程序员
Angular Material串串学客户端开发

Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs。更为强大的是,这个应用是真正的产品网站:就是它的官网。我有理由相信,这个网站是从源代码直接发布的,从...

予沁安
2015/06/12
0
9
unbelievable! 通过Css调用Js代码?

一直以来通过javascript操作css都是家常便饭,使用起来也没感觉什么特殊,如果反其道而行之呢? 用CSS写出Javascript代码或者说用CSS调用JS代码可行吗? 答案是可以的,从技术层面上是可以实现的,...

顽Shi
2014/07/01
0
21
UC前端‘搭积木’的模块化开发——scrat.js

模块化开发 将模块所需的jscssimgtmpl维护在一起,一个模块一个目录 js渲染模板 css只关心模块内样式 开发团队心声;“我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有可复用...

前端届的科比
2014/08/18
0
4
写在前端性能优化之前你应该知道的 - 浏览器的加载和渲染

前言 一直想写点关于前端性能的东西,后来感觉所谓的性能优化最基本的前提是你要知道浏览器是如何针对web页面工作的.后来由于过年以及换工作等原因耽搁下来,只好利用这个休息的周末写一下. 本...

顽Shi
2014/03/23
0
0
[JS进阶] 编写可维护性代码

1 可维护性代码的特点 可理解性:其他人可以接手代码并理解它的意图,无需原开发人员花太多时间解释! 直观性:代码中的东西一看就能明白,尽管其操作过程复杂。 可适应性:代码以一种数据上...

赵小宾
2015/04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部