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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
解决vue中的无限循环问题
Jul 27 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python中的计时器timeit的使用方法
2017/10/20 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
详解Python字典的操作
2019/03/04 Python
python线程信号量semaphore使用解析
2019/11/30 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
物控部经理职务说明书
2014/02/25 职场文书
节约电力资源的建议书
2014/03/12 职场文书
学术会议主持词
2014/03/17 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
食品安全承诺书
2014/05/22 职场文书
五水共治一句话承诺
2014/05/30 职场文书
化验室岗位职责
2015/02/14 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python