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 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
js indexOf()定义和用法
Oct 21 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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扩展编写点滴 技巧收集
2010/03/09 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python的re模块正则表达式操作
2016/05/25 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
事务机电主管工作职责
2014/02/25 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
大学班级学风建设方案
2014/05/01 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL