文档章节

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

白志华
 白志华
发布于 2015/10/18 10:55
字数 795
阅读 8
收藏 0
点赞 0
评论 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
博文 260
码字总数 57524
作品 0
长沙
程序员
再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer ⋅ 06/21 ⋅ 0

Webpack4+ 多入口程序构建

欢迎关注富途web开发团队,缺人从众 其实,说实话这篇文章的由来也是有很多的原因在里面的。在这之前,我也做过不少的项目。有新的项目,也有旧的项目。通过对旧项目的不断研究,改进。再结合...

富途web开发团队 ⋅ 05/10 ⋅ 0

CC框架实践(3): 让jsBridge更优雅

前言 CC框架下如何让我们的jsBridge更加优雅? jsBridge是作为js和java之间通信的桥梁,本身它的职责只是完成通信。 本文不是介绍js与java通信过程的实现,你可以使用第三方库(如:JsBridg...

lucky_billy ⋅ 06/20 ⋅ 0

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下。 使用方法略过,这里将介绍如何实现打印多页是可以分页。 现在提供两种方法思路: 1、根据特定的打印机型号和使用的纸张类型,...

easonjim ⋅ 2015/10/18 ⋅ 0

Auth0的子域名潜在的安全问题可允许攻击者发起网络钓鱼攻击

        最近,研究人员又发现了Auth0的身份认证服务存在潜在的漏洞,这可能会让攻击者伪装成合法网站并收集访问者的敏感信息。   Imperva的研究人员与6月5号发现,Auth0的子域名容易...

嘶吼RoarTalk ⋅ 06/13 ⋅ 0

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

BUF早餐铺 开发者误读芯片厂商调试文档导致出现新内核漏洞;报告称伊朗可能针对制裁发动网络攻击;西安警方破获假借区块链之名进行网络传销案件

  今天是5月11日星期五,今天的主要内容有:开发者误读芯片厂商调试文档导致出现新内核漏洞;SAP修复旗下产品十多个产品漏洞;报告称伊朗可能针对制裁发动网络攻击;Excel加入JS功能可能被...

FreeBuf ⋅ 05/11 ⋅ 0

JavaScript设计模式之观察者模式

前言 准备研究一下MVVM的一些东西,由于MVVM运用了观察者模式的思想,因此翻开了《JavaScript设计模式与开发实践》一书,将观察者模式学习了一遍,顺便有对一些常用的设计模式进行一些了解,...

Srtian ⋅ 05/22 ⋅ 0

WEB前端学习JavaScript知识点:说清楚深拷贝和浅拷贝的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/28 ⋅ 0

一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天 ⋅ 04/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

在java中读取文件(也支持读取jar中的文件)

getClass().getResourceAsStream("文件名.格式"); 这个方法是用于获取当前类所在目录下的文件;需要将文件放到和当前类同一个包下面 比如我有个类在 com.test这个包下, 要读取一个test.jpg的图...

太黑_thj ⋅ 53分钟前 ⋅ 0

CentOS 7 源码编译安装 MySQL 5.7记录

没事瞎折腾,本来可以yum安装,却偏偏去要编译源码。 1. 安装依赖包 1). 安装cmake等依赖 # yum install cmake ncurses ncurses-devel bison bison-devel 2). 安装boost 1.59.0 # wget htt...

admin_qing ⋅ 55分钟前 ⋅ 0

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部