<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
	<channel>
		<title>Moocky.Mark's Blog</title>
		<link>http://www.moocky.net/</link>
		<description>记录我的一些生活写照、无聊的牢骚、内心世界的活动</description>
		<copyright>Powered by SaBlog-X. Copyright (C) 2003-2010.</copyright>
		<generator>SaBlog-X Version 2.0 Build 20100301</generator>
		<lastBuildDate>Tue, 07 Feb 2012 19:54:22 +0000</lastBuildDate>
		<ttl></ttl>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=96</link>
			<guid>http://www.moocky.net/?action=show&amp;id=96</guid>
			<title>PhpMyAdmin错误：Cannot start session without errors的解决办法</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	用的好好的PhpMyAdmin突然出现&rdquo;Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly.&ldquo;网上看了几个解决办法，都说是权限问题，主要解决办法有如下几种：</p>
<p>
	1.PHP配置中没有设置session的保存目录</p>
<p>
	在php.ini找到session.save_path 这一行,设成session.save_path = &ldquo;D:/php/Temp&rdquo;(把分号去掉)。</p>
<p>
	<br />
	2.Linux的session目录的权限问题</p>
<p>
	给session目录加上读写权限；</p>
<p>
	chmod 777 sessionpath</p>
<p>
	3.IIS下来宾账户没有访问sessionpath的权限</p>
<p>
	那么在IIS的来宾账户添加sessionpath的访问权限</p>
<p>
	由此我想到另外一个可能</p>
<p>
	open_basedir中没有设置sessionpath</p>
<p>
	如果是设置了open_basedir，那么同时加上sessionpath</p>
<p>
	&nbsp;</p>
<p>
	当然，仔细分析，我的现在遇到的不属于以上任何一种情况，不过也可能是权限的问题。打开sessionpath路径，发现目录只有一个sess_c5523db042ebd4597e0f4875ab1a0754feb2d82e的文件，查看了一下创建日期是昨天的，由此我怀疑可能是这个文件可能因为未知的原因被锁定了，因为是本地的环境，所以不用担心已经登录用户的状态，所以直接删除。重新登录，问题解决。由此可见，发现这个问题的最大的可能性就是没有session的访问权限，以上的方法也许未必能够解决你所遇到的问题，但朝着session访问权限的思路去考虑，应该是可以找到解决办法的。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=96</link>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=phpmyadmin">phpmyadmin</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=session">session</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=linux">linux</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=apache">apache</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=windows">windows</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=php">php</category>
			<pubDate>Tue, 10 May 2011 11:32:57 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=95</link>
			<guid>http://www.moocky.net/?action=show&amp;id=95</guid>
			<title>PHP 5.3.1 安装包 VC9 VC6 区别是什么</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<strong>原文地址不详，网站同样的文章太多了！</strong></p>
<p>
	想更新个PHP的版本，PHP的windows版本已经分离出来了，见<a href="http://windows.php.net/download/" onfocus="undefined"><span style="color: rgb(0,102,204)">http://windows.php.net/download/</span></a>，但是上面有很多不同的版本，包括VC9, VC6, &nbsp;x86 Non Thread Safe, x86 Thread Safe, 好像没有x64版本的，（现在特别喜欢用64位的软件），版本有点多，主要的区别和如何选择不同的版本如下：</p>
<p>
	If you are using PHP with Apache 1 or Apache2 from apache.org you need to use the VC6 versions of PHP</p>
<p>
	If you are using PHP with IIS you should use the VC9 versions of PHP</p>
<p>
	VC6 Versions are compiled with the legacy Visual Studio 6 compiler</p>
<p>
	VC9 Versions are compiled with the Visual Studio 2008 compiler and have improvements in performance and stability. The VC9 versions require you to have the Microsoft 2008 C++ Runtime (x86) or the Microsoft 2008 C++ Runtime (x64) installed</p>
<p>
	Do NOT use VC9 version with apache.org binaries</p>
<p>
	VC6 版本是使用 Visual Studio 6 编译器编译的，如果你是在windows下使用Apache+PHP的，请选择VC6版本（估计Apche也是用Visual Studio 6编译的）。</p>
<p>
	VC9 版本是使用 Visual Studio 2008 编译器编译的，如果你是在windows下使用IIS+PHP的，请选择VC9版本。</p>
<p>
	Non Thread Safe就是非线程安全，在执行时不进行线程（Thread）安全检查；<br />
	Non Thread Safe 是线程安全，执行时会进行线程（Thread）安全检查，以防止有新要求就启动新线程的 CGI 执行方式而耗尽系统资源；</p>
<p>
	Windows下的PHP 主要有两种执行方式：ISAPI 和 FastCGI。</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ISAPI 执行方式是以 DLL 动态库的形式使用，可以在被用户请求后执行，在处理完一个用户请求后不会马上消失，所以需要进行线程安全检查，这样来提高程序的执行效率，所以如果是以 ISAPI 来执行 PHP，建议选择 Thread Safe 版本；</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FastCGI 执行方式是以单一线程来执行操作，所以不需要进行线程的安全检查，除去线程安全检查的防护反而可以提高执行效率，所以，如果是以 FastCGI 来执行 PHP，建议选择 Non Thread Safe 版本。</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 官方并不建议你将Non Thread Safe 应用于生产环境。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=95</link>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=php">php</category>
			<pubDate>Fri, 10 Dec 2010 10:03:02 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=94</link>
			<guid>http://www.moocky.net/?action=show&amp;id=94</guid>
			<title>jQuery与Mootools真正的区别（七）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="conclusion"></a></p>
<h2>
	抉擇</h2>
<p>
	jQuery專注於表述性、快速簡易開發以及DOM上面，而MooTools著重於擴充性、繼承、可讀性、重複使用與易維護性。如果把這兩者放在一把尺的兩個極端，jQuery可視為一種好入門且快速得到結果的東西，不過(以我的經驗)也會讓程式變得難以再利用與維護(不過這真的看你怎麼做，這並不是jQuery本身的問題)，而MooTools需要較長的學習時間，得要寫較多的程式碼才能得到你要的結果，但是之後更容易重複使用與維護。</p>
<p>
	更進一步地說，MooTools並沒有涵括每一個你能想像可能需要的功能，當然jQuery也沒有。兩者都盡量給你簡潔的程式碼，讓你去寫你要的plug-in或是擴充功能。其目的不是提供你所有你有可能需要的功能，而是給你一個工具讓你能夠做出你能想像的任何東西。這就是JavaScript強大的地方所在，也是JavaScript framework強大之處，而這兩個frameworks更是擅長於此。MooTools用一個更全面的角度讓你擁有一個在DOM的範圍中為所欲為的工具，但代價是一個較為陡峭的學習曲線。MooTools的延展性與整體性的方法提供你一個涵蓋jQuery功能的大集合，但是jQuery注重在一個靈活的DOM API，同時又不會阻礙你應用JavaScript原生的繼承模型，如果你想要的話，甚至也可以額外使用像是MooTools這樣的類別系統。</p>
<p>
	這就是為什麼我說兩者都是很棒的選者，我花很大的利器在凸顯出兩者之間在程式設計哲學上的不同以及它們各自的優缺點。我不知道自己是否有在對MooTools的偏好這個事實上維持中立，但是我希望這些文章是有幫助的。非關於你選擇使用哪個framework，而是你現在更了解這兩個framework了，但願。如果你有充裕的時間，我強烈建議你分別用這兩個framework實作一個網站，然後寫下你自己對兩者的見解，也許你的觀點會出現我所未及之處。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=94</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:50:03 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=93</link>
			<guid>http://www.moocky.net/?action=show&amp;id=93</guid>
			<title>jQuery与Mootools真正的区别（六）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="classes"></a></p>
<h2>
	MooTools程式的重複利用</h2>
<p>
	在MooTools裡面當你要定義一個模式(pattern)時，你會用<em><a href="http://mootools.net/docs/core/Class/Class">Class</a></em>或是實作一個方法到原生的物件上(如<em>String</em>)。</p>
<p>
	MooTools介於一個獨有語法與擴充JavaScript原本的設計模式之間，它走的是一個較為中庸的道路，而非給你一個跟JavaScript完全迥異的程式語言。它的其中一個方式是去擴充程式本身跟DOM原生物件的prototype，如果你想要有個去掉字串空白的功能，MooTools鼓勵你在String物件上增加一個method(MooTools已經有提供<em><a href="http://mootools.net/docs/core/Native/String#String:trim">String.trim</a></em>，你不需要自己再寫一個)。</p>
