服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - CocosCreator学习之模块化脚本

CocosCreator学习之模块化脚本

2022-03-05 20:38麦克煎蛋 js教程

这篇文章主要介绍了Cocos Creator 模块化脚本,想加深学习CocosCreator脚本的同学,一定要看一下

Cocos Creator模块化脚本

Cocos Creator 允许你将代码拆分成多个脚本文件,并且让它们相互调用。这个步骤简称为 模块化。

模块化使你可以在 Cocos Creator 中引用其它脚本文件:

  • 访问其它文件导出的参数
  • 调用其它文件导出的方法
  • 使用其它文件导出的类型
  • 使用或继承其它 Component

Cocos Creator 中的 JavaScript 使用和 Node.js 几乎相同的 CommonJS 标准来实现模块化,简单来说:

  • 每一个单独的脚本文件就构成一个模块
  • 每个模块都是一个单独的作用域
  • 以 同步 的 require 方法来引用其它模块
  • 设置 module.exports 为导出的变量

当你在脚本中声明了一个组件,Creator 会默认把它导出,其它脚本直接 require 这个模块就能使用这个组件。

?
1
2
3
4
5
6
// Rotate.js
 
cc.Class({
   extends: cc.Component,
   // ...
});<span style="font-family: "Courier New"; background-color: initial; color: rgb(0, 128, 0); line-height: 1.5 !important;"> SinRotate.js</span><br type="_moz">
?
1
2
3
4
5
6
7
8
9
10
// SinRotate.js
 
var Rotate = require("Rotate");
 
var SinRotate = cc.Class({
    extends: Rotate,
    update: function (dt) {
        this.rotation += this.speed * Math.sin(dt);
    }
});

模块里不单单能定义组件,实际上你可以导出任意 JavaScript 对象。假设有个脚本 config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// config.js - v2
 
var cfg = {
    moveSpeed: 10,
    version: "0.15",
    showTutorial: true,
 
    load: function () {
        // ...
    }
};
cfg.load();
 
module.exports = cfg;

现在如果我们要在其它脚本中访问 cfg 对象:

?
1
2
3
4
// player.js
 
var config = require("config");
cc.log("speed is", config.moveSpeed);

module.exports 的默认值:
当你的 module.exports 没有任何定义时,Creator 会自动优先将 exports 设置为脚本中定义的 Component。如果脚本没定义 Component 但是定义了别的类型的 CCClass,则自动把 exports 设为定义的 CCClass。

导出变量

module.exports 默认是一个空对象({}),可以直接往里面增加新的字段。

?
1
2
3
4
5
6
7
8
// foobar.js:
 
  module.exports.foo = function () {
      cc.log("foo");
  };
  module.exports.bar = function () {
      cc.log("bar");
  };
?
1
2
3
4
5
// test.js:
 
  var foobar = require("foobar");
  foobar.foo();    // "foo"
  foobar.bar();    // "bar"

module.exports 的值可以是任意 JavaScript 类型。

?
1
2
3
4
5
6
7
8
// foobar.js:
 
  module.exports = {
      FOO: function () {
          this.type = "foo";
      },
      bar: "bar"
  };
?
1
2
3
4
5
6
// test.js:
 
  var foobar = require("foobar");
  var foo = new foobar.FOO();
  cc.log(foo.type);      // "foo"
  cc.log(foobar.bar);    // "bar"

以上就是CocosCreator学习之模块化脚本的详细内容,更多关于CocosCreator模块化脚本的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/mazhiyong/p/13745264.html

延伸 · 阅读

精彩推荐
  • js教程微信小程序抽奖组件的使用步骤

    微信小程序抽奖组件的使用步骤

    这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    い 狂奔的蜗牛10892021-12-29
  • js教程基于 Next.js 的 SSR/SSG 方案了解一下?

    基于 Next.js 的 SSR/SSG 方案了解一下?

    服务端渲染(SSR,Server Side Render)与客户端渲染(CSR,Client Side Render)的核心区分点简单来说就是完整的 HTML 文档在服务端还是浏览器里组装完成。...

    DYBOY4872021-12-27
  • js教程微信小程序实现多行文字滚动效果

    微信小程序实现多行文字滚动效果

    这篇文章主要介绍了微信小程序实现多行文字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Archer_yy5362022-02-19
  • js教程JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    YDJFE6672022-02-19
  • js教程JavaScript使用setTimeout实现倒计时效果

    JavaScript使用setTimeout实现倒计时效果

    这篇文章主要为大家详细介绍了JavaScript使用setTimeout实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    清水拌墨茶5092022-01-21
  • js教程微信小程序授权登录的优雅处理方式

    微信小程序授权登录的优雅处理方式

    这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值...

    FTD止水11622022-02-15
  • js教程微信小程序实现下拉加载更多商品

    微信小程序实现下拉加载更多商品

    这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    保护我方豆豆8222021-12-22
  • js教程微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序wxss如何引用外部CSS文件以及iconfont

    这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定...

    iaofy6172022-02-15