详解如何较好的使用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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
浅析Jquery操作select
Dec 13 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jQuery实现高级检索功能
May 28 jQuery
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 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 表单数据的获取代码
2009/03/10 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
给客户的道歉信
2014/01/13 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
村班子对照检查材料
2014/08/18 职场文书
最美家庭活动方案
2014/08/31 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
计算机实训报告范文
2014/11/05 职场文书
护士个人总结范文
2015/02/13 职场文书
行政复议答复书
2015/07/01 职场文书
公司仓库管理制度
2015/08/04 职场文书