javascript学习总结之js使用技巧


Posted in Javascript onSeptember 02, 2015

1 假如浏览器不支持JavaScript怎么办?

a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。

javascript学习总结之js使用技巧

b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求)

例子:在一个新窗口里打开链接,可以使用BOM的open()方法

function popUp(winURL) {
   window.open(winURL, "popup", "width=,height=");
 }

具体的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=; 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 > ) {
     for (var i=; i<links.length; i++) {
     //......
   }
 }

就要比下面的代码性能要好

if (document.getElementsByTagName("a").length > ) {
   var links = document.getElementsByTagName("a");
   for (var i=; i<links.length; i++) {
   //......
   }
 }

b.合并脚本(js代码),减少页面加载时发送的请求数量;将<script>标签放置于文档末尾,在</body>结束之前,这样可以让页面加载的快些,且不影响js的加载。

c.压缩脚本,将js代码中不必要的空格、注释删除,甚至可以将变量名简化。可以准备两个版本的js:一个是工作版本,用于修改代码和注释,另一个为精简版本,则用于发布。

javascript对象

javascript学习总结之js使用技巧

以上内容就是本文给大家介绍javascript学习总结之js使用技巧,希望大家喜欢。

Javascript 相关文章推荐
文件编码导致jquery失效的解决方法
Jun 26 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 #Javascript
自定义刻度jQuery进度条及插件
Sep 02 #Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
浅谈php提交form表单
2015/07/01 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
讲解Python中的标识运算符
2015/05/14 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python调用c++传递数组的实例
2019/02/13 Python
python如何制作缩略图
2019/04/30 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
学生励志演讲稿
2014/01/06 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
高级销售求职信
2014/02/21 职场文书
情人节寄语大全
2014/04/11 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python