JS를 사용하여 공통 모듈을 작성하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

이전 글 "JavaScript의 타임스탬프 연산 방식에 대한 간략한 분석(코드 포함)"에서 js의 타임스탬프 연산 방식에 대해 알아보았습니다. 다음 기사에서는 JS를 사용하여 공통 모듈을 작성하는 방법을 함께 살펴보겠습니다.

WWW가 처음 나왔을 때는 html, JavaScript, 라는 문제가 처음부터 존재하지 않았습니다. > CSS(JS 및 CSS는 나중에 Netscape의 브라우저에 도입됨)는 매우 간단하며 모듈화가 필요하지 않습니다. WWW刚刚问世的时候，html，JavaScript，CSS（JS和CSS都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。

模块化的需求是规模的产物，当web page进化到web application，浏览器端处理的逻辑越来越复杂，展现的样式和动画越来多，对于工程的要求也就越来越高。于是模块化的需求也就产生了。模块化的意义：

• 组件的复用，降低开发成本和维护成本

• 组件单独开发，方便分工合作

• 模块化遵循标准，方便自动化依赖管理，代码优化，部署

JavaScript长久以来被认为是简单的脚本语言，实际上情况早就发生来变化，在最新版的 ECMA-262（ES6）文档中强调JavaScript是通用编程语言而不是脚本语言。脚本语言，比如shell并不是用来完成复杂功能的，只是用来做一些自动化控制，是不需要模块化的。而用于构建复杂系统通用编程语言（比如Java）一般都有模块的实现。

在ES6以前，JS语言没有模块化，如何让JSCommonJS这种规范，定义了三个全局变量：

require，exports，module

• require用于引入一个模块

• exports对外暴露模块的接口，可以是任何类型

• module是这个模块本身的对象

用require引入时获取的是这个模块对外暴露的接口（exports）

Node.js使用了CommonJS规范：

var foo = require("foo");
var out = foo.sayName();
module.exports = out;

在浏览器端，不像Node.js内部支持CommonJS，如何进行模块化，于是出现了CMD与AMD两种方式，其主要代表是seajs和requirejs，他们都定义了一个全局函数define来创建一个模块：

//CMD
define(function (require, exports, module) {
  var foo = require("foo");
  var out = foo.sayName();
  module.exports = out;
});

//AMD
define(["foo"], function (foo) {
  var out = foo.sayName();
  return out;
});

可以看出CMD完好的保留了CommonJS모듈화에 대한 요구는 규모의 산물입니다. 웹 페이지가 웹 애플리케이션으로 진화하면 브라우저에서 처리되는 논리가 점점 더 복잡해지고 스타일과 표시되는 애니메이션은 점점 더 복잡해지며 프로젝트에 대한 요구 사항도 점점 더 높아지고 있습니다. 그러다가 모듈화의 필요성이 대두되었습니다. 모듈화의 의미: AMD

• CMD是懒加载，在require컴포넌트 재사용으로 개발 및 유지 관리 비용 절감AMD是预加载，在定义模块时就提前加载好所有依赖。 

   我们要实现一个模块，让它既能在seajs（CMD）环境里引入，又能在requirejs（AMD）环境中引入，当然也能在Node.js（CommonJS）中使用，另外还可以在没有模块化的环境中用script标签全局引入。

  首先搞一个模块

  var factory = function () {
    var moduleName = {};
    return moduleName;
  };

  当然return输出的可以是任何值，对象，类，其他都可以

  首先满足Node.js或者ES6，我们可以通过全局变量module和exports来判断

  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  }

  在CMD和AMD中，我们需要提供一个工厂函数传入define来定义模块，当没有上述全局变量，且有define全局变量时，我们认为是AMD或CMD，可以直接将factory传入define：

  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  }

  注意：CMD 其实也支持 return 返回模块接口，所以两者可以通用。

  然后还要满足script标签全局引入，我们可以将模块放在window上，为了模块内部在浏览器和Node.js中都能使用全局对象，我们可以做此判断：

  var global = typeof window !== "undefined" ? window : global;

  我们用一个立刻执行的闭包函数将所有代码包含，来避免污染全局空间，并将global

• 컴포넌트를 개별적으로 개발하는 것이 편리합니다.

• 모듈화는 자동화된 종속성 관리, 코드 최적화 및 배포를 촉진하기 위한 표준을 따릅니다.

