JavaScript에서는 모듈 패턴을 사용하여 코드 캡슐화를 수행할 수 있습니다. 또한 개인 및 공용 자산을 만드는 데 사용됩니다. 모듈 패턴을 구현할 수 있는 다양한 방법이 있습니다. 이 기사에서는 ES5에서 모듈 패턴을 만드는 방법을 배웁니다. 모듈 패턴의 구현을 살펴보기 전에 다음과 같은 몇 가지 이점이 있습니다.
- 범위 지정 고정
- Code encapsulation
- 개인 또는 공개 범위 만들기
- Creating a namespace
- 공개 및 비공개 캡슐화 만들기
JavaScript Object Literals 및 Immediately- Invoked function 표현식을 사용하여 모듈 패턴을 구현할 수 있습니다. 기억을 새로 고치기 위해 객체 리터럴은 아래 목록과 같습니다.
var Product = {
price: 600,
setOrder: function () {
return this.price;
}
}
console.log(Product.setOrder());
개체를 만든 후에 속성을 추가할 수 있습니다. 또한 Immediately- Invoked 함수 표현식은 아래 예제와 같습니다.
var add = function (num1, num2) {
let res = num1 + num2;
console.log(res);
}(7, 2);
이 두 가지를 조합하여 JavaScript에서 모듈 패턴을 구현할 수 있습니다. 모듈을 만드는 것부터 시작하겠습니다.
(function () {
'use strict';
// Your code here
// All function and variables are scoped to this function
var price = 99;
}());
console.log(price); // undefined
자체 포함 된 모듈 또는 익명 클로저입니다. 함수의 범위를 만들고 모든 것이 해당 함수 자체에 래핑됩니다. 따라서 함수 외부에서 price 에 액세스하려고 시도했을 때 정의되지 않았습니다. 이 익명 모듈은 전역 범위에 있다는 점을 명심하십시오.
expression을 사용하여 변수에 할당한 다음 return 문을 사용하여 private 및 public 캡슐화를 생성하여 모듈을 내보낼 수 있습니다. 아래 코드를 고려하십시오.
var module1 = (function () {
'use strict';
//private
let color = 'red';
// public
return {
price: 800
}
}());
console.log(module1.price); // 800
console.log(module1.color); // undefiend
우리는 위의 코드 스 니펫에서 다음과 같이하고 있습니다.
- Creating an IIFE.
- IIFE 함수를 변수에 할당하기
- private 및 public 캡슐화를 만들기 위해 익명 개체 리터럴을 반환합니다.
반환된 객체의 모든 속성은 공개가 되고 모듈 외부에서 액세스할 수 있지만 반환된 객체의 일부가 아닌 변수는 모듈 외부에서 액세스할 수 없습니다. 그렇기 때문에 price 의 경우 출력으로 800 을 얻지만 color 의 경우 module1 에 비공개이기 때문에 value 가 정의되지 않습니다. 아래 목록과 같이 module1을 수정하여 더 많은 개인 및 공용 속성을 갖도록 하겠습니다.
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
// public
return {
price: 800,
getModel: function (m) {
setModel(m);
return model;
}
}
}());
console.log(module1.price); // 800
console.log(module1.getModel('bmw')); // bmw
보시다시피 public encapsulated functions를 사용하여 private encapsulated 변수에 액세스할 수 있습니다. 주로 모듈 패턴에서 모든 변수는 return 객체의 일부가 될 때까지 비공개입니다.
모듈 패턴은 JavaScript의 클래스를 에뮬레이트합니다. 개체를 반환하여 private 및 public 캡슐화된 변수를 만듭니다. 클로저를 사용하여 개인 정보를 캡슐화합니다. 다이어그램에서 다음을 표시할 수 있습니다.
모듈 패턴의 또 다른 변형은 Revealing Module Pattern입니다. 유일한 변형은 아래 목록과 같이 객체를 반환한다는 것입니다.
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
let privatePrice = 800;
let getModel = function (m) {
setModel(m);
return model;
}
// public
return {
price: privatePrice,
model: getModel
}
}());
console.log(module1.price); // 800
console.log(module1.model('audi')); // audi
Module Revealing Pattern은 보다 일관된 이름 지정과 코드의 가독성을 제공합니다. 모듈 패턴을 사용하여 요약하면 JavaScript에서 공개 및 비공개 캡슐화를 달성할 수 있습니다. 이 게시물이 유용하기를 바라며 이제 JavaScript 응용 프로그램에서 Module Pattern을 구현하십시오.
이 게시물이 유용하기를 바랍니다. 읽어 주셔서 감사합니다. 이 게시물이 마음에 들면 공유해주세요. 또한 Infragistics Ignite UI for Angular 구성 요소를 체크아웃하지 않았다면 체크아웃하십시오! 웹 앱을 더 빠르게 코딩하는 데 도움이 되는 30+ 재료 기반 Angular 구성 요소가 있습니다.