第五章 最佳实践
创始人
2025-05-28 14:10:37

平稳退化

JS用window对象的open()方法来创建新的浏览器窗口。

window.open(url,name,feature);

第一个参数:要打开网页的url。
第二个参数:窗口的新名字,可以通过这个名字与新窗口通信。
第三个参数:是一个字符串,内容是新窗口的属性,尺寸…

伪协议
真协议如http,伪协议则是一种非标准化的协议

Example

支持伪协议的浏览器可以运行,不支持或者禁用的就不行了

内嵌的事件处理函数

example

如果禁用了浏览器的javascript功能,和上面代码相同,也不能平稳退化。
正解

Example

分离JavaScript

在html文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个“挂钩”,如css中的id、class属性,把JS代码调用行为与HTML文档的结构和内容分开,网页就会健壮的多。

var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++){if (links[i].getAttribute("class") == "popup"){links[i].onclick = function () {popUp(this.getAttribute("href"));return false;}}
}

但是上述代码,因为第一句,可能不能正常执行。如果JS文件是在头部调用的,它将在HTML文档之前加载到浏览器里。如果在身体底部,也不能保证哪个文件最先加载结束。因为脚本加载时文档可能不完整,所以没有完整的DOM模型,getElementsByTagName等方法就不能正常执行。

综上:必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。

文档被加载到一个浏览器里,document对象又是window对象的一个属性。当window对象触发onload事件时,document对象已近存在。
所以我们要像下面修改代码,DOM就可以正常工作了。

