详解如何较好的使用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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
如何使用JavaScript实现栈与队列
Jun 24 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
第十三节--对象串行化
2006/11/16 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php实现简易计算器
2020/08/28 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
参观考察邀请函范文
2014/01/29 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
担保贷款承诺书
2015/04/30 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python