찾다
웹 프론트엔드레이이 튜토리얼Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계

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

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

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

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

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

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

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

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

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

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() 메서드는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:  '/assets/plugin/layui/modules/'       //自定义layui组件的目录
}).extend({  //设定组件别名
     common:    'common' ,
});

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 튜토리얼

위 내용은 Ajax 모듈을 캡슐화하기 위해 Layui 프레임워크를 사용하는 특정 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 csdn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경