window.onload = prepareLinks;
function prepareLinks() {var links = document.getElementsByTagName("a");for (var i=0; i < links.length; i++){links[i].onclick = function () {popUp(this.getAttribute("href"));return false;}
}
function popUp(winURL){window.open(winURL,"popup","width=320,height=480");
}

向后兼容

对象检测

检测浏览器对JS的支撑程度,把某个方法打包在一个if语句里,来决定应该采取怎样的行动。这种检测称为对象检测
检测的时候一定要删除方法名后面的圆括号

浏览器嗅探技术

指通过提取浏览器供应商提供的信息来解决向后兼容的问题。(逐渐淘汰)

性能考虑

尽量少访问DOM和尽量减少标记

低性能案例

if (document.getElementsByTagName("a").length > 0){var links = document,getElementsByTagName("a");for( var i = 0; i < links.length; i++){//对每个链接做点处理}
}

低性能原因:不管什么时候,只要是查询DOM中的某些元素,浏览器都会搜索整个DOM树。
正解

var links = document,getElementsByTagName("a");
if (document.getElementsByTagName("a").length > 0){for( var i = 0; i < links.length; i++){//对每个链接做点处理}
}

合并和放置脚本





上面的做法是不推荐的,推荐的是把四个脚本合并到一个脚本文件中。

脚本放置的位置:""标签前面。

压缩脚本

所谓压缩脚本,就是把脚本文件中不必要的字节,如空格和注释,都删除掉,从而达到“压缩“文件的目的。

相关内容

热门资讯

“Script“ 标签 1. “Script” 标签 可以使用 script 标签将任何 js 代码嵌入到 html 中 当...
特朗普关税被法院叫停,风险资产... 蒋立冬 派生万物AI 图特朗普关税“被叫停”后,亚洲股市应声走高。截至5月29日收盘,日经225指数...
图神经网络之CNN与GCN的联... 一、CNN(Convolutional Neural Network)卷...
DJ2-2 Web应用和HTT... 目录 1. Web 和 HTTP 常用术语 2. HTTP 概述 3. TCP 和 HTTP 4. ...
nginx-http-1 HTTP介绍 HTTP协议是Hyper Text Transfer Protocol(...
V观财报|“四连板”均瑶健康:...   中新经纬5月29日电 29日,均瑶健康再发股票交易异常波动公告。  公告显示,均瑶健康于5月28...
OceanMind海睿思受邀参... 近日,由江苏省工业和信息化厅、宜兴市人民政府指导,宜兴市工业和信息化局、...
SpringBoot Rabb... SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见。 程序员每天的C...
为了赶走烂物业,我被举报到纪委... 我本是为了维护自身权益,试图赶走那令人不满的烂物业。然而,未曾想此举竟让我陷入了意想不到的境地。不知...
*ST围海:签订1.82亿元重... 新京报贝壳财经讯 5月29日,*ST围海公告,公司与文成县水利发展有限公司签署了“文成县城防洪提升工...
宇树回应更名“股份有限公司” ... 5月29日,有消息称,宇树科技向合作伙伴发布通知称,因公司发展需要,杭州宇树科技有限公司即日起名称变...
美股七巨头交出超预期一季报:提... 围绕关税和AI(人工智能)两大话题,美股科技“七巨头”发布了基本超出预期的一季报。近日,美股科技“七...
LuaJIT 常量数组(con... 从LuaJIT Bytecode介绍中可知道,Bytecode关于常量操作的指令均为D...
js 数组中的对象去掉重复的对...  id相同的,保留第一个,其它的删除this.defaultFileLi...
许昌,几线城市?请看2025年... 第一财经·新一线城市研究所 5月28日发布 《2025新一线城市魅力排行榜》 在中国内地337座地级...
拼多多股价波动:牺牲短期业绩,... 5月27日晚,拼多多最新一季度财报发布,营收约957亿人民币,同比增长10%,已经是最近几个季度的最...
额度放开了,再选一遍美债基金~ 转自:懒猫的丰收日 最近,好多美债基金放开了额度, 也有不少小伙伴问美债基金,那就再筛一遍,大概是这...
广州农商银行:唤醒农村沉睡资源... 随着乡村振兴战略的深入实施,农村“三块地”——耕地、宅基地和集体经营性建设用地的改革与盘活,正在成为...
中国艾欧智能团队远程操控机器人... 在2025年度ICRA双臂机器人能力边界挑战赛上,深圳艾欧智能公司凭借其卓越表现,从全球88支参赛队...
同仁堂资本新局 拆分上市在下什... 暌违十多年的资本运作。 《投资者网》蔡俊 暌违十多年,同仁堂(600085.SH,下称“公司”)...
集中上市!增量资金来了 增量资金持续驰援市场,新发ETF密集上市。5月以来,23只ETF上市,9只ETF即将上市,这些ETF...
3.类型、存储和变量 目录 3.1 C#程序是一组类型声明  3.2 类型是一种模板  3.3 实例化类型  3.4 数...
圆通速递今日大宗交易折价成交7... 5月29日,圆通速递大宗交易成交795万股,成交额1.01亿元,占当日总成交额的15.22%,成交价...
最新!宇树科技改名了 证券时报消息,5月29日,宇树科技向合作伙伴发布通知称,因公司发展需要,杭州宇树科技有限公司即日起名...
持续改进与回归 系列文章目录 第一章 敏捷核心知识点 第二章 敏捷宣言与原则 第三章 价值驱动交付-优先级排序&增量...
ST先锋:6月3日起撤销其他风... 5月29日晚间,宁波先锋新材料股份有限公司(ST先锋,300163.SZ)公告,公司股票将于5月30...
双指针 -876. 链表的中间... 开始一个专栏,写自己的博客 双指针,也算是作为自己的笔记吧!...
100%原价买飞天茅台!茅台机... 红星资本局5月29日消息,遵义茅台机场官微发布消息,5月30日-6月30日期间,茅台机场开启2个乘机...
restTemplate未设置... 背景 昨天发版遇到个线上问题,由于运维操作放量时隔离机器过多,导致只有大...
第一批痴迷中古的年轻人,已经袪... 第一批痴迷中古的年轻人,曾如朝圣般追寻那些古老的物件与文化。他们沉浸在中古的世界里,仿佛找到了心灵的...