Modules

Modules

• Inline Script의 문제점
  • Lack of code reusability
  • 또다른 html파일을 만들 때에 복사 붙여넣기를 해야한다.
  • Pollution of global namespace
  • 전역변수를 선언함으로써 변수명이 겹치는 문제.
• html파일 내에 js를 작성할 때의 문제

• Script tags
  • 여전히 다른 html 파일을 만들려고 할 때 copy & paste를 해야 한다.
  • Dependency Resolution

    <script type="text/javascript" src="./1.js"></script> <script type="text/javascript" src="./2.js"></script> 

    만약 1.js가 2.js에 있는 함수에 접근하려고 한다면 2.js파일은 아직 로드되지 않았기 때문에 에러가 난다.
  • 스크립트 태그를 정렬할 때 순서를 잘 정하는 것이 중요하다.
  • Pollution of global namespace
  • 여전히 전역 네임스페이스의 오염 문제를 해결하지 못한다. 전부 Window object에 저장된다.
• jQuery, JS파일을 별도 작성하고 script tag src로 연결하는 방법.

• IIFE위 방법은 global namespace 오염 문제를 해결할 수 있다. myApp 이라는 전역변수를 하나 만들게 되지만, 그 외에 메소드들을 추가하고 싶을 때에 IIFE를 활용하면 된다.
• 그러나 이 경우에도 html파일의 script tag의 순서가 여전히 중요하다. (Lack of Dependency Resolution)
• var myApp = {} (function() { myApp.add = function(a,b) { return a + b; } })();

• Common JS + Browerify
• //js1 module.exports = function add(a,b){ return a+b; } //js2 var add = require("./add");

• Module Bundler모든 자바스크립트 파일을 읽어서 하나의 파일로 묶는다. 많은 script파일이 위처럼 하나의 큰 파일(bundle.js)로 묶여서 나타난다.
•  
• <script src="bundle.js"></script>

• ES6 + Webpack2Webpack은 browerify와 비슷한 역할을 한다. (자바스크립트 파일을 bundle하는 역할)
• //Webpack module.export = { entry: './app/main.js', output: { path: './dist', filename: 'bundle.js' } }
• //js1 export const add = (a, b) => a + b; //or export default function add() { return a-b; } //js2 import { add } from './add'; //or import add from './add';