JavaScript 아키텍처 설계에서 모듈 패턴의 사용 예에 ​​대한 자세한 설명

모듈 패턴은 중괄호를 통해 개인 변수, 메서드 및 상태를 캡슐화할 수 있는 비교적 인기 있는 디자인 패턴입니다. 다른 모든 내용은 비공개로 캡슐화됩니다.

또한 이 패턴은 자체 실행 함수 표현식과 유사하지만 유일한 차이점은 모듈이 객체를 반환하는 반면, 자체 실행 함수 표현식은 함수를 반환한다는 것입니다.

우리 모두 알고 있듯이 JavaScript에는 다른 언어처럼 액세스 수정자가 없습니다. 각 필드나 메소드에 대해 비공개 및 공개 수정자를 선언할 수 없습니다. 이는 일부 공용 메소드가 포함된 객체를 반환하는 것입니다. 이러한 메소드에는 내부 객체를 호출하는 기능이 있습니다.

다음 코드를 보세요. 선언에는 전역 개체 basketModule이 포함되어 있습니다. 따라서 전체 프로그램은 이 개인 배열에 액세스할 수 없습니다. 여기에는 addItem, getItemCount, getTotal 등 세 가지 메서드가 포함되어 있습니다. 이 세 가지 메서드는 개인 바구니 배열에 액세스할 수 있습니다.

var basketModule = (function() {
var basket = []; //private
return { //exposed to public
　　addItem: function(values) {
　　　　basket.push(values);
　　},
　　getItemCount: function() {
　　　　return basket.length;
　　},
　　getTotal: function(){
　　　　var q = this.getItemCount(),p=0;
　　　　while(q--){
　　　　p+= basket[q].price;
　　　　}
　　　　return p;
　　}
　}
}());

또한 우리가 반환하는 객체는 basketModule에 직접 할당되므로 다음과 같이 사용할 수 있습니다.

//basketModule is an object with properties which can also be methods
basketModule.addItem({item:'bread',price:0.5});
basketModule.addItem({item:'butter',price:0.3});
 
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
 
//however, the following will not work:
console.log(basketModule.basket);// (undefined as not inside the returned object)
console.log(basket); //(only exists within the scope of the closure)

다양한 인기 라이브러리(예: Dojo, jQuery)에서 어떻게 작동합니까? 하다?

Dojo

Dojo는 클래스 스타일 선언 방법을 제공하기 위해 dojo.declare를 사용하여 모듈 모드를 구현할 수 있습니다. 예를 들어, 상점 네임스페이스 아래에 바구니 객체를 선언하려는 경우

//traditional way
var store = window.store || {};
store.basket = store.basket || {};
 
//using dojo.setObject
dojo.setObject("store.basket.object", (function() {
　　var basket = [];
　　function privateMethod() {
　　　　console.log(basket);
　　}
　　return {
　　　　publicMethod: function(){
　　　　　　privateMethod();
　　　　}
　　　};
}()));

dojo.provide와 함께 사용하면 매우 강력합니다.

YUI

다음 코드는 YUI의 원래 구현입니다.

YAHOO.store.basket = function () {

 //"private" variables:
 var myPrivateVar = "I can be accessed only within YAHOO.store.basket .";

 //"private" method:
 var myPrivateMethod = function () {
 YAHOO.log("I can be accessed only from within YAHOO.store.basket");
 }

 return {
 myPublicProperty: "I'm a public property.",
 myPublicMethod: function () {
  YAHOO.log("I'm a public method.");

  //Within basket, I can access "private" vars and methods:
  YAHOO.log(myPrivateVar);
  YAHOO.log(myPrivateMethod());

  //The native scope of myPublicMethod is store so we can
  //access public members using "this":
  YAHOO.log(this.myPublicProperty);
 }
 };

} ();

jQuery

jQuery에는 모듈 패턴이 많이 구현되어 있습니다. 다른 예를 살펴보겠습니다. 새로운 라이브러리를 선언하고, 라이브러리 생성 시 document.ready의 init 메소드를 자동으로 실행합니다.

function library(module) {
　　$(function() {
　　　　if (module.init) {
　　　　　　module.init();
　　　　}
　　});
　　return module;
}
 
var myLibrary = library(function() {
　　return {
　　　　init: function() {
　　　　　　/*implementation*/
　　　　　　}
　　};
}());

Object self-facet

Object self-facet은 중괄호를 사용하여 선언되며, 속성 필드의 publice/private인 경우 새 키워드를 사용할 필요가 없습니다. a module is not 신경이 많이 쓰이는 경우 이 방법을 사용해도 되지만 이 방법은 JSON과 다르다는 점에 유의하세요. 객체 자체 얼굴: var item={name: "tom", value:123} JSON: var item={"name":"tom", "value":123}.

var myModule = {
 myProperty: 'someValue',
 //object literals can contain properties and methods.
 //here, another object is defined for configuration
 //purposes:
 myConfig: {
 useCaching: true,
 language: 'en'
 },
 //a very basic method
 myMethod: function () {
 console.log('I can haz functionality?');
 },
 //output a value based on current configuration
 myMethod2: function () {
 console.log('Caching is:' + (this.myConfig.useCaching) ? 'enabled' : 'disabled');
 },
 //override the current configuration
 myMethod3: function (newConfig) {
 if (typeof newConfig == 'object') {
  this.myConfig = newConfig;
  console.log(this.myConfig.language);
 }
 }
};

 
myModule.myMethod(); //I can haz functionality
myModule.myMethod2(); //outputs enabled
myModule.myMethod3({ language: 'fr', useCaching: false }); //fr

CommonJS

여기서 CommonJS 소개에 대해 많이 말하지 않겠습니다. 이전에 많은 기사에서 소개하고 싶은 것은 CommonJS에 두 가지 중요한 매개변수가 있다는 것입니다. 표준 내보내기 및 요구, 내보내기는 로드할 모듈을 나타내고, 요구는 로드된 모듈이 다른 모듈에 의존해야 하며 로드되어야 함을 나타냅니다.

/*
Example of achieving compatibility with AMD and standard CommonJS by putting boilerplate around the standard CommonJS module format:
*/
 
(function(define){
　　define(function(require,exports){
　　　　// module contents
　　　　var dep1 = require("dep1");
　　　　exports.someExportedFunction = function(){...};
　　　　//...
　　});
})(typeof define=="function"?define:function(factory){factory(require,exports)});

CommonJS 표준 모듈 로딩 구현이 많이 있습니다. 제가 선호하는 것은 RequireJS입니다. 먼저 그림을 ASCII 코드로 변환하는 것과 같은 간단한 예를 들어보겠습니다. 인코더 모듈을 로드한 다음 해당 encodeToASCII 메서드를 가져옵니다. 이론적으로 코드는 다음과 같아야 합니다.

var encodeToASCII = require("encoder").encodeToASCII;
exports.encodeSomeSource = function(){
　　//其它操作以后，然后调用encodeToASCII
}

하지만 위 코드는 encodeToASCII 함수가 창 개체에 연결되어 있지 않기 때문에 작동하지 않으므로 사용할 수 없습니다. , 개선된 코드는 다음과 같아야 합니다:

define(function(require, exports, module) {
　　var encodeToASCII = require("encoder").encodeToASCII;
　　　　exports.encodeSomeSource = function(){
　　　　//process then call encodeToASCII
　　}
});

위 내용은 JavaScript 아키텍처 설계에서 모듈 패턴의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!