CocosCreator编码贴士:充分使用第三方类库来增加框架功能

cocosCreator(以下简称ccc)是一款功能很强大的框架,但是功能再强的框架也不可能面面俱到,总有一些我们想要的功能它没有提供的,此时就需要去引用一些提供了我们想要功能的第三方类库进来以便快速地实现我们的编码需求。
通常情况下我们可以通过ccc提供的“插件脚本”功能来完成第三方类库的导入(如果不知道如何操作的请移步官方介绍文档。如果你需要发布游戏到的平台仅有WEB平台的话倒还没什么,如果准备发到微信小游戏平台的话在使用插件脚本的时候请一定加上“window”前缀,比如:

$.find('.someClass');//原先的使用方式
window.$.find('.someClass');//楼主建议的使用方式

这是因为在web平台,默认会在找不到变量声明的时候去window这个全局变量下进一步查找,但是在微信小游戏平台并没有原生提供window这个全局变量,故我们无法直接使用一些挂载在window上的类库。ccc在发布到小游戏平台时会加进来一个适配器,名字叫做“weapp-adapter-min.js”,这个适配器可以让我们在代码中访问到window变量,使用方法和web平台一样。虽然如此,但在小游戏环境下,在找不到变量声明时不会默认去window这个全局变量下进行查找,所以使用原先的,不加"window"前缀的方式依旧无法访问到类库的全局变量,此时必须通过加"window"前缀的方式才能访问到。
前面的说法理论上是没有问题的,但是实际使用中仍然无法通过window.$这类语句访问到jQuery或者其他第三方库的全局变量,此时的问题就出在第三方库文件本身上面。很多第三方库文件在将全局变量暴露到全局的实现代码上都会尽量兼容多种js代码加载环境,如CMD,AMD等等。下面是lodash库在暴露全局变量时的代码:

// Some AMD build optimizers, like r.js, check for condition patterns like:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lodash on the global object to prevent errors when Lodash is
    // loaded by a script tag in the presence of an AMD loader.
    // See http://requirejs.org/docs/errors.html#mismatch for more details.
    // Use `_.noConflict` to remove Lodash from the global object.
    root._ = lodash;

    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return lodash;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds it.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = lodash)._ = lodash;
    // Export for CommonJS support.
    freeExports._ = lodash;
  }
  else {
    // Export to the global object.
    root._ = lodash;
  }

我们看到,在上述代码中,全局变量lodash被以下划线'_'的名字挂载到了root上面,但这个root到底是什么类型的对象我们其实并不知道。在小游戏环境中,因为通过适配器,让我们可以像在web平台一样使用window对象,故我们可以通过明确地把第三方类库的全局变量挂载到window变量上面来解决此问题。按照这个思路,上述代码可以改成:

window._ = lodash;

这样就可以让我们在web和小游戏双平台通过一样的语句来使用lodash库了。

网上有很多各种功能的js类库,但是目前很多好用的类库只提供了nodejs的加载方式(使用npm安装然后通过nodejs环境下提供的require语句进行加载)。对于这类库,要是想在ccc使用的话需要使用browserify工具将其转译成浏览器可用的版本后再作为脚本插件供ccc使用。

你可能感兴趣的:(CocosCreator编码贴士:充分使用第三方类库来增加框架功能)