zl程序教程

您现在的位置是:首页 >  工具

当前栏目

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

QQJSHTMLCSSSDK 以及 登录 研究
2023-09-27 14:29:22 时间

       研究过腾讯提供的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);



       只要把上面的代码放入一个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,那么你肯定会比其他同类插件更受欢迎。


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



HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具 邮政编码是地址信息的重要组成部分,可以帮助快递公司、物流公司等对地址进行快速、准确的识别和派送。因此,邮编查询工具应用在许多业务场景中都有广泛的应用,例如:电商平台、物流公司、金融机构等。通过使用邮编查询 API,我们可以快速实现一个邮编查询工具应用,方便用户查询地址对应的邮政编码,提高业务流程的效率。
掌握JavaScript HTML DOM:动态改变CSS样式的实用技巧 随着Web前端技术的不断发展,JavaScript作为一种强大的脚本语言,在前端开发中扮演着重要角色。其中,HTML DOM (文档对象模型)作为JavaScript与HTML之间的桥梁,允许开发者通过JavaScript来改变HTML页面的内容、结构和样式,从而实现丰富的用户交互和动态效果
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示 全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统,通过API接口的方式,向用户提供快递物流信息的查询、跟踪、统计等功能。
HTML中的JavaScript文档模式 HTML中的JavaScript文档模式是指浏览器在解析HTML文档时采用的模式,它可以影响文档的呈现方式和JavaScript的行为。本文将介绍文档模式的分类和作用,以及如何设置文档模式。
龙轩8023 熟悉javaee开发,有多年支付领域的开发经验。关注开源~ httpclientUtil开源项目创建者。https://github.com/Arronlong