ZeroClipboard.config is not a function 和 ZeroClipboard is not defined 错误解决

JSON 2016-10-25 14:41:38 11670

ZeroClipboard.config is not a function。

第二次出现这个错误了。上一次忘记怎么解决的，这次又遇到了，把问题阐述一下，方便查阅。

ZeroClipboard.config({
	moviePath: "/js/common/ZeroClipboard.swf",
	hoverClass: "btn-clipboard-hover"
})

这么去定义的时候，控制台出现这个错误，发现抛出ZeroClipboard.config is not a function。出现这个问题，我总结了一下，有2点原因：

重复引用ZeroClipboard.js ，怎么排查？先看是否引入了2个，再看是否有js文件中已经包含了ZeroClipboard.js。
版本问题。我现在遇到的是版本问题。

我的问题是，原来的代码是用version为1.3.5，ZeroClipboard v1.3.5 可以这么去用，而我项目中已经在cdn 上有这个ZeroClipboard.js ，那我为了高效的利用，直接用原来的，就出现这个问题了。后来发现以前用的是version是1.2.1，导致出了问题。

而低版本的配置应该是这么去用的。

new ZeroClipboard(so(".copy_btn"),{
	moviePath: "/js/common/ZeroClipboard.swf",
	hoverClass: "btn-clipboard-hover"
})

解决问题了。

咱们再说说 ZeroClipboard is not defined 这个是 ZeroClipboard 找不到。

其实解决方案就百度一下就知道了，我这里总结下解决途径和方案：

一、确定加载顺序，是否在ZeroClipboard.js 加载之前使用，解决调整好加载顺序，先加载ZeroClipboard.js。

二、使用require.js也会导致加载不到，这个时候解决方案有2种。

1.修改源码（下策）。

if (typeof define === "function" && define.amd) {
    define(function() {
        return ZeroClipboard;
    });
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
    module.exports = ZeroClipboard;
} else {
    window.ZeroClipboard = ZeroClipboard;
}

改成这样：

if (typeof define === "function" && define.amd) {
define(function() {
  return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
}
//主要是这里
window.ZeroClipboard = ZeroClipboard;

如果你的源码是这样。

//......
"function" == typeof define && define.amd ? define(["require", "exports", "module"], function(a, b, c) {
        return t = c && c.id || null, p
    }) : "object" == typeof module && module && "object" == typeof module.exports && module.exports ? (u = module.id || null, module.exports = p) : window.ZeroClipboard = p

那么这是三元运算符（三目运算）表达方式，你也可以不用动它，直接在后面加上如下代码：

"function" == typeof define && define.amd ? define(["require", "exports", "module"], function(a, b, c) {
	return t = c && c.id || null, p
}) : "object" == typeof module && module && "object" == typeof module.exports && module.exports ? (u = module.id || null, module.exports = p) : window.ZeroClipboard = p;
//在后面加上这个就OK了。
window.ZeroClipboard = p;

2.增加代码（上策）

require.config({
    baseUrl: '',
    paths: {
        ZeroClipboard: "/common/ZeroClipboard.min"//定义ZeroClipboard
    }
});
require(['ZeroClipboard'], function (ZeroClipboard) {
    window['ZeroClipboard'] = ZeroClipboard;
	//or window.ZeroClipboard = ZeroClipboard;
});

因为引入后就变成私有，类似于封装一样，提供一个公共的访问方法。那就是给window。