详解如何较好的使用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 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
JavaScript控制台的更多功能
Apr 28 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预定义变量9大超全局数组用法详解
2016/04/23 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python 的 Socket 编程
2015/03/24 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python输出带颜色的字符串实例
2017/10/10 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
2015年乡镇发展党员工作总结
2015/03/31 职场文书
党员违纪检讨书
2015/05/05 职场文书
甲午风云观后感
2015/06/02 职场文书
初二物理教学反思
2016/02/19 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
python如何为list实现find方法
2022/05/30 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技