详解如何较好的使用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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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配置文件php.ini所在路径的二种方法
2014/05/26 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php实现生成验证码实例分享
2016/04/10 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python封装shell命令实例分析
2015/05/05 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
详解Python发送email的三种方式
2018/10/18 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python 求10个数的平均数实例
2019/12/16 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
卫生院健康教育实施方案
2014/06/07 职场文书
课外小组活动总结
2014/08/27 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
保险公司增员口号
2015/12/25 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android