require.js의 모듈식 개발

php中世界最好的语言원래의: 2018-03-19 17:06:091415검색

이번에는 require.js의 modular개발에 대해 알려드리겠습니다. require.js의 모듈러 개발 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. Require.js 및 AMD

Require.js: 매우 작은 JavaScript 모듈 로딩 프레임워크이자 AMD 사양의 최고의 구현자 중 하나입니다.

AMD(비동기 모듈 정의): 비동기 모듈 정의 사양(AMD)은 모듈 및 모듈 종속성을 비동기적으로 로드할 수 있도록 모듈 정의 규칙을 설정합니다. 이는 브라우저의 비동기식 모듈 로드와 일치합니다(브라우저에 의한 모듈의 동기식 로드는 성능, 유용성, 디버깅 및 도메인 간 액세스와 같은 문제를 야기합니다).

// AMD规范// 第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。// 第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。// 第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。define(id?, dependencies?, factory);

2. Require.js는

1을 사용합니다. 디렉토리 구조

예시에서는 중국어 병음 변환 플러그인을 사용했습니다. (GitHub 주소: https:// github.com/sxei/pinyinjs/) 이 플러그인은 사용하기 매우 쉽지만 중국어의 다성 문자로 인해 (Jia Baoyu=> "gu bao yu")

와 같은 색다른 병음이 자주 나타납니다.

  ├─scripts
     │─plus
        ├─pinyin
        │ ├─dist
        │ │  ├─pinyin_dict_firstletter.js
        │ │  ├─pinyin_dict_notone.js
        │ │  ├─pinyin_dict_polyphone.js
        │ │  └─pinyin_dict_withtone.js
        │ └─pinyinUtil.js
        ├─jquery.js
        ├─plusMain.js
        ├─require.js
        └─test.js

2, require.js

<script src="/scripts/plus/require.js"></script>

3을 소개합니다. 마운트 모듈

　　[1] 부분 로딩

//test.jsdefine(function () {    return {
        add: function (a, b) {
            alert("传参没用上，哈哈");
        }
    }
});//页面代码$(function () {
    require(["/scripts/plus/test.js"], function (h) {
        h.add(1, 2);
    );
})

　　[2] 글로벌 로딩

//plusMain.jsrequire.config({
    paths: {        jquery: "jquery",
    }
});//页面引用<script src="/scripts/plus/require.js" data-main="/scripts/plus/plusMain" defer async="true></script>

이런 식으로 로드할 때 "/scripts/plus"가 기본적으로 루트 디렉터리가 되며, baseUrl 매개변수를 사용하여 루트 디렉터리를 재설정할 수 있습니다.

//效果相同require.config({
    baseUrl: "/scripts/plus",
    paths: {        jquery: "jquery"
    }
});

　 원격 파일이나 로컬 파일을 동시에 참조할 수도 있습니다. 원격 파일 로드에 실패하면 로컬 파일이 로드됩니다.

require.config({
    paths: {        jquery: ["http://libs.baidu.com/jquery/2.0.3/jquery", "jquery"],
    }
});

　 require加载的模块一般都需要符合AMD规范即使用define를 사용하여 모듈을 선언하지만 때로는 AMD 표준이 아닌 js를 로드해야 할 때도 있습니다. 이때 다른 기능인 shim을 사용해야 합니다.

　　shim심은 "패드"로 직접 번역되는데 실제로는 이런 의미를 가지고 있습니다.

　하나는 모듈의 종속성을 구성하는 것입니다. 예를 들어, 병음 플러그인 pinyinUtil.js는 일반적인 변환을 위해 사전에 의존해야 합니다.

 1 require.config({ 2     paths: { 3         jquery: "jquery", 4         pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter", 5         pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone", 6         pinyin: "pinyin/pinyinUtil" 7     }, 8     shim: { 9         pinyin: {10             deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合11         }12     }13 });14 15 //可以简写成16 shim: {17     pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]18 }

　CSS 파일을 사용할 수도 있습니다

require.config({
    paths: {
        select2: "select2/select2.min"
    },
    shim: {
        select2: ["/scripts/plus/select2/select2.min.css"]
    },
});

　다른 하나는 비AMD 모듈 출력을 로드하고 비표준 AMD 모듈을 사용 가능한 모듈에 "패딩"하는 것입니다.

// test.js(function () {    var NGY = {
        Hi: function() {
            alert("跨越过去之后");
        }
    }
    window.NGY = NGY;
})();//配置require.config({
    paths: {
        ngy: "test"
    },
    shim: {
        ngy: { exports: "NGY" }
    },
});//使用，不需要声明变量就可以直接使用require(["ngy"], function () {
    NGY.Hi();
});

4. require

require(["jquery", "pinyin"], function ($, pinyin) {
    $("span").html("谁最可爱?");    var dl = pinyin.getPinyin('当然是我');
});

사용하세요. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요. !