Design Pattern
λ€μμ€νμ΄μ€ ν¨ν΄ (Namespace Pattern)
μ§μ/μ μ κ°μ²΄λ₯Ό μ μΈνμ¬ κ·Έ μμ κ°μ μ½μ νμ¬ μ¬μ©νλ κ²
κΆμ₯ ν¨ν΄
var App = App || {};
App.Parent = function () {};
App.Child = function () {};
App.container = 1;
App.module = {
module_1: {
data: {a: 1, b: 2}
},
module_2: {}
};
μν° ν¨ν΄
function Parent() {}
function Child() {}
var some_var = 1;
var module1 = {};
module.data = {a : 1, b : 2};
var module2 = {}
λͺ¨λ ν¨ν΄ (Module Pattern)
Common JS
μ¬μ©μ΄ λ체μ μΌλ‘ κ°νΈνλ©° λλΆλΆμ λ‘컬 λμ€ν¬μ μμΉν΄ λ°λ‘ λΆλ¬μ μ¬μ©νλ€.
μλ²μ¬μ΄λ λ°©μμμ λ§μ΄ μ¬μ©νλ©° κ·Έ λνμ μΈ μκ° Node JS μ΄λ€.
const $ = require('jquery');
module.exports = {
jQuery: $
}
νλ° λͺ¨λ νμΌμ΄ λ€ λ‘λλ λ κΉμ§ μ¬μ©ν μ μμΌλ©° νμΌλ¨μμ μ€μ½νκ° μμ΄ κΈ°ν μ¬μ΄λμ΄ν©νΈλ λ°μνλ€.
AMD (Asynchronous Moudle Definition)
λΉλκΈ°μ λͺ¨λ μ μΈ μΌλ‘ λνμ μΈκ² Require JS μ΄λ€.
define(['a', 'b', 'c'], function (a, b, c) {
/* statement */
});
Common JS 보λ€λ λΉλκΈ° νκ²½μμ λ§€μ° μ λμνλ©° μλ²μ¬μ΄λμμλ λ¬Έμ μμ΄ λμλλ€.
μ΄λ Lazy-Load κΈ°λ²μ μμ©νμ¬ λμ± λ μ μ°ν μ¬μ©μ΄ κ°λ₯νλ€.
UMD (Universal Module Definition)
AMD μ Common JS λ°©μμ λͺ¨λ μ¬μ©κ°λ₯νκ² νΈνλλ λ°©μμ UMD λΌκ³ νλ€.
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('b'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {};
}));
μ°Έκ³ μλ£
https://d2.naver.com/helloworld/12864
https://www.zerocho.com/category/JavaScript/post/5b67e7847bbbd3001b43fd73
https://github.com/codepink/codepink.github.com/wiki/μλ°μ€ν¬λ¦½νΈ-λͺ¨λ,-λͺ¨λ-ν¬λ§·,-λͺ¨λ-λ‘λμ-λͺ¨λ-λ²λ€λ¬μ-λν-10λΆ-μ
λ¬Έμ
κΈ°λ³Έ λͺ¨λ ν¨ν΄
public
κ³Ό private
μ μ κ·Ό κΆνμ κ°λ₯νκ² νλ€.
(function () {
// private λ³μλ€κ³Ό ν¨μλ€μ μ μΈ
return {
// public λ³μλ€κ³Ό ν¨μλ€μ μ μΈ
};
}());
var HTMLChanger = (function() {
var contents = 'contents';
var changeHTML = function () {
var element = document.getElementById('attribute-to-change');
element.innerHTML = contents;
}
return {
callChangeHTML: function () {
changeHTML();
console.log(contents);
}
};
}());
HTMLChanger.callChangeHTML(); // 'contents'
console.log(HTMLChanger.contents); // undefined
κΆμ₯ λͺ¨λ ν¨ν΄
- Module Scope λ΄μμ μ¬μ©ν λ³μ μμ±
- Utility Method μμ±
- DOM μ‘°μ λ©μλ μμ±
- Event Handler μμ±
- Public Method μμ±
var module = (function () {
// 1. Module Scope λ΄μμ μ¬μ©ν λ³μ μμ±
var scopeVal = {},
utilMethod,
manipulateDOM,
eventHandler,
initModule;
// 2. Utility Method μμ±
utilMethod = function () {
/* μ€ν μ½λ */
};
// 3. DOM μ‘°μ λ©μλ μμ±
manipulateDOM = function () {
/* μ€ν μ½λ */
}
// 4. Event Handler μμ±
eventHandler = function () {
/* μ€ν μ½λ */
}
// 5. Public Method μμ±
return {
init: initMethod
};
}());
μ»€λ§ (Currying)
μ¬λ¬κ°μ μΈμλ₯Ό λ°λ ν¨μκ° μμ κ²½μ° μΌλΆμ μΈμλ§ λ°λ ν¨μλ₯Ό λ§λλ κΈ°λ²
Currying Example
function volume(l, w, h) {
return l * w * h;
}
function curry(fn) {
var arity = fn.length;
return (function resolver() {
var memory = Array.prototype.slice.call(arguments);
return function () {
var local = memory.slice();
Array.prototype.push.apply(local, arguments);
var next = (local.length >= arity? fn : resolver);
return next.apply(null, local);
};
}());
}
Example #1 : JS - ES5
var curried = curry(volume),
length = curried(2),
lengthAndWidth = length(3);
console.log(lengthAndWidth(4));
Example #2 : JS - ES5
var _curried = curry(volume);
console.log(_curried(2)(3)(4));
Case 2
κ° 10λ°°μ λ λΉ λ¦
λ©λͺ¨μ΄μ μ΄μ (Memoization)
μ΄μ μ μ°μ°λ κ²°κ³Όλ₯Ό μ μ₯νκ³ μ¬μ©νλ ν¨ν΄
λ©λͺ¨λ¦¬ μμ μμ μ μ₯κ°μ μ μ₯νμ¬ μ¬μ©ν μ μμ΄ μκ° λ³΅μ‘λλ₯Ό λ§μ΄ μ€μΈλ€.
μΌλ°μ μΈ νΌλ³΄λμΉ λ‘μ§
var count = 0;
var fibonacci = function (n) {
count++;
return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}
for (var i = 0; i <= 10; i++) {
console.log(i + ' = ' + fibonacci(i));
}
console.log('count = ', count);
λ©λͺ¨μ΄μ μ΄μ μ μ¬μ©ν νΌλ³΄λμΉ λ‘μ§ 1
var fibonacci = function () {
var memo = [0, 1];
var count = 0;
var fib = function (n) {
count++;
var result = meno[n];
if (typeof result !== 'number') {
result = fib(n - 1) + fib(n - 2);
memo[n] = result;
}
return result;
};
return fib;
}
for (var i = 0; i <= 10; i++) {
console.log(i, ' = ', fibonacci(i));
}
console.log('count : ', count);
λ©λͺ¨μ΄μ μ΄μ μ μ¬μ©ν νΌλ³΄λμΉ λ‘μ§ 2
var factorial = (function () {
var save = {};
var fact = function (number) {
if (number > 0) {
var saved = save[number - 1] || fact(number - 1);
var result = number * saved;
save[number] = result;
console.log(saved, result);
return result;
} else {
return 1;
}
}
return fact;
}());
factorial(7);
β General