掌握Layui.$：轻量级jQuery核心解析 - 实践

Layui框架：var $ = layui.$ 核心解析笔记

---

一、核心作用

• ​​获取Layui内置的jQuery对象​​
  layui.$ 是Layui框架封装的轻量级jQuery库（约30KB）
• ​​避免全局污染​​
  防止与其他JS库（如Prototype.js）的$符号冲突
• ​​确保模块加载顺序​​
  必须在layui.use()回调函数内使用（此时模块已初始化完成）

---

二、实现原理

---

三、使用方法

1. 基础调用

layui.use(['jquery'], function() {
var $ = layui.$;  // ✅ 正确获取
// DOM操作示例
$('#header').css('color', 'red');
$('.item').hide();
});

2. 协同其他模块

layui.use(['jquery', 'layer', 'form'], function() {
var $ = layui.$;
var layer = layui.layer;
var form = layui.form;
// 按钮点击弹出层
$('#alert-btn').click(function() {
layer.msg('操作成功');
});
// 表单提交
form.on('submit(filter)', function(data) {
$.ajax({
url: '/submit',
data: data.field
});
});
});

---

四、核心功能对比

​​功能​​	​​layui.$​​	​​完整版jQuery​​
DOM选择器	✅ $('#id')/$('.class')	✅ 相同
事件绑定	✅ $.on()/$.click()	✅ 相同
AJAX请求	✅ $.ajax()	✅ 相同
链式操作	✅ $().addClass().show()	✅ 相同
动画效果	⚠️ 基础动画	✅ 完整动画库
插件支持	❌ 不兼容第三方插件	✅ 完全兼容
文件大小	~30KB (精简版)	~90KB (生产版)

---

五、常见问题解决方案

问题1：$ is not defined

​​错误原因​​：
在layui.use()外部直接使用$

​​解决方案​​：

// ❌ 错误
var $ = layui.$;  // 此时模块未加载
// ✅ 正确
layui.use(['jquery'], function() {
var $ = layui.$;  // 模块已加载
});

问题2：需要完整jQuery

​​解决方案​​（三步骤）：

window.jQuery = window.$ = jQuery; // 暴露全局
layui.config({
jquery: 'empty'  // 关键配置
});

---

六、最佳实践

1. ​​统一获取方式​​

   layui.use(['jquery', 'layer'], function() {
   const $ = layui.$;
   const layer = layui.layer;
   // 业务代码...
   });

2. ​​防冲突处理​​

   (function($) {
   // 闭包内安全使用$
   $('#element').on('click', function() {
   // ...
   });
   })(layui.$);

3. ​​按需加载模块​​

   // 仅当需要时加载
   function openDialog() {
   layui.use('layer', function() {
   layui.layer.open({...});
   });
   }

4. ​​链式操作优化​​

   // 缓存DOM查询结果
   const $form = $('#user-form');
   $form.find('input')
   .addClass('valid')
   .prop('disabled', false);

---

七、扩展应用示例

AJAX表格数据加载

layui.use(['jquery', 'table'], function() {
const $ = layui.$;
const table = layui.table;
// 点击按钮加载数据
$('#reload-btn').click(function() {
$.ajax({
url: '/api/data',
success: function(res) {
table.reload('data-table', {
data: res.data
});
}
});
});
});

表单动态验证

$('#password').on('input', function() {
const val = $(this).val();
if (val.length < 6) {
$(this).next('.tip').show().text('密码至少6位');
} else {
$(this).next('.tip').hide();
}
});

---

八、核心价值总结

​​优势​​	​​说明​​
模块化集成	无需单独引入jQuery库
命名空间隔离	避免全局$冲突
体积优化	比完整jQuery小70%
框架兼容性	完美支持Layui组件生态
链式操作效率	简化DOM操作代码
按需加载机制	减少初始化资源占用

​​核心要义​​：var $ = layui.$ 是安全使用jQuery的Layui标准方式，它既是模块化设计的入口，也是避免全局污染的关键实践。