详解如何较好的使用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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JS判定是否原生方法
Jul 22 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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静态文件生成类实例分析
2015/01/03 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python算法应用实战之队列详解
2017/02/04 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python列表推导式入门学习解析
2019/12/02 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
程序集与命名空间有什么不同
2014/07/25 面试题
百度JavaScript笔试题
2015/01/15 面试题
董事长助理工作职责
2014/06/08 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2014年底个人工作总结
2015/03/10 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
python字符串常规操作大全
2021/05/02 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers