Drupal is an open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world.

安装：很简单了，下载、上传，直接访问URL，自动进入安装过程。

第一次使用：

• 通过 内容>添加内容 来建立一些网页和文章，在添加内容的同时你还可以指定让“内容”自动建立一个菜单项目
• 通过 结构>区块 定义网站各功能区块的位置，表现形式。
• 通过 结构>内容类型 可以创建、修改内容类型，默认的有 Article 和 Basic Page，注意在内容类型定制中可以充分体会到Drupal的强大，可以为内容类型创建新的字段，并指定字段配置、显示方式，这些字段包括 文本、数字、日期，也包括图片、附件、媒体等
• 通过 结构>分类 来建立维护网站的分类（Texonomy 术语) 列表，这些分类可以说Tags形式的平面分类，也可以支持树状的层次分类。分类列表可以通过 内容类型定制来指定某个字段使用某个分类列表。
• 通过 外观>配置 来选择模板，定义模板的一些基本外观参数，比如颜色。
• 至此Drupal已经完成一个简单网站的定制搭建了！你可能在寻找如何建立一个分类（分级）的目录列表，似乎因为文化的差异，Drupal对这个需求似乎不是很重视，你可以在 结构>分类 中发现，每个数术语条目都是可以点击并打开一个简单的文档列表页面的，打开地址类似于：”…./taxonomy/term/x"。你可以复制这些地址，并且用这些地址建立菜单条目，很遗憾，基本的（没有插件支持的）Drupal不能自动完成这项工作。

刚安装完的Drupal具备了一些基本功能，但是如果准备用来建立一个基本的网站的话，我们会发现还缺少一些东西，所以我们需要各种各样“模块”（类似于插件），很快你会发现Drupal有着数量众多的模块，包括编辑器、电子商务、长篇手册、项目管理、电子支付、图片库、媒体库、论坛等等，种类繁多，必有满足你需求的东西。

介绍一些必要模块吧，这个列表类似于装机必备：

• Views：视图定制，可以对各种内容的呈现形式进行深度定制，主要用来实现（定制）各种各样的列表，包括页面列表、区块类别、分类列表等等。
• Taxonomy Menu / Taxonomy Menu Trails ：这一组合可以实现把树状分类结构自动挂接到某个菜单上，并且可以根据当前访问的内容页来正确高亮（HighLight）菜单条目，生成导航路径 (Breadcrumb)。注意：Taxonomy Menu Trails 的配置在内容类型定制页面里面。
• Wysiwyg：强大的可视化编辑器集成，支持Ckeiditor，Fckeditor，TinyMCE等等至少8种主流编辑器
• IMCE： 媒体浏览器，一般用来配合Wysiwyg来实现编辑器插入各种媒体，图片、Flash等等。它还需要一个 IMCE Wysiwyg API bridge ，才能实现和 Wysiwyg 的配合。
• Localization update ： 可以自动检测下载、升级Drupal 核心和各模块的翻译数据
• Media: 类似于IMCE，和IMCE之间选择一个就行了，主要多支持了一个名为“ Media Selector ”的字段控件
• PlUpload: 强大的第三方上传组件集成，支持拖拽上传，进度条等等，但是似乎目前和Drupal7的兼容还有问题。
• insert： 可以把图像和文件字段的内容插入到文本编辑器中去。

1.PHP自5.3版起默认不在支持针对Windows的VC6编译版本，只提供VC9版本的，而APAche官方提供的Apache Windows编译包都是VC6的。所以我们需要使用第三方编译的VC9版本的Apache。

2.PHP 的 None Thread Safe 版本适用于CGI/FastCGI方式，而相应的Thread Safe版本适用于SAPI和Mod方式

3. http://www.apachelounge.com/download/ 这里提供了大量适用于Windows的LAMP有关预编译包，包括VC9版本的Apache和FastCGI，这个网站也是PHP官方推荐的网站。

版本选择及安装包获取

Apache 2.2 VC9   来源： http://www.apachelounge.com/download/
mod_fcgid-2.3.6-win32-x86  http://www.apachelounge.com/download/

PHP 5.3.6 nts vc9  来源：php.com
VC 2008 RunTime vcredist_x86 来源：php.com
XCache-1.3.0-php-5.3.0-nts-Win32-VC9-x86.zip 来源：http://xcache.lighttpd.net/pub/Releases/

安装过程

1. 下载准备好有关安装包，解压apache,php到规划好的目录，比如：d:\server\
2. 按照说明分别把 mod_fcgid.so 和php_xcache.dll 解压到相应的目录
3. 安装 VC 2008 RunTime vcredist_x86
4. 建立配置文件目录，比如 d:\server\confs
5. 分别编辑/建立有关的配置文件，有关配置文件详见下面实例，（配置文件中涉及的路径及具体配置请根据实际情况修改）
6. 使用 httpd -k install -n "service name" 方式手动安装服务

基本目录结构

d:\server
        \apache
        \php5
        \confs
              \apache
              \php5
        \logs
   \wwwroot

配置文件示例

Aapche默认配置文件修改( d:\server\apache\conf\httpd.conf)

#修改 Serverroot
#修改 documentroot

#在文件末尾增加自动搜索配置文件的路径
include "D:/server/confs/apache/*.conf"

php-fcgid.conf (d:\server\confs\apache\)

#加载 mod_fcgid
LoadModule fcgid_module modules/mod_fcgid.so
<IfModule mod_fcgid.c>
    AddHandler fcgid-script .fcgi .php
    #php.ini的存放目录
    FcgidInitialEnv PHPRC "d:/server/confs/php5/"
    # 设置PHP_FCGI_MAX_REQUESTS大于或等于FcgidMaxRequestsPerProcess，防止php-cgi进程在处理完所有请求前退出
    FcgidInitialEnv PHP_FCGI_MAX_REQUESTS 500
    #php-cgi每个进程的最大请求数
    FcgidMaxRequestsPerProcess 500
    #php-cgi最大的进程数
    FcgidMaxProcesses 5
    #最大执行时间
    FcgidIOTimeout 120
    FcgidIdleTimeout 120
    #php-cgi的路径
    FcgidWrapper "D:/server/php-5.3.6-nts/php-cgi.exe" .php
    AddType application/x-httpd-php .php
