用Javascript编程OOP – 正确

前端之家收集整理的这篇文章主要介绍了用Javascript编程OOP – 正确前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很有兴趣改进我的 javascript代码以正确OOP ….目前我倾向于做这样的事情:
  1. jQuery(document).ready(function () {
  2. Page.form = (function () {
  3. return {
  4. //generate a new PDF
  5. generatePDF: function () {
  6.  
  7. },//Update the list of PDFs available for download
  8. updatePDFDownloads: function () {
  9.  
  10. },/*
  11. * Field specific functionality
  12. */
  13. field: (function () {
  14. return {
  15. //show the edit prompt
  16. edit: function (id,name) {
  17.  
  18. },//refresh the value of a field with the latest from the database
  19. refresh: function (id) {
  20.  
  21. }
  22. };
  23. }())
  24. };
  25. }());
  26. });

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

看起来我应该做一种模型原型并让我的表单对象继承自该原型.

(因为与prototypeJS的冲突,我使用的是jQuery而不是$)

解决方法

你的问题很广泛,所以我不认为这里有完整的答案.但这里有几点.

关于您显示代码.你跳了几个冗余的箍.

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

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

  1. var Page = {
  2. form: {
  3. //generate a new PDF
  4. generatePDF: function () {
  5.  
  6. },//Update the list of PDFs available for download
  7. updatePDFDownloads: function () {
  8.  
  9. },/*
  10. * Field specific functionality
  11. */
  12. field: {
  13. //show the edit prompt
  14. edit: function (id,name) {
  15.  
  16. },//refresh the value of a field with the latest from the database
  17. refresh: function (id) {
  18.  
  19. }
  20. }
  21. }
  22. };

它更容易阅读,更容易混淆,只做你买东西的事情.见cargo cult programming

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

  1. var Obj = (function() {
  2. privateFunction( param ) {
  3. // do something with param
  4. }
  5.  
  6. var privateVar = 10;
  7.  
  8. return {
  9. // publicMethod has access to privateFunction and privateVar
  10. publicMethod: function() {
  11. return privateFunction( privateVar );
  12. }
  13. }
  14.  
  15. })();

正如你所说,你所使用的结构,对象文字在分组一组函数(方法)和属性时非常好.这是一种命名空间.它也是一种创建Singleton方法.您可能还想创建同一类的许多对象.
JavaScript没有像传统OO语言那样的类(我会说到这一点),但在最简单的层面上,创建一个“模板”来创建特定类型的对象非常容易.这些“模板”是称为构造函数的常规函数​​.

  1. // a constructor
  2. // it creates a drink with a particular thirst quenchingness
  3. function Drink( quenchingness ) {
  4. this.quenchingness = quenchingness;
  5. }
  6.  
  7. // all drinks created with the Drink constructor get the chill method
  8. // which works on their own particular quenchingness
  9. Drink.prototype.chill = function() {
  10. this.quenchingness *= 2; //twice as thirst quenching
  11. }
  12.  
  13. var orange = new Drink( 10 );
  14. var beer = new Drink( 125 );
  15.  
  16. var i_will_have = ( orange.quenchingness > beer.quenchingness )
  17. ? orange
  18. : beer; //beer
  19.  
  20. var beer2 = new Drink( 125 );
  21. beer2.chill();
  22.  
  23. var i_will_have = ( beer2.quenchingness > beer.quenchingness )
  24. ? beer2
  25. : beer; //beer2 - it's been chilled!

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

很多人说继承在OO中被过度使用了,你应该favour composition,这让我想到了我在开始这个漫无边际的答案时最初的建议.

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

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

猜你在找的JavaScript相关文章