怎么在layuiAdmin中使用jQuery?

layui(谐音:类 UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用

目前在打算重构十年之约的后台,以期能实现更多更方便的功能,在此也感谢 layui 官方赞助的 layuiAdmin 套餐版授权

不得不说 layuiAdmin 的牛逼,自适应都帮你搞好了,完成需求就好了,对我这种不喜欢搞前端的后端来说真的美滋滋

十年的后台代码已经在 Github 开源,一边开发一边提交,同时因为不能泄露 layuiAdmin 的源码,所以去掉了静态页和静态资源

完整的代码上传到 Github 的私有库当中

来说正事吧,在 layuiAdmin 中使用 jQuery,解决 layui 和 jQuery 冲突的办法

jQuery 使用 $ 符号作为 jQuery 的简写,layui 也使用 $ 符号作为简写

jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了

当然,也可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工作!");
    });
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,可以把它存入变量,以供稍后使用

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍然在工作!");
    });
});

如果你的 jQuery 代码块使用 $ 简写,并且你不愿意改变这个快捷方式,那么可以把 $ 符号作为变量传递给 ready 方法

这样就可以在函数内使用 $ 符号了,但是在函数外,依旧不得不使用 “jQuery”:

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍然在工作!");
    });
});

我当然不是来说 jQuery 的,我是来说 layui 的,一定不好好看文档吧

使用内部 jQuery

由于 layui 部分内置模块依赖 jQuery,所以 layui 将 jQuery1.11 最稳定的一个版本作为一个内置的 DOM 模块(唯一的一个第三方模块)

内置的 jQuery 模块去除了全局的 $ 和 jQuery ,是一个符合 layui 规范的标准模块

所以你必须通过以下方式得到:

//主动加载 jquery 模块
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重点处
,layer = layui.layer;

//后面就跟你平时使用 jQuery 一样
$('body').append('hello jquery');
});

//如果内置的模块本身是依赖 jquery,你无需去 use jquery,所以上面的写法其实可以是:
layui.use('layer', function(){
var $ = layui.$ //由于 layer 弹层依赖 jQuery,所以可以直接得到
,layer = layui.layer;

//……
});

6 条评论

发表评论

*