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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
iView框架问题整理小结
Oct 16 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 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截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
yii添删改查实例
2015/11/16 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python中使用支持向量机SVM实践
2017/12/27 Python
Django model select的多种用法详解
2019/07/16 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
浅析Python面向对象编程
2020/07/10 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
年终考核评语
2014/01/19 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
电子商务专业自荐信
2014/06/02 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
欠条样本
2015/07/03 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
5道关于python基础 while循环练习题
2021/11/27 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android