摘要
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
},
});
姿勢二
export let 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;
}
as 關鍵字
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";
這樣只需要導入 data 一個模塊
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!
},
});
結語
小夥伴們掌握了嗎?
O(∩_∩)O~~