<pre class="js">
String.implement({
    trim: function() {
        return this.replace(/^\s+|\s+$/g, &#39;&#39;);
    }
});</pre>
<p>
	這意味著你可以直接在字串上使用： <em>&quot; no more spaces on the end! &quot;.trim()</em>，然後你就會得到 <em>&quot;no more spaces on the end!&quot;</em> 的結果。有些人可能會說，去實作原型(native prototype)並不妥當，這也是為什麼MooTools跟<a href="http://www.prototypejs.org/">Prototype.js</a>沒辦法同時並存，任何兩個會動到原生原型的frameworks都是沒辦法並存的。如果我定義了，而在另一個函式庫裡面也有相同的東西，那最後定義的會覆蓋原先的。某種程度來說，這也跟window的全域命名空間的問題類似，這就是JavaScript的特性。這也是<a href="https://developer.mozilla.org/En/New_in_JavaScript_1.8">JavaScript 1.8</a>增加新功能的方式，它們都是透過prototypes。</p>
<p>
	MooTools的開發者包好了一個完整的framework讓你可以很輕易的擴充你想要的功能，其出發點是讓你把這個framework放到網頁裡面去使用，而不是讓你放其他的framework，要求訪客在一個頁面下載兩個不同的framework其實是有點不禮貌的。一次套用兩個framework唯一可能的理由是，兩個frameworks的plug-ins你都想要用。MooTools作者(包含我自己)的想法是，如果你想要的某個plug-in是你所選的那個framework裡面沒有的，那可能比較合理的作法是花時間去做出來，而非要求使用者去多下載一個framework的檔案。</p>
<p>
	一旦你學會了JavaScript的運作原理跟擴充原生物件的強大功能，一個全新層級的程式寫作方式就此開展。你可以寫plug-ins來改變Elements、Dates或是Functions。某些人可能會說，這種添加方式是一種對原生物件的汙染，我必須主張這種方式就是JavaScript原本的意圖。它是程式語言設計的特色，透過添加methods到原生物件上，你的程式碼會變得更簡潔，更有區隔性。jQuery也有這麼做，不過只限於強化jQuery自己本身的物件。</p>
<p>
	雖然你可以輕鬆地在jQuery物件上連續呼叫methods，但是在其它一般物件上，你就不能用同樣的方式。舉例來說，如果你要一行一行地重複trim掉字串，在jQuery你可能得這麼做：</p>
<pre class="js">
$.each( $.trim( $(&#39;span.something&#39;).html() ).split(&quot;\n&quot;), function(i, line){alert(line);});</pre>
<p>
	但是由於MooTools修改過prototypes，所以你可以：</p>
<pre class="js">
$(&#39;span.something&#39;).get(&#39;html&#39;).trim().split(&quot;\n&quot;).each(function(line){alert(line);});</pre>
<p>
	這個範例很清楚地示範了修改prototypes有多麼強大。連鎖動作並不是只能在DOM，連鎖可是個很有用的東西，MooTools讓你可以在任何物件上做連鎖動作，包括一次對多個元素(elements)執行一個method。</p>
<p>
	這裡的重點是MooTools的精隨在於它主張你可以寫出任何你想要的東西。如果有個功能是裡面沒有的，你可以擴充它並增加你自己要的。它的工作並不提供大家任何可能該有的功能，它是提供一個工具讓你可以為所欲為。它有很大一部分在做的事情是把擴充原生prototypes這件事情變得更簡單，善用原型式繼承的優點。你也可以用傳統的JavaScript來寫出這些東西，但是MooTools把它變得更簡易和善。</p>
<p>
	<a name="mooinheritance"></a></p>
<h3>
	MooTools 與繼承&lt;</h3>
<p>
	儘管它名字叫MooTools，它的<em>Class</em>功能並不是真的類別也不是創造一個類別。它的設計模式也許會讓你想起傳統的程式語言，但<em>Class</em>的確是都是跟物件與原型繼承相關的。(很不幸地，用&quot;class&quot;這個字眼是用來描述這些東西最方便的方式，所以在這篇文章中，當我提到&quot;class&quot;的時候，就是指那些會回傳物件的函數，而這些物件就是我要用來&quot;實體化&quot;且繼承自某個原型。)</p>
<p>
	要建立一個class，你可以把一個物件傳進這個<em>類別</em>構建式，像這樣:</p>
<pre class="js">
var Human = new Class({
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    isAlive: true,
    energy: 1,
    eat: function() {
        this.energy = this.energy + 1; //same as this.energy++
    }
});</pre>
<p>
	你把一個物件丟給<em>Class</em>(在上面，我們把一個有&quot;isAlive&quot;跟&quot;eat&quot;成員的物件傳進去)，這個物件就會變成任何類別實體(instance of class)的原型。要建立一個實體，你只要：</p>
<pre class="js">
var bob = new Human(&quot;bob&quot;, 20); //bob&#39;s name is &quot;bob&quot; and he&#39;s 20 years old.</pre>
<p>
	現在我們得到一個<em>Human</em>. <em>bob</em>實體，裡面有我們在建立我們自己的<em>Human</em>類別時所定義的屬性。但是重點是<em>bob</em>的那些屬性是透過繼承而來的，當我們參照到<em>bob.eat</em>時，<em>bob</em>並非真的具有這個屬性。JavaScript先看<em>bob</em>，發現他沒有<em>eat</em>這個方法，所以就從繼承鍊找到它，也就是從我們之前建立的<em>Human</em>類別裡面，<em>energy</em>這屬性也是同樣的道理。一開始這看起來有些潛在的壞處；我們並不希望每次<em>bob</em>吃(eat)的時候，每一個被建立的human都會得到一次energy。有一點需要知道的是，當一開始給enegey值的時候，<em>bob</em>會擁有自己的值，我們也不再從原型(prototype)中去尋找值了。所以第一次<em>bob</em>吃(eat)的時候，他會得到自己的<em>energy</em>值(enery=2)。</p>
<pre class="js">
bob.eat(); //bob.energy == 2</pre>
<p>
	<em>bob</em>的name跟age都是獨有的；在<em>initialize</em>初始化的時候就分配給bob了。</p>
<p>
	這整個模式看起來可能對你來說有點怪，但是其價值在於我們可以為某種特定模式(pattern)定義功能，然後每次需要使用時便初始化這個東西。每個實體(instance)都有自己的狀態。所以如果我們建立另一個實體，那麼兩個實體個字都會是獨立的，且繼承自同一個基本的模式(pattern)。</p>
<pre class="js">
var Alice = new Human();
//alice.energy == 1
//bob.energy == 2</pre>
<p>
	當我們要把這種方式擴大時，事情會變得更有趣。</p>
<p>
	<a name="extension"></a></p>
<h3>
	MooTools與繼承</h3>
<p>
	我們再回顧一下jQuery的<em>faq</em>外掛。如果我們要在這個外掛加入更多的功能會如何？如果我們要透過ajax從伺服器端取得問題所相對應的答案內容時該怎做？想像一下如果<em>faq</em>是另一位作者寫的，而我們要在不改變外掛程式碼的前提下增加新功能(不想把程式變成有分支的)。</p>
<p>
	我們唯一的選擇就是把整份<em>faq</em>程式碼複製(記得，它只是個單一函式)，實際上也就是分支。或者是我們可以呼叫這個外掛然後再多增加一些程式碼。如果可以選擇的話，後者看起來較能省去一些麻煩，程式碼看起來會像這樣：</p>
<pre class="js">
jQuery.fn.ajaxFaq = function(options) {
    var settings = jQuery.extend({ 
		//some ajax specific options like the url to request terms from
        url: &#39;/getfaq.php&#39;
        definitions: &#39;dd&#39;
    }, options); 
	//&quot;this&quot; is the current context; in this case, the elements we want to turn into faq layouts
    $(this).find(settings.definitions).click(function() {
        $(this).load(.....); //the logic to load the content from the term
    });
    this.faq(); //call our original faq plug-in
});</pre>
<p>
	這作法有些缺點。第一個，我們的<em>faq</em>會多執行一次有時會花很久時間的CSS選擇器；我們沒辦法把已經得到的選擇結果傳給第二次需要用到的場合。第二，我們沒辦法把ajax的程式碼插入在<em>faq</em>外掛程式邏輯的中間(例如要改寫顯示faq的規則)。原本的外掛呼叫了可以用特效展開內容的<em>slideToggle</em>。這將會產生問題，因為在ajax得到完整資料之前，這個效果可能會出錯，這邊除了複製一整份<em>faq</em>程式之外沒有甚麼解決方法。</p>
<p>
	現在我們再來看看MooTool的<em>Human</em>類別，它包含了<em>isAlive</em>跟<em>energy</em>兩個屬性以及一個<em>eat</em>方法。如果我們要建立一個新版本的<em>Human</em>且添加一些額外的屬性要怎做呢？用MooTools的話，我們可以延伸(extend)這個類別：</p>
<pre class="js">
var Ninja = new Class({
    Extends: Human,
    initialize: function(name, age, side) {
        this.side = side;
        this.parent(name, age);
    },
    energy: 100,
    attack: function(target) {
        this.energy = this.energy - 5;
        target.isAlive = false;
    }
});</pre>
<p>
	你可以看到我們增加了許多功能到子類別裡面。這個子類別所有的屬性都<em>Ninjas</em>是獨有。<em>Ninjas</em>初始時得到<em>energy</em>值為100、<em>side</em>屬性以及可以擊殺其他但是會消耗的energy的<em>attac</em>方法。</p>
<pre class="js">
var bob = new Human(&#39;Bob&#39;, 25);
var blackNinja = new Ninja(&#39;Nin Tendo&#39;, &#39;unknown&#39;, &#39;evil&#39;);
//blackNinja.isAlive = true
//blackNinja.name = &#39;Nin Tendo&#39;
blackNinja.attack(bob);
//bob never had a chance</pre>
<p>
	把程式碼拆解開來看，其中有些有趣的地方值得思考。在<em>Ninja</em>類別裡面有個<em>initialize</em>方法，這個<em>initialize</em>方法會覆蓋掉原本在<em>Human</em>裡面的，但是我們還是會透過<em>this.parent</em>叫用原本的<em>initialize</em>，把兩個原本該有的兩個參數傳過去。更進一步地，我們可以控制新的程式碼要出現在原來程式碼的前面或是後面。我們可以給屬性新的值(像是新的<em>energy</em>值)還可以定義新的功能，想想看這些是不是能在jQuery的<em>faq</em>外掛裡做到。我們可以載入我們自己的ajax然後用滑動效果來展開內容。</p>
<p>
	MooTools還有另一個模式叫做Mixin。不同於延伸一個類別到其子類別來定義父子關係，你也可以定義一個類別去混合其他類別進而感染(imbue)其他類別的屬性。如這個範例：</p>
<pre class="js">
var Warrior = new Class({
    energy: 100,
    kills: 0,
    attack: function(target) {
        target.isAlive = false;
        this.energy = this.energy - 5;
        this.kills++;
    }
});</pre>
<p>
	這裡我們把<em>Ninja</em>不同於<em>Human</em>的特性拆散開來並且放在一個類別裡。這樣我們就可以在<em>Ninja</em>以外的地方重複使用這些程式碼。我們可以讓<em>Ninja</em>染上戰士(warrior)的特質：</p>
<pre class="js">
var Ninja = new Class({
    Extends: Human,
    Implements: Warrior, //can be an array if you want to implement more than one
    initialize: function(name, age, side) {
        this.side = side;
        this.parent(name, age);
    }
});</pre>
<p>
	<em>Ninja</em> 依然跟之前的功能完全一樣，而<em>Warrior</em>變成我們可以重複利用的部分：</p>
<pre class="js">
var Samurai = new Class({
  Extends: Human,
  Implements: Warrior,
  side: &#39;good&#39;
});</pre>
<p>
	現在我們擁有了武士(<em>Samurai</em>)跟忍者(<em>Ninja</em>)，不過我們只需要很少的程式碼就可以定義出<em>Samurai</em>跟<em>Ninja</em>。兩者相同的是它們都有戰士的特質，不同的是武士永遠只會是善良的一方，而忍者可以有搖擺的善惡立場。我們只需要花時間寫出<em>Human</em>跟<em>Warrior</em>類別。當我們能在方法叫用時機以及它們彼此之間相互關係上擁有細微的控制，就能寫出不重複的程式碼而得到三種不同類別。每個我們所建立的實體都有自己的狀態，而程式碼本身也具有很好的可讀性。</p>
<p>
	現在你對MooTools類別的運作方式有個概括的了解了，讓我們看看把之前寫的jQuery的<em>faq</em>寫成MooTools類別，然後延伸出Ajax功能。</p>
<pre class="js">
var FAQ = new Class({
	//Options is another class provided by MooTools
	Implements: Options,
	//these are the default options
	options: {
		terms: &#39;dt&#39;,
		definitions: &#39;dd&#39;
	},
	initialize: function(container, options) {
		//we store a reference to our container
		this.container = $(container);
		//setOptions is a method provided by the Options mixin
		//it merges the options passed in with the defaults
		this.setOptions(options);
		//we store the terms and definitions
		this.terms = this.container.getElements(this.options.terms);
		this.definitions = this.container.getElements(this.options.definitions);
		//we call our attach method
		//by breaking this into its own method
		//it makes our class easier to extend
		this.attach();
	},
	attach: function(){
		//loop through the terms
		this.terms.each(function(term, index) {
			//add a click event to each one
			term.addEvent(&#39;click&#39;, function(){
				//that calls our toggle method for
				//the current index
				this.toggle(index);
			}, this);
		}, this);
	},
	toggle: function(index){
		//toggle open the definition for the given index
		this.definitions[index].slide(&#39;toggle&#39;);
	}
});</pre>
<p>
	蛤？好多行程式。即使我們把註解拿掉還是有二十幾行。我之前有說明過，我們可以用跟jQuery版本差不多的行數就寫完這個外掛，那為什麼還要搞得這麼長？就是要把它做得更彈性化。要使用這個類別，只要呼叫他的構建式：</p>
<pre class="js">
var myFAQ = new FAQ(myContainer);
//and now we can call methods on it if we want:
myFAQ.toggle(2); //toggle the 3rd element</pre>
<p>
	我們可以存取這個實體的方法跟屬性，但是ajax在哪？我們在jQuery版本遇到的問題是我們沒辦法延遲特效的展開時間來等待ajax取得資料完成，在MooTools版本我們沒這困擾了：</p>
<pre class="js">
FAQ.Ajax = new Class({
	//this class inherits the properties of FAQ
	Extends: FAQ,
	//it also gets a new option in addition to the other defaults
	//this one for url, that we&#39;re going to append the index of the
	//term to; in reality we might make this more robust, but for
	//this example it serves the purpose
	options: {
		url: null;
	},
	//we&#39;re going to cache the results, so if a section is opened
	//twice, we won&#39;t hit the server for the data
	indexesLoaded: [],
	toggle: function(index){
		//if we&#39;ve already loaded the definition
		if (this.indexesLoaded[index]) {
			//just call the previous version of toggle
			this.parent(index);
		} else {
			//otherwise, request the data from the server
			new Request.HTML({
				update: this.definitions[index],
				url: this.options.url + index,
				//and when the data is loaded, expand the definition
				onComplete: function(){
					this.indexesLoaded[index] = true;
					this.definitions[index].slide(&#39;toggle&#39;);
				}.bind(this)
			}).send();
		}
	}
});</pre>
<p>
	現在我們有另一個能夠從遠端取得資料的<em>FAQ</em>，整合成了一個可以在資料讀取完<em>之後</em>才展開的新方式(之前在jQuery版做不到的)。而且我們的程式只需要寫多出來的那部分跟其他寥寥數行。這種擴充性允許你建立一整個系列的外掛，可包含了各種不同的變化。同時也意味著你可以沿用別人寫好的外掛，變更你所需要的部分(不用整份程式複製)。這也解釋了為什麼每一種特定的設計模式裡面，你只能找到很少數的MooTools外掛，大多數你所取得的外掛，若不能夠解決你的需求，你都可以自行擴充你所需要的部分。</p>
<p>
	如同我之前說的，你當然可以用jQuery寫出包含方法與屬性的複雜widgets。大部分的你所寫的這種程式如果是跟DOM無關的邏輯，那麼就會是屬於傳統的JavaScript，但是jQuery沒有提供一個能夠把實體擴充為次類別的系統，也不能幫你用混搭的方式，來使你的程式更容易被重複使用。最後，jQuery的外掛總是被指定到DOM元素中，如果你要寫一個像是處理URL字串的類別，它並沒有一個能記錄這些狀態的架構可用，除非你自己寫一個。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=93</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:47:50 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=92</link>
			<guid>http://www.moocky.net/?action=show&amp;id=92</guid>
			<title>jQuery与Mootools真正的区别（五）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="chaining"></a></p>
<h2>
	連續技(Chaining)的設計模式</h2>
<p>
	我們來試試別的東西看看，這邊有一些jQuery的範例(從jQuery教學裡面擷取的)：</p>
<pre class="js">
$(document).ready(function() {
    $(&#39;#faq&#39;).find(&#39;dd&#39;).hide().end().find(&#39;dt&#39;).click(function() {
        $(this).next().slideToggle();
    });
});</pre>
<p>
	我個人並不是很推崇這個範例的語法，光是看上面那段程式碼我很難立刻了解在幹嘛。最明顯的部分是那個<em>.end</em>在做甚麼以及後面連接的<em>.find</em>是啥，跟<em>.end</em>又有甚麼關聯。jQuery文件可以找到關於.end很清楚的解說(重設目前選擇的物件(selector)，也就是#faq)，不過我是覺得滿怪的。當我在用jQuery的時候，我自己常常不太能確定一個方法(method)會回傳甚麼東西給我。不過很明顯的，這並沒有困擾到大家，因為jQuery有著一大票的愛用者，所以我也把這個歸類為個人偏好之一。</p>
<p>
	我們來看看上面那段程式碼如果在MooTools裡面會怎麼寫：</p>
<pre class="js">
window.addEvent(&#39;domready&#39;, function() {
    var faq = $(&#39;faq&#39;);
    faq.getElements(&#39;dd&#39;).hide();
    faq.getElements(&#39;dt&#39;).addEvent(&#39;click&#39;, function() {
        this.getNext().slide(&#39;toggle&#39;);
    });
});</pre>
<p>
	當然，MooTools還是比較累贅些，但是意思就更明確。同時也可以看到，jQuery用<em>.end</em>來回傳#faq這個物件，而MooTools的設計模式是把#faq放到一個變數裡。當然MooTools也可以寫出jQuery那樣的連續技(Chaining)：</p>
<pre class="js">
item.getElements(&#39;input[type=checkbox]&#39;)
	.filter(function(box) {
		return box.checked != checked;
	})
	.set(&#39;checked&#39;, checked)
	.getParent()[(checked) ? &#39;addClass&#39; : &#39;removeClass&#39;](&#39;checked&#39;)
	.fireEvent((checked) ? &#39;check&#39; : &#39;uncheck&#39;);</pre>
<p>
	不過說真的，像這樣把一堆程式碼跟判斷塞到一個domready宣告裡，不管是用哪一種framework都不是個很好的做法。如果把這些邏輯都封裝成可以重複利用的片段會好很多。</p>
<p>
	<a name="reuse"></a></p>
<h2>
	jQuery程式的重複利用</h2>
<p>
	當你在執行一個網站專案時，可重複利用的程式碼是很誘人的。只需要寫一點點程式就可以選取所需的DOM，然後隱藏掉某些、變更幾個屬性以及增加幾個滑鼠的event就搞定一切。這種開發方式會非常的有效率、非常的快。不過把你的程式碼都寫在domready裡面的問題在於：最後你會在不同地方寫了一堆在做同樣事情的程式碼。如果我們用上面那個FAQ的範例來看，我們其實可以輕易地套用相同的程式碼套在不同的頁面中類似的結構。難道我們每次遇到這種結構時都要重複做一次相同的事情嗎？</p>
<p>
	有個很簡單的方法就可以把它變成可重複利用，我們只要把這段程式碼包裝起來然後給個參數讓它接收。在jQuery裡面可能會長這樣：</p>
<pre class="js">
function faq(container, terms, definitions) {
    $(container).find(terms).hide().end().find(definitions).click(function() {
        $(this).next().slideToggle();
    });
};
$(document).ready(function() {
    faq(&#39;#faq&#39;, &#39;dd&#39;, &#39;dt&#39;);
});</pre>
<p>
	這樣一來程式會好很多，有兩個很重要的原因：</p>
<ol>
	<li>
		如果哪天我們得要變更這個FAQ清單的運作方式(例如我們要加上點擊次數追蹤，以便在記錄檔中計算或是我們可能改成要透過AJAX來取得清單資料)，我們只需要修改<em>faq</em>這個方法，在所有套用過的頁面都可以一次更新完畢。又或者是jQuery有個新的大改版，我們只需要把<em>faq</em>方法更新就好，不需要去每個頁面逐一修改。我稱之為把程式的資源最佳化，透過這樣的作法，我的應用程式中的其他一般程式碼盡可能地越少越好，我就能很輕鬆的除錯、更新整個framework、增加新功能或是修改原有的功能。</li>
	<li>
		第二個理由是程式碼會變少。隨著相同的方法(method)被一再套用，我都不需做重複的工作，這在任何的程式語言裡面都是非常有價值的。而且我的網站訪客也可以節省下載那些程式的時間。</li>
</ol>
<p>
	jQuery其實有在針對可重複使用的&quot;wigdets&quot;上做了一些調整。他們鼓勵人們使用<a href="http://docs.jquery.com/Plugins/Authoring">jQuery plug-ins</a>，而不是用上面那個範例(其實滿粗糙的)的方式。然後會長成像這個樣子：</p>
<pre class="js">
jQuery.fn.faq = function(options) {
    var settings = jQuery.extend({
        terms: &#39;dt&#39;,
        definitions: &#39;dd&#39;
    }, options); 
	//&quot;this&quot; is the current context; in this case, the elements we want to turn into faq layouts
    $(this).find(settings.terms).hide().end().find(settings.definitions).click(function() {
        $(this).next().slideToggle();
    });
    return this;
};</pre>
<p>
	&nbsp;</p>
<p>
	接下來你就可以這樣用：</p>
<p>
	&nbsp;</p>
<pre class="js">
$(&#39;#faq&#39;).faq();</pre>
<p>
	從上面那個範例來看，寫一個<em>faq</em> 的plug-in跟寫成一個普通的function沒有很大的差別。是的，普通的function沒有放在一個全域的命名空間(global namespace)，不過我們也可以創一個nampespace，然後把function放進去。像plug-in那樣依附在jQuery中，我們就可以把其他的jQuery方法用連鎖動作串再一起。另外一個好處是，function裡面呼叫this就會得到目前的元素(current context)。用plug-in的作法，就會讓function看起來像是jQuery的一部份，但是除此之外plug-in基本上就是一個單一的function加上能存取到目前的jQuery元素(context)、操作那些元素然後再把那些元素傳給連鎖動作中的下一個method。它並不複雜，所以每個人都能輕鬆的寫出jQuery plug-ins，它們就是functions而已。</p>
<p>
	另外注意的是，jQuery也可以寫一些較為複雜，包含methods跟狀態的plug-ins。jQuery UI有支援這種模式，不過寫法跟基本plug-in(像faq那個範例)不同，取而代之的是你會在jQuery上附加一個具有methods跟properties的物件(如<em>$.ui.tabs</em>)。它有個快捷方式讓你直接使用(如<em>$(selector).tabs()</em>)，所以你還是可以使用連鎖動作，就像faq那個plug-in一樣。只不過它並不是回傳該物件本身(<em>$.ui.tabs</em>)，而是回傳jQuery 目前的元素(context)，所以當你要存取tab的methods時，你必須再次呼叫一次selector。你必須再執行一次selector然後再呼叫function的名稱：<em>$(selector).tabs(&#39;add&#39;, url, label, index);</em> ，而不是直接呼叫類似像<em>myTabInstance.add(url, label, index)</em> 的東西。這意味著你執行了兩次選擇器(除非你用個變數來參照)，你也沒有可以指向add這個method的參照讓你做像是綁定(bind)或是延遲(delay)的動作。這篇文章焦點在於MooTools跟jQuery的核心程式，而雖然jQuery UI有提供這些功能，但是jQuery本身並沒有。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=92</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:46:07 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=91</link>
			<guid>http://www.moocky.net/?action=show&amp;id=91</guid>
			<title>jQuery与Mootools真正的区别（四）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="jsfun"></a></p>
<h2>
	MooTools把JavaScirpt變得更有趣</h2>
<p>
	因為MooTools專注在增加JavaScriptAPI的穩定性與連貫性，所以在&quot;改變你寫JavaScript的方式&quot;這件事情上就沒有太多著墨，整體來看它卻是降低了JavaScript使用上的不便。MooTools是JavaScript語言的擴充，也試著把JavaScript導向原本應走的路上。整個架構的核心有重要的一部份是在加強Function、Stirng、Array、Number、Element跟其他的原型物件。另一個重點是它提供了一個函數叫類別(<em><a href="http://mootools.net/docs/core/Class/Class">Class</a></em>)。</p>
<p>
	現在，對人們來說，<em>Class</em>看起來像是要重建一個像Java或是C++那種正統的繼承式模型，其實<a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages">並不是那麼一回事</a>。這個<em>Class</em>n所做的是幫我們更簡單地存取JavaScript的原型繼承模型並且更加凸顯它的優勢。我要說明的是這概念並不是MooTools才有的(其他的一些frameworks也有提供類似的功能)。但是jQueryy並沒有這些的設計概念，jQuery沒有所謂繼承的系統也沒有任何加強原生物件(Function、String等)的架構。這並非jQuery的缺陷，因為作者其實可以輕而易舉的增加這些東西進來；而是他們是以不同的目標來設計這個工具包(toolkit)套件。MooTools的目的是讓JavaScript變的有趣，而jQuery是要把DOM變得有趣，所以它的設計者設定了這樣的範疇來達到目的。</p>
<p>
	<a name="domfun"></a></p>
<h2>
	jQuery把DOM變得更有趣</h2>
<p>
	這也是為什麼jQuery比較有親和力，它並沒有要求你把JavaScript從裡到外都搞懂，它不會把你丟到底層去跟原型繼承架構、榜定、&quot;this&quot;和原生原型(native prototypes)打交道。當你開始從<a href="http://docs.jquery.com/Tutorials:How_jQuery_Works">官網</a>接觸jQuery，你可以看到它的第一個範例：</p>
<pre class="js">
window.onload = function() {
    alert(&quot;welcome&quot;);
}</pre>
<p>
	and here&#39;s the third:</p>
<pre class="js">
$(document).ready(function() {
    $(&quot;a&quot;).click(function(event) {
        alert(&quot;Thanks for visiting!&quot;);
    });
});</pre>
<p>
	如果你讀過MooTools的書或是教學(我寫的那兩個)，裡面開頭的章節就很不同。如果要學習怎麼使用MooTools的話，你必須從一些基本的概念開始看起，例如<em>Class</em>，雖然你也可以略過直接開始學有關特效或是DOM的部分。而且我也必須承認：如果你是寫程式的新手或你想要快速架站，而非得要先了解JavaScript的一些細節，可能對你來說jQuery會比較友善的多。</p>
<p>
	反之，如果你想要好好學習JavaScript這個語言，MooTools是一個很好的管道。MooTools實做了很多JavaScript以後會有的功能(很多在Native的方法正是<a href="https://developer.mozilla.org/En/New_in_JavaScript_1.8">JavaScript 1.8</a>或更新版本會有的)。如果你是老手了，特別是熟悉物件導向<em>以及</em>函數式程式語言(functional programming)的人，MooTools有很多令人振奮且驚艷的設計模式(design patterns)。</p>
<p>
	<a name="cando"></a></p>
<h2>
	你行的我比你更行</h2>
<p>
	如果你看一下jQuery所提供的功能，你會發現通常MooTools也有提供相同的功能。或如果你看一下MooTools的功能，你會發現jQuery通常沒辦法達到相同的目的，因為jQuery專注的是DOM相關功能，MooTools提供的功能則涵蓋的層面比jQuery還廣些。不過jQuery也不會阻礙你去實做那些MooTools才能達到的功能。舉例來說，jQuery並沒有提供繼承的架構，但是沒關係，如果你想要的話還是可以結合MooTools 的<em>Class</em>來達到(或自己寫一個)。甚至也有人寫了一個<a href="http://code.google.com/p/jquery-inheritance/updates/list">繼承的jQuery外掛</a>(我沒有用過不過我想它應該也能提供相同的功能)。</p>
<p>
	如果我們回頭看一下上面jQuery的那個範例：</p>
<pre class="js">
$(document).ready(function() {
    $(&quot;a&quot;).click(function(event) {
        alert(&quot;Thanks for visiting!&quot;);
    });
});</pre>
<p>
	如果我們要轉成MooTools的語法，就會變成：</p>
<pre class="js">
window.addEvent(&#39;domready&#39;, function() {
    $$(&#39;a&#39;).addEvent(&#39;click&#39;, function(event) {
        alert(&#39;Thanks for visiting!&#39;);
    });
});</pre>
<p>
	非常相似吧？</p>
<p>
	或是這個比較複雜的jQuery範例：</p>
<pre class="js">
$(document).ready(function() {
    $(&quot;#orderedlist li:last&quot;).hover(function() {
        $(this).addClass(&quot;green&quot;);
    },
    function() {
        $(this).removeClass(&quot;green&quot;);
    });
});</pre>
<p>
	and in MooTools:</p>
<pre class="js">
window.addEvent(&#39;domready&#39;,function() {
    $$(&#39;#orderedlist li:last-child&#39;).addEvents({
        mouseenter: function() {
            this.addClass(&#39;green&#39;);
        },
        mouseleave: function() {
            this.removeClass(&#39;green&#39;);
        }
    });
});</pre>
<p>
	也是非常類似。我想說明的是，MooTools的版本語法更為清楚，不過也因此較為累贅。MooTools的程式閱讀很清楚可以知道我們增加了兩個events，一個是滑鼠移入物件時的，一個是滑鼠離開物件的。而jQuery則較為簡潔，它的<em><a href="http://docs.jquery.com/Events/hover">hover</a></em>方法一次接收兩個functions，第一個是滑鼠移入物件時用，第二個是滑鼠離開物件時用。我個人比較偏好MooTools程式的可閱讀性，不過那是主觀的看法。</p>
<p>
	我有時候會覺得jQuery的語法過於艱澀隱晦，一個方法(method)裡可接收兩個function這回事我光是用看的的話，並非那麼容易理解。由於我對MooTools很熟悉，這說法多少有點不公平，因為讀MooTools的程式對我來說很簡單。不過MooTools方法與類別的命名方式很有名符其實的味道，這點我很欣賞。MooTools幾乎都是用動詞來命名，留下一絲絲疑惑是對&quot;甚麼&quot;做動作。當然在撰寫每一種程式語言時，你都需要去看文件來查語法，我意思不是說MooTools就不用，我只是覺得MooTools的API的命名邏輯比較連貫一致。</p>
<p>
	<a name="yourway"></a></p>
<h2>
	MooTools讓你想怎樣就怎樣</h2>
<p>
	可是如果你比較喜歡jQuery式的語法怎麼辦？MooTools也是有這種能力把程式變得更合你胃口，如果我們想在MooTools裡面實作jQuery的<em>hover</em>，我們只要加上這段：</p>
<pre class="js">
Element.implement({
    hover : function(enter,leave){
       return this.addEvents({ mouseenter : enter, mouseleave : leave });
    }
});

//然後你就可以用跟jQuery相同的語法：
$$(&#39;#orderlist li:last&#39;).hover(function(){
   this.addClass(&#39;green&#39;);
},
function(){
   this.removeClass(&#39;green&#39;);
});</pre>
<p>
	實際上確實有MooTools的plug-ins在幫你完成這些動作：<a href="http://github.com/cheeaun/mooj/tree/master">jQuery syntax for MooTools</a>。MooTools著重在延伸能力上，這意味著你可以做任何你想做的事情，這是jQuery沒辦法辦到的。MooTools可以模仿jQuery，但是jQuery沒辦法模仿MooTools，如果你想要用類別或是延伸的原生原型物件等等MooTools的功能，你就得自己手動去寫額外的程式。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=91</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:43:09 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=90</link>
			<guid>http://www.moocky.net/?action=show&amp;id=90</guid>
			<title>jQuery与Mootools真正的区别（三）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="javascript"></a></p>
<h2>
	JavaScript過人之處</h2>
<p>
	抉擇的過程裡，你得先問自己想要用JavaScript來做什麼。我們可以先想想純JavaScript的情況，不使用任何的framework；就是傳統的JavaScript程式。JavaScript提供一些原生的物件像是 <a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String">Strings</a>, <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">Numbers</a>, <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Functions</a>, <a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/Array">Arrays</a>, <a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/Date">Dates</a>, <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Regular Expressions</a>, 等等，同時也提供了一個繼承的模型 - 一個有點難懂的模型叫做原型繼承(<a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Inheritance">prototypal inheritance</a>，我稍後會作說明)。這些基本架構跟繼承概念就是足以支撐著各種程式語言的基本要素，而且這些要素跟瀏覽器、網頁、CSS或HTML都沒有任何關聯。所以其實JavaScript是可以用來寫出各種程式的，不管是井字遊戲、西洋棋、相片編輯程式或是個網站伺服器。只是剛好百分之九十九的JavaScript都在瀏覽器上執行，所以我們通常就把它當作是瀏覽器專用的程式了。</p>
<p>
	絕大部分的JS都應用在瀏覽器跟DOM，但其實JavaScript是個非常健全且多樣的程式語言，如果能夠理解這點的話，會有助於你了解MooTools跟jQuery之間的差異。</p>
<p>
	<a name="dom"></a></p>
<h3>
	不只是DOM</h3>
<p>
	如果你認為JavaScript做的事情就是&quot;指定頁面中的某個東西，然後對它做一些動作&quot;，那jQuery可能就是最好的選擇了。jQuery提供了一個非常好的架構讓你用幾乎不像是程式語言的方式去描述頁面中的行為。你還是可以用JavaScript的其他功能來寫出你想要的程式，但是如果你的重點在DOM - 動態改變CSS、動畫效果、透過AJAX來取得內容等等，你需要寫的大部分程式都可以用Jquery完成，其餘未包括的部份就會是原本JavaScript的寫作方式。此外jQuery也提供一些非DOM相關的程式，例如繞陣列迴圈(iterating)的方法 - <em><a href="http://docs.jquery.com/Utilities/jQuery.each">$.each(array, fn)</a></em> - 或是用<em><a href="http://docs.jquery.com/Utilities/jQuery.trim">$.trim(str)</a></em> 除掉字串前後空白的函式。這些公用程式並沒有很多，不過那也沒差，因為大部分情況下，如果你只是從DOM裡面指定了幾樣東西，繞了迴圈，變更了某些細節(插入HTML、改變樣式或是定義一個滑鼠點擊的事件等等)，其實並不需要那麼多公用程式。</p>
<p>
	不過如果你用比較廣泛的角度來看的話，jQuery並沒有把心思放在DOM以外的事物上。這也是它如此易學的原因之一，但同時也限制了從其他方面來幫助你撰寫JavaScript。它除了扮演著一個完整的<em>DOM</em>程式語言之外，便再無二心，沒有在繼承物件概念或是提供基本型別的公用程式上多下功夫，因為它本來就<em>沒這個必要</em>。如果你想在字串、時間、正規表示式、陣列或函式之間周旋的話，<em>可以</em>。只不過那並非jQuery的使命，JavaScriprt一直都在那，隨時要用都可以的。jQuery讓你能夠輕鬆駕馭DOM，但其他的東西就不是它的範疇了。</p>
<p>
	這點跟MooTools有很大的不同。MooTools把範疇放大到整個JavaScript語言，而不單單只是針對DOM而已(據我所知，MooTools也提供跟jQuery相同的功能，但是用很不一樣的方法寫的)。如果jQuery讓你能對DOM為所欲為，MooTools則是讓你能夠對整個JavaScript為所欲為，這也是它學習難度較高的原因之一。</p>
<p>
	<a name="inheritance"></a></p>
<h3>
	JavaScript的繼承</h3>
<p>
	JavaScript裡面有些很棒的東西。首先，它是個函數程式語言。這代表著function被視為高階物件，像其他物件 - 如字串或數字般可以被互相傳遞。當你用這種方式來寫程式，很多模式跟方法可以藉由這個設計理念獲得最好的結果。兩者之間的差異：</p>
<pre class="js">
for (var i = 0; i &lt; myArray.length; i++) { /* do stuff */ }</pre>
<p>
	以及</p>
<pre class="js">
myArray.forEach(function(item, index) { /* do stuff */ });</pre>
<p>
	JavaScript有一種 <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Inheritance">繼承模型</a>，在程式語言的世界裡，不能說獨特但也算是相當罕見。JavaScript是用 <em>原型繼承</em>的方式來做，而非類別(class)在延伸次類別的繼承方式，這表示物件是直接繼承另一個物件的原型。當你參照一個物件的property，程式會先從物件本身尋找是否有此property，如果沒有的話，就去找該物件的父親。這就是一個陣列可以有method的原理。當你寫了：</p>
<pre class="js">
[1,2,3].forEach(function(item) { alert(item) }); //this alerts 1 then 2 then 3</pre>
<p>
	&quot;<a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference:Objects:Array:forEach">forEach</a>&quot;這個方法並不存在於你所定義的陣列(<em>[1,2,3]</em>)裡面，它存在於所有陣列的原型中。當你參照<em>forEach</em>這個方法時，JavaScript會在你定義的陣列中去找，如果沒有的找到的話就去陣列的原型去找。這表示說，並非所有陣列都在記憶體中有<em>forEach</em>這個方法，它只要在陣列的原型裡放一次就可以了。這種方式非常有效率也非常非常強大。(補充：MooTools裡面<em>forEach</em>的對應method是<em>each</em>)</p>
<p>
	<a name="self"></a></p>
<h3>
	自我參照</h3>
<p>
	JavaScript有一個特別的字眼：&quot;this&quot;。我很難在這邊簡單的定義甚麼叫this，但是一般來說this就是指目前method的所有者。this允許物件可以在其所屬方法運行時參照到物件自己本身，也正是this存在的目的。當你產生很多子物件然後又有很多父物件的實體(instances)時，這就變得很重要了，否則還能甚麼其他方式來參照自己？當一個方法(method)原本屬於父物件而非子物件，this這個關鍵字就能讓實體們都能參照到它們自身。(<a href="http://www.quirksmode.org/js/this.html">這裡有this更完整的解釋</a>，還有<a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Operators/Special_Operators/This_Operator">Mozilla的</a>)</p>
<p>
	this可以讓那些繼承而來的子物件參照到它們自身，但是有時候也可能需要用this參照到其它的東西，你就要指定一個不同的this到方法(method)裡，這就叫做榜定(<a href="http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding">binding</a>)。陣列的each方法的第二個參數可以讓你指定一個物件做榜定(binding)。可以參考一下這個範例傳了一個不一樣的 &quot;this&quot;：</p>
<pre class="js">
var ninja = {
    weapons: [&#39;katana&#39;, &#39;throwing stars&#39;, &#39;exploding palm technique&#39;],
    log: function(message) {
        console.log(message);
    },
    logInventory: function() {
        this.weapons.each(function(weapon) {
			//we want &quot;this&quot; to point to ninja...
            this.log(&#39;this ninja can kill with its &#39; + weapon);
        }, this); //so we pass &quot;this&quot; (which is ninja) to Array.each  
    }
};
ninja.logInventory(); 
//this ninja can kill with its katana
//this ninja can kill with its throwing stars
//this ninja can kill with its exploding palm technique</pre>
<p>
	上面的範例裡面，我們把ninja榜定(就是在<em>logInventory</em>裡面的this)在傳給陣列的那個方法(method)，所以在each裡面我們可以參照到ninja的log的屬性。如果我們沒這麼做的話，this得到的參照就會是<em>window</em>了。</p>
<p>
	這些只是幾個範例，用來說明JavaScript提供了強大多樣的繼承、自我參照、榜定跟原型特性。不幸的是，原本的JavaScript並沒有把這些強大的特點凸顯出來，這也是MooTools之所以發展的起頭。MooTools把這幾種類型的模式變得簡單也更和善。最終你會寫出更為抽象的程式，長遠來看這會是好事情 - 也會是很棒的程式。去理解這些模式的價值以及如何正確地使用它們是很需要花費心力的，但是從好的方面來看，你所寫的程式會具備高度的重複使用性也會非常容易維護。這些好處我等等會稍做說明。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=90</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:40:15 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=89</link>
			<guid>http://www.moocky.net/?action=show&amp;id=89</guid>
			<title>jQuery与Mootools真正的区别（二）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	<a name="mottos"></a></p>
<h2>
	標題說明一切</h2>
<p>
	如果你去jQuery的網站看，它最上面的標語就寫著：</p>
<blockquote>
	jQuery是個簡潔快速的JavaScript函式庫，能透過簡化HTML的操作、事件的處理、動畫效果以及Ajax互動來加速網頁開發。jQuery是一個可以改變你寫JavaScript方式的函式庫。</blockquote>
<p>
	...然後如果你到了MooTools的網站，你也可以找到這段話：</p>
<blockquote>
	MooTools是個精簡、模組化同時也物件導向的JavaScript框架，設計給中等與進階的JavaScript開發員使用。透過其優美、詳細而條理分明的API，可以讓您寫出強大、富有彈性且跨瀏覽器的程式。</blockquote>
<p>
	我想這就說明了全部了。如果你問我(因為你正在讀這篇文章，所以我假設你會問囉)：重點不在於哪個比較好，哪個比較差，而是在於這兩者的特性之間，該如何取捨衡量？這兩個框架(frameworks)試圖要做的事情並不相同，在功能上它們或有重疊但目標並非一致。</p>
<p>
	jQuery的那段敘述講的是關於HTML、事件、動畫、Ajax與網頁開發，MooTools那段說的是有關物件導向、強大且彈性的程式架構。jQuery要改變你寫JavaScript的方式，而MooTools則是為了中高階JavaScript開發員而設計。</p>
<p>
	這其中值得思考的是關於<em>框架</em>與<em>工具包</em>(framework vs. toolkit)的概念差異。MooTools是一個用JavaScript<em>原本應有的方式</em>來寫JavaScript的<em>框架</em>(framework)。其立意是實作一個跟JavaScript非常相似的API並且針對各個部分加以強化，而不只是針對DOM而已。jQuery則比較像是包好了很多很方便的函式在一個<em>工具包</em>裡(toolkit)，這個自成一個體系的工具包讓DOM的操作變得更簡單易用。而DOM剛好就是大多數的人寫JavaScript時花最多時間的地方，所以在大多數的情況下，jQuery就是你最好的選擇。</p>
<p>
	大部分你用MooTools所寫的程式還是跟JavaScript很像，如果你對JavaScript這個程式並不是很感興趣，那麼學MooTools對你來說就會是很討厭的事情。如果你對JavaScript有興趣，也想知道它哪裡有趣、強大而多樣，那麼我個人認為MooTools是個較好的選擇。</p>
<p>
	<a name="learning"></a></p>
<h2>
	學習曲線與社群</h2>
<p>
	首先，jQuery是非常非常容易學會的。它的撰寫風格如同口語般幾乎不像個程式語言。如果你要的就是快速搞定又不用刻意學習JavaScript的話，jQuery可能對你而言是較好的選擇，MooTools並不具備這些好處。我必須承認如果你是個JavaScript新手，MooTools會有點難上手。加上有很多現成的資源或教學可以幫助你學會jQuery，至少比MooTools多。</p>
<p>
	如果你比較看看jQUery(<a href="http://docs.jquery.com/Discussion">jQuery的討論版</a>)跟MooTools的社群(<a href="irc://irc.freenode.net/#mootools">irc</a>, <a href="http://groups.google.com/group/mootools-users">mailing list</a>)，你馬上就會發現：一) jQuery的社群資源與數量<em>遠</em>大於MooTools(我認為是因為之前說的那個原因易學以及...)。二) 她們比較積極推廣。如果你用使用的人數、Google搜尋的次數以及賣出的書量來衡量jQuery與MooTools，你會看到jQuery是遙遙領先的。</p>
<p>
	為了要完整說明為何你可以考慮用MooTools的原因，我必須先說一下這兩個frameworks在做什麼事情。最終你會選擇哪個framework還是取決於你想要達成什麼目的以及你想用什麼方式寫程式(甚至關乎你<em>是否</em>喜歡程式，或至少喜歡JavaScript)。</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=89</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:38:26 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=88</link>
			<guid>http://www.moocky.net/?action=show&amp;id=88</guid>
			<title>jQuery与Mootools真正的区别（一）</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	大部分最近才剛接觸JavaScript的人會面臨到的困難是該選擇哪個套件(library)或是該先學哪個套件。如果你在一間公司裡上班，那麼可能公司已經有一套固定使用的套件，若是在這種情況下，問題就沒那麼重要。如果你的公司選擇使用<a href="http://www.mootools.net">MooTools</a>而你自己已經習慣使用<a href="http://www.jquery.com">jQuery</a>，那麼這篇文章也許對你還是有些幫助的。</p>
<p>
	每天在Twitter上我看到一堆人討論著MooTools好還是jQuery的話題。這篇文章希望能幫助你做出這決定。</p>
<h3>
	聲明</h3>
<p>
	我是個MooTools的開發人員。我也專注於MooTools這個framework。我的部落格是有關MooTools。我寫過<a href="http://www.mootorial.com">MooTools的線上文件</a>以及一本有關MooTools的書。很明顯的我的立場是有一點偏頗的。我也必須說明我並不常用jQuery。如果你是個jQuery的開發員，同時看到我文章裡任何謬誤之處，請聯絡我並不吝給予指教錯誤之處。我的目的是讓文章正確且有所助益而非去推銷特定的framework。</p>
<h3>
	目的</h3>
<p>
	透過我的說明，讓大家明白這兩個frameworks之間的差異進而能幫助大家做出一個選擇。我首先要說的是，<strong>兩個frameworks都是很好的選擇</strong>，你並不會選到一個糟糕的framework。兩者各有其強項與弱項，但是都是很棒的。除此之外還有很多也很優秀的frameworks值得考慮，如<a href="http://www.dojotoolkit.org/">Dojo</a>,<a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/">YUI</a>, <a href="http://extjs.com/">Ext</a> 等等的。這些選擇基本上也取決於自己的習慣跟需要完成甚麼樣的東西而定。這篇文章的重點在於MooTools跟jQuery之間的比較，因為我看到越來越多的人在這兩者之間猶豫不決著。最後我要聲明的是，我並不是想要說服誰誰誰從某個framework轉換到另一個，這兩個frameworks其實有很多有趣的地方值得我們學習。你可以從這個公告看到我寫這篇文章的由來。</p>
<h3>
	內容</h3>
<ul>
	<li>
		<a href="show-89-1.htm#mottos">標題說明一切</a></li>
	<li>
		<a href="show-89-1.htm#learning">學習曲線與社群</a></li>
	<li>
		<a href="show-90-1.htm#javascript">JavaScript過人之處</a>
		<ul style="margin-bottom: 0px">
			<li>
				<a href="show-90-1.htm#dom">不只是DOM</a></li>
			<li>
				<a href="show-90-1.htm#inheritance">JavaScript的繼承</a></li>
			<li>
				<a href="show-90-1.htm#self">自我參照</a></li>
		</ul>
	</li>
	<li>
		<a href="show-91-1.htm#jsfun">MooTools把JavaScirpt變得更有趣</a></li>
	<li>
		<a href="show-91-1.htm#domfun">jQuery把DOM變得更有趣</a></li>
	<li>
		<a href="show-91-1.htm#cando">你行的我比你更行</a></li>
	<li>
		<a href="show-91-1.htm#yourway">MooTools讓你想怎樣就怎樣</a></li>
	<li>
		<a href="show-92-1.htm#chaining">連續技(Chaining)的設計模式</a></li>
	<li>
		<a href="show-92-1.htm#reuse">jQuery程式的重複利用</a></li>
	<li>
		<a href="show-93-1.htm#classes">MooTools程式的重複利用</a>
		<ul>
			<li>
				<a href="show-93-1.htm#mooinheritance">MooTools與繼承</a></li>
			<li>
				<a href="show-93-1.htm#extension">延伸與實作(Extending and Implementing)</a></li>
		</ul>
	</li>
	<li>
		<a href="show-95-1.htm#conclusion">抉擇</a></li>
</ul>
<h2>
	統計</h2>
<table>
	<tbody>
		<tr>
			<th>
				&nbsp;</th>
			<th>
				jQuery 核心</th>
			<th>
				MooTools 核心</th>
		</tr>
		<tr>
			<td>
				檔案大小</td>
			<td>
				55.9K</td>
			<td>
				64.3K</td>
		</tr>
		<tr>
			<th colspan="3">
				功能</th>
		</tr>
		<tr>
			<td>
				授權</td>
			<td>
				MIT &amp; GPL</td>
			<td>
				MIT</td>
		</tr>
		<tr>
			<td>
				DOM 工具</td>
			<td>
				yes</td>
			<td>
				yes</td>
		</tr>
		<tr>
			<td>
				動畫效果</td>
			<td>
				yes</td>
			<td>
				yes</td>
		</tr>
		<tr>
			<td>
				事件處理</td>
			<td>
				yes</td>
			<td>
				yes</td>
		</tr>
		<tr>
			<td>
				CSS3 選擇器</td>
			<td>
				yes (Sizzle引擎)</td>
			<td>
				yes (Sly引擎)</td>
		</tr>
		<tr>
			<td>
				Ajax</td>
			<td>
				yes</td>
			<td>
				yes</td>
		</tr>
		<tr>
			<td>
				原生物件延伸 Native Extensions (不含Element)</td>
			<td>
				10幾個關於 Array, Object, 以及 String的延伸</td>
			<td>
				約70個 Array, Object, String, Function, 以及 Number 的延伸</td>
		</tr>
		<tr>
			<td>
				繼承</td>
			<td>
				沒有直接支援繼承</td>
			<td>
				提供 <em><a href="http://mootools.net/docs/core/Class/Class">Class</a></em> 構件式</td>
		</tr>
		<tr>
			<th colspan="3">
				其他考量項目</th>
		</tr>
		<tr>
			<td>
				plug-ins</td>
			<td>
				上百個非官方 plug-ins: <a href="http://plugins.jquery.com/">plugins.jquery.com</a></td>
			<td>
				目前約四五十個官方 plug-ins: <a href="http://mootools.net/more">mootools.net/more</a>, &amp; <a href="http://mootools.net/plugins">mootools.net/plugins</a></td>
		</tr>
		<tr>
			<td>
				官方UI套件</td>
			<td>
				yes</td>
			<td>
				no</td>
		</tr>
	</tbody>
</table>
<p class="footnote">
	資料來源: <a href="http://jquery.com">jquery.com</a>, <a href="http://mootools.net">mootools.net</a>, 與 <a href="http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks">wikipedia.com</a>.</p>
]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=88</link>
			<category domain="http://www.moocky.net/?cid=4">脚本相关</category>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=jquery">jquery</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=mootools">mootools</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=javascript">javascript</category>
			<pubDate>Thu, 02 Dec 2010 15:35:30 +0000</pubDate>
		</item>
		<item>
			<link>http://www.moocky.net/?action=show&amp;id=87</link>
			<guid>http://www.moocky.net/?action=show&amp;id=87</guid>
			<title>IE8定义文档兼容性</title>
			<author>moocky@moocky.net(admin)</author>
			<description><![CDATA[Moocky.Mark's Blog ( http://www.moocky.net/ ) : <p>
	更新日期： 2009 年 2 月</p>
<p>
	原文地址：<a href="http://msdn.microsoft.com/zh-cn/library/cc288325%28VS.85%29.aspx">http://msdn.microsoft.com/zh-cn/library/cc288325%28VS.85%29.aspx</a></p>
<p>
	文档兼容性可定义 Internet Explorer 呈现网页的方式。 本文将介绍文档兼容性、如何为网页指定文档兼容性模式以及如何确定网页的文档模式。</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		简介</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		了解文档兼容性的必要性</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		了解文档兼容性模式</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		指定文档兼容性模式</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		配置 Web 服务器以指定默认兼容性模式</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		确定文档兼容性模式</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		了解 Content 属性值</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		控制默认呈现</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		总结</li>
</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	<li>
		相关主题<br />
		<strong>简介<br />
		</strong>为了帮助确保您的网页在将来的 Internet Explorer 版本中具有一致的外观，Internet Explorer 8 引入了文档兼容性。 文档兼容性是对 Microsoft Internet Explorer 6 中引入的兼容性模式的扩展，使您可以选择 Internet Explorer 用于显示网页的特定呈现模式。
		<p>
			&nbsp;</p>
		<p>
			本文将说明文档兼容性的必要性，列出对近来的 Internet Explorer 版本可用的文档兼容性模式，并演示如何选择特定的兼容性模式。</p>
		<p>
			<strong>了解文档兼容性的必要性</strong><br />
			Internet Explorer 的每个主要版本中都会添加一些功能，旨在使浏览器更易于使用、提高安全性以及更紧密地支持行业标准。 随着 Internet Explorer 的功能不断增加，将会出现较早的网站可能无法正常显示的风险。</p>
		<p>
			为了最大程度地降低这种风险，Internet Explorer 6 允许 Web 开发人员选择 Internet Explorer 用来解释和显示其网页的方式。 默认为&ldquo;Quirks 模式&rdquo;；在这种模式下，将按照使用较旧的浏览器版本查看网页的方式来显示网页。 &ldquo;标准模式&rdquo;（也称为&ldquo;严格模式&rdquo;）的特点是可提供对行业标准的最大支持；但是，若要利用此增强的支持，网页中需要包括适当的 &lt;!DOCTYPE&gt; 指令。</p>
		<p>
			如果某个站点未包括 &lt;!DOCTYPE&gt; 指令，则 Internet Explorer 6 将使用 Quirks 模式显示该站点。 如果某个站点包含有浏览器未能识别的有效 &lt;!DOCTYPE&gt; 指令，则 Internet Explorer 6 将使用 Internet Explorer 6 标准模式显示该站点。 由于已经包含 &lt;!DOCTYPE&gt; 指令的站点很少，因此兼容性模式切换极为成功。 这样使 Web 开发人员能够选择最佳时间将其站点迁移到标准模式。</p>
		<p>
			随着时间的推移，许多站点都开始依赖标准模式。 这些站点同时还开始使用 Internet Explorer 6 的功能和行为来检测 Internet Explorer。 例如，Internet Explorer 6 并不支持 通用选择器（可能为英文网页）；而某些网站将此用作为 Internet Explorer 提供特定内容的方式。</p>
		<p>
			Internet Explorer 7 提供了通用选择器支持等新功能，旨在更全面地支持行业标准。 由于 &lt;!DOCTYPE&gt; 指令仅支持 Quirks 模式和标准模式这两种设置，因此 Internet Explorer 7 标准模式替换了 Internet Explorer 6 标准模式。</p>
		<p>
			结果，依赖于 Internet Explorer 6 标准模式的行为的站点（如缺乏对通用选择器的支持）将无法检测到新版本的浏览器。 因此，Internet Explorer 特定的内容不会提供给 Internet Explorer 7，并且这些站点不会按预期显示。 由于 Internet Explorer 7 仅支持两种兼容性模式，因此将会迫使受影响站点的所有者更新其站点以支持 Internet Explorer 7。</p>
		<p>
			与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。</p>
		<p>
			这将允许您选择何时更新站点以支持由 Internet Explorer 8 支持的新功能。</p>
		<p>
			<strong>了解文档兼容性模式</strong><br />
			Internet Explorer 8 支持很多文档兼容性模式，这些模式启用不同的功能并可影响内容的显示方式。</p>
		<p>
			&ldquo;模仿 IE8&rdquo;模式将告诉 Internet Explorer 使用 &lt;!DOCTYPE&gt; 指令来确定如何呈现内容。 标准模式指令将以 Internet Explorer 8 标准模式显示，而 Quirks 模式指令将以 IE5 模式显示。 与 IE8 模式不同，&ldquo;模仿 IE8&rdquo;模式遵循 &lt;!DOCTYPE&gt; 指令。</p>
		<p>
			&ldquo;模仿 IE7&rdquo;模式将告诉 Internet Explorer 使用 &lt;!DOCTYPE&gt; 指令来确定如何呈现内容。 标准模式指令以 Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。 与 IE7 模式不同，&ldquo;模仿 IE7 模式&rdquo;遵循 &lt;!DOCTYPE&gt; 指令。 对于很多网站来说，这是首选的兼容性模式。</p>
		<p>
			IE5 模式呈现内容的方式如同使用了 Internet Explorer 7 的 Quirks 模式来显示内容，这与 Internet Explorer 5 显示内容的方式非常相似。</p>
		<p>
			无论页面是否包含 &lt;!DOCTYPE&gt; 指令，IE7 模式呈现内容的方式均如同使用了 Internet Explorer 7 的标准模式来显示内容。</p>
		<p>
			IE8 模式可最大程度地支持行业标准（包括 W3C 级联样式表级别 2.1 规范（可能为英文网页）&nbsp;&nbsp; 和 W3C 选择器 API（可能为英文网页）&nbsp; ），并提供对 W3C 级联样式表级别 3 规范（工作草案）（可能为英文网页）&nbsp;&nbsp; 的有限支持。</p>
		<p>
			Edge 模式将告诉 Internet Explorer 以可用的最高级别模式显示内容。 对于 Internet Explorer 8，这等同于 IE8 模式。 假设 Internet Explorer 的将来版本支持更高级别的兼容性模式，那么，设置为 Edge 模式的页面将以该版本支持的最高级别的模式显示。 当使用 Internet Explorer 8 查看时，这些相同的页面仍会以 IE8 模式显示。</p>
		<p>
			由于 Edge 模式的文档使用查看网页所用的 Internet Explorer 版本可用的最高级别模式来显示网页，因此，建议仅将 Edge 模式用于测试页面和其他非生产活动。</p>
		<p>
			<strong>指定文档兼容性模式<br />
			</strong>若要为网页指定文档模式，请使用 meta 元素，以在网页中包含 X-UA-Compatible&nbsp; http-equiv 标头。 以下示例指定&ldquo;模仿 IE7&rdquo;模式兼容性。</p>
		<p>
			&lt;html&gt;<br />
			&lt;head&gt;<br />
			&nbsp; &lt;!-- Mimic Internet Explorer 7 --&gt;<br />
			&nbsp; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;<br />
			&nbsp; &lt;title&gt;My Web Page&lt;/title&gt;<br />
			&lt;/head&gt;<br />
			&lt;body&gt;<br />
			&nbsp; &lt;p&gt;Content goes here.&lt;/p&gt;<br />
			&lt;/body&gt;<br />
			&lt;/html&gt; content 属性指定页面的模式；若要模仿 Internet Explorer 7 的行为，请指定&ldquo;IE=EmulateIE7&rdquo;。 指定&ldquo;IE=5&rdquo;、&ldquo;IE=7&rdquo;或&ldquo;IE=8&rdquo;可选择相应的兼容性模式。 还可以指定&ldquo;IE=edge&rdquo;以告诉 Internet Explorer 8 使用可用的最高级别模式。</p>
		<p>
			X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。</p>
		<p>
			<strong>配置 Web 服务器以指定默认兼容性模式<br />
			</strong>网站管理员可以通过定义站点的自定义标头，将其站点配置为默认采用特定的文档兼容性模式。 具体过程将依您的 Web 服务器而定。 例如，通过以下 web.config 文件，可以让 Microsoft Internet Information Services (IIS) 定义一个自定义标头，以便自动按照 IE7 模式呈现所有页面。</p>
		<p>
			&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />
			&lt;configuration&gt;<br />
			&nbsp; &lt;system.webServer&gt;<br />
			&nbsp;&nbsp;&nbsp; &lt;httpProtocol&gt;<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;customHeaders&gt;<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;clear /&gt;<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;add name=&quot;X-UA-Compatible&quot; value=&quot;IE=EmulateIE7&quot; /&gt;<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/customHeaders&gt;<br />
			&nbsp;&nbsp;&nbsp; &lt;/httpProtocol&gt;<br />
			&nbsp; &lt;/system.webServer&gt;<br />
			&lt;/configuration&gt; 如果使用 Web 服务器指定了默认的文档兼容性模式，则可通过在特定的网页中指定不同的文档兼容性模式来覆盖默认设置。 在网页中指定的模式优先于由 Web 服务器指定的模式。</p>
		<p>
			有关如何指定自定义标头的信息，请查看特定的 Web 服务器的文档。 或者，访问以下网页以获取详细信息：</p>
		<p>
			在 Apache 上实现 META 切换（可能为英文网页）<br />
			在 IIS 上实现 META 切换（可能为英文网页）<br />
			确定文档兼容性模式<br />
			若要确定使用 Internet Explorer 8 的网页的文本兼容性模式，请使用 document 对象的 documentMode 属性。 例如，将以下内容键入到 Windows Internet Explorer 8 的地址栏中，可显示当前网页的文档模式。</p>
		<p>
			javascript:alert(document.documentMode);documentMode 属性将返回一个与页面的文档兼容性模式相对应的数值。 例如，如果某个页面已选择支持 IE8 模式，则 documentMode 将返回值 8。</p>
		<p>
			在 Internet Explorer 6 中引入的 compatMode 属性已被弃用，取而代之的是在 Internet Explorer 8 中引入的 documentMode 属性。当前依赖于 compatMode 的应用程序仍然可以在 Internet Explorer 8 中运行；但是，应将这些应用程序更新为使用 documentMode。</p>
		<p>
			如果希望使用 JavaScript 来确定文档的兼容性模式，则应包含支持 Internet Explorer 旧版本的代码，如以下示例中所示。</p>
		<p>
			engine = null;<br />
			if (window.navigator.appName == &quot;Microsoft Internet Explorer&quot;)<br />
			{<br />
			&nbsp;&nbsp; // This is an IE browser. What mode is the engine in?<br />
			&nbsp;&nbsp; if (document.documentMode) // IE8<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; engine = document.documentMode;<br />
			&nbsp;&nbsp; else // IE 5-7<br />
			&nbsp;&nbsp; {<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; engine = 5; // Assume quirks mode unless proven otherwise<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (document.compatMode)<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (document.compatMode == &quot;CSS1Compat&quot;)<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; engine = 7; // standards mode<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
			&nbsp;&nbsp; }<br />
			&nbsp;&nbsp; // the engine variable now contains the document compatibility mode.<br />
			}</p>
		<p>
			<strong>了解 content 属性值<br />
			</strong>content 属性的使用很灵活，它可以接受除前面所述的值之外的值。 这样，您就能够更好地控制 Internet Explorer 显示网页的方式。 例如，可以将 content 属性设置为 IE=7.5。 当您如此设置之后，Internet Explorer 会尝试将该值转换为 版本矢量（可能为英文网页），并选择与转换结果最接近的模式。 在本例中，Internet Explorer 将会设置为 IE7 模式。 以下示例显示了为其他值选择的模式（如果不存在其他缓解因素）。</p>
		<p>
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=4&quot;&gt;&nbsp;&nbsp; &lt;!-- IE5 mode --&gt;<br />
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=7.5&quot; &gt; &lt;!-- IE7 mode --&gt;<br />
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=100&quot; &gt; &lt;!-- IE8 mode --&gt;<br />
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=a&quot; &gt;&nbsp;&nbsp; &lt;!-- IE5 mode --&gt;</p>
		<p>
			&lt;!-- This header mimics Internet Explorer 7 and uses<br />
			&nbsp;&nbsp;&nbsp;&nbsp; &lt;!DOCTYPE&gt; to determine how to display the Web page --&gt;<br />
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;&nbsp;&nbsp;&nbsp;<br />
			注意&nbsp; 上一个示例显示了各个 content 值的结果。 实际上，Internet Explorer 仅遵循网页中的第一个 X-UA-Compatible 标头。<br />
			还可以使用 content 属性来指定多个文档兼容性模式；这将有助于确保网页在将来的浏览器版本中显示一致。 若要指定多个文档模式，应设置 content 属性以标识要使用的各个模式。 各个模式之间使用分号分隔。</p>
		<p>
			如果某个特定的 Internet Explorer 版本支持多个请求的兼容性模式，则该版本将使用标头的 content 属性中列出的可用的最高级别模式。 可以利用这一原理来排除特定的兼容性模式，但不建议这样做。 例如，下面的标头排除了 IE7 模式。</p>
		<p>
			&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=5; IE=8&quot; &gt;</p>
		<p>
			<strong>控制默认呈现</strong><br />
			当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 &lt;!DOCTYPE&gt; 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。</p>
		<p>
			如果 &lt;!DOCTYPE&gt; 指令指定了基于标准的文档类型，则 Internet Explorer 8 将以 IE8 模式显示该网页，但出现以下情况时除外：</p>
		<p>
			为该网页启用了兼容性视图。</p>
		<p>
			该网页是在 Intranet 区域中加载的，并且已将 Internet Explorer 8 配置为使用兼容性视图来显示 Intranet 区域中的网页。</p>
		<p>
			已将 Internet Explorer 8 配置为使用兼容性视图来显示所有网站。</p>
		<p>
			已将 Internet Explorer 8 配置为使用兼容性视图列表（其中指定了一组始终使用兼容性视图显示的网站）。</p>
		<p>
			已使用开发人员工具覆盖在该网页中指定的设置。</p>
		<p>
			该网页遇到了页面布局错误，并且已将 Internet Explorer 8 配置为，通过在兼容性视图中重新打开网页来自动从此类错误中恢复。</p>
		<p>
			有关详细信息，请参见 Internet Explorer 博客： 兼容性视图概述（可能为英文网页）&nbsp; 。</p>
		<p>
			注意&nbsp; 如果将 Internet Explorer 配置为使用兼容性视图加载 Intranet 页面，Internet Explorer 将对使用 localhost 地址或 环回地址（可能为英文网页）加载的页面引发异常。 如果 &lt;!DOCTYPE&gt; 指令指定基于标准的文档类型，则将以 IE8 模式显示使用这些技术加载的页面。<br />
			此外，可以使用下面的注册表项来控制 Internet Explorer 对未包含 X-UA-Compatible 标头的页面的处理方式。</p>
		<p>
			HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)<br />
			&nbsp;&nbsp;&nbsp;&nbsp; SOFTWARE<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Microsoft<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Internet Explorer<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Main<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FeatureControl<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FEATURE_BROWSER_EMULATION<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; iexplore.exe = (DWORD)<br />
			DWORD 值必须等于下列值之一。</p>
		<p>
			值 说明<br />
			7000 包含基于标准的 &lt;!DOCTYPE&gt; 指令的页面将以 IE7 模式显示。<br />
			8000 包含基于标准的 &lt;!DOCTYPE&gt; 指令的页面以 IE8 模式显示。<br />
			8888 页面始终以 IE8 模式显示，而不考虑 &lt;!DOCTYPE&gt; 指令。 （这可绕过前面列出的例外情况。）</p>
		<p>
			默认情况下，承载 WebBrowser 控件(可能为英文网页)的应用程序将以 IE7 模式打开基于标准的页面，除非页面中包含适当的 X-UA-Compatible 标头。 通过将应用程序可执行文件的名称添加到 FEATURE_BROWSER_EMULATION 功能控制项中，并相应地设置值，可以更改打开模式。</p>
		<p>
			<strong>总结<br />
			</strong>对于 Web 设计人员来说，兼容性是一个要考虑的重要问题。 尽管最好是创建不依赖于 Web 浏览器的特定行为或功能的站点，但有时这样做是不可能的。 文档兼容性模式将网页与 Internet Explorer 特定版本的行为相关联。</p>
		<p>
			使用 X-UA-Compatible 标头可指定页面支持的 Internet Explorer 版本。 使用 document.documentMode 可确定网页的兼容性模式。</p>
		<p>
			通过选择支持特定的 Internet Explorer 版本，可有助于确保页面在将来的浏览器版本中能够显示一致。</p>
	</li>
</p>
<p>
	&nbsp;</p>]]></description>
			<link>http://www.moocky.net/?action=show&amp;id=87</link>
			<category domain="http://www.moocky.net/?cid=1">程序开发</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=ie9">ie9</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=ie8">ie8</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=ie7">ie7</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=ie6">ie6</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=firefox">firefox</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=windows">windows</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=浏览器">浏览器</category>
			<category domain="http://www.moocky.net/?action=article&amp;tag=web">web</category>
			<pubDate>Tue, 02 Mar 2010 13:01:34 +0000</pubDate>
		</item>
	</channel>
</rss>

