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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
简单的js分页脚本
May 21 Javascript
javascript 必知必会之closure
Sep 21 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python dumps和loads区别详解
2020/02/04 Python
Python自动创建Excel并获取内容
2020/09/16 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
房地产开发项目建议书
2014/05/16 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
应急管理工作总结2015
2015/05/04 职场文书
胡桃夹子观后感
2015/06/11 职场文书
迎新生晚会主持词
2015/06/30 职场文书
运动会通讯稿200字
2015/07/20 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server