用Javascript编程OOP – 正确

我很有兴趣改进我的javascript代码以正确OOP ….目前我倾向于做这样的事情：

jQuery(document).ready(function () { Page.form = (function () { return { //generate a new PDF generatePDF: function () { }, //Update the list of PDFs available for download updatePDFDownloads: function () { }, /* * Field specific functionality */ field: (function () { return { //show the edit prompt edit: function (id, name) { }, //refresh the value of a field with the latest from the database refresh: function (id) { } }; }()) }; }()); }); 

最后它只是主要是有组织的function，我想…什么是一个很好的资源，我可以学习以OOP方式编写javascript，或者你有什么建议可以改善我目前的编程风格？

看起来我应该做一种模型原型并让我的form对象inheritance自该原型。

（因为与prototypeJS冲突，我使用的是jQuery而不是$）

Answer 1

你的问题很广泛，所以我认为这里没有完整的答案。 但这里有几点。

关于你展示的代码。 你跳了几个冗余的箍。

1. 除非您以某种方式访问​​DOM，否则无需将代码包装在jQuery(document).ready()
2. 除非您关闭某些私有函数或数据，否则无需从自调用匿名函数返回对象

您创建的对象可以更简单地创建（这是一件好事）

 var Page = { form: { //generate a new PDF generatePDF: function () { }, //Update the list of PDFs available for download updatePDFDownloads: function () { }, /* * Field specific functionality */ field: { //show the edit prompt edit: function (id, name) { }, //refresh the value of a field with the latest from the database refresh: function (id) { } } } }; 

它更容易阅读，更容易混淆，只做你买东西的事情。 看货物崇拜节目

这是一个使用自调用匿名函数来创建私有成员的示例

 var Obj = (function() { privateFunction( param ) { // do something with param } var privateVar = 10; return { // publicMethod has access to privateFunction and privateVar publicMethod: function() { return privateFunction( privateVar ); } } })(); 

正如您所说，您使用的结构，对象文字非常好，可以分组一组函数（方法）和属性。 这是一种命名空间。 它也是一种创建单身人士的方式 。 您可能还想创建同一类的许多对象。
JavaScript没有类似传统OO语言的类（我会得到它），但在最简单的层面上，创建一个“模板”来创建特定类型的对象非常容易。 这些“模板”是称为构造函数的常规函数​​。

 // a constructor // it creates a drink with a particular thirst quenchingness function Drink( quenchingness ) { this.quenchingness = quenchingness; } // all drinks created with the Drink constructor get the chill method // which works on their own particular quenchingness Drink.prototype.chill = function() { this.quenchingness *= 2; //twice as thirst quenching } var orange = new Drink( 10 ); var beer = new Drink( 125 ); var i_will_have = ( orange.quenchingness > beer.quenchingness ) ? orange : beer; //beer var beer2 = new Drink( 125 ); beer2.chill(); var i_will_have = ( beer2.quenchingness > beer.quenchingness ) ? beer2 : beer; //beer2 - it's been chilled! 

有关构造函数的知识有很多。 你必须四处搜寻。 SO上有很多例子。
inheritance，OO的基础，在js中并不直观，因为它是原型的。 我不会在这里讨论，因为你很可能不会直接使用js的原生原型inheritance范例。
这是因为有些库可以非常有效地模仿经典inheritance，例如Prototype（inheritance）或mootools（Class） 。 还有 其他人 。

很多人说inheritance在OO中被过度使用，你应该支持组合 ，这让我想到了当我开始这个漫无边际的答案时我最初打算推荐的内容。

JavaScript中的设计模式与任何OO语言一样有用，您应该熟悉它们

我建议你阅读Pro JavaScript Design Patterns 。 那就是它

Answer 2

面向对象的JavaScript和JavaScript的一些很好的资源……

在线文章

• 如何在JavaScript中“正确”创建自定义对象？
• https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
• http://mckoss.com/jscript/object.htm
• http://ejohn.org/blog/simple-javascript-inheritance/
• JavaScript：如何获取私有，特权，公共和静态成员（属性和方法）

图书

• JavaScript：好的部分 – 道格拉斯克罗克福德
• 面向对象的JavaScript – Stoyan Stefanov

我希望这有帮助。
斯托伊奇

Answer 3

没有一种正确的方法……有些人使用框架来定义他们的对象，我喜欢直接扩展原型。 无论如何，我想说Oran Looney在JS的OO机制上有一些好的post：

http://oranlooney.com/classes-and-objects-javascript/

它还值得看看他的其他文章：

http://oranlooney.com/deep-copy-javascript/ http://oranlooney.com/functional-javascript/

Answer 4

我建议阅读的前三名是

1. JavaScript和面向对象编程（OOP）

2. JavaScript中的经典inheritance

3. JavaScript中的原型inheritance

读得很好！

Answer 5

我们使用的代码遵循以下基本结构：

 //Create and define Global NameSpace Object ( function(GlobalObject, $, undefined) { GlobalObject.Method = function() { ///
 } }) (GlobalObject = GlobalObject || {}, jQuery); //New object for specific functionality ( function(Functionality.Events, $, undefined) { //Member Variables var Variable; // (Used for) , (type) // Initialize GlobalObject.Functionality.Events.Init = function() { ///
 } // public method this.PublicMethod = function(oParam) { ///
 /// } // protected method (typically define in global object, but can be made available from here) GlobalObject.Functionality.ProtectedMethod = function() { ///
 } // internal method (typically define in global object, but can be made available from here) GlobalObject.InternalMethod = function() { ///
 } // private method var privateMethod = function() { ///
 } }) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery ) 

这样做的优势在于它可以自动初始化Global对象，允许您维护代码的完整性，并根据您的定义将每个function组织到特定的分组中。 这个结构是可靠的，提供了所有你期望从OOP中获得的基本句法事物而没有关键词。 甚至可以使用javascript设置智能，然后定义每个peice并引用它们使得编写javascript更清晰，更易于管理。 希望这个布局有帮助！

Answer 6

我不认为你使用什么语言很重要，好的OOP是好的OOP。 我喜欢通过使用MVC架构尽可能地分散我的顾虑。 由于JavaScript基于事件，我也主要使用观察者设计模式。

下面是一个教程，你可以使用jQuery阅读有关MVC的内容。