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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
javascript简单链式调用案例分析
May 10 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
vue-router项目实战总结篇
Feb 11 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Python中反射和描述器总结
2018/09/23 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
食堂标语大全
2014/06/11 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
安全生产先进个人总结
2015/02/15 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python re.sub 反向引用的实现
2021/07/07 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Pandas 数据编码的十种方法
2022/04/20 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python