> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 adm이 뭐죠?

자바스크립트 adm이 뭐죠?

青灯夜游
풀어 주다: 2023-01-06 11:16:56
원래의
2278명이 탐색했습니다.

JavaScript에서 AMD는 모듈 사양인 "비동기 모듈 정의"를 참조합니다. 모듈을 로드해도 이 모듈에 의존하는 모든 명령문은 In에 정의되어 있습니다. 콜백 함수인 경우 로딩이 완료될 때까지 콜백 함수가 실행되지 않습니다.

자바스크립트 adm이 뭐죠?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

웹사이트가 점차 "인터넷 애플리케이션"이 되면서 웹페이지에 포함된 Javascript 코드가 점점 더 커지고 복잡해지고 있습니다.

웹 페이지는 점점 더 데스크톱 프로그램과 비슷해지고 있으며, 팀의 작업 분담과 협업, 진행 관리, 단위 테스트 등이 필요합니다. 개발자는 웹 페이지의 비즈니스 로직을 관리하기 위해 소프트웨어 엔지니어링 방법을 사용해야 합니다.

Javascript 모듈형 프로그래밍이 시급히 필요해졌습니다. 이상적으로는 개발자가 핵심 비즈니스 로직만 구현하면 되고, 다른 모듈은 다른 모듈이 로드할 수 있습니다.

그러나 Javascript는 "모듈"은 물론 "클래스"도 지원하지 않는 모듈형 프로그래밍 언어입니다. (공식화되고 있는 ECMAScript 표준 6판에서는 "클래스"와 "모듈"을 공식적으로 지원할 예정이지만, 실용화되기까지는 오랜 시간이 걸릴 것입니다.)

Javascript 커뮤니티에서는 많은 것들을 만들어냈습니다. 노력. 기존 운영 환경에서 "모듈"의 효과를 달성합니다. 이 기사에서는 "Javascript 모듈식 프로그래밍"의 현재 모범 사례를 요약하고 이를 실제로 적용하는 방법을 설명합니다. 입문용 튜토리얼은 아니지만, Javascript의 기본 구문을 조금만 이해하면 이해할 수 있습니다.

모듈 사양

먼저 생각해보세요. 모듈이 왜 중요한가요?

모듈 덕분에 우리는 다른 사람의 코드를 더 편리하게 사용할 수 있고, 우리가 원하는 기능에 대해 원하는 모듈을 무엇이든 로드할 수 있습니다.

하지만 그러기 위해서는 전제가 있습니다. 즉, 모두가 같은 방식으로 모듈을 작성해야 한다는 것입니다. 그렇지 않으면 당신은 당신의 글쓰기 방식이 있고 나는 나만의 글쓰기 방식이 있으면 엉망이 되지 않을까요! 현재 Javascript 모듈에 대한 공식 사양이 없다는 점을 고려하면 이는 더욱 중요합니다.

현재 널리 사용되는 Javascript 모듈 사양은 CommonJS와 AMD 두 가지가 있습니다.

CommonJS

2009년 미국 프로그래머 Ryan Dahl은 서버 측 프로그래밍에 JavaScript 언어를 사용하기 위해 node.js 프로젝트를 만들었습니다.

자바스크립트 adm이 뭐죠?

이것은 "Javascript 모듈러 프로그래밍"의 공식적인 탄생을 의미합니다. 솔직히 말해서 브라우저 환경에서는 모듈이 없어도 큰 문제가 되지 않습니다. 결국 웹 프로그램의 복잡성은 제한적이지만 서버 측에서는 운영 체제 및 기타 응용 프로그램과 상호 작용할 수 있는 모듈이 있어야 합니다. 그렇지 않으면 프로그래밍 방법이 없습니다.

node.js의 모듈 시스템은 CommonJS 사양을 참조하여 구현되었습니다. CommonJS에는 모듈 로딩을 위한 전역 메소드 require()가 있습니다. 수학 모듈 math.js가 있다고 가정하면 다음과 같이 로드할 수 있습니다.

var math = require('math');
로그인 후 복사

그런 다음 모듈에서 제공하는 메서드를 호출할 수 있습니다.

var math = require('math');
math.add(2,3); // 5
로그인 후 복사

이 시리즈는 주로 브라우저 프로그래밍을 대상으로 하고 node.js를 포함하지 않기 때문에 CommonJS에 대한 소개는 더 이상 없습니다. 여기서 알아야 할 것은 require()가 모듈을 로드하는 데 사용된다는 것입니다.

브라우저 환경

서버측 모듈을 갖고 나면 누구나 클라이언트측 모듈을 원하는 것은 당연합니다. 그리고 모듈이 수정 없이 서버와 브라우저 모두에서 실행될 수 있도록 두 가지가 호환되는 것이 가장 좋습니다.

그러나 CommonJS 사양은 큰 제한으로 인해 브라우저 환경에 적합하지 않습니다. 이전 섹션의 코드를 브라우저에서 실행하면 큰 문제가 발생하게 됩니다.

var math = require('math');
math.add(2, 3);
로그인 후 복사

math.add(2, 3)의 두 번째 줄은 require('math')의 첫 번째 줄 다음에 실행되므로 math.js가 로드될 때까지 기다려야 합니다. 즉, 로드하는 데 시간이 오래 걸리면 전체 앱이 대기 상태로 정지됩니다.

모든 모듈이 로컬 하드 디스크에 저장되고 동기적으로 로드될 수 있기 때문에 이는 서버 측에서는 문제가 되지 않습니다. 그러나 브라우저의 경우 모듈이 서버 측에 배치되고 대기 시간은 네트워크 속도에 따라 시간이 오래 걸릴 수 있으며 브라우저가 "일시 중지" 상태에 있기 때문에 이는 큰 문제입니다. .

따라서 브라우저 측 모듈은 "동기 로딩"(동기)을 사용할 수 없고 "비동기 로딩"(비동기)만 사용할 수 있습니다. 이것이 AMD 스펙 탄생의 배경이다.

AMD 사양

AMD는 "Asynchronous Module Definition"의 약자로 "Asynchronous Module Definition"을 의미합니다. 모듈을 비동기적으로 로드하며, 모듈 로드는 후속 명령문의 실행에 영향을 주지 않습니다. 이 모듈에 의존하는 모든 문은 콜백 함수에 정의되어 있습니다. 이 콜백 함수는 로딩이 완료될 때까지 실행되지 않습니다.

AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:

require([module], callback);
로그인 후 복사

第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式,就是下面这样:

  require(['math'], function (math) {
    math.add(2, 3);
  });
로그인 후 복사

math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。

目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。

更多编程相关知识,请访问:编程视频!!

위 내용은 자바스크립트 adm이 뭐죠?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