전방에서 모듈화 개발을 실현하다
CommonJS
서버 측의 Node.js는CommonJS규범을 따른다. 이 규범의 핵심 사상은 모듈이
require 방법을 통해 의존할 다른 모듈을 동기화하고 exports 또는module.exports을 통해 노출이 필요한 인터페이스를 도출하는 것이다.활용단어참조
도입 모듈
let express = require('express');
내보내기 모듈
module.exports.test1 = function () {}
exports.test2 = {}
장단점
이점
실현
AMD
Asynchronous Module Definition 규범은 사실 하나의 주요 인터페이스만 있다.
define(id?, dependencies?, factory) 모듈을 성명할 때 모든 의존dependencies을 지정하고 형참전factory으로 삼아 의존하는 모듈을 앞당겨 집행하고 선행에 의존해야 한다.활용단어참조
정의 모듈
define('module', ['dep1', 'dep2'], function (d1, d2) {
return {}
});
도입 모듈
require(['module', '../file'], funtion(module, file) {
// ...
})
장단점
이점
실현
CMD
Common Module Definition 사양은 AMD와 유사하며 CommonJS 및 Node와 최대한 간단하게 유지됩니다.js의 Modules 규범은 매우 큰 호환성을 유지했다.
활용단어참조
정의
define(function (require, exports, module) {
var $ = require('jquery');
var Sprinning = require('./spinning');
exports.test1 = {};
module.exports = {};
});
끌어들이다
define(function (require, exports, module) {
var $ = require('jquery');
$('div')...
});
장단점
이점
실현
ES6 모듈
Ecmascript6 표준은 JavaScript 언어 차원의 모듈 체계 정의를 추가합니다.ES6 모듈의 디자인 사상은 가능한 한 정태화하여 컴파일할 때 모듈의 의존 관계와 입력과 출력의 변수를 확정할 수 있도록 하는 것이다.CommonJS와 AMD 모듈은 실행할 때만 확인할 수 있습니다.
활용단어참조
정의
export default {
a: 10,
b: function () {
// ...
}
}
끌어들이다
import 'jquery';
import Vue from 'vue'
import { render } from 'react-dom'
장단점
이점
실현
원하는 모듈 시스템
다양한 모듈 스타일을 호환할 수 있고 가능한 한 기존의 코드를 이용할 수 있다. 자바스크립트 모듈화뿐만 아니라 CSS, 그림, 글꼴 등 자원도 모듈화되어야 한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
