


Étapes spécifiques pour utiliser le framework layui pour encapsuler le module ajax
Jan 06, 2021 am 09:58 AMlayui 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 :
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); });
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 :
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' , });
< script src = "assets/plugin/layui/layui.js" ></ script > < script src = "assets/js/global.js" ></ script > < script > layui.use(['common'], function () { var common = layui.common; common.ajax('http://route.showapi.com/32-9', 'post', 'json', { 'showapi_appid': 28043, 'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15', 'q': 'hello' }, function (res) { alert(JSON.stringify(res)); }); }); </ script >
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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

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 ?

Bonnes pratiques en matière de documentation du framework Golang

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 ?

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
