Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계-레이이 튜토리얼-php.cn

Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계

王林

풀어 주다： 2021-01-06 09:58:27

앞으로

4901명이 탐색했습니다.

Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계

layui는 자체 모듈 사양을 사용하여 작성된 프런트 엔드 UI 프레임워크로 기본 HTML/CSS/JS의 작성 및 구성 형식을 따르며 임계값이 매우 낮습니다.

(학습 영상 공유: 프로그래밍 영상)

Ajax는 일상적으로 많이 사용된다고 할 수 있는데, 여기서는 쉽게 사용할 수 있도록 Ajax를 캡슐화하는 자체 모듈을 추가합니다.

참고: 모듈 로딩에는 서버 환경 지원이 필요하므로 이 튜토리얼을 읽기 전에 해당 지역에 로컬 서버 환경을 설정하십시오. 이는 이 튜토리얼의 범위에 포함되지 않습니다.

1. 프로젝트 디렉토리 구축

먼저layui 웹사이트에서layui 패키지를 다운로드하여 자신의 프로젝트에 넣습니다. 여기서는layui를 추가한 후 디렉토리 구조는 다음과 같습니다.

2, 모듈 파일 쓰기 Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계

이제 우리의 모듈 파일을 저장하기 위해 플러그인의layui 폴더 아래에 새 모듈 폴더를 만들고, 이 폴더에 새 common.js 파일을 만들어 첫 번째 모듈을 작성합니다. 내용은 다음과 같습니다:

layui.define([ &#39;jquery&#39; ],  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( &#39;common&#39; , obj);
});

로그인 후 복사

layui.define() 메서드는layui의 정의 모듈 메서드입니다. 이 메서드는 2개의 매개변수를 받습니다. 여기서는 두 번째 콜백 메서드에 의존한다는 것을 알 수 있습니다. 여기서 우리가 정의하는 모듈의 내용은 이러한 메서드를 제공하는 것입니다. 위에서 볼 수 있듯이 우리는 작업을 수행하기 위해 jquery의 ajax를 호출하는 데 사용되는 ajax 메서드를 포함하는 obj 객체를 정의합니다. 다른 jquery 플러그인을 캡슐화하는 경우 플러그인의 js 코드를layui.define()의 콜백 메소드에 넣기만 하면 됩니다.

exports()는 출력 인터페이스입니다. 이 메서드에도 두 개의 매개변수가 있습니다. 첫 번째는 출력 모듈의 이름이고 두 번째는 출력할 개체입니다.

이제 모듈이 작성되었습니다. 나중에 메서드를 추가해야 하는 경우 obj 개체에 메서드를 추가하기만 하면 됩니다. 이제 우리의 디렉토리 구조는 다음과 같습니다:

3.layui 로딩 컴포넌트 디렉토리 모듈 설정 Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계

모듈이 작성된 후,layui가 모듈을 찾을 수 있도록layui를 구성해야 합니다. global js가 완료되었습니다. 여기서는 resources/js 아래에 새 global.js 파일을 만듭니다. 파일 내용은 다음과 같습니다.

layui.config({
     base:  &#39;/assets/plugin/layui/modules/&#39;       //自定义layui组件的目录
}).extend({  //设定组件别名
     common:    &#39;common&#39; ,
});

로그인 후 복사

layui.config()는layui의 구성 방법입니다. 이 디렉토리는 웹사이트에서 액세스됩니다. 이전 단계에서 볼 수 있듯이 내 모듈 저장 경로는 실제 모듈 이름이 정의되어 있습니다. 위 코드에서 콜론 앞에 있는 Extension에서 common은 모듈 이름, 즉 나중에 모듈을 로드할 때 사용하는 이름을 나타내고, 콜론 뒤의 'common'은 모듈 파일 이름을 나타냅니다. 이는 실제로 /assets/plugin/layui/modules/common.js 파일을 참조합니다. js 접미사를 생략할 수 있으며 로드 시 접미사가 자동으로 추가됩니다.

4. 모듈 사용

모듈을 정의한 후에는 모듈을 사용하는 것이 실제로layui의 내장 모듈을 사용하는 것과 동일합니다. 여기서는 모듈의 ajax를 사용합니다. 메소드는 온라인 번역 인터페이스에 액세스합니다. 파일 코드는 다음과 같습니다.

< 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 >

로그인 후 복사

index.html을 방문하여 아래 그림에 표시된 반환 결과를 확인하면 모듈이 성공적으로 캡슐화되었음을 증명합니다.

관련 추천: Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계 layui 튜토리얼