기존 jquery 확장을layui 모듈로 변환하는 방법 소개

Layui에는 jquery가 내장되어 있습니다

사용 중인 모듈이 이에 의존하는 경우에만 로드되며, 페이지에 이미 스크립트를 통해 jquery가 도입된 경우에는 반복적으로 로드되지 않습니다. 내장된 jquery 모듈은 전역 $ 및 jQuery를 제거합니다.

layui 문서에 나온 설명입니다. jq가 내장되어 있지만 전역 $ 및 jQuery 개체가 제거됩니다. 즉, 창의 전역 외부 인터페이스가 삭제됩니다.

드래그 앤 드롭 구성요소 구현
siam.js가 다음과 같은 메소드를 제공하는 확장이라고 가정합니다.

<div id=&#39;test&#39;>原始内容</div>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
$.fn.siam = function(params){
    var dom = this;
    dom.html(params);
};


setTimeout(function(){
    $("#test").siam(&#39;这是新内容&#39;);
},800);
</script>
// 延迟执行完之后会把div内容变为 > 这是新内容

이것은 호출하는 일부 기존 JQ 확장의 구현 원칙입니다. 처리 작업을 위해 이 기사의 시작 부분에서 언급한 것처럼 드래그 앤 드롭 구성 요소를 사용합니다. 확장은 드래그 앤 드롭이 가능한 요소로 DOM을 처리하고 이러한 외부 인터페이스를 통해 다른 이벤트를 갖습니다.

문제 충돌

layui에서 전역 $ 및 Jquery 개체가 제거되는 기본 보완 사항은 다음과 같습니다. 로딩 창에서 Jquery 객체, window 객체, document 객체

는 $, window, document, undefound에 해당하는 위의 클로저

로 전달됩니다(전달되지 않기 때문에 동일함)

따라서 클로저에 사용된 $는 값이 없습니다. 이 확장 프로그램을 로드할 때 오류가 보고됩니다

;(function($, window, document, undefined){
    .....扩展内容
})(window.jQuery || window.Zepto, window, document);

jq 파일을 도입하는 것만으로는 문제를 해결할 수 없다는 것을 테스트했습니다(제가 사용하는 템플릿 로드 순서는layui에 내장된 jq를 먼저 로드하기 위한 것입니다)

layui custom module공식 홈페이지에서 소개한 내용입니다

$ is not defined
或者
Typeerror Cannot Read Property fn of undefined

layui custom module 메소드를 사용하여 Layui의 다른 모듈을 넘겨주면 확장 프로그램이layui에서 jq 객체를 동작시킬 수 있습니다

layui.code
/**
  扩展一个test模块
**/

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };

  //输出test接口
  exports('mymod', obj);
});

Use

layui.define(["jquery"], function (exports) {
    var $ = layui.jquery;
    // 把第一行的 ;(function($, window, document, undefined){ 换成以上
    ...扩展内容

    // 把最后一行的换成以下
    var obj = {
    };
    exports("自定义模块名", obj);
});

주의하세요, 이 글은 일반적인 방법이 아니며, 참고하고 배울 수 있는 이 문제를 해결하기 위한 나의 아이디어와 계획을 간략하게 설명하는 것입니다.

layui 프레임워크에 대한 자세한 내용은

layui 프레임워크 튜토리얼

을 참조하세요.

위 내용은 기존 jquery 확장을layui 모듈로 변환하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!