Maison interface Web Tutoriel Layui Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

Jan 06, 2021 am 09:58 AM
ajax layui 框架 模块

Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

layui est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être. utilisé hors de la boîte.

(Partage de vidéos d'apprentissage : Vidéo de programmation)

Dans une utilisation quotidienne, ajax peut être considéré comme étant largement utilisé, nous ajoutons donc ici notre propre module pour encapsuler ajax. Facile à utiliser.

Remarque : le chargement du module nécessite la prise en charge de l'environnement du serveur, donc avant de lire ce didacticiel, veuillez configurer un environnement de serveur local dans votre région. Cela n'entre pas dans le cadre de ce didacticiel, veuillez vous-même Baidu.

1. Construisez le répertoire du projet

Téléchargez d'abord le package layui depuis le site Web layui et placez-le dans votre propre projet. Ici, j'utilise un tout nouveau projet vide. Après avoir ajouté layui, le répertoire. structure Comme suit :

Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

2. Écrire les fichiers du module

Maintenant, je crée un nouveau dossier modules sous le dossier layui du plugin pour enregistrer nos propres fichiers de module. . , créez un nouveau fichier common.js dans ce dossier pour écrire notre premier module. Le contenu du fichier est le suivant :

layui.define([ 'jquery' ],  function (exports){ 
     var  $ = layui.jquery;
     var  obj = {
         ajax:  function  (url, type, dataType, data, callback) {
             $.ajax({
                 url: url,
                 type: type,
                 dataType: dataType,
                 data: data,
                 success: callback
             });
         }
     };
     //输出接口
     exports( 'common' , obj);
});
Copier après la connexion

layui.define() est la méthode de définition de module de layui. reçoit 2 paramètres, le premier paramètre est le module dépendant, nous voyons ici que nous dépendons de jquery ; la deuxième méthode de rappel, nous définissons ici le contenu du module, qui doit fournir ces méthodes comme le montre ce qui précède, nous définissons un objet obj, qui a une méthode ajax pour appeler l'ajax de jquery pour effectuer nos opérations. Si vous encapsulez d'autres plug-ins jquery, placez simplement le code js du plug-in dans la méthode de rappel de layui.define().

exports() est l'interface de sortie. Cette méthode a également deux paramètres Le premier est le nom du module de sortie et le second est l'objet à générer.

Maintenant, notre module a été écrit. Si nous devons ajouter des méthodes plus tard, ajoutez simplement des méthodes à l'objet obj. Maintenant, notre structure de répertoires est la suivante :

Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

3. Configurez le module de répertoire des composants de chargement de layui

Une fois le module écrit, nous devons configurer layui. pour que layui puisse le trouver. Pour notre module, généralement cette configuration est complétée dans notre global js. Ici je crée un nouveau fichier global.js sous assets/js Le contenu du fichier est le suivant :

layui.config({
     base:  '/assets/plugin/layui/modules/'       //自定义layui组件的目录
}).extend({  //设定组件别名
     common:    'common' ,
});
Copier après la connexion
<🎜. >layui.config() est la configuration de la méthode layui, le paramètre de base représente le répertoire de sauvegarde de notre module. Ce répertoire est calculé à partir du répertoire racine d'accès du site Web. Comme le montre l'étape précédente, le chemin de sauvegarde de mon module. est le dossier /assets/plugin/layui/modules/ ; extend définit le nom réel de notre module. Le commun avant les deux points dans le code ci-dessus représente le nom du module, qui est le nom que nous utiliserons lors du chargement du module à l'avenir, et le 'common' après les deux points représente le nom de notre fichier de module, ici. En fait, il fait référence au fichier /assets/plugin/layui/modules/common.js. Nous pouvons omettre le suffixe js, et le suffixe sera. automatiquement ajouté lors du chargement.

4. Utiliser le module

Une fois le module défini, nous pouvons utiliser le module. Utiliser le module est en fait la même chose que d'utiliser le module intégré de layui. .html, dans lequel j'utilise la méthode ajax du module pour accéder à une interface de traduction en ligne. Le code du fichier est le suivant :

< script  src = "assets/plugin/layui/layui.js" ></ script >
< script  src = "assets/js/global.js" ></ script >
< script >
     layui.use([&#39;common&#39;], function () {
         var common = layui.common;
         common.ajax(&#39;http://route.showapi.com/32-9&#39;, &#39;post&#39;, &#39;json&#39;, {
             &#39;showapi_appid&#39;: 28043,
             &#39;showapi_sign&#39;: &#39;fd5ce066f69441bfa078c0ad16129b15&#39;,
             &#39;q&#39;: &#39;hello&#39;
         }, function (res) {
             alert(JSON.stringify(res));
         });
     });
</ script >
Copier après la connexion
Visitez index.html et voyez le résultat de retour dans la figure ci-dessous, qui prouve que le module est encapsulé avec succès.


Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax

Recommandations associées :

tutoriel layui

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!

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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment évaluer la rentabilité du support commercial des frameworks Java Comment évaluer la rentabilité du support commercial des frameworks Java Jun 05, 2024 pm 05:25 PM

Comment évaluer la rentabilité du support commercial des frameworks Java

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement Jun 06, 2024 pm 01:12 PM

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement

Comment les options légères des frameworks PHP affectent-elles les performances des applications ? Comment les options légères des frameworks PHP affectent-elles les performances des applications ? Jun 06, 2024 am 10:53 AM

Comment les options légères des frameworks PHP affectent-elles les performances des applications ?

Bonnes pratiques en matière de documentation du framework Golang Bonnes pratiques en matière de documentation du framework Golang Jun 04, 2024 pm 05:00 PM

Bonnes pratiques en matière de documentation du framework Golang

Comment choisir le meilleur framework Golang pour différents scénarios d'application Comment choisir le meilleur framework Golang pour différents scénarios d'application Jun 05, 2024 pm 04:05 PM

Comment choisir le meilleur framework Golang pour différents scénarios d'application

Comment la courbe d'apprentissage des frameworks PHP se compare-t-elle à celle d'autres frameworks de langage ? Comment la courbe d'apprentissage des frameworks PHP se compare-t-elle à celle d'autres frameworks de langage ? Jun 06, 2024 pm 12:41 PM

Comment la courbe d'apprentissage des frameworks PHP se compare-t-elle à celle d'autres frameworks de langage ?

Explication pratique détaillée du développement du framework Golang : questions et réponses Explication pratique détaillée du développement du framework Golang : questions et réponses Jun 06, 2024 am 10:57 AM

Explication pratique détaillée du développement du framework Golang : questions et réponses

Comparaison des performances du framework Golang : mesures pour faire des choix judicieux Comparaison des performances du framework Golang : mesures pour faire des choix judicieux Jun 05, 2024 pm 10:02 PM

Comparaison des performances du framework Golang : mesures pour faire des choix judicieux

See all articles