详解如何较好的使用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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解JS模块导入导出
Dec 20 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
详解Python爬虫的基本写法
2016/01/08 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
普通PHP程序员笔试题
2016/01/01 面试题
英语专业推荐信
2013/11/16 职场文书
加工操作管理制度
2014/01/19 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
设计师求职信模板
2014/05/06 职场文书
考博专家推荐信
2014/05/10 职场文书
英语教师求职信
2014/06/16 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
商场促销活动总结
2014/07/10 职场文书
商铺门前三包责任书
2014/07/25 职场文书
最美护士演讲稿
2014/08/27 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2014年设计师工作总结
2014/11/25 职场文书
三孔导游词
2015/02/05 职场文书
团结主题班会
2015/08/13 职场文书
企业法人任命书
2015/09/21 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书