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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
js实现分割上传大文件
Mar 09 Javascript
简单的JS轮播图代码
Jul 18 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 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中error与exception的区别及应用
2014/07/28 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python随机数random模块使用指南
2016/09/09 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
详解Django中间件执行顺序
2018/07/16 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python动态进度条的实现代码
2019/07/03 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
函授本科毕业自我鉴定
2013/10/09 职场文书
物流仓管员工作职责
2014/01/06 职场文书
党员培训思想汇报
2014/01/07 职场文书
主持词开场白
2014/03/17 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
python requests模块的使用示例
2021/04/07 Python
golang使用map实现去除重复数组
2022/04/14 Golang