Javascript与当前项目的思考

2013-10-25 23:20 by 不屈小强, 592 阅读, 5 评论, 收藏, 编辑

主体分为以下三部分,能力、经验有限,欢迎拍砖。

1.低效的代码

2.面向对象的重构重复利用代码

3.调试的经验总结

第一部分日常中低效的代码

加载和运行

<html>

<head>

<title>Script Example</title>

</head> <body>

<p>

document.write("The date is " + (new Date()).toDateString());

</script> </p>

</body> </html>

当浏览器遇到一个<script>标签时,正如上面 HTML 页面中那样,无法预知 JavaScript 是否在<p>标签中添加内容。因此,浏览器停下来,运行此 JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。

一个<script>标签可以放在 HTML 文档的<head>或<body>标签中,可以在其中多次出现。传统上,<script>标签用于加载外部 JavaScript 文件

第一个 JavaScript 文件开始下载,并阻塞了其他文件的下载过程。进一步,在 file1.js 下载完之后和 file2.js 开始下载之前有一个延时,这是 file1.js 完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。当这些文件下载时,用户面对一个空白的屏幕。这就是几年前(现在当网速较慢时,仍可重现这个问题)大多数浏览器的行为模式。

因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有<script>标签放在尽可能接近<body> 标签底部的位置,尽量减少对整个页面下载的影响。例如:

<html>

<head>

<title>Script Example</title>

<body>

<p>Hello world!</p>

<-- Example of recommended script positioning -->

</body>

</html>

数据访问

数据存储在哪里, 关系到代码运行期间数据被检索到的速度。在 JavaScript 中,此问题相对简单,因为数据存储只有少量方式可供选择。正如其他语言那样,数据存储位置关系到访问速度。在 JavaScript 中有四种基本的数据访问位置:

直接量(Literal values)

直接量仅仅代表自己,而不存储于特定位置。

JavaScript 的直接量包括:

字符串(string),数字(Number),布尔值(Boolean),对象(Object), 数组(Array),函数(Function),正则表达式(RegExp),具有特殊意义的空值(null),以及未定义(undefined)。

变量(Variables)

我们使用 var 关键字创建用于存储数据值。

数组项(Array items)

具有数字索引,存储一个 JavaScript 数组对象。

对象成员(Object members)

具有字符串索引,存储一个 JavaScript 对象。

每一种数据存储位置都具有特定的读写操作负担。大多数情况下,对一个直接量和一个局部变量数据访问的性能差异是微不足道的。

管理作用域(Managing Scope)

作用域概念是理解 JavaScript 的关键,不仅从性能的角度,而且从功能的角度。作用域对 JavaScript 有许多影响,从确定哪些变量可以被函数访问,到确定 this 的值,首先要理解作用域的工作原理。

作用域链和标识符解析(Scope Chains and Identifier Resolution)

每一个 JavaScript 函数都被表示为对象。进一步说,它是一个函数实例。函数对象正如其他对象那样, 拥有你可以编程访问的属性,和一系列不能被程序访问,仅供 JavaScript 引擎使用的内部属性。

内部[Scope]属性包含一个函数被创建的作用域中对象的集合。此集合被称为函数的作用域链,它决定哪些数据可由函数访问。此函数作用域链中的每个对象被称为一个可变对象,每个可变对象都以“键值对”

的形式存在。当一个函数创建后,它的作用域链被填充以对象,这些对象代表创建此函数的环境中可访问的数据。例如下面这个全局函数:

function add(num1, num2)

{

　　var sum = num1 + num2;

　　return sum;

}

当 add()函数创建后,它的作用域链中填入一个单独的可变对象,此全局对象代表了所有全局范围定义的变量。此全局对象包含诸如窗口(window)、浏览器(browser)和文档(DOM)之类的访问接口。(注意: 此图中只画出全局变量中很少的一部分,其他部分还很多)。

补充：web前端 , JavaScript ,