从QQ登录的js sdk中,研究html、css以及js的解耦
2014-08-26 09:05
369 查看
研究过腾讯提供的QQ登录js sdk版本(飞机票)的读者,可能会注意到,只要引入一个js,然后再设置一个span标签,就可以使用js实例化出一个QQ登录按钮来。如果你查看页面源码,会发现页面自动引入了很多个js文件,这是为什么呢??
其实很简单,就是从你引入的这个js,会动态加载其他js或css等资源文件。这个技术并不复杂,也很常见。如果你了解chrome插件的话,你就会发现,这些插件就可以随意更改页面样式、添加各种js、css等页面资源。
咱先不说这样做有什么好处,先就跟大家分享一下我自己写的代码吧:
只要把上面的代码放入一个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,那么你肯定会比其他同类插件更受欢迎。
其实说白了,这就是一种“偷懒”行为。但是正是因为“偷懒”,才会更受欢迎。因为会“偷懒”的人,能更好的为用户服务。所以快来“偷懒”吧。
其实很简单,就是从你引入的这个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,那么你肯定会比其他同类插件更受欢迎。
其实说白了,这就是一种“偷懒”行为。但是正是因为“偷懒”,才会更受欢迎。因为会“偷懒”的人,能更好的为用户服务。所以快来“偷懒”吧。
相关文章推荐
- 从QQ登录的js sdk中,研究html、css以及js的解耦
- java.html+css.js.数据库开发用户注册以及用户登录
- qq第3方登录的JS实现方式 js_sdk
- QQ登录JS SDK课程,调用openapi接口
- html,css,js实现老虎机游戏以及出现的问题
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- Html+css+js+jquery实现简单页面登录
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- 利用JS_SDK实现QQ第三方登录
- JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- jsp.html中的引入js.css文件的问题,以及文件路径详解。
- jsp.html中的引入js.css文件的问题,以及文件路径详解。
- 通过js sdk 来进行第三方登录及授权(微博,微信,qq)
- js_SDK实现第三方qq,微博登录
- [WEB]知乎登录背景——html/css/js实现
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- qq第三方登录js_sdk
- 利用JS_SDK实现QQ第三方登录
- 通过js sdk 来进行第三方登录及授权(微博,微信,qq)