从这篇起，会由浅到深的分析js OO之写类方式，大概会有5-8篇。后面陆续会分析流行库（框架）的写类方式。为了讨论的单一性，暂不考虑类的继承，(私有,受保护)属性或方法。
EMCA262规范中没有类(class)的概念，js的new只是让他看起来更像c++,java一点。这里说的写类，只是书写js代码风格而已。
1、构造函数方式
/**
* Person类：定义一个人，有个属性name，和一个getName方法
* @param {String} name
*/
function Person(name) {
this.name = name;
this.getName = function() {
return this.name;
}
}
这种风格让我们这些写过java的有点亲切在于构造一个对象需要配置一些参数，参数要赋值给类里面this。但与java的区别是js用function来定义类，参数也无需定义类型。
类写好了，我们造几个对象：
var p1 = new Person("Jack");
var p2 = new Person("Tom");
console.log(p1 instanceof Person);//true
console.log(p2 instanceof Person);//true
控制台输出也证明了p1，p2的确是类Person的对象实例。
这种方式的优点是：可以根据参数来构造不同的对象实例
，缺点是构造时每个实例对象都会生成getName方法版本，造成了� ......
<script language='javascript'>
function toggleAll(cb)
{
var val = cb.checked;
var frm = document.forms[0];
var len = frm.elements.length;
var i=0;
for( i=0 ; i<len ; i++)
{
if (frm.elements[i].type=="checkbox" && frm.elements[i]!=cb)
{
frm.elements[i].checked=val;
}
}
}
</script>
//Sample Usage
<form >
Check ALL
<input type="checkbox" name="checkall" onclick="toggleAll(this)" id="Checkbox1" />
<br>
<input type="checkbox" name="check1" id="Checkbox2" />
<input type="checkbox" name="check2" id="Checkbox3" /& ......
<html>
<body>
<script type="text/javascript">
//方法一
var num_arr= [];
for (var i = 0 ; i < 10 ; i ++)
{
num_arr[i] = i;
}
document.write(num_arr+'</br>');
//方法二
var obj_arr=new Array();
obj_arr[6]='ss';
document.write(obj_arr.length);
</script>
</body>
</html>
......
Grouping Scripts 成组脚本
Since each <script> tag blocks the page from rendering during initial download, it's helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files. Every time a <script> tag is encountered during the parsing of an HTML page, there is going to be a delay while the code is executed; minimizing these delays improves the overall performance of the page.
由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。这个规则对内联脚本和外部脚本同样适用。每当页面解析碰到一个<script>标签时，紧接着有一段时间用于代码执行。最小化这些延迟时间可以改善页面的整体性能。
The problem is slightly different when dealing with external JavaScript files. Each HTTP request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloa ......
Dynamic Script Elements 动态脚本元素
The Document Object Model (DOM) allows you to dynamically create almost any part of an HTML document using JavaScript. At its root, the <script> element isn't any different than any other element on a page: references can be retrieved through the DOM, and they can be moved, removed from the document, and even created. A new <script> element can be created very easily using standard DOM methods:
文档对象模型（DOM）允许你使用JavaScript动态创建HTML的几乎全部文档内容。其根本在于，<script>元素与页面其他元素没有什么不同：引用变量可以通过DOM进行检索，可以从文档中移动、删除，也可以被创建。一个新的<script>元素可以非常容易地通过标准DOM函数创建：
var script = document.createElement_x("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
This new <script> element loads the source file fi ......
XMLHttpRequest Script Injection XHR脚本注入
Another approach to nonblocking scripts is to retrieve the JavaScript code using an XMLHttpRequest (XHR) object and then inject the script into the page. This technique involves creating an XHR object, downloading the JavaScript file, then injecting the JavaScript code into the page using a dynamic <script> element. Here's a simple example:
另一个以非阻塞方式获得脚本的方法是使用XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术首先创建一个XHR对象，然后下载JavaScript文件，接着用一个动态<script>元素将JavaScript代码注入页面。下面是一个简单的例子：
var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement_x("script");
&n ......
最新文章 : javascript