专栏首页宣言(Siam)博客Layui模块化,改造传统jquery扩展为layui模块

Layui模块化,改造传统jquery扩展为layui模块

此篇文章比较偏向笔记类型

在我使用jquery扩展,拖拽组件的时候,因为使用的布局模板有些冲突,导致无法使用扩展,所以才会解决之后写下这篇文章。

Layui中内置了jquery

只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery。

这是layui文档中的描述,它内置了jq,但是去除了全局的$和jQuery对象,也就是在window的全局对外接口被删除了。

拖拽组件的实现 假设siam.js是一个扩展,里面提供了一个类似这样的方法

<div id='test'>原始内容</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('这是新内容');
},800);
</script>
// 延迟执行完之后会把div内容变为 > 这是新内容

这就是一些传统jq扩展的实现原理,对于你调用的dom,它会继续处理操作,如本文开始说的,我使用的是拖拽组件,扩展会通过这样子的对外接口 将dom处理为可以拖拽的,并且带有其他事件的元素。

问题冲突

以上两点是问题的基础补充,在layui中,去除了全局的$和Jquery对象,默认扩展中有以下代码

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

在最后面,它依赖加载window.Jquery对象,window对象,document对象

传递到上面的闭包中 对应$, window, document, undefined(因为没有传递 所以也一样)

所以导致闭包中使用的$是没有值的,一加载这个扩展就报错

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

测试过单独引入jq文件也解决不了问题,(我使用的模板加载顺序的原因,先加载了layui内置的jq)

layui自定义模块

这是官网的介绍

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

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

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

我们可以使用layui自定义模块的方法,将layui的其他模块传递进来,使扩展能操作layui中的jq对象

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

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

使用

 layui.use(['form','jquery','自定义模块名'], function (admin, form) {
     var $ = layui.jquery;
     var obj = layui.自定义模块名;

     // 正常使用 即可  比如我的
     $("#test").desta('open');
});

注意,此篇文章并不是通用方法,只是简单阐述了我解决这个问题的思路和方案,可以参考学习,如果有其他类型的相似问题欢迎留言一起交流

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信公众号应用开发流程 免费内网穿透映射本地,实现调试

    我们可以使用一系列内网穿透映射的工具,可以在公网访问本地开放的程序,(无论是自己搭建还是使用其他产品 都适用)

    宣言言言
  • PHP类,魔术方法

    析构函数,当类被手动销毁,或者脚本结束时,gc回收触发。可以执行一些后置操作,比如删除临时目录下的文件。

    宣言言言
  • swoole,swoole_timer_tick() must be callable, array given 报错异常

    在easyswoole旧版的Component组件中的Pool抽象方法(用于实现通用连接池),有一行代码是

    宣言言言
  • /undefinedcss/modules/layer/default/layer.css?v=3.1.1找不到的问题

    Happyjava
  • 当算法遇上敏捷开发

    我是非常倡导敏捷开发的方式的,不仅程序,包括设计、算法、运营等等,我都倾向于有想法立马实践,快速试错,不断迭代,找到最终最佳路径。

    mixlab
  • 详解选择排序算法

    选择排序的思想是: 给定一个数组arr,其长度为n; 第一次从 arr[0] 到 arr[n-1] 中选取一个最值(按照需求,可以是最...

    code随笔
  • Layui 介绍

    1、下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v= 2、结构: -...

    用户5760343
  • 生成命令行接口--google开源的fire使用体验【python-fire】

    在python中,命令行接口常用的argparse 和click,但是相对于python-fire 来说灵活度太缺了,fire可以直接将python中的函数,以...

    Gxjun
  • Layui 页面元素

    layui-elip,layui-disabled,layui-circle,layui-show,layui-hide

    用户5760343
  • 基于layui实现用户分配权限部分代码供参考

    Java栈

扫码关注云+社区

领取腾讯云代金券