摘要
CocosCreator 已经拥抱 ES6 语法，你还在使用 ES5 吗？今天 KUOKUO 为你带来导出模块的各种姿势！
正文
原写法
模块化使你可以在 CocosCreator 中引用其它脚本文件：
-
访问其它文件导出的参数
-
调用其它文件导出的方法
-
使用其它文件导出的类型
那么一般的写法是
-
// data.js
-
-
var data = {
-
name: 'kuokuo',
-
age: 21,
-
sayHello: function() {
-
console.log('Hello');
-
}
-
}
-
-
module.exports = data;
导入
-
// main.js
-
-
var data = require('data');
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(data.name, data.age); // kuokuo 21
-
data.sayHello(); // Hello
-
},
-
-
});
ES6写法
上述写法换成 ES6 的即为
-
// data.js
-
-
let data = {
-
name: 'kuokuo',
-
age: 21,
-
sayHello: function() {
-
console.log('Hello');
-
}
-
}
-
-
export default data;
导入
-
// main.js
-
-
import data from"./data";
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(data.name, data.age); // kuokuo 21
-
data.sayHello(); // Hello
-
},
-
});
而且有了 import 后，代码提示就会出来，极大的提高了开发效率。
各种姿势
姿势一
-
exports.num = 1;
-
-
exports.add = (a, b) => {
-
return a + b;
-
}
-
-
exports.dog = class{
-
constructor () {
-
console.log('new');
-
}
-
}
导入
-
import{ num, add, dog } from"./data";
-
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(num); // 1
-
console.log(add(1, 2)); // 3
-
let k = new dog(); // new
-
},
-
-
});
姿势二
-
exportlet num = 1;
-
-
export let add1 = (a, b) => {
-
return a + b;
-
}
-
-
function add2 (a, b) {
-
return a + b;
-
}
-
export{ add2 };
-
-
export class dog {
-
constructor () {
-
console.log('new');
-
}
-
}
导入
-
import{ num, add1, add2, dog } from"./data";
-
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(num); // 1
-
console.log(add1(1, 1)); // 2
-
console.log(add2(1, 2)); // 3
-
let k = new dog(); // new
-
},
-
-
});
姿势三
为模块重命名
-
export function aFunc (a, b) {
-
return a + b;
-
}
-
import{ aFunc as add } from"./data";
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(add(1, 1)); // 2
-
},
-
-
});
姿势四
export 与 import 的复合写法-
// dog.js
-
-
export class dog {
-
-
constructor () {
-
console.log('dog 初始化');
-
}
-
-
sayHello () {
-
console.log('Hello!');
-
}
-
-
}
-
// data.js
-
-
export function aFunc (a, b) {
-
return a + b;
-
}
-
-
export{ dog } from"./dog";
-
import{ aFunc as add , dog} from"./data";
-
cc.Class({
-
extends: cc.Component,
-
-
properties: {
-
},
-
-
onLoad () {
-
console.log(add(1, 1)); // 2
-
let k = new dog(); // dog 初始化
-
k.sayHello(); // Hello!
-
},
-
-
});