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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php提高网站效率的技巧
2015/09/29 PHP
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
高中美术教学反思
2014/01/19 职场文书
煤矿安全生产标语
2014/06/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
商业门面租房协议书
2014/11/25 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
高中体育课教学反思
2016/02/16 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL