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 相关文章推荐
含有CKEditor的表单如何提交
Jan 09 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
微信小程序入门教程
Nov 18 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 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
德生PL990的分析评价
2021/03/02 无线电
PHP中的Trait 特性及作用
2016/04/03 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python 字符串格式化代码
2013/03/17 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python字典遍历操作实例小结
2019/03/05 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python中字符串的编码与解码详析
2020/12/03 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
市场营销方案范文
2014/03/11 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
公司周年庆活动方案
2014/08/25 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书