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
    }
}));

(function (){}());

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

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
        }
     */
}))

로그인 후 복사