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 相关文章推荐
HTML上传控件取消选择
Mar 06 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
Vue实现手机计算器
Aug 17 Javascript
JavaScript async/await原理及实例解析
Dec 02 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.ini中文版(2)
2006/10/09 PHP
简单的php文件上传(实例)
2013/10/27 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python函数式编程实例详解
2020/01/17 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Python pymsql模块的使用
2020/09/07 Python
如何利用python发送邮件
2020/09/26 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
写给保洁员表扬信
2014/01/08 职场文书
《掌声》教学反思
2014/02/23 职场文书
工商干部先进事迹
2014/05/14 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
python 提取html文本的方法
2021/05/20 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python