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 18 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 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 木马攻击防御技巧
2009/06/13 PHP
php中{}大括号是什么意思
2013/12/01 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Javascript之文件操作
2007/03/07 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
村党支部公开承诺书
2014/05/29 职场文书
消防工作实施方案
2014/06/09 职场文书
2016公司年会通知范文
2015/04/25 职场文书
酒店员工手册范本
2015/05/14 职场文书
招商银行工作证明
2015/06/17 职场文书
天气温馨提示语
2015/07/14 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
nginx服务器的下载安装与使用详解
2021/08/02 Servers