JavaScript의 UMD 사양에 대한 자세한 소개(코드 포함)

이 글은 자바스크립트의 UMD 사양에 대한 자세한 소개를 담고 있습니다. (코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1.UMD 사양

Address: https://github.com/umdjs/umd

UMD 사양 중 가장 일반적입니다. 모든 사양 가장 못생긴 것, 바 없음! ! ! 이 모듈은 AMD 및 CommonJs 사양 모두와 호환되는 것으로 나타났습니다. 이는 브라우저 측 및 서버 측 참조를 모두 지원해야 하는 일부 타사 라이브러리에서 주로 사용됩니다. UMD는 다양한 환경이 마침내 ES 조화의 통일된 사양을 실현하게 되면 역사의 무대에서 물러나게 됩니다.

UMD 사양의 구조는 언뜻 보면 매우 복잡합니다. 주로 이 패러다임을 이해하려면 자바스크립트에 대한 기본 지식이 필요하기 때문입니다.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    方法
    function a(){};    //    私有方法，因为它没被返回 (见下面)
    function b(){};    //    公共方法，因为被返回了
    function c(){};    //    公共方法，因为被返回了

    //    暴露公共方法
    return {
        b: b,
        c: c
    }
}));

#🎜🎜 #2. 소스 코드 패러다임 추론

2.1 기본 구조

가장 바깥쪽 구조를 먼저 살펴보겠습니다.

(function (){}());

매우 간단합니다. -실행 기능. 모듈식 표준이므로 이 자체 실행 함수는 결국

모듈을 내보낼 수 있으므로 코드 관점에서 실제로 두 가지 일반적인 구현 방법이 있습니다. #🎜 🎜##🎜🎜 #

return은 모듈을 반환합니다.

1. 실제 매개변수는 객체로 전달되고, 함수 내에서 생성된 매개변수는 내보내야 합니다.

2. 위의 함수 본문 안에 return 문이 없는 것을 보면 UMD가 구현되어 있음을 짐작할 수 있습니다. 두 번째 방법. UMD는 모듈식 사양이기 때문에 그 기능은 사용 요구 사항에 따라 모듈을 생산하는 것입니다. 즉, UMD의 책임을 모듈 팩토리라고 하며, 이 메서드가 실행될 때마다 모듈을 정의할 수 있으므로 기본 구조입니다.

(function (factory){
    //假设没有使用任何模块化方案，那么将工厂函数执行后返回的内容直接挂载到全局
    window.Some_Attr = factory（）;
}(function(){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

즉, 익명 함수를 사용자 정의한 다음 이를 자체 실행 함수에 실제 매개변수로 전달한 다음 내부의 형식 매개변수를 통해 이 팩토리 메소드에 액세스합니다. 자체 실행 함수(또는 콜백 함수나 콜백에 더 익숙할 것임)를 전역 객체에 걸어두기만 하면 기본 모듈 내보내기가 완료됩니다.

때때로 우리는 모듈을 비전역 환경에 마운트하기를 원합니다. 마운트 객체를 동적으로 전달하면 코드가 더 유연해집니다. 서버 환경에는 페이지에 d5ba1642137c3f32f4f4493ae923989c을 삽입한 후 도입된 새 Window 개체를 추적하기 위해 parent, top 및 self라는 세 가지 속성이 있습니다. self 속성이 포함되어 있는지 여부에 따라 전역 개체를 식별하므로 여기에 작성하는 내용이 호환 가능하도록 개선될 수 있습니다.

(function(root,factory){
    root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){
    
}));

2.2 AMD에 적응

그런 다음 먼저 AMD를 추가하겠습니다. 표준 적응 및 표준 주소: AMD 사양 github 주소:

/*
* AMD规范的模块定义格式是define(id?, dependencies?, factory),factory就是实际的模块内容
*/
(function (factory){
    //判断全局环境是否支持AMD标准
    if(typeof define === 'function' && define.amd){
        //定义一个AMD模块
        define([/*denpendencies*/],factory);
    }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

2.3 Adapt to CommonJs

그런 다음 먼저 CommonJs의 표준 적응을 추가합니다. # 🎜🎜#

/*
* CommonJs规范使用require('moduleName')的格式来引用模块，使用module.exports对象输出模块，所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
    //判断全局环境是否支持CommonJs标准
      if(typeof exports === 'object' && typeof define !== 'function'){
             module.exports = factory(/*require(moduleA), require(moduleB)*/);
      }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

CommonJs에 적응을 추가한 후 함수 본문(일반적으로 객체)에 반환된 콘텐츠가 module.exports에 마운트됩니다. node.js 코드를 작성했으므로 이에 대해 잘 알고 있어야 합니다.

위의 조각을 함께 부수면 UMD가 어떻게 생겼는지 이해하게 될 것입니다. CommonJs的规范的适配：

// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () { return true; };
}));

加入对CommonJs的适配后，函数主体中return的内容(一般是一个对象)就被挂载到了module.exports上,如果你编写过node.js代码，对此一定不会陌生。

把上面的片段揉到一块，你也就看懂UMD

3. 더욱 타겟팅된 UMD 패러다임

UMD는 다양한 시나리오에 적합한 더욱 타겟팅된 패러다임을 제공하며 관심 있는 독자는 직접 확인하실 수 있습니다(주소 섹션 1)에 나와 있습니다.

다음은 대부분의 개발자에게 유용할 수 있는 jqueryPlugin 개발 패러다임입니다. 위의 분석을 이해했다면 다음 코드도 이해하기 어렵지 않을 것입니다. 🎜#4. 모듈형 개발

프론트엔드 모듈화 자체는 다소 혼란스러운 주제입니다. 저자 자신도 처음에 require()와 require.js에 대해 혼란스러워했지만, 모듈 커스터마이징은 매우 중요한 주제입니다. 프론트엔드 개발 평생 한 페이지에만 코드를 작성하고 싶지 않다면 이 레벨을 통과해야 합니다. 관심 있는 독자는 아래 기본 카테고리에 따라 학습할 수 있습니다.

위 내용은 JavaScript의 UMD 사양에 대한 자세한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!