layui 封装第三方组件

提问 未结 精帖 44 32868
小魔方
小魔方 VIP2 2016-11-15
悬赏:100飞吻
首先请先看下链接的这篇文章,了解下各种「组件规范」
https://my.oschina.net/felumanman/blog/263330?p=1

layui 呢有自己的组件规范,和上面文章里的「CommonJS AMD CMD UMD」都是类似的
你只需要为你想用的插件添加「LayUI 支持」即可

这是文章中提到的「UMD 规范」写法
(function (window, factory) {
if (typeof exports === 'object') { // 支持 CommonJS
module.exports = factory();
} else if (typeof define === 'function' && define.amd) { // 支持 AMD
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
// 模块源代码
//module ...
});
那么如何为它添加 LayUI 支持呢,非常简单,加上下面的代码即可
} else if (window.layui && layui.define) {
layui.define('jquery', function (exports) { //layui加载
exports('fullPage', factory(layui.jquery, global, global.document, global.Math));
});
即:
(function (window, factory) {
if (typeof exports === 'object') { // 支持 CommonJS
module.exports = factory();
} else if (typeof define === 'function' && define.amd) { // 支持 AMD
define(factory);
} else if (window.layui && layui.define) { //layui加载
layui.define(function (exports) {
exports('fullPage', factory());
});
} else {
window.eventUtil = factory();
}
})(this, function () {
// 模块源代码
//module ...
});
下面是「jquery.fullPage.js」的源代码,这个插件是依赖 jQuery 的
大家点进去可以看见代码头部支持「UMD」规范的代码
https://cdn.bootcss.com/fullPage.js/2.8.8/jquery.fullPage.js

下面让我们为其添加「LayUI」支持
(function(global, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], function($) {
return factory($, global, global.document, global.Math);
});
} else if (typeof exports === "object" && exports) {
module.exports = factory(require('jquery'), global, global.document, global.Math);
} else if (window.layui && layui.define) {
layui.define('jquery', function (exports) { //layui加载
exports('fullPage', factory(layui.jquery, global, global.document, global.Math));
});
} else {
factory(jQuery, global, global.document, global.Math);
}
})(typeof window !== 'undefined' ? window : this, function($, window, document, Math, undefined) {
在封装组件的过程中一定要动脑哦~看清楚 jQuery 是如何传给这个插件的~
===
我只是封装了下,还没有测试,有问题的评论区交流吧~
回帖
  • 纸飞机
    纸飞机 (管理员)
    2016-11-15
    非常及时且很有参考意义,按照这个思路把第三方组件,特别是早期的jQuery插件通过Layui加载还是很方便的
    5 回复
  • weijer
    2016-11-15
    非常感谢,这样layui拥有大量JQ插件了
    1 回复
  • 阿宙
    2016-11-15
    @纸飞机 入口文件怎么加载jQuery插件
    1 回复
  • weijer
    2016-11-15
    @阿宙 这么改造 你直接加个配置文件 然后 就可以当成 layui一个模块用了1
    1 回复
  • 阿宙
    2016-11-15
    @纸飞机 love you 测试写出一个demo了 这么说来 不支持amd或者CommonJS是不可以当成layui的组件来用 对吧
    1 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2016-11-15
    @阿宙 你白看了额。。。我告诉你 layui 的规范和 cmd amd umd 是类似的,
    我也没说没他们就不行了啊。。。
    我都列出来是为了让你知道他们是类似的,几个 if else 就都能兼容了。。。
    i 服了 u
    1 回复
  • 波波
    2016-11-16
    @Website 好好学习
    1 回复
  • 1 回复
  • 纸飞机
    纸飞机 (管理员)
    2016-11-15
    0 回复
  • 宽哥
    2016-11-15
    回去研究研究[太开心]
    0 回复
本帖已设置禁止回复