diff options
Diffstat (limited to 'files/zh-tw/conflicting/learn')
3 files changed, 550 insertions, 0 deletions
diff --git a/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html b/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..29c2532f6f --- /dev/null +++ b/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,90 @@ +--- +title: 應該避免的過時語法 +slug: Web_開發/Historical_artifacts_to_avoid +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid +--- +<h2 id="介紹">介紹</h2> + +<p>許多人藉由觀看原始碼，然後複製貼上來學習 HTML、CSS 及 JavaScript。然而他們並沒有考慮到原本的網站，是否正確實做過。這意味著他們延續了一些過去必要，但現在不需要的程式慣例。這篇文章就是要列出那些隨著時間，變得不必要、或糟糕的程式語法。</p> + +<h2 id="Doctype">Doctype</h2> + +<p>大約有十來種 <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">(X)HTML文件類型描述（doctype）</a>，他們之間的差異非常細微（甚至沒差別），我們建議你使用以下 HTML5 的文件類型宣告：</p> + +<pre><!DOCTYPE html></pre> + +<p>如此會觸發所有瀏覽器使用標準模式（甚至包含 Internet Explorer 6）。</p> + +<h2 id="<meta>_元素與_charset_屬性"><code><meta></code> 元素與 <code>charset</code> 屬性</h2> + +<p>如同以下的原始碼寫法並不少見：</p> + +<pre><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></pre> + +<p>然而，就算你把它縮減成這樣，所有的瀏覽器還是會做出相同判定（甚至包括Internet Explorer 6）：</p> + +<pre><meta charset="UTF-8" /> +</pre> + +<p>這些知識已經透過<a href="https://blog.whatwg.org/the-road-to-html-5-character-encoding">逆向工程（reverse engineering）</a>與<a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">實用主義（pragmatism）</a>證實。用就對了。</p> + +<h2 id="不存在的_<meta>_元素">不存在的 <code><meta></code> 元素</h2> + +<p>許多被棄用或不標準的值，常常因為從某個頁面被複製到另個頁面，而延續了它們的利用。儘管這些元件被廣為利用，它們其實不符合規範、也不會有效用。特別是，不要去使用：</p> + +<ul> + <li><code><meta name="MSSmartTagsPreventParsing" content="true"></code> 這個只有在其中一個 beta 版的 Internet Explorer 6 是有用處的。這個 beta 版已經不再使用，而且這版本的特色聰明標籤（smart tags）已經被移除，也不會再被加回來。</li> + <li><code><meta name="robots" content="all"> </code>雖然 <code>robot</code> 屬性是存在且確實合法的，但請不要去使用根本不存在的值，像是 <code>all</code>。 <code>robots</code> 預設的值為 <code>index, follow</code>，其實這就是你寫的 <code>all</code> 想要做的事。因此請直接移除整個 <code><meta></code> 標籤即可。</li> + <li><code><meta name="copyright" content="…"> </code> 這個 meta 並不存在。移除它並創建一個版權頁面或 <code>div</code>，或是使用 <code>rel="copyright"</code> 的 {{HTMLElement("link")}} HTML 元素之連結。</li> + <li><code><meta name="rating" content="…"> </code> 這個 meta 並不存在。只要移除整個 <code><meta></code> 即可。</li> +</ul> + +<h2 id="HTML_腳本的註解">HTML 腳本的註解</h2> + +<p>曾經有一段時間有些瀏覽器了解 {{ HTMLElement("script") }} 標籤，但有些則否。這有時導致瀏覽器把應該作為腳本的文字，解讀成純文字。有個自然的想法，使得腳本成為 HTML 的註解。這方法，可以讓能執行腳本的瀏覽器做動、而不了解的瀏覽器忽略。</p> + +<p>從這時起，我們繼承了：</p> + +<pre><script> +<!-- +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); +document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); +//--> +</script> +</pre> + +<p>或是：</p> + +<pre><script type="text/javascript"> +<!--//--><![CDATA[//><!-- +Blabla.extend(MyFramework.settings, { "basePath": "/" }); +//--><!]]> +</script> +</pre> + +<p>如今，這只會在 strict XML 驗證下，因為註解避開不帶引號標記的誤報，而有所幫助。除此之外，是完全無用的。甚至不執行腳本的瀏覽器，也只會忽略 {{ HTMLElement("script") }} 標籤。簡單起見，只要把你的腳本寫在 {{ HTMLElement("script") }} 的開頭與結尾之間就行。更理想的話，把你的腳本變成獨立的檔案，並透過 {{ htmlattrxref("src", "script") }} 屬性連結。如果你在寫腳本，考慮使用 HTML5 {{ htmlattrxref("async", "script") }} 與 {{ htmlattrxref("defer", "script") }} 屬性。</p> + +<h2 id="不應再使用的元素">不應再使用的元素</h2> + +<h3 id="font_basefont"><a href="/zh-TW/docs/Web/HTML/Element/font">font</a>, <a href="/zh-TW/docs/Web/HTML/Element/basefont">basefont</a></h3> + +<p>這些元素不應再使用。針對元素排版外觀，應當優先考慮 CSS，並藉由元素、ID、或 class 屬性控制目標。</p> + +<h3 id="b_i_u">b, i, u</h3> + +<p>這些往往比較有爭議，但是當有相應的話，盡量去使用個別的 {{ HTMLElement("strong") }}、{{ HTMLElement("em") }} 或是 {{ HTMLElement("span") }} 和 CSS (<code>text-decoration:underline</code>)。</p> + +<p>斟酌考慮使用哪個元素。有些以發展為導向的頁面，建議以簡單的 {{ HTMLElement("strong") }} 取代 {{ HTMLElement("b") }}、還有 {{ HTMLElement("em") }} 取代 {{ HTMLElement("i") }}。<strong>遵從這個建議不是好主意。</strong>{{ HTMLElement("strong") }} 是用作強調陳述，而 {{ HTMLElement("em") }} 只是加粗文字。例如，使用 {{ HTMLElement("em") }} 去簡單完成斜體不是好主意。非強調的斜體文字可以透過你頁面 CSS 的 <code>font-style:italic</code> 完成。類似的，書的標題和藝術作品傳統上都被轉成斜體，但針對這些東西使用 {{ HTMLElement("cite") }} 元素可以給出比 {{ HTMLElement("em") }} 或 {{ HTMLElement("i") }} 更語意的標記。</p> + +<h3 id="acronym"><a href="/zh-TW/docs/Web/HTML/Element/acronym">acronym</a></h3> + +<p>acronym 元素不應該再使用。要表示縮寫應當用 {{ HTMLElement("abbr") }}。</p> + +<h3 id="tt_xmp"><a href="/zh-TW/docs/Web/HTML/Element/tt">tt</a>, <a href="/zh-TW/docs/Web/HTML/Element/xmp">xmp</a></h3> + +<p>不要使用這些元素。要表現出電腦程式碼的片段，使用 {{ HTMLElement("code") }}。要表現出預格式化的文字，使用 {{ HTMLElement("pre") }}。如果只是想要 monospace 字型，在 CSS 使用 <code>font-family: monospace</code>。</p> + +<h3 id="applet"><a href="/zh-TW/docs/Web/HTML/Element/applet">applet</a></h3> + +<p>這個元素不應再使用。更通用的 {{ HTMLElement("object") }} 才是首選。</p> diff --git a/files/zh-tw/conflicting/learn/javascript/objects/index.html b/files/zh-tw/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..292229d00d --- /dev/null +++ b/files/zh-tw/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,394 @@ +--- +title: JavaScript 物件導向介紹 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - 中階 + - 命名空間 + - 封裝 + - 建構子 + - 成員 + - 物件 + - 物件導向 + - 物件導向程式設計 +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>深入淺出物件導向，JavaScript 支援強大、彈性的物件導向程式設計 ({{Glossary("OOP")}})。本篇文章會先介紹物件導向程式設計，然後複習 JavaScript 物件模型，最後示範在 JavaScript 物件導向程式設計的概念。本篇文章並不會介紹 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes">在 ECMAScript 6 的物件導向程式設計</a> 的新語法。</p> + +<h2 id="複習_JavaScript">複習 JavaScript</h2> + +<p>若您對 JavaScript 變數、型態、函數及作用範圍的觀念並不是很有信心，您可以閱讀 <a href="/zh-TW/docs/Web/JavaScript/A_re-introduction_to_JavaScript">重新膫解 JavaScript</a> 中相關的主題。您也可以參考 <a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a>。</p> + +<h2 id="物件導向程式設計">物件導向程式設計</h2> + +<p>物件導向程式設計 (Object-oriented programming, OOP) 是一種使用 {{glossary("abstraction")}} 概念表達現實世界的程式設計方式。物件導向程式設計運用數個先前所建立的技術所組成，包含模組化 ({{glossary("modularity")}})、多型 ({{glossary("polymorphism")}}) 以及封裝 ({{glossary("encapsulation")}}) 。直到今天許多主流的程式語言 (如 Java, JavaScript, C#, C++, Python, PHP, Ruby 與 Objective-C) 也都支援物件導向程式設計。</p> + +<p>物件導向程式設計是將軟體想像成由一群物件交互合作所組成，而非以往以函數 (Function) 或簡單的指令集交互合作所組成。在物件導向的架構中，每個物件都具有接收訊息，處理資料以及發送訊息給其他物件的能力。每個物件都可視為獨一無二的個體，他們扮演不同的角色並有不同的能力及責任。</p> + +<p>物作導向程式設計提出了一個一個更有彈性且易於維護的設計方法，且廣泛被許多大型軟體工程所採用。由於物件導向程式設計強調模組化，因為物件導向的程式碼變的較為容易開發且易於理解。與較少模組化的程式設計技術相比，物件導向的程式碼更能更直接分析、編寫、理解複雜的情況與程序。<a href="#cite-1"><sup>1</sup></a></p> + +<p>JavaScript 是一個以雛型為基礎 (Prototype-based) 的程式設計語言 (或更準確的說是以雛型為基礎的腳本語言)，它採用了複製的模式而非繼承。以雛型為基礎的程式設計語言是一種物件導向程式設計，使用了函數來當做類別 (Class) 的建構子 (Constructor)，儘管 JavaScript 擁有類別 (Class) 的關鍵字，但它沒有類別敘述，當要拿 JavaScript 與其他物件導向程式語言相比時，這是很重要的區別。</p> + +<h2 id="專門用語">專門用語</h2> + +<dl> + <dt>{{Glossary("Namespace")}}</dt> + <dd>可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。</dd> + <dt>{{Glossary("Class")}}</dt> + <dd>用來定義物件的特徵，類別 (Class) 是物件屬性與方法的藍圖。</dd> + <dt>{{Glossary("Object")}}</dt> + <dd>類別 (Class) 的實際案例。</dd> + <dt>{{Glossary("Property")}}</dt> + <dd>物件 (Object) 的特徵，例如：顏色。</dd> + <dt>{{Glossary("Method")}}</dt> + <dd>物件 (Object) 的功能，例如：行走。它是與類別相關的子程序或函數。</dd> + <dt>{{Glossary("Constructor")}}</dt> + <dd>一個在物件產生時會被呼叫的方法。通常會使用與其所在類別 (Class) 相同的名稱。</dd> + <dt>{{Glossary("Inheritance")}}</dt> + <dd>一個類別 (Class) 可以繼承另一個類別的特徵與功能。</dd> + <dt>{{Glossary("Encapsulation")}}</dt> + <dd>可以將資料與方法包裝在一起使用的技術。</dd> + <dt>{{Glossary("Abstraction")}}</dt> + <dd>結合物件的複雜繼承關係、方法與屬性來充分反映現實的模型。</dd> + <dt>{{Glossary("Polymorphism")}}</dt> + <dd>Poly 指的是 "多" 而 Morphism 指的是 "<em>型</em>"。是指不同的類別可以定義相同的方法或屬性。</dd> +</dl> + +<p>要了解物件導向程式設計更廣泛的說明，請參考維基百科的 {{interwiki("wikipedia", "Object-oriented programming")}}。</p> + +<h2 id="以雛型為基礎_Prototype-based_的程式設計">以雛型為基礎 (Prototype-based) 的程式設計</h2> + +<p>以雛型為基礎的程式設計是一種不使用類別的物件導向程式設計模式，但它是第一個透過修改 (或者擴充) 既有的 <em>prototype</em> 來達到類別的功能並可重複使用 (等同在以類別為基礎的程式語言中的繼承)。 又稱作無類別 (Classless)、雛型導向 (Prototype-oriented) 或以實例為基的程式語言 (Instance-based programming)。</p> + +<p>最早 (最典型) 以雛型為基礎的程式語言的典範是由 David Ungar 與 Randall Smith 所開發的 {{interwiki("wikipedia", "Self (programming language)", "Self")}}。近年來無類別 (Class-less) 的程式設計風格越來越流行，並且被 JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (在使用 Viewer 框架來處理 Morphic 元件時)，還有許多其他程式語言所採用。<a href="#cite-2"><sup>2</sup></a></p> + +<h2 id="JavaScript_物件導向程式設計">JavaScript 物件導向程式設計</h2> + +<h3 id="命名空間">命名空間</h3> + +<p>命名空間是一個可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。在<strong> JavaScript 中命名空間其實是另一個包含方法、屬性及物件的物件。</strong></p> + +<div class="note"> +<p>注意，在 JavaScript 中一般物件與命名空間並無語法上的差異，這於其他許多物件導向的語言並不相同，可能是初學 JavaScript 的程式設計師容易混淆的地方。</p> +</div> + +<p>在 JavaScript 建立一個命名空間背後的概念非常的簡單：建立一個全域的物件，然後將所有的變數、方法及函數設為該物件的屬性。使用命名空間可以減少應用程式中名稱衝突發生的機率，由於每個應用程式的物件皆會是應用程式定義的全域物件的屬性。</p> + +<p>讓我們來建立一個叫做 MYAPP 全域物件：</p> + +<pre class="brush: js notranslate">// 全域命名空間 +var MYAPP = MYAPP || {};</pre> + +<p>在上述程式範例，我們會先檢查 <code>MYAPP</code> 是否已經定義過 (不論是定義在同一檔案或在其他檔案)。若已定義過，便會使用現有的 MYAPP 全域物件，否則會建一個稱作 <code>MYAPP</code> 的空物件來包裝方法、函數、變數及物件。</p> + +<p>我們也可以建立子命名空間 (要注意，全域物件必須已事先定義)：</p> + +<pre class="brush: js notranslate">// 子命名空間 +MYAPP.event = {};</pre> + +<p>以下的程式碼會建立一個命名空間並加入變數、函數以及一個方法：</p> + +<pre class="brush: js notranslate">// 建立一個稱作 MYAPP.commonMethod 的容器來存放常用方法與屬性 +MYAPP.commonMethod = { + regExForName: "", // define regex for name validation + regExForPhone: "", // define regex for phone no validation + validateName: function(name){ + // Do something with name, you can access regExForName variable + // using "this.regExForName" + }, + + validatePhoneNo: function(phoneNo){ + // do something with phone number + } +} + +// 物件與方法宣告 +MYAPP.event = { + addListener: function(el, type, fn) { + // code stuff + }, + removeListener: function(el, type, fn) { + // code stuff + }, + getEvent: function(e) { + // code stuff + } + + // 可以加入其他方法與屬性 +} + +// 使用 addListener 方法的語法： +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="標準內建物件">標準內建物件</h3> + +<p> JavaScript 的核心內建了許多物件，例如有 {{jsxref("Math")}}, {{jsxref("Object")}}, {{jsxref("Array")}} 以及 {{jsxref("String")}}。以下範例將示範如何使用 Math 物件中的 <code>random()</code> <code>方法</code>來取得一個隨機的數字。</p> + +<pre class="brush: js notranslate">console.log(Math.random()); +</pre> + +<div class="note"><strong>注意：</strong>這個例子及之後的例子會假設全域已經有定義名稱為 {{domxref("console.log()")}} 的函數。<code>console.log()</code> 函數並不算是 JavaScript 的一部份，但是有許多瀏覽器會實作這個功能來協助除錯使用。</div> + +<p>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects" title="zh-TW/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 參考: 標準內建物件</a> 來取得在 JavaScript 中所有核心物件的清單。</p> + +<p>每個在 JavaScript 中的物件均為物件 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> <code>的</code>實例 (Instance)，因此會繼承其所有的屬性與方法。</p> + +<h3 id="自訂物件">自訂物件</h3> + +<h4 id="類別_Class">類別 (Class)</h4> + +<p>JavaScript 是以雛形為基礎的程式語言，並沒有像在 C++ 或 Java 中看以到的 <code>class</code> 敘述句，這有時會讓習慣使用有 <code>class</code> 敘述句的程式設計師混淆。JavaScript 使用函數來作為類別 (Class) 的建構子 (Constructor)，要定義一個類別 (Class) 如同定義一個函數 (Function)一樣簡單，以下例子中我們使用空的建構子來定義了一個新的 Person 類別。</p> + +<pre class="brush: js notranslate">var Person = function () {}; +</pre> + +<h4 id="物件_Object_-_類別的實例_Instance">物件 (Object) - 類別的實例 (Instance)</h4> + +<p>要建立物件 <code>obj</code> 的新實例，我們可以使用 <code>new obj</code> 敘述句，並將結果 (型態為 <code>obj</code>) 指派 (Assign) 到一個變數方便之後存取。</p> + +<p>在先前範例中我們定義了一個名稱為 <code>Person</code> 的類別 (Class)。在以下的例子我們會建立兩個實例 (<code>person1</code> 與 <code>person2</code>)。</p> + +<pre class="brush: js notranslate">var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note"> +<p>請參考 {{jsxref("Object.create()")}} 來了解建立未初始化實例的實例化新方法。</p> +</div> + +<h4 id="建構子_Constructor">建構子 (Constructor)</h4> + +<p>建構子會在實例化 (Instantiation) 時被呼叫 (建立物件實例被建立時)。建構子是類別的一個方法，在 JavaScript 中會以函數來當做物件的建構子，因此無須明確的定義建構子方法，而每個在類別中宣告的動作均會在實例化時被執行。</p> + +<p>建構子會用來設定物件的屬性 (Property) 或是呼叫要準備讓物件可以使用的方法 (Method)。增加類別的方法及定義會使用另一種語法，在本文稍後會說明。</p> + +<p>在以下例之中，類別 <code>Person</code> 的建構子在 <code>Person </code>實例化時會記錄下一個訊息。</p> + +<pre class="brush: js notranslate">var Person = function () { + console.log('instance created'); +}; + +var person1 = new Person(); // 會記錄 "instance created" +var person2 = new Person(); // 會記錄 "instance created" +</pre> + +<h4 id="屬性_Property_-_物件的屬性">屬性 (Property) - 物件的屬性</h4> + +<p>屬性即為在類別中的變數，每個物件的實例都會有同樣的屬性。屬性會在類別的建構子 (函數) 中設定，所以屬性在每個實例產生時才會產生。</p> + +<p>關鍵字 <code>this </code>可以引用目前的物件，讓您使用在該類別中的其他屬性。存取 (讀寫或寫入) 一個在類別之外的屬性可以用語法：<code>InstanceName.Property</code>，如同在 C++, Java 以及其他語言。 (在類別內會使用語法 <code>this.Property</code> 來取得或設定屬性的數值。)</p> + +<p>在以下例子中，我們會在實例化時定義 <code>Person</code> 類別的 <code>firstName</code> 屬性：</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; + console.log('Person instantiated'); +}; + +var person1 = new Person('Alice'); // 會記錄 "Person instantiated" +var person2 = new Person('Bob'); // 會記錄 "Person instantiated" + +// 顯示物件的 firstName 屬性 +console.log('person1 is ' + person1.firstName); // 會記錄 "person1 is Alice" +console.log('person2 is ' + person2.firstName); // 會記錄 "person2 is Bob" +</pre> + +<h4 id="方法_Method">方法 (Method)</h4> + +<p>方法即為函數 (也如同函數般定義)，但是依照屬性的邏輯來運作，呼叫一個方法如同存取一個屬性，但您需要在函數名稱後加上 <code>()</code> ，並有可能會有參數。要定義一個方法，只需將函數指定 (Assign) 給類別的 <code>prototype</code> 屬性中一個已命名的屬性，接著，您便可用剛指定的屬性名稱來呼叫該物件的方法。</p> + +<p>以下範例中，我們為 <code>Person</code> 類別定義了方法 <code>sayHello()</code> 並使用。</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); + +// 呼叫 Person sayHello 方法。 +person1.sayHello(); // 會記錄 "Hello, I'm Alice" +person2.sayHello(); // 會記錄 "Hello, I'm Bob" +</pre> + +<p>在 JavaScript 中，方法其實是一般的函數物件 (Function object) 連結到一個物件的屬性，這意謂著您可以在 "物件之外" 呼叫方法。請看以下範例程式碼：</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); +var helloFunction = person1.sayHello; + +// 會記錄 "Hello, I'm Alice" +person1.sayHello(); + +// 會記錄 "Hello, I'm Bob" +person2.sayHello(); + +// 會記錄 "Hello, I'm undefined" (或在 Strict +// 模式會出現 TypeError) +helloFunction(); + +// 會記錄 true +console.log(helloFunction === person1.sayHello); + +// 會記錄 true +console.log(helloFunction === Person.prototype.sayHello); + +// 會記錄 "Hello, I'm Alice" +helloFunction.call(person1);</pre> + +<p>如範例中所示，我們讓所有的參考均指向 <code>sayHello</code> 函數 — 一個在 <code>person1、一個在 Person.prototype、另一個在 helloFunction</code> 變數 — 這些均參考<em>相同的函數</em>。在呼叫的過程中 <code>this</code> 的值會根據我們如何呼叫來決定，最常見的地方是：我們取得函數的物件屬性所在，在表示法中呼叫 <code>this</code> — <code>person1.sayHello()</code>— 會設定 <code>this</code> 為我們取得函數的地方 (<code>person1</code>)，這也是 <code>person1.sayHello() 顯示的名稱為 </code>"Alice" 以及 <code>person2.sayHello() 顯示的</code>名稱為 "Bob" 的原因。但如果我們以其他的方式來呼叫，那麼 <code>this</code> 結果將截然不同：在變數中呼叫 <code>this</code> — <code>helloFunction()</code>— 會設定 <code>this</code> 為所在的全域物件 (在瀏覽器即為 <code>window</code>)。由於物件 (可能) 並沒有 <code>firstName</code> 屬性，因此會得到 "Hello, I'm undefined" 這樣的結果 (在 Loose 模式才有這樣的結果，若在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> 則會不同 [會出現錯誤]，為了避免混淆，此處將不會再詳述)。 或者我們可以像最後一個例子使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> (或 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>) 來明確的設定 <code>this。</code></p> + +<div class="note"><strong>注意：</strong>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> 及 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a> 來取得更多有關 <code>this</code> 的資訊</div> + +<h4 id="繼承">繼承</h4> + +<p>繼承是一種用一個或多個類別建立一個特殊版本類別的方式 (<em>JavaScript 僅支援單一繼承</em>)。這個特殊的類別通常稱做<em>子類別</em>，而其引用的類別則通常稱作<em>父類別</em>。在 JavaScript 您可以指定父類別的實例到子類別來做到這件事。在最近的瀏覽器中您也可以使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/zh-TW/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> 來實作繼承。</p> + +<div class="note"> +<p><strong>注意：</strong>JavaScript 不會偵測子類別的 <code>prototype.constructor</code> (請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>)，所以我們必須手動處理。請參考在 Stackoverflow 的問題 "<a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">為什麼一定要設定 prototype 的建構子?</a>"。</p> +</div> + +<p>於以下範例，我們會定義類別 <code>Student</code> 做為 <code>Person</code> 的子類別。然後我們會重新定義 <code>sayHello()</code> 方法然後加入 <code>sayGoodBye()</code> 方法。</p> + +<pre class="brush: js notranslate">// 定義 Person 建構子 +var Person = function(firstName) { + this.firstName = firstName; +}; + +// 加入兩個方法到 Person.prototype +Person.prototype.walk = function(){ + console.log("I am walking!"); +}; + +Person.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName); +}; + +// 定義 Student 建構子 +function Student(firstName, subject) { + // Call the parent constructor, making sure (using call) + // that "this" is set correctly during the call + Person.call(this, firstName); + + // Initialize our Student-specific properties + this.subject = subject; +} + +// 建立 Student.prototype 物件來繼承 Person.prototype。 +// 注意: 在此處經常見的錯誤是使用 "new Person()" 來建立 +// Student.prototype。不正確的原因許多個，尤其是 +// 我們沒有給予 Person 任何 "firstName" 的參數。 +// 呼叫 Person 的正確位置在上方，也就是我們呼叫 Student +// 的地方。 +Student.prototype = Object.create(Person.prototype); // 詳見以下說明 + +// 設定 "constructor" 屬性參考 Student +Student.prototype.constructor = Student; + +// 替換 "sayHello" 方法 +Student.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName + ". I'm studying " + + this.subject + "."); +}; + +// 加入"sayGoodBye" 方法 +Student.prototype.sayGoodBye = function(){ + console.log("Goodbye!"); +}; + +// 範例用法: +var student1 = new Student("Janet", "Applied Physics"); +student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." +student1.walk(); // "I am walking!" +student1.sayGoodBye(); // "Goodbye!" + +// 檢查 instanceof 可正常運作 +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p>於 <code>Student.prototype = Object.create(Person.prototype);</code> 一行：在舊版的 JavaScript 引擎沒有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>，可以使用 "polyfill" (又稱 "shim"，請參考以下文章連結) 或使用函數來達到同樣的效果，如：</p> + +<pre class="brush: js notranslate">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// 用法: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note"><strong>注意：</strong> 請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 來了解其功能與舊引擎使用的 shim。</div> + +<p>要在不管物件如何實例化的情況下確保 <code>this</code> 指向正確的地方並不簡單，儘管如此，這裡仍有一個簡單的習慣用法讓這件事變的較簡單。</p> + +<pre class="brush: js notranslate">var Person = function(firstName) { + if (this instanceof Person) { + this.firstName = firstName; + } else { + return new Person(firstName); + } +} +</pre> + +<h4 id="封裝">封裝</h4> + +<p>於上述例子中 <code>Student</code> 並不需要知道 <code>Person</code> 類別的 <code>walk()</code> 方法實作的方式，但仍可以使用該方法，除非我們想要更改該函數，否則 <code>Student</code> 類別並不需要明確的定義該函數。這樣的概念稱就叫作<strong>封裝 (Encapsulation)</strong>，透過將每個類別的資料與方法包裝成一個單位。</p> + +<p>隱藏資訊在其他語言是常見的功能，通當會使用私有 (Private) 與保護 (Protected) 方法/屬性。既使如此，您仍可在 JavaScript 模擬類似的操作，這並不是物件導向程式設計必要的功能。<a href="#cite-3"><sup>3</sup></a></p> + +<h4 id="抽象化">抽象化</h4> + +<p>抽象化是一個機制能讓您將工作問題的目前部份進行建立模型，不論是用繼承 (特殊化) 或是組合的方式。JavaScript 可以透過繼承達到特殊化 (Specialization)，並可讓類別實例成為其他物件的屬性來達到組合 (Composition)。</p> + +<p>JavaScript 的 Function 類別繼承 Object 類別 (這示範了模型的特殊化) 而 {{jsxref("Function.prototype")}} 屬性是 {{jsxref("Object")}} 的實例 (這示範了組合)。</p> + +<pre class="brush: js notranslate">var foo = function () {}; + +// 會記錄 "foo is a Function: true" +console.log('foo is a Function: ' + (foo instanceof Function)); + +// 會記錄 "foo.prototype is an Object: true" +console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre> + +<h4 id="Polymorphism" name="Polymorphism">多型</h4> + +<p>如同所有方法與屬性會定義在 prototype 之中，不同的類別可以定義相同名稱的方法，而這些方法的有效範圍其所在的類別之中，除非兩個類別之間有父子關係 (例如，其中一個類別是繼承另一個類別而來)。</p> + +<h2 id="注意">注意</h2> + +<p>在 JavaScript 並不是只有這些方式可以實作物件導向程式設計，JavaScript 在這方面非常有彈性。另外，在此處示範的方法並沒有使用任何語言特殊技巧，也沒有模仿其他語言的物件理論來實作。</p> + +<p>在 JavaScript 也有其他的方式可以做更進階的物件導向程式設計，但已超出本篇簡介的範圍。</p> + +<h2 id="參考文獻">參考文獻</h2> + +<ol> + <li><a href="https://en.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">Wikipedia - Object-oriented programming</a></li> + <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">Wikipedia - Prototype-based programming</a></li> + <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">Wikipedia - Encapsulation (object-oriented programming)</a></li> +</ol> + +<h2 id="相關資料">相關資料</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴謹模式 (Strict mode)</a></li> +</ul> diff --git a/files/zh-tw/conflicting/learn/server-side/django/index.html b/files/zh-tw/conflicting/learn/server-side/django/index.html new file mode 100644 index 0000000000..11e3c03038 --- /dev/null +++ b/files/zh-tw/conflicting/learn/server-side/django/index.html @@ -0,0 +1,66 @@ +--- +title: Python +slug: Python +tags: + - Python +translation_of: Learn/Server-side/Django +translation_of_original: Python +--- +<p><a class="external" href="http://www.python.org">Python</a> 是一種直譯式的腳本語言，是一個跨平台的的語言，可以在各個平台上面使用，如：Linux、Mac OS X、以及Microsoft Windows.</p> +<h2 id="Learning_Python" name="Learning_Python">學習 Python</h2> +<h3 id="免費的電子書">免費的電子書</h3> +<p>如果是初學 Python，可以考慮看 <a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a>，雖然他最後是更新的時間是2004年，但依然是一部免費而且很棒的教程。它含括了幾乎所有 Python 的基本元素，還有一些平常使用 Python 可以執行什麼任務，像是網頁的請求，檔案的處理。如果對於 Python 基礎已經基礎的概念，就可以參考 <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a> ，這本書將會對於 Python 有更進階的介紹。</p> +<p>其他相關的免費電子書或是線上資源 :</p> +<ul style="margin-left: 40px;"> + <li>The <a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Python Tutorial</a> at <a href="http://docs.python.org" title="http://docs.python.org">docs.python.org</a></li> + <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">Non-Programmer's Tutorial for Python 2.6</a> at <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a></li> + <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist by Allen B. Downey (free <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> & <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a> versions). + <ul> + <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> by Allen B. Downey "picks up where Think Python leaves off" (free <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> & <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> versions)</li> + </ul> + </li> + <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> by Zed Shaw (<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">free HTML verison</a>)</li> + <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> by Steven F. Lott (<a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">also available as a PDF</a>)</li> +</ul> +<p>當了解基礎的 Python，<a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> 將幫助你了解一些 Python 特別的地方，還有跟別的語言的差異。</p> +<h3 id="Free_Online_Courses">Free Online Courses</h3> +<ul style="margin-left: 40px;"> + <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li> + <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li> + <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> at Code Academy</li> + <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> at MIT</li> +</ul> +<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python in Mozilla-based applications</h2> +<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> in Mozilla is used to support inter-language communication. Out-of-box it only supports C++ <-> JavaScript communication. The <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">Python XPCOM package</a> (also called PyXPCOM) is the low-level glue that ties Python and Mozilla together, letting XPCOM components written in JavaScript or C++ to be used from Python and vice versa. PyXPCOM is<strong> not</strong> included in the default Firefox build, so you'll need to use a third-party build or build yourself to use it. The most known consumer of PyXPCOM is the Komodo family of products.</p> +<p>Starting with Mozilla 1.9, Python DOM (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>) bindings are implemented. This lets <a href="/en-US/docs/Chrome" title="Chrome">chrome</a> XUL and HTML authors use Python in their <script> tags (again, not in the official Firefox/Thunderbird builds).</p> +<h2 id="Python-based_tools_for_Mozilla_development">Python-based tools for Mozilla development</h2> +<p>Python is used by Mozillians for tools that do various things with Mozilla apps and infrastructure. It would be useful to have a document on <a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p> +<p>Tools are listed here: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p> +<h2 id="Use_of_Python_at_Mozilla">Use of Python at Mozilla</h2> +<p>Mozilla has considerable infrastructure based on python:</p> +<ul> + <li>django for <a class="external" href="http://blog.mozilla.com/webdev/" title="http://blog.mozilla.com/webdev/">webdev</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a> for continuous integration</li> + <li>many of our <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test harnesses</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a></li> +</ul> +<h2 id="Python_packaging">Python packaging</h2> +<p>Python uses <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> files to record metadata and installation instructions for <a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">python packages</a>. Running (e.g.) <code>python setup.py install</code> will install the package, making its modules available on <a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">python's import path</a>. For python 2.x, several distribution/installation modules exist. <code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> is the only distribution package available in <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">python's standard library</a>. <code>distutils</code> has ability to upload to the <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">python package index</a> and to install python packages. See the <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">Python documentation on <code>distutils</code></a> for details.</p> +<p>While <code>distutils</code> is built in to python's standard library, <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a> is a third-party ad hoc standard for packaging and distribution. It is mostly compatible with <code>distutils</code>, but importantly adds the ability for packages to <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include dependencies</a> that are installed as prerequisites at the time <code>setup.py</code> is invoked as well as the ability to install python packages in <a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">development mode</a>. This allows the files to be edited in place via <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">.pth files</a> which is handy if you are actively working on a project. <code>setuptools</code> also provides an <code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> script for installing packages and their dependencies through the web from <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>. For instance, in order to install the <a class="external" href="http://pyyaml.org/wiki/PyYAML" title="http://pyyaml.org/wiki/PyYAML">PyYAML</a> package, just run</p> +<pre>easy_install PyYAML +</pre> +<p>Since <code>setuptools</code> is not included with python, you will need to install it in order to use it. You may install it from the <code>setuptools</code> PyPI page by downloading, extracting, and running <code>python setup.py install</code>. Or you can use the <code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code> script. You can download and run it with python (with root/Administrator privileges), or if you're in a <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash shell</a>, you can run</p> +<pre>sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py) +</pre> +<p><code>setuptools</code> is also provided with instances of <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, so if you use virtualenvs for developing you may not need to install <code>setuptools</code> globally. <a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a> is a fork of setuptools written by Mozilla's own <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a>. It is compatible with <code>setuptools</code> and fixes a few bugs there.</p> +<div class="note"> + <strong>Note:</strong> It's <strong>highly</strong> recommended that you use <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a> for development!</div> +<p>The <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> is the standard distribution point for python packages. If you need some functionality in python, it is a good place to look!</p> +<p>See also: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p> +<h2 id="See_also">See also</h2> +<ul> + <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (Mozilla Services documentation)</li> + <li>http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li> + <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>at Code Garage</li> +</ul> |