</IfModule>

#这里是关于prefork的配置，此配置未经验证，而且似乎上面提到apache安装包不是使用prefork模式的
#这段配置放到这里仅仅是留在备用参考，可以不使用
<IfModule prefork.c>
   StartServers       5
   MinSpareServers    5
   MaxSpareServers     10
   ServerLimit    1024
   MaxClients        768
   MaxRequestsPerChild   0
</IfModule>

vh.conf(d:\server\confs\apache\)

#加载一些mod
LoadModule rewrite_module modules/mod_rewrite.so

#定义有关目录、端口、虚拟主机配置

Listen 10.5.183.132:80
NameVirtualHost 10.5.183.132:80

<Directory "D:/wwwroot">
  Options ExecCGI FollowSymLinks ExecCGI #必须有ExecCGI，才能运行PHP
  AllowOverride All
  Order allow,deny
  Allow from all
  DirectoryIndex index.html index.php
</Directory>

<VirtualHost 10.5.183.132:80>
    DocumentRoot "D:/wwwroot/www.test.local"
    ServerName www.test.local
</VirtualHost>

php.ini (d:/server/confs/php5)

[Custom]
;***************************************************
;     Custom Config 这段配置可以直接附加到默认的PHP.ini文件末尾
;***************************************************
date.timezone  = "Asia/Shanghai"
pdo_mysql.default_socket=
cgi.force_redirect = 0
cgi.fix_pathinfo = 1
fastcgi.impersonate = 1;

;session.save_handler = files
;session.save_path = /tmp
session.use_cookies = 1
;session.use_only_cookies = 1

; file_uploads = On
; upload_tmp_dir =
; upload_max_filesize = 2M
; post_max_size = 8M
; memory_limit = 8M

; max_execution_time = 30
; max_input_time = 60

display_errors = on
; error_reporting = E_ALL
log_errors = off
error_log = d:\server\confs\logs\php-error.log

; mysql.connect_timeout = 1
; doc_root = d:\wwwroot

;; 加载Ext
extension_dir = "D:\server\php-5.3.6-nts\ext"
extension = php_mysql.dll
extension = php_mysqli.dll
;extension = php_pdo.dll
extension = php_pdo_mysql.dll
extension = php_mbstring.dll
extension = php_mcrypt.dll
extension = php_gd2.dll
extension = php_bz2.dll
extension = php_curl.dll

[xcache]
;; Xcache 配置
;; 安装成 zend extension (推荐), 路径一般是 "$extension_dir/xcache.so"
;; zend_extension = /usr/local/lib/php/extensions/non-debug-non-zts-xxx/xcache.so
;; Windows 系统例子:
;zend_extension_ts = d:/Servers/Php5.3/ext/php_xcacshedd.dll
;; 或者您也可把 XCache 安装成 extension, 注意确保您的 extension_dir 设置正确, 并把 xcache.so 或者 php_xcache.dll 放到该目录里面
; extension = xcache.so
;; 或者 Win32 系统:
extension = "d:/server/php-5.3.6-nts/ext/php_xcache.dll"

xcache.admin.enable_auth = On
xcache.admin.user = "admin"
; xcache.admin.pass = md5($您的密码)
xcache.admin.pass = "******"

; 这里的多数选项仅在 ini 里可以修改, 这里列出的都是默认值, 除非另外说明

; select low level shm/allocator scheme implemenation
xcache.shm_scheme =        "mmap"
; 禁用: xcache.size=0
; 启用: xcache.size=64M 之类 (任意>0的值) 同时请注意您的系统 mmap 上限
xcache.size  =                64M
; 建议设置为 cpu 数 (cat /proc/cpuinfo |grep -c processor)
xcache.count =                 1
; 只是个参考值, 您可以放心地存储多于此数量的项目(php脚本/变量)
xcache.slots =                8K
; 缓存项目的 ttl, 0=永久
xcache.ttl   =                 0
; 扫描过期项目的时间间隔, 0=不扫描, 其他值以秒为单位
xcache.gc_interval =           0

; 同上, 只是针对变量缓存设置
xcache.var_size  =             8M
xcache.var_count =             1
xcache.var_slots =            8K
; 默认, 允许 ini_set()
xcache.var_ttl   =             0
; 最大ttl值
xcache.var_maxttl   =          0
xcache.var_gc_interval =     300

; 仅测试用
xcache.test =                Off
; /dev/zero 时无效
xcache.readonly_protection = Off
; 对于 *nix 系统, xcache.mmap_path 是文件路径而不是目录, (可以不存在 但是必须能创建).
; 如果您期望启用 ReadonlyProtection, 可以使用类似 "/tmp/xcache"
; 2 个 php 组不会共享同一个 /tmp/xcache
; 对于 Win32 系统, xcache.mmap_path=匿名MAP名字, 不是文件路径. 建议使用 XCache 字眼避免跟其他软件冲突
xcache.mmap_path =    "/tmp/xcache"

; 仅用于 *nix 系统
; 设置为空(禁用) 或者类似 "/tmp/phpcore/"
; 注意该目录应该能被 php 写入文件 (跟 open_basedir 无关)
xcache.coredump_directory =   ""

xcache.cacher =               On
xcache.stat   =               On
xcache.optimizer =           Off

; 如果 xcache.coveragedump_directory 设置为空则本设置自动为 Off
xcache.coverager =          Off

; 请确保本目录能被 coverage viewer 脚本读取 (注意 open_basedir)
; 依赖于 xcache.coverager=On
xcache.coveragedump_directory = ""

[Xdebug]
;Xdebug 配置 ，暂时还没测试Xdebug和Xcache的兼容性，这段配置放在这里仅仅是备用

