Layui 패키징 모듈 튜토리얼

layui는 중국 사람들이 개발한 매우 간단한 UI 프레임워크이므로, 사용 중에 필연적으로 자체 모듈을 추가해야 합니다. 간단한 모듈을 캡슐화하는 방법을 가르쳐 드리겠습니다.

추천: layui 사용법 튜토리얼

일상적으로 사용하는 경우 ajax가 널리 사용된다고 할 수 있으므로 여기에 우리의 모듈을 추가합니다. ajax를 사용하려면 쉽게 사용할 수 있도록 캡슐화하세요.

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

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

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

2. 모듈 파일 쓰기

이제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 객체에 메서드를 추가하기만 하면 됩니다. 이제 디렉토리 구조는 다음과 같습니다:

3layui 로딩 구성 요소 디렉토리 모듈을 설정합니다.

모듈이 작성된 후 ,layui가 모듈을 찾을 수 있도록 구성이 필요합니다. 일반적으로 이 구성은 전역 js에서 완료됩니다. 여기서는 자산/js 아래에 새 global.js 파일을 만듭니다. #🎜🎜 #

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

layui.config()는layui의 구성 방법입니다. 기본 매개변수는 우리 모듈의 저장 디렉터리를 나타냅니다. 이 디렉터리는 이전 단계에서 볼 수 있듯이 웹사이트의 액세스 루트 디렉터리에서 계산됩니다. , 내 모듈 저장 경로는 /assets/plugin/layui/modules/ 폴더입니다. 확장은 실제 모듈 이름을 정의합니다. 위 코드에서 콜론 앞의 공통은 모듈 이름을 나타냅니다. 이는 모듈을 로드할 때 사용할 이름입니다. 모듈은 향후에 추가될 것이며 콜론 뒤의 'common'은 실제로 /assets/plugin/layui/modules/common.js 파일을 참조하는 모듈 파일의 이름을 나타냅니다. js 접미사와 접미사는 생략할 수 있습니다. 로딩시 자동으로 추가됩니다.

4. 모듈 사용

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

<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;//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을 방문하여 반환 결과를 확인하세요. 아래 그림은 모듈이 성공적으로 캡슐화되었음을 증명합니다.

위 내용은 Layui 패키징 모듈 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!