>  기사  >  웹 프론트엔드  >  layui는 모듈을 정의하고 인스턴스를 사용합니다.

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

尚
앞으로
2019-11-29 14:14:452764검색

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으로 문의하시기 바랍니다. 삭제