文档章节

从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

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

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

予沁安
2015/06/12
0
9
【猎头北京】高级Web前端工程师,.net互联网架构师

职位详情可直接咨询qq/msn/gmail:leeyanva@gmail.com 更多职位信息查看:http://www.douban.com/people/leeyanva/notes 工作地点:北五环外一点 高级Web前端工程师 (8-12K) 岗位职责: 1....

猎头leeva
2011/06/27
557
1
[杭州]阿里巴巴旗下聚划算招web前端开发工程师

前端开发工程师: 岗位描述: 1. 负责聚划算网站应用前端开发,与后台工程师协作,完成数据交互、动态信息展现; 2. 使用JS或AS编写封装良好的前端交互组件,维护及优化网站前端页面性能; ...

刘恣意
2011/12/02
738
5
unbelievable! 通过Css调用Js代码?

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

顽Shi
2014/07/01
0
21
[JS进阶] 编写可维护性代码

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

赵小宾
2015/04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Idea

command + E : 打开最近编辑过的文件 command + shift + O : 打开指定文件 command + O : 打开指定类 shift+command+delete 打开上一次编辑过的地方 option + command + t 代码块包含 option...

xpttxsok
40分钟前
4
0
FTP 协议 1.0

自己制作的FTP协议:

Explorer0
51分钟前
2
0
Android 通过DrawableInflater加载自定义Drawable

一、Drawable 在Android系统张,图形图像的绘制需要在画布上进行操作和处理,但是绘制需要了解很多细节以及可能要进行一些复杂的处理,因此系统提供了一个被称之为Drawable的类来进行绘制处理...

IamOkay
今天
3
0
灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

yizhichao
今天
2
0
Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部