今天小编给大家分享的是改变传统jquery为layui模块的方法介绍，相信大部分人都还没学会这个技能，为了让大家更加了解，给大家总结了以下内容，话不多说，一起往下看吧。
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');
});上述就是改变传统jquery为layui模块方法的详细内容，详细使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
