cocoscreator连接MySQL_cocosCreator 入门(三) 访问节点及属性
配置： MacOS 10.12.6 CocosCreator2.3.3 JavaScript VisualCode
访问同节点下的组件
获取同一节点下的其他组件，我们可使用getComponent，比如我们想获取如下节点的Label：
start: function() {//获取label节点
//由于node中也存在着一个getComponent方法，因此下面两个的写法一致
var textLabel = this.getComponent(cc.Label);var textLabel = this.node.getComponent(cc.Label);//添加判定，检测组件是否获取到，若getComponent获取失败，将返回null
if (!textLabel) {
cc.error('get component failed');
}else{
textLabel.string= '获取文本组件';
}//获取脚本组件
var script = this.getComponent('debugScript');
console.log(script);
},
访问其他节点组件
1. 利用属性检查器设置，即在脚本的properties属性中设置节点，比如我们想在TextLabel中访问MenuNode节点：
我们可以在startBtn下的javaScript脚本下添加内容：
properties: {//值类型属性使用，比如：Number,Vec2, String, Boolean, Enum, Color等
Number:0,
Vec2: [],
String:'',
Boolean:true,//引用类型属性相关，需要在拖拽对应的节点或者资源，添加了两种方式，可根据图示对比下区别
//方式1:
menuNode1: cc.Node,//方式2:
menuNode2: {default: null, //设置属性的默认值，该属性值仅在第一次添加到节点时才会使用
type: cc.Node, //属性的数据类型
visible: true, //是否在属性检查器中显示该属性
displayName: 'menuNode2', //在属性检查器中显示成设定的名字
tooltip: 'this is MenuNode2', //添加属性说明tip
},
},
然后把层级管理器中的menuNode节点拖拽到menuNode1,menuNode2中，我们就可以在脚本中获取了。
start: function() {
let menuNode= this.menuNode1
console.log('--> menuNode.name:', menuNode.name); //-->menuNode.name:MenuNode
},
2. 利用脚本进行查找，我们依然以TextLabel脚本中想获取menuNode的节点为例:
start: function() {/*--------- 获取父节点后再获取指定子节点 ------------*/
//获取当前的节点
let currentNode = this.node;//获取父节点，即Canvas
let parentNode = this.node.parent;
console.log('--> parentNode name:', parentNode.name); //-->parentNode name:Canvas
//获取指定节点
let menuNode = parentNode.getChildByName('MenuNode');if(menuNode) {
console.log('-->menuNode name:', menuNode.name); //-->menuNode name:MenuNode
}/*--------- 使用cc.find 方法 ------------*/let menuBtn= cc.find('Canvas/MenuNode/quitBtn');if(menuBtn) {
console.log('--> menuBtn name:', menuBtn.name); //--> menuBtn name: quitBtn
}
},
全局变量访问
假设我们有多个脚本存在，我们需要在A脚本里访问B脚本下的属性，我们可以适当且谨慎的使用全局变量。
建议创建一个脚本文件，并命名为GlobalConfig.js文件，这样有有利于查看并维护。比如：
//------------------- GlobalConfig.js -------------------//创建格式为：window.name = {};
window.G ={
quitBtn= null, //获取quitBtn节点
}//-------------------quitScript.js -------------------//脚本组件添加在menuNode下的quitBtn节点下
//一定要确保全局变量初始化，否则会报错，因此添加到onLoad中
onLoad: function() {//初始化全局变量指定的属性值
G.quitBtn = this.node;
},//-------------------debugScript.js -------------------//脚本组件添加在TextLabel中start:function() {
console.log('--> quitBtn name:',G.quitBtn.name) //quitBtn name
},
模块访问
其主要实现借助于module.exports 声明模块，通过require + 文件名(不含路径) 来获取模块相关。
//--------- GlobalConfig.js//GlobalConfig.js 在assets/scripts/config中
module.exports ={
quitBtn:null,
}//---------quitScript.js
var G = require("GlobalConfig");
cc.Class({
extends: cc.Component,
onLoad:function() {//初始化全局变量指定的属性值
G.quitBtn = this.node;
},
});//---------debugScript.js
var G = require("GlobalConfig");
cc.Class({
extends: cc.Component,
start:function() {
console.log('--> quitBtn name:',G.quitBtn.name) //quitBtn name
},
});
拓展：
在上面的示例程序中，声明变量时，我使用了let 与 var， let类似于var，但是仅在代码块内有效，比如
//let的作用域仅在指定的代码块中
{var a = 10;
let b= 11;
}
console.log('var a:',a); //10
console.log("let b:",b); //Uncaught ReferenceError: b is not defined
为此，for循环的索引很适合用let来声明，比如：
start: function() {//使用 var, 循环体外数据依然存在
for(var i = 0; i < 10; i++) {var varCount =i;
}
console.log('--> var i:',i) //--> var i:10
console.log('--> varCount:',i) //--> varCount:10
//使用let， 循环体外数值报错
for(let index = 0; index < 10; index++) {
let letCount=index;
}
console.log('--> let index:',index) // Uncaught ReferenceError: index is not defined},
...