javascript - onsenui 和 jaydata 不能共存

Question

使用此订单时:

<script src="lib/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>

我收到此错误

TypeError: Class.extend is not a function  
    at Object.<anonymous> (onsenui.js:13049)  
    at Object.invoke (angular.js:4535)  
    at Object.enforcedReturnValue [as $get] (angular.js:4387)  
    at Object.invoke (angular.js:4535)  
    at angular.js:4352  
    at getService (angular.js:4494)  
    at Object.invoke (angular.js:4526)  
    at Object.enforcedReturnValue [as $get] (angular.js:4387)  
    at Object.invoke (angular.js:4535)  
    at angular.js:4352

使用此命令时:

<script src="lib/angular/angular.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>

注意:已编辑以更正顺序

jaydata.js:3342 Uncaught TypeError: Cannot read property 'apply' of undefined

感谢任何帮助!

Answer 1

看起来 jaydata 和 onsenui 都在使用 window.Class，但是它们的实现有很大不同。 Onsen 使用 John Resig 的实现，而在 jaydata 的版本中，Class 实际上是其 ClassEngineBase 的一个实例。至少从我的 Angular 来看，使这两个实现协同工作的问题是，在 jaydata 的版本中，Class 实际上是一个实例而不是一个函数。如果它是一个函数，那么只需将扩展方法添加到 jaydata 的实现中即可轻松合并两个实现。

您仍然可以尝试这样做，但这不会那么容易，如果做得不当，可能会出现一些新的错误。

所以你的选择是:

1. 仍然尝试合并实现
2. 修改 Onsen UI
3. 修改 Jaydata
4. 等待两个库之一解决问题

1.序列:[jaydata, onsenui, patch]，其中 patch 是 onsenui 版本的修改版本。

(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  this.Class.extend = function(prop) {
    var _super = this.prototype || {};
    initializing = true;
    var constructor = typeof this === 'function' ? this : function(){};
    var prototype = new constructor();
    initializing = false;

    for (var name in prop) {
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            this._super = _super[name];
            var ret = fn.apply(this, arguments);
            this._super = tmp;
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    function Class() {
      if (!initializing && this.init)
        this.init.apply(this, arguments);
    }

    Class.prototype = prototype;
    Class.prototype.constructor = Class;
    Class.extend = arguments.callee;
    return Class;
  };
})();

但是我还没有真正测试过它是否有效，并且可能存在一些问题。

您没有包含 angular-onsenui.js，所以我猜您使用的是 onsen 1，而不是 onsen 2。Here是 1.3.15 的稍微修改版本，不应发生冲突(未经测试，抱歉)。

在 JayData 中，他们将类存储在 $data.Class 中，因此事实证明，http://中只有 2 个地方使用了全局类。 include.jaydata.org/jaydata.js

2874: $data.Class = Class = new ClassEngineBase();
3342: global["$C"] = function () { Class.define.apply(Class, arguments); };

您可以从第一行中删除 = Class 并将第二行的两种情况从 Class 更改为 $data.Class ，或者只是在第 2873 行写入 var Class;。 - 实际上，他们似乎已经有了 implemented this change但好像还没有在线版本。

因此，如果您不想更改文件，我想 JayData 可能会在某个地方拥有更新版本。对于 Onsen - Onsen 1 的开发已经完成，我们只致力于 Onsen 2。相同的错误可能会在当前的测试版中持续存在，但我们可能不会花太长时间修复它。