Maison > interface Web > js tutoriel > le corps du texte

Développement modulaire de require.js

php中世界最好的语言
Libérer: 2018-03-19 17:06:09
original
1369 Les gens l'ont consulté

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);
Copier après la connexion

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
Copier après la connexion

2. Introduction requise.js

<script src="/scripts/plus/require.js"></script>
Copier après la connexion
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);
    );
})
Copier après la connexion

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>
Copier après la connexion
" 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"
    }
});
Copier après la connexion

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"],
    }
});
Copier après la connexion
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 }
Copier après la connexion
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"]
    },
});
Copier après la connexion

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();
});
Copier après la connexion

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!