자바스크립트 모듈화_자바스크립트 기술 이해

모듈화는 일반적인 프로그래밍 모범 사례입니다. 프로그램의 모듈화를 통해 우리는 다른 사람의 코드를 더 쉽게 사용할 수 있고, 우리가 원하는 기능에 대해 우리가 원하는 모듈을 로드할 수 있어 코드 활용 효율성이 향상되고 개발 속도가 빨라집니다.

모듈은 빌딩 블록과 같습니다. 모듈을 사용하면 다양한 기능과 스타일을 갖춘 프로그램을 만들 수 있습니다. 빌딩 블록의 특징은 무엇입니까? 작고 간단합니다. 마찬가지로, 우리 프로그램의 모듈도 이 작업을 수행해야 합니다. 생성한 함수가 한 번에 하나의 작업만 완료하도록 하여 다른 개발자가 각 단계를 파악하기 위해 모든 코드를 탐색할 필요 없이 코드를 간단히 디버깅하고 수정할 수 있도록 해야 합니다. 코드 블록은 어떤 기능을 수행합니까? 이처럼 작고 단순해야만 보편적인 기능을 달성할 수 있습니다.

1. 자바스크립트 모듈화 방법
1. 함수 캡슐화
JavaScript의 범위는 함수를 기반으로 하므로 함수를 모듈로 사용할 수 있습니다.

function fn1(){
  //code
}

function fn2(){
  //code
}

단점: 전역 변수를 "오염"시키므로 변수 이름이 다른 모듈과 충돌하지 않는다는 보장이 없습니다

2. 객체

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

단점: 모든 모듈 멤버가 노출되며 내부 상태를 외부에서 덮어쓸 수 있습니다

즉시 자체 실행 기능 - 권장

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

2. 작고 단순하다
작고 간단한 예를 들어 보겠습니다. 이제 새 링크를 생성하고 "mailto" 하이퍼링크 유형에 대한 클래스를 추가하는 함수를 작성하려고 합니다. 이렇게 할 수 있습니다:

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

이런 방식으로 작성하면 효과가 있을 수 있지만 다른 기능을 추가하는 것이 허용되지 않아 이 기능이 적용되지 않을 수도 있습니다. 따라서 기능이 전문화될수록 다양한 상황에 적용하기가 더 어려워집니다.
여기에 함수가 작성된 방식은 모듈성 요구 사항을 충족하지 않습니다. 하나의 함수는 한 가지 작업만 수행합니다. 기능을 조정해 보겠습니다.

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

여기서 createLink 함수는 한 가지 작업만 수행합니다. 페이지에 추가할(작고 간단한) 태그를 생성하고 반환하므로 하이퍼링크를 생성해야 할 때마다 해당 함수를 호출할 수 있습니다.

3. 커먼JS
브라우저 환경에서는 모듈 부족이 큰 문제가 되지 않습니다. 결국 웹 프로그램의 복잡성은 제한되어 있지만 서버 측에서는 운영 체제 및 기타 응용 프로그램과 상호 작용하는 모듈이 있어야 합니다. 그렇지 않으면 프로그래밍이 불가능합니다. 전혀 가능합니다. JavaScript는 수년 동안 웹에서 개발되었지만 최초의 인기 있는 모듈식 사양은 서버 측 JavaScript 애플리케이션에서 나왔습니다. CommonJS 사양은 NodeJS에 의해 전달되었으며, 이는 JavaScript 모듈식 프로그래밍의 공식 항목이 되었습니다.
node.js의 모듈 시스템은 CommonJS 사양에 따라 구현됩니다. CommonJS에는 모듈 로딩을 위한 전역 메소드 require()가 있습니다.
모듈 로드:

var math = require('math');
모듈 호출:

math.add(2,3)
CommonJS 사양은 큰 제한이 있기 때문에 브라우저 환경에 적용할 수 없습니다. 위의 예에서 math.add(2, 3)의 두 번째 줄은 math.js가 로드된 후에 실행되어야 합니다. 그리고 모듈은 모두 서버측에 위치하기 때문에 네트워크 속도에 따라 대기 시간이 오래 걸릴 수 있습니다.

CommonJS 사양은 서버측에 적용됩니다. 서버측의 경우 모든 모듈이 로컬 하드 디스크에 저장되고 동기적으로 로드될 수 있기 때문입니다.

4. 모듈은 어떻게 정의하고 로드해야 하나요?
AMD
비동기 모듈 정의 비동기 모듈 정의, 주요 대표자: require.js
목적:
(1) 웹페이지가 응답하지 않는 것을 방지하기 위해 js 파일의 비동기 로딩을 구현합니다.
(2) 코드 작성 및 유지 관리를 용이하게 하기 위해 모듈 간의 종속성을 관리합니다.

1. 모듈 정의

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2. 모듈 로드

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
공통 모듈 정의 공통 모듈 정의, CMD 사양은 국내에서 개발되었습니다. 대표자 : sea.js

1. 모듈 정의

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2. 모듈 로드

seajs.use("../static/hello/src/main")
차이:

종속 모듈의 경우 AMD가 먼저 실행되고 CMD가 지연되어 실행됩니다. 그러나 RequireJS 2.0부터는 실행을 지연할 수 있도록 변경되었습니다(작성 ​​방법에 따라 처리 방법이 다름). CMD는 최대한 게으른 것을 추천합니다.

CMD는 주변 종속성을 촉진하는 반면 AMD는 전면에서 종속성을 촉진합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.