javascript学习总结之js使用技巧
作者:mrr 发布时间:2024-04-18 10:59:16
1 假如浏览器不支持JavaScript怎么办?
a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。
b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求)
例子:在一个新窗口里打开链接,可以使用BOM的open()方法
function popUp(winURL) {
window.open(winURL, "popup", "width=,height=");
}
具体的js实现有以下几个方案:
方案一:使用javascript伪协议:
<a href="javascript:popUp('http://www.example.com');return false;">Example</a>方案二:使用内嵌的事件处理函数:
<a href="#" onclick="popUp('http://www.example.com');return false;"></a>以上两种种实现方案,在js被禁用时,“在一个新窗口里打开链接”这个需求就无法满足了。所以,不能为了单纯使用js而滥用js。下面这个实现方案就为js预留出了退路,即所谓平稳退化(留好js被禁后的退路)
方案三:平稳退化<a href="http://www.example.com" onclick="popUp(this.href;return false;)">
2 如何将网页的结构、内容与JavaScript脚本的动作分离开?为什么要分离开?
a.分工明确,各干各的,然后才是协作:
网页结构、内容-由html来做、网页的样式-由CSS来做、网页的行为-由JavaScript来做
b.分离js代码其实很简单,js代码不要求事件必须在html中处理,可以在外部js文件里将一个事件添加到html文档中的某个元素上。例如:
window.onload = paperLinks
function paperLinks() {
var links = document.getElementsByTagName("a");
for (var i=; i<links.length;i++){
if (links[i].getAttribute == "popup") {
linnks[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
3 浏览器的兼容性问题
新老要通吃,尤其要注意老的,即向后兼容。不同的浏览器对js的支持程度不一样,比如
document.getElementsByClassName(classname)IE6就不支持,加一个检查语句就可以检查兼容性问题:if(!document.getElementsByClassName) return false;
4 性能考虑
为什么要考虑脚本执行的性能?性能是永远要考虑的问题,这涉及到你编写的网页能否顺利的加载。
如何保证脚本执行的性能是最优的?
a.尽量少访问dom和少使用标记,例如:少用循环遍历
var links = document.getElementsByTagName("a");
if (links.length > ) {
for (var i=; i<links.length; i++) {
//......
}
}
就要比下面的代码性能要好
if (document.getElementsByTagName("a").length > ) {
var links = document.getElementsByTagName("a");
for (var i=; i<links.length; i++) {
//......
}
}
b.合并脚本(js代码),减少页面加载时发送的请求数量;将<script>标签放置于文档末尾,在</body>结束之前,这样可以让页面加载的快些,且不影响js的加载。
c.压缩脚本,将js代码中不必要的空格、注释删除,甚至可以将变量名简化。可以准备两个版本的js:一个是工作版本,用于修改代码和注释,另一个为精简版本,则用于发布。
javascript对象
以上内容就是本文给大家介绍javascript学习总结之js使用技巧,希望大家喜欢。
猜你喜欢
- 在用户研究工作中,如何让自己的数据和结论更有说服力,是很重要的问题。最近将自己积累的用研信度和效度的笔记整理一下,罗列在文中,希望对大家有所
- scipy.optimize函数使用简单使用scipy.optimize,训练逻辑回归损失函数,得到权值。scipy.optimize模块包
- GOPATH设置go 命令依赖一个重要的环境变量:$GOPATH1(注:这个不是Go安装目录。下面以笔者的工作目录为说明,请替换自己机器上的
- 离散特征的编码分为两种情况: 1、离散特征的取值之间没有大小的意义,比如color:[red,blue],那么就使用one-hot编码2、离
- Python通过命令提示符安装matplotlib:1.直接打开命令提示符(快捷键窗口+ r)2.若提示安装失败(Python - 您正在使
- 本文实例讲述了Python发送邮件功能。分享给大家供大家参考,具体如下:这里以QQ邮箱为例说明登录邮箱点账号开启smtp开启时会要求你发送一
- 0 引言上周被一则新闻震惊到了,《2454万元大奖无人认领!福彩史上第二大弃奖在广东中山产生 》,在2019年5月2日开奖的双色球中,广东中
- 国庆假期快到了,想查查还有几天几小时到假期,这对程序员
- 二、导航功能增强 1. 下拉菜单中的链接(Links in Select Menu)Q:我如何实现在下拉菜单中链接到不
- PyQt5状态栏控件QStatusBar简介MainWindow对象在底部保留有一个水平条,作为状态栏(QstatusBar),用于显示永久
- 我们可以使用matplotlib.pyplot.locator_params()来控制刻度线 * 的行为。 即使通常会自动确定标记点的位置,
- 数据平台 Kaggle 近日发布了 2017 机器学习及数据科学调查报告,这也是 Kaggle 首次进行全行业调查。调查共收到超过 1600
- 一:代码实现class TreeNode: """节点类""&q
- 一: 安装命令jupyter: pip install jupyter如果缺少依赖,缺啥装啥二: 运行 jupyter notebook首先
- 之前在网上看过一些介绍Django处理请求的流程和Django源码结构的文章,觉得了解一下这些内容对开发Django项目还是很有帮助的。所以
- Python是一门简单易学的编程语言,语法简洁而清晰,并且拥有丰富和强大的类库。与其它大多数程序设计语言使用大括号不一样 ,它使用缩进来定义
- MySQL数据库的备份有很多工具可以使用,这两天写了一个使用C#调用MYSQL的mysqldump命令完成MySQL数据库的备份与恢复的小工
- Django的数据库层从Python代码生成SQL schemas—但是对于遗留数据库,你已经拥有SQL schemas. 这种情况,你需要
- 今儿继续做项目,学习了Django的forms生成前端的代码。forms.pyclass SignupForm(forms.Form): &
- 在提交添加或修改内容时,需要对关键数据进行判空处理,如何在js中判断checkboxlist是否有选择项呢? 具体操作如下: var Che