Layui完美加载第三方jQuery插件的正确姿势

分享 未结 精帖 10 13381
李满满
李满满 2017-6-29
悬赏:5飞吻
[微笑]
前言: 最近才接触Layui,看到很多小伙伴也遇到和我同样的问题,怎么让Layui加载jQuery第三方插件哪?看了各位小伙伴很多人问这个问题,作者也没有给出思路~ 后来仔细想想~ 似乎按照这个套路就可以完美加载任意jQuery插件,突然发现开始喜欢这个框架了哪~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Layui</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: 'js/'}).extend({
jquery_cookie: 'extends/jquery.cookie'
// 默认寻找base也就是js/index.js模块导入
}).use('index');
</script>
</body>
</html>
说明: index.html文件代码如上,由于第三方库位于js/extends/下,所以首先使用 layui.config({base: 'js/'})来设置根目录,然后使用extend来将extends/jquery.cookie.js扩展为一个模块,然后使用use去加载我们根目录下的入口模块index.js文件,需要注意的是index.js和jquery.cookie.js都必须改为Layui式的模块才能正常被加载.
// 入口文件
layui.define(['jquery', 'jquery_cookie'], function (exports) {
var $ = layui.jquery;
// 可能需要导入多个扩展插件
$ = layui.jquery_cookie($);

// 尝试使用jquery.cookie.js
$.cookie('name', 'limanman');

alert($.cookie('name'));

// 作为入口无需注册模块,所以直接null
exports('index', null);
});
说明: js/index.js官方推荐对单页面使用独立入口文件,其实就是一个定义模块回调的过程,由于我们的模块依赖jquery,jquery_cookie,所以定义的时候需要写入才能正常被加载,其实此处的exports是不需要的,因为作为入口文件直接被调用而不用回调注册到layui,然后就是内部调用var $ = layui.jquery; $ = layui.jquery_cookie($);时,其实是去调用我们jquery.cookie.js这个模块中exports的方法,这里弄个方法主要是为了让多个插件公用layui.jquery,然后在内部就可以任意使用了~
layui.define(function(exports){
function jquery_cookie(jQuery){
// 插件代码区

return jQuery;
};

exports('jquery_cookie', jquery_cookie);
});
说明: js/extends/jquery.cookie.js中加入的内壳如上面,当然有些扩展插件需要稍作修改即可~ 总之套路就是这个套路,然后你就可以加载任意你想加载的第三方JQ插件了~
回帖
  • [good]
    1 回复
  • 李满满
    2017-6-29
    @Esofar 其实并没有修改什么呀~ 新的插件出来了直接复制粘贴
    layui.define(function(exports){
    function jquery_cookie(jQuery){
    // 插件代码区

    return jQuery;
    };

    exports('jquery_cookie', jquery_cookie);
    });
    到对应的代码区稍作修改即可~
    1 回复
  • Warn
    2017-7-1
    [good] 给力
    1 回复
  • lovnie
    2017-7-1
    这个方法不错
    1 回复
  • Esofar
    2017-6-29
    这样修改原来的插件好吗,以后升级的时候怎么办。
    0 回复
  • “Black
    2017-6-29
    0 回复
  • LiuZY
    2017-6-30
    在layui.js
    里把模块加上就能直接调用
    0 回复
  • 李满满
    2017-6-30
    @LiuZY 压缩过的代码~ 就不要动了~ 人家已经提供了很好用的预加载接口~ 还是直接用比较好
    0 回复
  • 陈信息
    2017-7-18
    这么麻烦,烦死了
    0 回复
  • 曾经沧海
    2017-11-29
    这个真的不错哦:感谢楼主分享源码素材我也写了一个: http://www.erdangjiade.com/
    0 回复
本帖已设置禁止回复