JS 모듈성-RequireJS

php中世界最好的语言원래의: 2018-03-07 09:43:211995검색

오늘은 JS 모듈화 - RequireJS를 가져왔습니다. JS 모듈화와 RequireJS 사용 방법에 대한 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

저는 RequireJS에 대해 늘 들어봤지만 이해할 기회가 없었습니다. 단지 js용 모듈화를 위한 API라는 것만 알고 있을 뿐입니다. 저는 최근 React를 작업하고 있는데, React의 구성 요소화 아이디어는 js 모듈화 아이디어와 일치합니다. 그냥 React를 적용하면서 프로젝트에 RequireJS를 추가해서 페이지 로딩이나 개발에 좋은 영향을 미칠지 알아보고 싶습니다.

RequireJS란 무엇인가요?

RequireJS가 무엇인지 설명하기 전에 Javascript모듈화 역사의 배경을 언급해야겠습니다. 사실 초기에 JavaScript는 거대한 비전을 지닌 새로운 스크립팅 언어로 등장했습니다. 클라이언트만을 위해 설계된 언어는 아니었습니다. 단지 나중에 웹 애플리케이션이 인기를 끌면서 JavaScript가 브라우저 측 스크립팅 언어로 빠르게 확산되었고 Netscape와 Microsoft 간의 경쟁으로 인해 조기에 표준화되었을 뿐입니다. 이로 인해 JS에 많은 결함이 생겼는데, 그 중 하나가 모듈성입니다. (하지만 자바스크립트가 실제로 가져오기, 내보내기 등을 예약어로 사용한다는 사실을 보면 놀랄 수 있는데, 이는 실제로 설계 과정에서 고려했음을 보여줍니다. 새로운 표준 es6에서는 기본 모듈화 지원도 허용합니다. 그런 다음 웹 애플리케이션이 점점 더 복잡해지면서 점점 더 많은 JavaScript 코드가 내장되고 노드가 증가함에 따라 모듈식 프로그래밍이 필수가 됩니다.

그래서 나중에 Dojo 툴킷과 Google의 Closure 라이브러리에서 지원되는 모듈 시스템이 있었습니다. CommonJS와 AMD라는 두 가지 매우 일반적인 표준 사양도 있습니다. 여기서는 자세히 설명하지 않겠습니다. CommonJS 사양을 구현하는 API는 모듈을 동기적으로 로드하는 반면, AMD 사양을 구현하는 API는 비동기적으로 모듈을 로드한다는 것만 알면 됩니다.
그래서 이론적으로는 AMD 사양의 논블로킹 로딩이 브라우저 측에 더 적합합니다. RequireJS는 AMD 사양을 가장 잘 구현한 것입니다. 공식 문서에서 RequireJS에 대한 설명을 복사하세요.

RequireJS는 JavaScript 모듈 로더입니다. 브라우저에서 사용하기에 적합하지만 Rhino 및 Node와 같은 다른 스크립팅 환경에서도 사용할 수 있습니다. RequireJS를 사용하여 모듈식 스크립트를 로드하면 코드의 로딩 속도와 품질이 향상됩니다.

왜 RequireJS가 필요한가요?

이제 RequireJS가 무엇인지 알았으니 RequireJS를 사용하는 이유도 거의 알게 되었습니다. 하지만 RequireJS 사용의 이점을 요약해 보겠습니다.

비동기 "로딩". 우리는 js를 실행하는 브라우저로 인해 페이지가 차단되는 것을 방지하기 위해 웹사이트가 일반적으로 html의 끝에 스크립트를 배치한다는 것을 알고 있습니다. RequireJS를 사용하면 해당 js가 로드된 후 콜백 함수가 실행됩니다. 이 프로세스는 비동기식이므로 페이지를 차단하지 않습니다.

주문형 로드. RequireJS를 통해 js 로직을 로드해야 할 때 해당 js 모듈을 로드할 수 있으므로 웹 페이지를 초기화할 때 많은 요청과 데이터 전송을 피할 수 있습니다. 아마도 어떤 사람들에게는 일부 모듈을 전혀 사용하지 못할 수도 있습니다. 필요하다면 불필요해 보입니다.

모듈 종속성 관리가 더욱 편리해졌습니다. 스크립트 태그 순서 문제로 인해 종속성 오류가 발생한 것 같습니다. 이 함수는 정의되지 않았고 해당 변수는 정의되지 않았습니다. RequireJS의 메커니즘을 통해 모든 종속 모듈이 로드된 후 관련 파일이 실행되도록 보장하여 종속성 관리에 역할을 할 수 있습니다.

버전 관리가 더 효율적입니다. jQuery2를 도입하기 위해 여전히 스크립트 스크립트를 사용하고 있다면 이 100페이지를 수정해 보세요. 그러나 requireJS의 구성에 jQuery 경로 매핑이 있는 경우 한 곳만 변경하면 됩니다.

물론 cdn에서 js 파일을 로드할 수 없거나 로컬 파일을 요청할 수 있다는 등의 다른 장점도 있습니다. 여기에 모두 나열하지는 않겠습니다.

RequireJS는 페이지에 추가해야 하는

파일을 사용합니다

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

RequireJS를 사용하면 require.js만 추가하면 됩니다. 더 나은 방법은 페이지의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 통해서만 이 js를 소개하는 것입니다. 그런 다음 페이지의 모든 비즈니스 로직을 main.js에만 작성하면 됩니다(data-main 속성의 역할은 나중에 설명합니다). 참조된 다른 종속성은 어떻게 해야 합니까? 물론 require를 통해 온디맨드 방식으로 도입되고 있습니다!

Requirejs 기본 개요

실제로 주석을 포함한 Requirejs의 전체 소스 파일은 2000줄에 불과하며 외부에 노출되는 변수는 실제로 requirejs, require, 정의 세 개입니다.

requirejs는 require의 별칭일 뿐입니다. 페이지에 require의 다른 구현이 있는 경우 requirejs를 사용하여 계속 requireJS API를 사용할 수 있다는 것이 목적입니다(이 문서에서는 관련 충돌이 없으므로 require가 계속 사용됩니다). .

즉, 초보자로서 require, require.config 및 정의만 마스터하면 된다는 의미입니다.

本文将以介绍require,require.config,data-main,define的顺序来介绍RequireJS。让比较简单的RequireJS更加简单，争取让大家只看这篇文章就能用好RequireJS。至于RequireJS是如何解决循环依赖,对于没有实现amd的模块如何通过shim来导出，如何在node中使用等问题。本文并没有提及，详细有需要可以去官方查阅。

require.js可以通过npm下载或者在官网获得。jquery同理，jquery需要下载1.7.0或以上的版本。然后把对应的代码拷入对应的文件中，给出余下两个文件的代码:

//  js/script/index.html<!DOCTYPE html><html><head>
    <title>Require Demo 1</title></head><body>
    <div>
        <h1>Require Demo 1 -- usage of Require()</h1>
        <button id="contentBtn">Click me</button>
    <p id="messagebox"></p>
    </div>
    <script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script> </body></html>      
    //  js/script/main.js
    require.config(
        {            paths: {                &#39;jquery&#39;: &#39;../lib/jquery-1.7.2&#39;
            }
        }
    );    require([&#39;jquery&#39;],function ($) {
             $(document).on(&#39;click&#39;,&#39;#contentBtn&#39;,function(){
                $(&#39;#messagebox&#39;).html(&#39;You have access Jquery by using require()&#39;);
             });
    });

先看index.html的代码，其实比较简单，页面上在js中会用到的就是一个button和一个p标签。然后整个页面就只是一个js文件是通过3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的，就是require.js。注意到标签中有一个data-main属性，你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件，所以这个js文件被加载的时候，RequireJS已经加载执行完毕。

然后接着看main.js文件,里面被一个匿名立即执行函数所包括。在require.config(...)中，可以配置许多配置项，后面会有详细说明。上面在config中添加了一个path，在path配置了一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。

然后接着就是我们的require(...)函数了。上面的语法中require函数接受的第一个参数是，所依赖模块的一个数组。即使你只需要传入一个依赖，也需要把这个依赖放进数组中传入。如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径，如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API。所以有注入的模块需要放在无注入或者不需要调用模块的模块前面，方便回调函数传入别名。例子中在回调函数中为id为contentBtn的button注册监听事件，如果触发，则往id为messagebox的p标签添加相应的内容。

另外还需要额外说明的是路径，不管是在配置中写路径还是直接在require函数中写路径，你都需要了解requireJS在不同情况下的相对路径。

以下是相对路径的规则:

1.如果3f1c4e4b6b16bbbd69b2ee476dc4f83a标签引入require.js时没有指定data-main属性，则以引入该js的html文件所在的路径为根路径。

2.如果有指定data-main属性，也就是有指定入口文件，则以入口文件所在的路径为根路径。在本例子中也就是main.js所在的script文件夹就是根路径，这也是为什么配置jQuery的时候需要返回上层目录再进入lib目录才能找到jQuery文件。

3.如果再require.config()中有配置baseUrl，则以baseUrl的路径为根路径。
以上三条优先级逐级提升，如果有重叠，后面的根路径覆盖前面的根路径。

define

讲完了如何引入模块，现在讲如何定义一个模块,require定义一个模块是通过 define = function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。
先看个例子:

当你没有任何依赖的时候,你可以这么写:

//   js/script/desc.jsdefine(function(){    return{        decs : &#39;this js will be request only if it is needed&#39;,    };})      
//   然后在main.js的添加如下代码//   js/script/main.js
    $(&#39;#messagebox&#39;).html(&#39;You have access Jquery by using require()&#39;);
＋  require([&#39;script/desc&#39;],function(desc){
＋       alert(JSON.stringify(desc));

再次打开网页，打开network视图，点击按钮，通过require获得的desc模块就会alert出来，同时你会发现，desc.js是按需请求的，并不是在页面一开始的时候就请求的。

总结

以上就是关于关于RequireJS简单使用的介绍了，大家有需要可以直接看源码，大概就2000多行，不看具体实现，看它对几个函数声明的描述，对使用起来也是很有帮助的，你会发现有一些连官方文档都没提及到的一些特性(比如require()方法可以直接传入config配置作为第一个参数)。

그리고 조금 여담이지만, RequireJS의 공식 API를 확인하고 싶다면 가능하다면 공식 영문 문서를 직접 방문하는 것을 추천합니다. 공식 중국어 문서가 여전히 이전 버전에 머물러 있다면 번역이 불안정하고 이해하기 어렵기 때문에 잊어버리십시오. 명백히 잘못된 일부 설명은 실제로 책임의 문제입니다. 중국어 문서를 읽을 때는 정말 이해하기 어려웠는데, 나중에 영어 문서를 직접 읽어보니 훨씬 부드러워졌습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!