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用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
JS实现分页导航效果
Feb 19 Javascript
详解Javascript实践中的命令模式
May 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
django如何自己创建一个中间件
2019/07/24 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
保安自我鉴定范文
2013/12/08 职场文书
职业规划书如何设计?
2014/01/09 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
村安全生产责任书
2014/08/25 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
店铺转让协议书
2015/01/29 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Python实战之实现简易的学生选课系统
2021/05/25 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python