JavaScript는 오랫동안 단순하다고 여겨져 왔습니다. 사실 스크립팅 언어는 오래 전에 상황이 바뀌었습니다. 최신 버전의 ECMA-262(ES6) 문서에서는 JavaScript가 언어라는 점을 강조하고 있습니다. 스크립팅 언어가 아닌 일반 프로그래밍 언어. shell과 같은 스크립팅 언어는 복잡한 기능을 완성하는 데 사용되지 않으며 일부 자동화된 제어를 수행하는 데만 사용되며 모듈화가 필요하지 않습니다. 복잡한 시스템을 구축하는 데 사용되는 범용 프로그래밍 언어(예: Java)에는 일반적으로 모듈 구현이 있습니다.

ES6 이전에는 JS 언어가 모듈식이 아니었습니다. JS를 브라우저에서 실행할 뿐만 아니라 코드를 더 많이 관리하는 방법 효과적으로? 그래서 세 가지 전역 변수를 정의하는 CommonJS 사양이 탄생했습니다.

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

• 
  require code>는 다음과 같습니다. 모듈을 소개하는 데 사용됩니다

• 내보내기모듈을 외부 세계에 노출하는 인터페이스는 모든 유형의 모듈이 될 수 있습니다

• 이 모듈 자체의 객체입니다

🎜require로 도입하면 이 모듈에서 노출하는 인터페이스(exports)🎜🎜Node.js는 CommonJS 사양을 사용합니다. 🎜

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src=&#39;moduleName.js&#39;></script>

🎜브라우저 측에서는 Node.js와 달리 CommonJS 내부적으로 > 모듈화하는 방법이 있어서 CMD와 🎜 두 가지 방법이 있는데, 대표적인 것이 seajs와 requirejs입니다. code>, 둘 다 정의합니다. 모듈을 생성하기 위한 전역 함수 정의: 🎜rrreee🎜<code>CMD가 CommonJS의 스타일을 완전히 유지하는 것을 볼 수 있습니다. 그리고 🎜 모듈화를 달성하기 위해 보다 간결한 종속성 주입 및 함수 반환 방법을 사용합니다. 다양한 스타일 외에도 둘 사이의 가장 큰 차이점은 종속 모듈을 로드하는 방법입니다. 종속성은 🎜 경우에만 로드됩니다. 그리고 🎜는 모듈을 정의할 때 모든 종속성을 미리 로드하는 preloading입니다. 🎜🎜 seajs(CMD) 환경과 requirejs(AMD) 환경 모두에 도입할 수 있도록 모듈을 구현해야 합니다. 물론 그럴 수도 있습니다. Node.js(CommonJS)에서 사용됩니다. 모듈화가 없는 환경에서는 script 태그를 사용하여 전역적으로 도입할 수도 있습니다. . 🎜🎜먼저 모듈을 만드세요🎜rrreee🎜물론 return의 출력은 값, 객체, 클래스 등 무엇이든 될 수 있습니다🎜🎜먼저 Node.js 또는 ES6에서는 전역 변수 module 및 exports를 통해 🎜rrreee🎜를 판단할 수 있습니다. CMD 및 🎜에서는 다음을 수행해야 합니다. 제공 a 팩토리 함수는 모듈을 정의하기 위해 define을 전달합니다. 위에서 언급한 전역 변수가 없고 define 전역 변수가 있는 경우 🎜 또는 CMD. factory를 define에 직접 전달할 수 있습니다: 🎜rrreee🎜🎜참고: CMD는 실제로 반환 반환 모듈 인터페이스도 지원하므로 둘 다 사용할 수 있습니다. 교대로. 🎜🎜🎜그러면 script 태그의 전역 도입도 충족해야 합니다. 그러면 모듈을 브라우저에서 내부적으로 사용할 수 있습니다. Node.js 전역 개체를 코드에서 사용할 수 있음>, 다음과 같이 판단할 수 있습니다. 🎜rrreee🎜 전역 공간을 오염시키지 않기 위해 즉시 실행되는 클로저 함수를 사용하여 모든 코드를 포함합니다. 전역 개체를 전달합니다. 클로저 함수를 입력하면 결과적으로 다음과 같이 표시됩니다. 🎜rrreee🎜🎜 참고: 클로저 앞의 세미콜론은 이전 모듈의 공백이 있는 경우 채우는 것입니다. 세미콜론이 많으면 문제가 없지만, 너무 적으면 문장이 바뀔 수 있습니다. 🎜🎜🎜그런 다음 🎜rrreee🎜【End】🎜🎜🎜로 전화하시면 됩니다. 추천 학습: 🎜JavaScript Advanced Tutorial🎜🎜

위 내용은 JS를 사용하여 공통 모듈을 작성하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!