Développement modulaire de require.js

Cette fois, je vais vous présenter le développement modulaire de require.js. Quelles sont les précautions pour le développement modulaire de require.js. Voici des cas pratiques. regarder. .

1. Require.js et AMD

Require.js : C'est un très petit JavaScript Le framework de chargement de modules est l'un des meilleurs implémenteurs des spécifications AMD.

AMD (Définition de module asynchrone) : La spécification de définition de module asynchrone (AMD) stipule des règles de définition de modules afin que les modules et les dépendances de module puissent être chargés de manière asynchrone. Ceci est tout à fait conforme au chargement asynchrone des modules par le navigateur (le chargement synchrone des modules par le navigateur entraînera des problèmes tels que les performances, la convivialité, le débogage et l'accès entre domaines).

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

2. Utilisation de Require.js

1. Dans l'exemple, un plug-in de conversion du pinyin chinois est utilisé (adresse GitHub :

https://

github.com/sxei/pinyinjs/). Ce plug-in est très utile, mais en raison des caractères polyphoniques en chinois, du pinyin non conventionnel apparaît souvent, comme (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. Introduction requise.js

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

3. Module de montage

　[1] Chargement partiel

　[2] Chargement global

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

Lors du chargement de cette façon, le répertoire racine sera "

/scripts/plus

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

" par défaut, et le paramètre

baseUrl peut réinitialiser le répertoire racine. Vous pouvez également référencer des fichiers distants ou des fichiers locaux en même temps. Lorsque le fichier distant ne parvient pas à se charger, le fichier local sera chargé.

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

Les modules chargés via

doivent généralement être conformes aux spécifications AMD, c'est-à-dire utiliser

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

pour déclarer le module, mais parfois il est nécessaire de charger des js standard non AMD, puis vous devez utiliser une autre fonction :

shim. requiredefine shim

est également difficile à comprendre. Shim est directement traduit par "pad", ce qui a en fait cette signification. Actuellement, je l'utilise principalement à deux endroits :

<.> La première consiste à configurer les dépendances des modules : par exemple, le plug-in pinyin pinyinUtil.js doit s'appuyer sur un dictionnaire pour être converti normalement.

Vous pouvez également compter sur des fichiers CSS

 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 }

L'autre consiste à charger la sortie du module non AMD et à "remplir" le module AMD non standard dans un module utilisable .

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

4. Utilisez require

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

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

Je crois que vous l'avez fait. lisez cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! Lecture recommandée :

Quels sont les composants de définition de classe présents dans React

Comment créer un presse-papiers natif dans le navigateur Navigateur .clipboard

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!