在JavaScript中创建Namespace / Class类型结构的最有趣的方式 [英] Most elegent way to create a Namespace/Class type structure in JavaScript

问题描述

我试图解决一个方法，将提供我最优雅的方式包装我的代码在命名空间 / 单位 like objects。例如Google Maps API的 var a = Google.Maps.Foo（）; ，我觉得很干净。

我希望 （如果这是正确的用语） jQuery 无冲突 $ 。

到目前为止我喜欢：

  //子对象的顶级容器
 var myApp = myApp || {}; 
 
 //在myApp中保存的对象
（function（skillet，$，undefined）{
 
 //私有属性
 var isHot = true; 
 
 //公共属性
 skillet.ingredient =Bacon Strips; 
 
 //公共方法
 skillet.fry = function {
 var oliveOil; 
 
 addItem（\t\\\
 Butter \\\
\t）; 
 addItem（oliveOil）; 
控制台。 log（Frying+ skillet.ingredient）; 
 
 returnFried！; 
}; 
 
 //私有方法
 function addItem item）{
 if（item！== undefined）{
 console.log（Adding+ $ .trim（item））; 
} 
} 
 
}（window.myApp.skillet = window.myApp.skillet || {}，jQuery））;任何人都可以扩展这一点，指出潜在的问题，或者只是提供一个更好的方法论一般来说？     / p> 
 
解决方案
检查此 JavaScript模式模式 
和此学习JavaScript设计模式 
 
 
 
模块示例：
  var MyModule =（function（$）{
 var MY_CONSTANT = 123; 
 
 var _myPrivateVariable ='TEST MEH'; 
 var _ $ myPrivateJqueryObject = $（'div.content'）; 
 
 var _myPrivateMethod = function（）{
 alert（'I am private！'）; 
}; 
 
 var myPublicMethod = function（）{
 console.log ？）; 
} 
 
 return {
 myPublicMethod：myPublicMethod 
}; 
 
}）（jQuery）; 
 
 MyModule.myPublicMethod（）; 
  
类示例：
  function Person（name，age）{
 this.name = name || ''; 
 this.age = age || -1; 
} 
 
 Person.prototype.greet = function（）{
 console.log（'Hi！My name is'+ this.name +'。Old'+ this。 age +'I am。'）; 
} 
 
 var person = new Person（John，12）; 
 person.greet（）; 
  
 
I am trying to settle on a method that will provide me the most elegant way of wrapping my code in Namespace/Unit like objects. For example Google Maps API's var a  = Google.Maps.Foo();, which I think seems quite clean. 

I'd like it to enclose (if that is the right term) the jQuery No Conflict $ sign as well.

So far I am liking:
// Top level container for sub objects
var myApp = myApp || {}; 

// An object to be held in myApp     
(function( skillet, $, undefined ) {

    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );

        return "Fried!";
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }   

}( window.myApp.skillet = window.myApp.skillet || {}, jQuery ));
Can anyone expand on this, point out potential problems, or just offer a better methodology in general?
解决方案
Check this JavaScript Module Pattern
and this Learning JavaScript Design Patterns

Module example:
var MyModule = (function($){
  var MY_CONSTANT = 123;

  var _myPrivateVariable = 'TEST MEH';
  var _$myPrivateJqueryObject = $('div.content');

  var _myPrivateMethod = function(){
    alert('I am private!');
  };

  var myPublicMethod = function(){
    console.log('Public much?');
  }

  return {
      myPublicMethod : myPublicMethod 
  };

})(jQuery);

MyModule.myPublicMethod();
Class example:
function Person(name, age){
   this.name = name || '';
   this.age = age || -1;
}

Person.prototype.greet= function(){
   console.log('Hi! My name is' + this.name + '. Old ' + this.age + ' I am.');
}

var person = new Person("John", 12);
person.greet();


                        
这篇关于在JavaScript中创建Namespace / Class类型结构的最有趣的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！