> 웹 프론트엔드 > 레이이 튜토리얼 > layui는 모듈을 정의하고 인스턴스를 사용합니다.

layui는 모듈을 정의하고 인스턴스를 사용합니다.

풀어 주다: 2019-11-29 14:14:45
앞으로
2825명이 탐색했습니다.

layui는 모듈을 정의하고 인스턴스를 사용합니다.

layui를 사용하는 과정에서 여러 js에서 참조해야 하는 메서드가 여러 가지 있으므로 문서에 따라layui 모듈을 사용자 정의했습니다. 구현 프로세스는 다음과 같습니다(권장: layui 사용 튜토리얼).

define first 모듈

//定义模块
layui.define(['form'], function(exports){

    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    var $ = layui.$;

    var obj = {
        changeParentPlace: function (parentId,tagId,levelPlace) {
            $.ajax({
                url:ctx + '/base/place/changeParentPlace',
                type:'get',
                data:{
                    parentId:parentId
                },
                dataType:'json',
                success:function (data) {
                    $("#" + tagId).empty();
                    $("#" + tagId).append(&#39;<option value="">请选择</option>&#39;);
                    if(data.result != null && data.result.length != 0) {
                        $.each(data.result,function(i,place) {
                            if(levelPlace == place.name) {
                                $("#" + tagId).append(&#39;<option selected value="&#39;+place.id+&#39;">&#39;+place.name+&#39;</option>&#39;)
                            }else {
                                $("#" + tagId).append(&#39;<option value="&#39;+place.id+&#39;">&#39;+place.name+&#39;</option>&#39;)
                            }
                        })
                    }
                    form.render(&#39;select&#39;); //刷新select选择框渲染
                }
            })
        }
    }

    //输出模块
    exports(&#39;common&#39;, obj);
});
로그인 후 복사

은layui.define

define을 사용하여 메소드를 정의합니다. 첫 번째 매개변수는 사용하기 위해layui에 내장된 일부 모듈을 로드할 수 있습니다.두 번째 콜백 메소드는 일부 공개 메소드를 정의합니다. 이 모듈의 이름, 두 번째 매개변수는 이 세 가지 메소드가 정의된 객체입니다

모듈 설정

//设置模块
layui.config({
    base: ctx + &#39;/js/app/modules/&#39; //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
    common:&#39;common&#39;
});
로그인 후 복사

layui.config를 사용하여 모듈 정의

base는 모듈을 정의하는 js가 있는 디렉터리를 정의합니다

common은 설정 별칭, 'common'은 디렉터리의 파일 이름입니다(.js가 자동으로 추가됩니다).

모듈 호출

layui.use([&#39;common&#39;], function(){
    var common = layui.common;

    common.changeParentPlace($("#firstLevelId").val(),&#39;secondLevelId&#39;);

});
로그인 후 복사

먼저 공통 모듈을 사용하면 호출 코드는 위와 같습니다. common.changeParentPlace( $("#firstLevelId").val (),'secondLevelId'); 내장 모듈을 사용하는 것과 같습니다

위 내용은 layui는 모듈을 정의하고 인스턴스를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