;zend_extension_ts = "D:\server\php5\ext\php_xdebug-2.0.5-5.3-vc6.dll"
;zend_extension = "D:\server\php5\ext\php_xdebug-2.0.5-5.3-vc6-nts.dll"

xdebug.auto_trace = off ;开启自动跟踪
xdebug.remote_autostart = off ;开启远程调试自动启动
xdebug.remote_enable = 1
xdebug.remote_host = pc-dev.ysh.local
xdebug.remote_port = 9000
;xdebug.remote_handler = “dbgp”
xdebug.show_exception_trace = off ;开启异常跟踪
xdebug.collect_vars = On ;收集变量
xdebug.collect_return = On ;收集返回值
xdebug.collect_params = On ;收集参数

性能测试：静态HTML

测试结果：

Concurrency Level:      10
Time taken for tests:   10.000 seconds
Complete requests:      6554
Failed requests:        0
Write errors:           0
Total transferred:      2157253 bytes
HTML transferred:       288508 bytes
Requests per second:    655.40 [#/sec] (mean)
Time per request:       15.258 [ms] (mean)
Time per request:       1.526 [ms] (mean, across all concurrent requests)
Transfer rate:          210.67 [Kbytes/sec] received

性能测试：CIG方式

配置：

<directory>
    AllowOverride None
    Options None
    Order allow,deny
    Allow from all
</directory>
 
ScriptAlias /php5/ "E:/Servers/Php5.3/"
Action application/x-httpd-fastphp5 "/php5/php-cgi.exe"
AddType application/x-httpd-fastphp5 .php

测试结果：

Concurrency Level:      10
Time taken for tests:   10.016 seconds
Complete requests:      167
Failed requests:        0
Write errors:           0
Total transferred:      9958014 bytes
HTML transferred:       9931338 bytes
Requests per second:    16.67 [#/sec] (mean)
Time per request:       599.738 [ms] (mean)
Time per request:       59.974 [ms] (mean, across all concurrent requests)
Transfer rate:          970.95 [Kbytes/sec] received

性能测试：fcgid方式

配置：

LoadModule fcgid_module modules/mod_fcgid.so

    AddHandler fcgid-script .fcgi .php
    #php.ini的存放目录
    FcgidInitialEnv PHPRC "e:/Servers/Apache-confs/"
    # 设置PHP_FCGI_MAX_REQUESTS大于或等于FcgidMaxRequestsPerProcess，防止php-cgi进程在处理完所有请求前退出
    FcgidInitialEnv PHP_FCGI_MAX_REQUESTS 500
    #php-cgi每个进程的最大请求数
    FcgidMaxRequestsPerProcess 500
    #php-cgi最大的进程数
    FcgidMaxProcesses 5
    #最大执行时间
    FcgidIOTimeout 120
    FcgidIdleTimeout 120
    #php-cgi的路径
    FcgidWrapper "e:/Servers/Php5.3/php-cgi.exe" .php
    AddType application/x-httpd-php .php

	Options Indexes FollowSymLinks ExecCGI
	Order allow,deny
	Allow from all
	AllowOverride All

测试结果：

Concurrency Level:      10
Time taken for tests:   10.016 seconds
Complete requests:      375
Failed requests:        336
   (Connect: 0, Receive: 0, Length: 336, Exceptions: 0)
Write errors:           0
Total transferred:      20406982 bytes
HTML transferred:       20340934 bytes
Requests per second:    37.44 [#/sec] (mean)
Time per request:       267.083 [ms] (mean)
Time per request:       26.708 [ms] (mean, across all concurrent requests)
Transfer rate:          1989.76 [Kbytes/sec] received

结论

可以看到fcgid方式对比CGI方式，完成请求数位160:370，平均相应时间：599ms:267ms

有关PHP优化：http://www.vpser.net/opt/apc-eaccelerator-xcache.html

http://www.woniu.us/php_basic/123.html

目前使用的版本组合：
Apache 2.2 VC9
PHP 5.3.6 nts vc9
mod_fcgid-2.3.6-win32-x86
XCache-1.3.0-php-5.3.0-nts-Win32-VC9-x86.zip
VC 2008 RunTime vcredist_x86

Express不能正常安装，会出现没有相应的现象

Advance 安装中组件依赖关系选择和版本选择都会出错，反复手动选择安装，运行出现一些错误：R6034 等等，特别是Mapserver的安装

解决方法：

在一台Windows XP下安装OSGeo4W的全部需要的组件，然后复制到Win2003下，注意两个系统下的目录位置要相同

在2003下Reintstall一下Apache

完成…

后续关于MapServer的配置

安装的MapServer Itasca Demo Application存在一些问题，需要修改配置

1. D:\OSGeo\apps\mapserv-demo 下的 IMAGEPATH ，"\"和“/"问题，否则有临时文件读写错误

2.所有涉及的template文件需要增加一行”<!– MapServer Template –>“放在文件第一行，否则有模板错误提示

3.D:\OSGeo\apache\conf下httpd.conf,<Directory "d:\OSGeo/tmp/ms_tmp/"> 红色部分补上，否则看不到图

如果你准备在JavaScript中写类，那么你必需对关键字 this 的使用有深刻的理解：

这是JavaScript手册中对 this的简单解释：

this:指当前对象。

对于 JScript 的客户版本，如果在其他所有对象的上下文之外使用 this，则它指的是 window 对象。

在全局环境下的 this

通常我们认为，Javascript 不在任何函数，不在任何类中，直接书写运行的代码的环境，称为直接运行环境，或者全局环境。实际上这个环境并不是一个真正意义上全局环境,

运行下面的代码：

dump(this,'Global This');

我们可以得到输出结果：

可以看到，在这个环境下，this 等于 浏览器的原生对象 window ,它是原生类 Window 的实例。

事实上，当我们在浏览器中运行JavaScript代码时，windows 是所有代码的根节点，所有的代码都是存储并挂接于这个节点的，当然多窗口的环境下会有多个window对象。

function Car(){

}
dump(Car);
dump(window.Car);

输出结果：

■ function function Car() {  …

■ function function Car() { …

可以看到 Car 和 window.Car 是完全相同的东西

在类中使用 this

现在我们来看看当使用类的时候，this会发生什么样的变化。下面是一段典型的类定义代码，我们来逐步分析：

function Car(color,doors){
    //用构造模式定义属性
    this.color = color;
    this.doors = doors;
    this.dispThis = function(){
    	dump(this,'this');
    };
    dump(this,'this');
}

//原型方法
Car.prototype.dispThis2 = function(){
	dump(this,'this');
};

//静态方法
Car.dispThis3 = function(){
	dump(this,'this');
};

aCar = new Car('red',4);
aCar.dispThis();
aCar.dispThis2();
Car.dispThis3();
Car('red',4);

输出结果：

■ this: object – [object Object]                                                       //构造函数 new Car()

– color ■ string red

– doors ■ number 4

– dispThis ■ function function () { dump(this, "this"); }…

– dispThis2 ■ function function () { dump(this, "this"); }…

■ this: object – [object Object]                                                        //构造方法 aCar.dispThis();

– color ■ string red

– doors ■ number 4

– dispThis ■ function function () { dump(this, "this"); }…

– dispThis2 ■ function function () { dump(this, "this"); }…

■ this: object – [object Object]                                                       //原型方法 aCar.dispThis2()

– color ■ string red

– doors ■ number 4

– dispThis ■ function function () { dump(this, "this"); }…

– dispThis2 ■ function function () { dump(this, "this"); }…

 

■ this: function function Car(color, doors) { this.co…               //静态方法 Car.dispThis3()

■ this: object – [object Window]                                                   //直接运行构造函数 Car()

[The window Object]

可以看到在构造函数、构造方法、原型方法中的都可以获取到this对象，它们指向同一个实例对象aCar，该对象由 new Car() 语句生成。

在Car的静态方法 Car.dispThis4（其实就是Car的一个直接的function属性）中，this 就是Car 本身，

当不使用new 关键字，而直接运行类的构造函数Car（其实现在它就是一个普通函数）时，在函数内部 this 就是当前运行环境的window对象

注意：比较一下 aCar.dispThis() 和 静态方法 Car.dispThis3() 输出结果就可以发现：Car 和 Car 生成的对象是2个完全不同的概念；Car是一个函数对象，继承与原生的 Function ；而Car的实例aCar则是一个单纯的对象，它继承与JavaScript原生的 Object

比较一下：

通过这个表格特别是1、2、3行，我们可以清晰的得到一个规律：this 其实就等于调用代码时的调用的节点，即：aCar. 和 Car. 。这个调用节点也就是参考文档中所提到的上下文环境。

那么如何解释4、5的结果呢？

new Car();使用了一个特殊关键字 new ，这个关键字的作用就是生成一个新的对象，并赋值给 this 。所以 this = aCar

Car();没有通过任何节点调用，实际上通过了默认节点window 来调用，通过上一节我们也可以看出 Car 实际上就是 window.Car 。所以 this = window

总结和结论：

JavaScript中所有的东西都是对象，包括数字、字符、函数以及对象的属性，函数总是存在（挂接）于某个对象中（默认存在于window对象），并通过某个对象调用的。在函数中总是有一个可用的的 this 变量，脚本引擎对 this 的解析是动态的，运行时的；它指向函数被调用时所挂接的对象。

我们可以通过一系列函数对象来进一步明晰这个过程，这些函数对象我们有时也称之为类的静态方法，实际上类的静态方法本身也是一个类，也是一个对象，明白了这一点，你就可以深刻理解Javascript的对象机制了。

function Car(){
	this.name = 'car';
	e(this);
};

Car.Wheel = function(){
	this.name = 'wheel';
	e(this);

};

Car.Wheel.Size = function(){
	this.name = 'wheel.size';
	e(this);
}

Car();
Car.Wheel();
Car.Wheel.Size();

输出结果

■ object – [object Window]

■ function function Car() { this.name = "car"; …

■ function function () { this.name = "wheel"; …

当 this 遇到事件

当我们在事件函数中使用到 this 时，this 有时会很不听话，经常会取值为意料之外的对象。先来看一段示例代码：

我们定义一个类的方法函数 Car.prototype.show();

function Car(){
	this.name = 'Class Car';
}

Car.prototype.show = function(){
	echo('On Car.show');
	dump(this,'this');
};

aCar = new Car;

然后使用两个按钮的分别用两种方式触发 aCar.show;

<input id="btn1" type="button" value="Press Me call car.show"/>
<input id="btn2" type="button" value="Press Me call car.show #2"/>

<script type='text/javascript'>
   document.getElementById("btn1").onclick = aCar.show;
   document.getElementById("btn2").onclick = function(){aCar.show();}
</script>

输出结果

//btn1 click

■ this: object – [object HTMLInputElement]

– tagName ■ string INPUT

– value ■ string Press Me call car.show

– id ■ string btn1

– className ■ string

…….

//btn2 click

■ this: object – [object Object]

– name ■ string Class Car

– show ■ function function () { echo("On Car.show"); …

我们看到btn1的click事件中 this 的输出结果是 Input元素，

btn2的Click事件中，this 的输出结果是 aCar。

为什么会出现这一结果呢？

造成不同的主要原因是事件的绑定方式的不同，我们来看看事件的绑定过程：

btn1使用 document.getElementById("btn1").onclick = aCar.show  这条语句进行了事件绑定。
我们把 btn1.click 指向（引用）了 aCar.show，当事件触发时 btn1.click 被调用（回调），也就是调用了 aCar.show  的代码；看起来一切正常，唯一需要注意的是： aCar.show  的内部代码不是以节点名称 aCar 来调用的，而是以节点 btn1 来调用的，也就是说此时 show()  的运行时节点是 btn1，那么 this 也就成为了 btn1。

btn2 使用 document.getElementById("btn1").onclick = function(){aCar.show();} 。
和btn1唯一的区别就是它使用了一个匿名函数把 aCar.show();包裹起来了。就是这样简单一个包裹引起根本性的变化，当事件触发时 btn1.click 被调用（回调），运行代码并不直接是 aCar.show ，而是通过匿名函数又再次调用 aCar.show ；此时调用的节点是 aCar ,所以 this = aCar 。

有些文章用事件函数的复制和引用来解释btn1和btn2结果的不同，这种解释实际是错误的，流于表象的，虽然很多文章还做了很多图来解释… JavaScript 的所有赋值语句都应该理解为引用，这又是另外一个话题，不扯远了…

我们来进一步比较不同事件函数绑定方式所带来的 this 的变化：

function Car(){
	this.name = 'Class Car';
}

Car.prototype.show = function(){
	dump(this,'this');
};

aCar = new Car;

element.onclick = aCar.show;                       // this = element
element.addEventListener('click',aCar.show, false) // this = element

element.onclick = function () {aCar.show();}      // this = aCare
lement.attachEvent('onclick',aCar.show)           // this = aCare
<element onclick="aCar.show();">                  // this = aCare

element.onclick = function () {this.style.color = '#cc0000';}     //this = element
<element onclick="this.style.color = '#cc0000';">                 //this = element

总结：this 指向函数被调用时所挂接的对象。当事件函数被调用时，this 总是等于事件所在的节点，因此我们应该使用匿名函数作为事件函数，并在匿名函数中二次调用可能需要的其它函数。以此来避免可能的 this 混乱。

现在我们来看一段示范代码，这是一段典型的既能获取函数本身所在节点，又能获取触发对象的代码模式

function Car(){
	this.name = 'Class Car';
}

Car.prototype.doSomethin = function(obj){
  dump(this,'this');  //this = aCar
  dump(obj,'obj');    //obj = element
};

aCar = new Car();

<element onclick="aCar.doSomething(this)">                //方法1
element.onclick = function() {aCar.doSomething(this)}     //方法2

在类中进行事件绑定操作

当我们在类代码中进行事件绑定操作时，对this的使用会遇到新的困难，我们知道所有的事件函数中 this 都必然等于事件函数所在的对象（即上例中的btn1)，那么我们如何在一个类中书写一段匿名事件函数，并在匿名事件函数中调用当前类的对象呢？

看代码：

<input id="btn1" type="button" value="Press Me call car.show"/>

<script type='text/javascript'><!--

function Car(){
	this.name = 'Class Car';
}
Car.prototype.showThis = function(obj){
	dump(this,'this');
	dump(obj,'obj');
};
Car.prototype.bind = function(){
	document.getElementById("btn1").onclick = function(){ this.showThis(this); };
};

aCar = new Car;
aCar.bind();

--></script>

如果你看到这里对 this 已经有了深刻的理解，那么就会发现这段代码实际使用的话会出错的，问题就出在这一行代码：

document.getElementById("btn1").onclick = function(){this.showThis(this);};

这行代码的本身是在aCar.bind中运行，然后这行代码又写了一个匿名函数：function(){this.showThis(this);} 。匿名函数中我们希望调用当前对象 aCar 的方法 showThis ,同时又想把事件触发对象btn1 传递给 showThis。我们用了2个 this ，这里的 this 到底应该等于什么呢？两个 this 都应该等于 btn1 ,因为这个匿名函数将会以节点 btn1.click 来运行的。this.showThis 将会无法调用到我们希望的目标 aCar.showThis ；

那么如何改写这段代码，来正确的调用aCar.showThis 呢？似乎目前只有这个方法，使用一个临时变量来传递 this ：

var _this = this;

document.getElementById("btn1").onclick = function(obj){_this.showThis(obj);};

其实这样代码看起来有点让人难以理解，如果想更深入的解释这段代码，就需要进一步解释JavaScript的编译和解释运行机制，我对此也没有深入的研究，但是可以推测出的原因是：JavaScript的脚本引擎对变量的编译和解释是根据代码书写环境（书写节点）来进行的，而对this 似乎总是根据运行环境（运行节点）来赋值的。

回调函数和 this 使用的总结

关于 this 的使用似乎很让人头晕，特别是当 this 和事件和类混在一起使用的时候，如果你需要一个简单的方法来处理这个，我们可以归纳出几条规则

1. 事件处理函数又可以称为回调函数(CallBack Function)，回调函数不仅仅用于界面事件（Click,Moueover等等）的处理，很多异步处理需要大量的回调函数。
2. 总是使用匿名函数作为回调函数，并在匿名函数中再调用其它命名函数，使用 event = function(){ somefunction(); }  的方式，不要使用 event = somefunction 的方式
3. 命名并传递默认参数，同时也可以把回调函数中的 this 传递给其它被调用函数。如：event = function(params){ somefunction(this,params); }
4. 如果在类中书写匿名回调函数，并且需要在函数中调用当前类的当前对象，使用一个临时变量来引用 function(){_this.showThis();};

最后来看看常见的Jquery的事件绑定方式：

<input id="btn1" type="button" value="Press Me call car.show"/>
<input id="btn2" type="button" value="Press Me call car.show #2"/>

<script type='text/javascript'><!--

function Car(){
	this.name = 'Class Car';
}
Car.prototype.show = function(){
	echo('On Car.show');
	dump(this,'this');
};
aCar = new Car;

$("#btn1").click(function(){aCar.show()});  //通过匿名函数2次调用 this = aCar
$("#btn2").click(aCar.show);                // this = btn2

--></script>

输出结果

On Car.show //这个是引用方式 this = aCar

■ this: object – [object Object]

– name ■ string Class Car

– show ■ function function () { echo("On Car.show"); …

On Car.show //这个是复制方式 this = btn2

■ this: object – [object HTMLInputElement] 

– tagName ■ string INPUT

– value ■ string Press Me call car.show #2

– id ■ string btn2

– className ■ string

…….

这里的Node,HTMLElement,HTMLAnchorElement其实就是HTML元素对象的类声明，我们可以通过修改这些类的原型来修改所有相关的HTML元素特性。

但是，HTMLElement和Node在IE中是虽然存在的，但是IE屏蔽了它，我们是无法访问到它的。

所有的Node实例有个标准属性 nodeType,有时它可以帮助我们判断一个NODE的属性

nodeType values chart 列表

比如判断一个对象是否为 HTMLElement的实例：

Oobj instanceof HTMLElement;         //这行代码在IE中会报错的
Oobj .nodeType == Node.ELEMENT_NODE; //这行代码在IE中会报错的
Oobj .nodeType == 1;                 //Node.ELEMENT_NODE=1 在IE中只能直接使用数字

//一段完整判断函数
function isElement(Oobj ){
    return !!(Oobj && Oobj.nodeType == 1);
} 

参考：

DOM对象参考手册 http://www.navioo.com/DOMReference/HTML/reference/api/htmldom2.index.php

这个站关于JavaScript的参考资料很好，很强大 http://www.navioo.com

JavaScript中所有的东西都是对象，包括函数、字符、数字等等等。但是JavaScript没有Class这个概念。

JavaScript使用Function来模拟类，任何一个function都有一个对应的prototype对象来存储和扩展这个function的定义，也就是说原型对象是关联于函数的

我们计划使用new关键字来调用并生成新对象的函数，我们称为“构造函数”

一个基本的函数分析

function Car(){
	color = 'red';
};

echo(Car);
echo(Car.constructor);
echo(Car.prototype);
echo(Car.prototype.constructor);

输出结果

function Car() { color = "red"; }

function Function() { [native code] }

[object Object]

function Car() { color = "red"; }

1. Car本身是一个函数
2. 它的constructor是原生对象（Native Function）
3. 在函数Car定义解析的同时，会系统生成一个对象 Car.prototype，它将会是所有由Car生成(new)的实例对象的原型对象，注意它是对象，这不同于常见的Class概念。默认的原型对象没有任何属性
4. Car的原型对象的Constructor就是Car自己，这也说明了原型对象是在函数定义的同时产生的。

原型对象

函数的原型对象是在脚本引擎解析每个函数代码时自动生成的，而不是执行时才生成

//function Car 是显式定义的，Car.prototype已经在代码解析时自动生成了，此时可以访问
echo(Car.prototype);
function Car(){};

//function Plan 是赋值定义的，Plan.prototype没有自动生成了，此时不能访问
echo(Plan.prototype);
Plan = function(){};
//现在才可以访问
echo(Plan.prototype); 

原型对象实际的工作方式是一种链式查找，脚本运行时，脚本引擎首先在当前实例对象中查找指定的属性，如果有就直接使用，如果没有就到原型对象中找，如果原型对象也没有，就到原型对象的原型对象中查找，这是一个递归的查找链。所有的JavaScript对象的查找链最终都会归结到原生函数Object的原型对象中去。

function Car(){
	this.color = 'red';
};

Car.prototype.color = 'blue';
Car.prototype.doors = 4;
Object.prototype.wheels = 4;

aCar = new Car;
echo(aCar.color);
echo(aCar.doors);
echo(aCar.wheels);

输出结果：

red  //注意：这里构造函数中定义的属性color覆盖了原型中的color定义

4 //从原型中查找到了doors

4 //从根原型中查找到了wheels

实例对象的原型对象关系链是有脚本引擎内部维护的，我们不能操作和修改它，但是可以通过定义和修改构造函数的prototype属性来影响的以后生成(new)的实例对象的原型对象，而JavaScript的继承关系正是通过这一方式来模拟的。

类的继承

JavaScript所有原生函数(Function,Array..)的Prototype对象指针是只读的，不能修改。你可以改变原型的内容，但不能改变原型对象本身。

而非原生函数的的原型对象是可以修改，如果把一个函数（A）的原型定义(prototype)指向另一个函数函数（B）的实例，这样可以就模拟出A继承B的效果

其实际效果是：把B的原型对象插入到了A的实例对象的原型链中去：

new A > A.prototype > B.prototype > …. > Object.prototype

//这样的代码是不能执行的
Array.prototype = new String('');

function Car(){}
function RaceCar(){}
//RaceCar 现在继承了 Car 的定义
RaceCar.prototype = new Car;

考虑到修改函数原型对象时可能会造成修改前的原型定义丢失，所有应该仅可能早的指定原型对象。

同时你也许需要修改新原型对象的constructor，使其指向当前构造函数，典型的继承关系处理代码如下：

function Car(){
	Car.prototype.color = 'blue';
	this.doors = 4;
}

function RaceCar(){
	RaceCar.prototype.color = 'red';
	this.doors = 2;
}
RaceCar.prototype = new Car; //RaceCar 现在继承了 Car 的定义
RaceCar.prototype.constructor = RaceCar;  //修改constructor

aCar = new RaceCar();

Car.prototype.wheels = 4;

echo(aCar.color);
echo(aCar.wheels);

输出结果为：

red

4

11

建模结构图

我们使用一段代码及其对应的建模结构图来进一步说明JavaScript的继承处理方式：

代码：

function A(){

}

B.prototype = new A;
B.prototype.constructor = B;

function B(){

}

结构图：

参考：http://mckoss.com/jscript/object.htm

直接生成对象实例，并操作实例

//定义
var aCar = new Object();
aCar.color = "red";
aCar.doors = 4;
aCar.showColor = function() {}
//调用
aCar.showColor();

工厂模式

其实就把上面的代码用过函数封装一下

//定义
function createCar(color,doors){
  var aCar = new Object();
  aCar.color = color;
  aCar.doors = doors;
  aCar.showColor = function() {alert(this.color);};
  return aCar;
}
//调用
bCar = createCar('red',4);
bCar.showColor();

混合工厂模式

函数名直接用类名，然后用了关键字new，其实这样写仅仅是好看一些，和上面的工厂方法没有本质区别。

//定义
function car(color,doors){
  var aCar = new Object();
  aCar.color = color;
  aCar.doors = doors;
  aCar.showColor = function() {alert(this.color);};
  return aCar;
}
//调用
bCar = new car('red',4);
bCar.showColor();

构造模式

//定义
function car(color,doors){
  this.color = color;
  this.doors = doors;
  this.showColor = function() {alert(this.color);};
}
//调用
bCar = new car('red',4);
bCar.showColor();

和上面相比，少了2句：var aCar = new Object() 和 return aCar 。实际上关键字 new 默认执行了一个操作：this = new Object() ，而this会作为构造函数的默认返回值。

原型模式

//定义
function car(){}
car.prototype.color = 'red';
car.prototype.doors = 4;
car.prototype.showColor = function() {alert(this.color);};

//调用
bCar = new car();
bCar.showColor();

动态原型模式

定义并判断类的静态属性_initialized，在构造函数内部动态定义修改类原型。

/定义
function car(color,doors) {
    this.color = color;
    this.doors = doors;
    if (typeof car._initialized == "undefined") {
        car.prototype.showColor = function() {
            alert(this.color);
        };
    }
    car._initialized = true;
}
//调用
aCar = new car('red',4);
aCar.showColor();

总结：

这些是JavaScript类定义的几种基本模式，实际每种模式下定义出的属性和类都是有区别的，经典模式和工厂模式因为不符合OOP的语法习惯，基本没有人用了。我们通常使用构造模式和原型模式的混合定义类

目前最流行的也是最实用的类定义结构如下：

//用构造模式定义类的构造器和属性
function car(color,doors){
	//用构造模式定义属性
	this.color = color;
	this.doors = doors;
}

//用原型模式定义方法
car.prototype.showColor = function(){
	alert(this.color);
};

//这是静态属性
car.type = 'vehicle';

aCar = new car('red',4);
aCar.showColor();

1.使用构造模式定义类的构造函数和非函数属性

2.使用原型模式定义类的函数属性（方法）

3.可以通过ClassName.name的方式定义静态属性

4.函数（方法）在本质上也是一种属性，有关各种属性定义方式的区别可以参看后面的参考章节。

参看章节：

http://blog.csdn.net/avon520/archive/2009/01/17/3819751.aspx

Javascript类- 几种属性的定义方式及区别

Javascript类-构造方法和原型方法的区别

构 造方法 和构造属性一样，它是分别存储于每个实例之中的，相互之间是完全独立。

原型方法 和原型属性一样，他是存储于原型中的，每个实例中存储的实际上一 个指向原型的指针。

所有对原型方法的修改会影响到所有实例，而构造方法实际上只能通过实例来访问和修改，也只会影响到相应的实例。

先写结论：方法通常应该使用原型模式定义，并且在必要时通过原型来动态重定义，避免使用构造模式定义方法。

看看示例代码吧： 我们首先构造一个简单的类car,定义2个方法，分别是构造方式定义的constructFunction 和 原型方式定义的 prototypeFunction

function echo(str){document.write('<div>'+str+'<div>');}

function car(){
   this.constructFunction = function(){
       echo('This is constructFunction');
   };
}

car.prototype.prototypeFunction = function(){
    echo('This is prototypeFunction');
};

aCar = new car();
bCar = new car();

aCar.constructFunction();
aCar.prototypeFunction();
bCar.constructFunction();
bCar.prototypeFunction();

输出结果：

This is constructFunction

This is prototypeFunction

This is constructFunction

This is prototypeFunction

原型方法可以随时动态定义和修改，修改的方法当然是通过类的原型访问，通过重新定义原型方法可以影响到类的所有实例：

aCar = new car();
bCar = new car();

car.prototype.prototypeFunction = function(){
	echo('This a new prototypeFunction');
};

aCar.prototypeFunction();
bCar.prototypeFunction();

可以看到，即使在实例已经创建以后，对原型的修改也可以反映到影响到所有实例上来。

构造方法是无法通过原型来访问的，只能通过实例访问，也只能通过实例来重定义。下面代码尝试修改实例：aCar的方法constructFunction

aCar = new car();
bCar = new car();
cCar = new car();

// car.constructFunction() 尝试通过类或者类的原型访问构造定义的方法是无效的，会报错
// car.prototype..constructFunction() 尝试通过类或者类的原型访问构造定义的方法是无效的，会报错

aCar.constructFunction = function(){
    echo('This a new constructFunction');
}

aCar.constructFunction();
bCar.constructFunction();
cCar.constructFunction();

输出结果：

This a new constructFunction

This is constructFunction

This is constructFunction

对实例aCar的构造方法和影响到了aCar而没有影响到其它实例

事实上，原型方法也是可以通过实例直接修改的，如果直接修改实例的原型方法会出现什么情况呢？

本 段开头已经指出：“每个实例中原形方法存储的实际上一个指向原型的指针”，如果你尝试修改实例的原型方法，就改变这个指针，使其指向新定义的方法函数；而 原型中的方法定义并没有受到影响。同时，指针既然转向，那么该实例的这个原型方法也就脱离了原型的定义，而成为一个独立方法。 通过下面的代码可以清晰的明白这种过程：

aCar = new car();
bCar = new car();
cCar = new car();

//修改aCar的原型方法 prototypeFunction
aCar.prototypeFunction = function(){
    echo('This a new prototypeFunction');
}
//检查修改结果
aCar.prototypeFunction();
bCar.prototypeFunction();
cCar.prototypeFunction();

//修改原型方法 prototypeFunction ，就会发现奥妙之处了
car.prototype.prototypeFunction = function(){
    echo('This a new prototypeFunction modified by prototype');
}
//检查修改结果
aCar.prototypeFunction();
bCar.prototypeFunction();
cCar.prototypeFunction();

注意:直接修改实例的原型方法虽然是可行的,但是会带来代码上的混淆和混乱,要尽可能避免使用这种方式.

先看代码，这段代码中出现了类定义中可能使用到5种属性或者变量

function car(param1,param2){
    //构造变量
    var varProperty = 'This is a var Perperty';
    //构造属性
    this.constructProperty = 'This is a construct Property'
}

//原形属性
car.prototype.prototypeProperty = 'This is a prototype property';

//静态属性
car.staticProperty = 'This is a static property';

构造变量 使用VAR声明和定义，它的作用域仅限于构造方法内部，包括在构造器内部定义的所有方法（构造方法）。直接通过变量名访问：varProperty。有些文章也把叫做私有属性，从作用域上看，它是私有的，但它不是属性，类的原型是无法访问它的。

构造参数 就是上述代码中的 param1,param2,它与构造变量有相同的作用域和方法方式

function car(param1,param2){
    //构造变量
    var varProperty = 'This is a var Perperty';

    echo(varProperty);
    echo(param1);

    this.someMethod = function(){
        echo(varProperty);
        echo(param1);
     };
}

构造属性 构造属性在类的构造器中通过this.定义，它是公开的(public)，可以通过类的实例(this.)直接访问和修改它

原型属性 在类的原型中定义，它也是公开，具有和构造属性相同的作用域，它不仅可以通过实例访问，也可以随时通过原型来访问（(ClassName.propertype.)

它和构造属性是有区别的：原型属性可以通过原型直接访问，它存储于类的原型中的，各个实例是通过指针共享访问它。具体下面单独分析

function car(){

    //构造属性
    this.constructProperty = 'This is a construct Property'

    this.someMethod = function(){
        echo(this.constructProperty); //这样可以
        echo(this.ptototypeProperty); //这一可以
     };
}

//原形属性
car.prototype.prototypeProperty = 'This is a prototype property';

echo(car.constructProperty);  //这样是不能访问构造属性的
echo(car.ptototypeProperty);  //这样是不能访问原型属性的

//必须通过实例来访问
aCar = new car();
echo(aCar.constructProperty);  //这样可以
echo(aCar.ptototypeProperty);  //这样可以

echo(car.prototypeProperty)    //原型属性可以通过原型直接访问

静态属性 直接通过ClassName.的方式定义，它具有和常规OOP语言中的静态属性类似的特性，但注意，它只能通过ClassName访问，不能通过实例访问，在类的中也不能通过this访问

function car(param1,param2){
    echo(this.staticProperty);//这样是不能访问到静态属性的。
    echo(car.staticProperty);//这样可以访问到静态属性的。
}

//静态属性
car.staticProperty = 'This is a static property';

aCar = new car();
echo(aCar.staticPerperty); //这样是不能访问到静态属性的。
echo(car.staticProperty); //这样可以访问到静态属性的。

构造属性和原型属性的区别：

上面已经说了构造属性和原型属性的定义方式，和访问方法，它们的主要区别在于：原型属性可以通过原型直接访问，它存储于类的原型中的，各个实例是通过指针共享访问它。也就是说对于每个构造属性，每个实例都有一个自己存储副本；而对于每个原形属性，每个实例实际上是共享同一个存储副本，实例中存储的仅仅是一个指向原型属性的指针。

看代码吧：

function car(){
    //构造属性
    this.constructProperty = new Array ('tom','jerry');
}

//原形属性
car.prototype.prototypeProperty = new Array ('tom','jerry');

aCar = new car();
bCar = new car();
cCar = new car();

//修改aCar的构造属性
aCar.constructProperty.push('Emeric');
echo(aCar.constructProperty);
echo(bCar.constructProperty);
echo(bCar.constructProperty);

//修改aCar的原型属性
aCar.prototypeProperty.push('Emeric');
echo(aCar.prototypeProperty);
echo(bCar.prototypeProperty);
echo(bCar.prototypeProperty);

输出结果：

//改变aCar的构造属性，仅仅影响到的aCar单一实例

tom,jerry,Emeric

tom,jerry

tom,jerry

//改变aCar的原型属性，影响到了所有实例

tom,jerry,Emeric

tom,jerry,Emeric

tom,jerry,Emeric

这里我们为什么在示例代码中使用数组，而没有使用其它简单变量呢？来看另一段代码：这段代码的和上面的唯一区别是使用了字符串作为属性，

function car(){
    //构造属性
    this.constructProperty = 'This is a construct Property'
}

//原形属性
car.prototype.prototypeProperty = 'This is a prototype property';

aCar = new car();
bCar = new car();
cCar = new car();

aCar.constructProperty = 'New string';
echo(aCar.constructProperty);
echo(bCar.constructProperty);
echo(bCar.constructProperty);

aCar.prototypeProperty = 'New string';
echo(aCar.prototypeProperty);
echo(bCar.prototypeProperty);
echo(bCar.prototypeProperty);

输出结果如下，对aCar的两种属性的修改都没有影响到其它实例，正如上面所说，javascript在实例中使用指针来指向原型属性，当使用 aCar.prototypeProperty = 'New string' 进行直接赋值时，javascript进行的操作是修改实例的指针（aCar.prototypeProperty ），使其指向新的存储副本 'New string' ，这一过程往往会掩盖了原型属性的共享特性。

New string

This is a construct Property

This is a construct Property

New string

This is a prototype property

This is a prototype property

再看一段补充代码，这是接着上面的代码运行的，我们通过原型来直接修改了原型属性：

car.prototype.prototypeProperty = 'Another New String!';
echo(aCar.prototypeProperty);
echo(bCar.prototypeProperty);
echo(bCar.prototypeProperty);

输出结果如下，会发现，这一修改仅仅影响到了bCar和cCar。

原因其实就是因为上面 aCar.prototypeProperty = 'New string' 的，它改变了 aCar.prototypeProperty 的指向，而不再指向 原型，因而他也就脱离了原型的控制。

New string

Another New String!

Another New String!

由于原型属性的共享特性和可能发生的实例指针脱离原型的现象，我们应该仅仅对需要共享的属性使用原型定义，一般的属性应该尽量使用构造来定义；在修改原型属性时应该尽可能通过原型(car.prototype.)来访问修改，而不要通过实例(aCar.)来修改；。以此来避免可能发生的属性混乱问题。