1:现有组件简单介绍
目前已封装的组件有:
NJCSUIView
NJCSUILabel
NJCSUIIconLabel
NJCSUITextField
NJCSUIButton
NJCSUITableView
NJCSUITableViewCell
……
对于已封装组件的使用有两种情况,使用方法也是不同的,下面会逐一介绍:
1-1:有与原生封装组件对应的JS组件
defineClass("NJCSUILabel: NJCSUIView", {
});
defineClass("NJCSUIButton: NJCSUIView", {
});
defineClass("NJCSUIIconLabel: NJCSUIView", {
});
defineClass("NJCSUIImageView: NJCSUIView", {
});
defineClass("NJCSUIWebView: NJCSUIView", {
});
defineClass("NJCSUITableView: NJCSUIView", {
});
defineClass("NJCSUITextField: NJCSUIView", {
});
defineClass("NJCSUISubView: NJCSUIView", {}, {
create:function(targetViewClass, instanceName, props){
var instance = new this();
instance.className = this.className;
instance.instanceName = instanceName;
instance.targetViewClass = targetViewClass;
return instance;
}
});
示例代码:
var tableView = NJCSUITableView.create("tableView");//创建实例
this.addElement(tableView);//将示例添加到ViewController中的view内,addElement在被调用的时候才会在Native中创建一个与之对应的Native对象实例,所以只有调用addElement之后,才能调用该实例的方法,否则会因找不到对象而产生异常
tableView.setFrame(NJCSCGRect.create(0, 0, NJCSMacors["mainScreenWidth"], NJCSMacors["screenHeight"] - 50));
tableView.setBackgroundColor(NJCSUIColor_JS.create("#999999:0"));
1-2:只有Native对象而没有与之对应的js对象
示例代码:
var UITableView = getNativeClassWithClassName("UITableView");//根据字符串获取UITableView类
var tableView = UITableView.alloc().init();//初始化UITableView实例
this.view().addSubView(tableView);//获取当前viewController的view 并添加tableView
tableView.setFrame(NJCSCGRect.create(0, 0, NJCSMacors["mainScreenWidth"], NJCSMacors["screenHeight"] - 50));//设置tableView的frame
tableView.setBackgroundColor(NJCSUIColor_JS.create("#999999:0"));//设置tableView的背景颜色
看到这里可能会有人问,既然不封装就能直接使用干嘛要封装一层的,目的何在?
的确所有的组件只要Native内存在的,在js内是可以直接使用的,之所以要封装一层目的是为了在频繁操作某个对象的属性时(如:频繁设置UILabel实例的frame
/text/backgroundColer……),减少JS和Native的通信次数,这里先简单提一下,后续在介绍“簇调用”时详细介绍。