layui模块化加载百度Echart插件（v3.8.4）

首先请先看下链接的这篇文章，了解下封装第三方组件
http://fly.layui.com/jie/5080/

最近用到Echart图标插件，参考了上面这篇文章进行自己封装，发现了一些坑，现在分享给大家

这是文章中提到的「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));
  });

仅需2行代码搞定

不过我们下载Echart源码版代码后发现，它的判断如下

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';

是2个三元运算符，需要添加一行代码，如下

window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :

添加后完整代码如下

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
    window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
	(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';

我们现在开始使用插件

layui.use(['jquery','echarts'], function () {
    var $ = layui.$;
   //记得这是dom对象不是JQ对象，需要转换
        echarts = layui.echarts.init($('#main')[0]);

    //获取地图数据
    $.get("data/pieData.json",
        function (option) {
     //初始化地图
            echarts.setOption(option);
        }
    )

运行会发现报错

Uncaught TypeError: Cannot read property 'init' of undefined

我们控制台打印 layui.echarts会发现是undefined，这里我们打开Echart源码，最末加上一句话

exports.Axis = Axis;
exports.env = env$1;
exports.parseGeoJson = parseGeoJson;
return exports;
})));

这里最重要的一点就是要把exports return出来，才能被发现

layui模块化加载百度Echart插件（v3.8.4）

猜你喜欢