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 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
js实现下拉框二级联动
Dec 04 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 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和.net的区别
2014/09/28 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JS与C#编码解码
2013/12/03 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Python 实现简单的客户端认证
2020/07/29 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
智能电子应届生求职信
2013/11/10 职场文书
高三学习决心书
2014/03/11 职场文书
中学校庆方案
2014/03/17 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
公司收款委托书范本
2014/09/20 职场文书
葬礼主持词
2015/07/02 职场文书
学习委员竞选稿
2015/11/20 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python