javascript学习总结(三):如何较好的使用js。

1 假如浏览器不支持JavaScript怎么办?
a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。

b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求)
例子:在一个新窗口里打开链接,可以使用BOM的open()方法

1 function popUp(winURL) {
2     window.open(winURL, "popup", "width=320,height=480");
3 }

具体的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文档中的某个元素上。例如:

 1    window.onload = paperLinks
 2    function paperLinks() {
 3     var links = document.getElementsByTagName("a");
 4        for (var i=0; i<links.length;i++){
 5         if (links[i].getAttribute == "popup") {
 6             linnks[i].onclick = function() {
 7                 popUp(this.getAttribute("href"));
 8                 return false;
 9             }
10         }
11        }
12    }

3 浏览器的兼容性问题

新老要通吃,尤其要注意老的,即向后兼容。不同的浏览器对js的支持程度不一样,比如document.getElementsByClassName(classname)IE6就不支持,加一个检查语句就可以检查兼容性问题:if(!document.getElementsByClassName) return false;

4 性能考虑
为什么要考虑脚本执行的性能?性能是永远要考虑的问题,这涉及到你编写的网页能否顺利的加载。
如何保证脚本执行的性能是最优的?
a.尽量少访问dom和少使用标记,例如:少用循环遍历

1 var links = document.getElementsByTagName("a");
2     if (links.length > 0) {
3         for (var i=0; i<links.length; i++) {
4         //......
5     }
6 }

就要比下面的代码性能要好

1 if (document.getElementsByTagName("a").length > 0) {
2     var links = document.getElementsByTagName("a");
3     for (var i=0; i<links.length; i++) {
4     //......
5     }
6 }

b.合并脚本(js代码),减少页面加载时发送的请求数量;将<script>标签放置于文档末尾,在</body>结束之前,这样可以让页面加载的快些,且不影响js的加载。

c.压缩脚本,将js代码中不必要的空格、注释删除,甚至可以将变量名简化。可以准备两个版本的js:一个是工作版本,用于修改代码和注释,另一个为精简版本,则用于发布。

时间: 2024-11-05 16:13:00

javascript学习总结(三):如何较好的使用js。的相关文章

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo 前言 在JS学习中,对于原生的很多东西我理解得并不透彻.但是使用jQuery来操作DOM,基本上还是非常熟练的.但是对于AJAX数据交互的处理,我不是很理解. 近期团队交给我一个后端全接口提供给我的项目.我要利用这些接口来自己组织前端代码.为了学习,我决定不使用VUE或者其他的前端框架来做.而是只使用jQuery框架,数据的部分全部使用拼接字符串的形式实现. 获取数据,显示数据,提交数据. 在这个项目中(

JavaScript学习笔记(三)——this、原型、javascript面向对象

一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化,当然也可以使用call.apply修改this指向的对象.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 1.1.JavaScript中函数与方法的区分 在面向过程的语言中我们习惯把完成某个特定功能的代码块称为“函数”或“过程”,当然过程一般没有返回值.在面向对象语言中我们把对象的功能

javascript学习(三) 内置对象

一:事件(Event)对象 在触发dom事件的时候都会产生一个event对象 type   获取事件类型 target  获取事件目标 stopPropagation()  阻止事件冒泡 preventDefault() 阻止事件默认行为 eg: 二:string对象 lenget          长度 indexof()     位置 march()       内容匹配 replace()      替换 toUpperCase  大小写转换 split()          字符串变为数

Javascript学习第三天

学习了很多变量,今天主打的是数组<Array>与字符串<String>,现整理一些笔记如下: 数组的功能总体来说可以分为"增删改查"四个功能,其中"增"里面又包括:.unshift(头)..push(尾)..concat(全部连接)"删"里面包括.splice(万能)..pop(删除并返回被删除的数据).shift(移出,直接修改数组本身)"改"里面包括.toString(转换为字符串)..sort(排

JavaScript学习第三天(Math对象以及正则表达式)

一:Math(算数)对象的作用是:执行常见的算数任务. 常用的Math方法有: round(a):四舍五入a random():随机数(输出(0,11)之间的随机数 Math.floor(Math.random()*11) ) max(a,b):输出a,b中较大的值 二:JavaScript RegExp 对象(正则表达式) 1.什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的模式可以是一个单

JavaScript学习笔记三:JavaScript对象

一.前言 对象的基本概念:Javascript提供了多个内建对象,比如String.Data.Array等等.对象指的是带有属性和方法的特殊数据类型 创建对象:创建JavaScript对象主要有两种不同的方法:第一.定义创建对象的实例:第二,使用函数来定义对象,然后创建新的对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

Javascript学习总结三(Array对象的用法)

javascript Array对象的常用API 1:concat concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例:var a1 = ['aa','bb'];var a2 = ['cc','dd'];var a3 = a2.concat(a1); 2:every every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供).every() 方法使用指定函数检测数组中的所有元素:如果数组中检测到有一个元素不满足,则整个表

JavaScript学习第三天(JavaScript Cookies)

cookie 用来识别用户. 实例 创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息. 什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 有关cookie的例子: 名字 cookie 当访问者首次访问页面时,他或她也许会填

前端乱煮之javascript学习笔记三

1 DOM即为文档对象模型,在html页面加载完成后,浏览器会创建页面的文档对象模型,它看来像是一棵树,有根节点,以及其他的节点. 而通过可编程的对象模型,javascript可以获得创建动态HTML的能力.比如,javascript可以改变HTML所有的元素.可以改变这些元素的属性.可以改变这些元素的样式和能对该页面内的事件作出反应. 2 要想对页面内的元素进行操作,首先就要获得这个元素.通常有三种获得元素的方法,分别是 通过Id来获得元素: 通过标签来获得元素: 通关类名来获得元素: 3 通

JavaScript学习笔记三:基本概念(1)

1. JS中的一切(变量.函数名.操作符等)都区分大小写.--true是boolean值,而True只是标识符. 2. JS语句以分号结尾,但不是必需的,原因: a. 结尾没有分号有时会导致压缩错误. b. 加上分号在某些情况下会为解析器提供方便,增进代码的性能. 3. 不同的ECMAScript版本对关键字和保留字的定义不同,但最好在JS代码中永远都不用任何关键字和保留字,以便与将来的ECMAScript版本兼容. 4. ECMAScript的变量是松散类型的,就是一个变量没有特定的类型限制,