详解如何较好的使用js


Posted in Javascript onDecember 16, 2016

1 假如浏览器不支持JavaScript怎么办?

a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。

详解如何较好的使用js

b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求)

例子:在一个新窗口里打开链接,可以使用BOM的open()方法

function popUp(winURL) {
 window.open(winURL, "popup", "width=320,height=480");
}

具体的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=0; 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 > 0) {
 for (var i=0; i<links.length; i++) {
 //......
 }
}

就要比下面的代码性能要好

if (document.getElementsByTagName("a").length > 0) {
    var links = document.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
    //......
    }
}

b.合并脚本(js代码),减少页面加载时发送的请求数量;将<script>标签放置于文档末尾,在</body>结束之前,这样可以让页面加载的快些,且不影响js的加载。

c.压缩脚本,将js代码中不必要的空格、注释删除,甚至可以将变量名简化。可以准备两个版本的js:一个是工作版本,用于修改代码和注释,另一个为精简版本,则用于发布。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 #Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 #Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 #Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 #Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 #Javascript
You might like
简单的php写入数据库类代码分享
2011/07/26 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
员工培训邀请函
2014/02/02 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
学习两会精神心得范文
2014/03/17 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
授权收款委托书
2014/09/23 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书