NJCS-使用封装组件

发表于   |   分类于   |  

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的通信次数，这里先简单提一下，后续在介绍“簇调用”时详细介绍。 2:组件封装 .h文件如下： 
#import "NJCSUIView.h"
@interface NJCSUILabel : NJCSUIView
@property (nonatomic, strong) UILabel *label;
@end

.m文件如下：

#import "NJCSUILabel.h"
#import "UIColor+NJCS.h"
@implementation NJCSUILabel
- (instancetype)init
{
    if (self = [super init]) {
        \_label = [[UILabel alloc] init];
        self.targetView = _label;
        [self addSubview:_label];
    }

    return self;
}
- (void)setNumberOfLines:(NSString *)lineNumber
{
    [_label setLineBreakMode:NSLineBreakByCharWrapping];
    [_label setNumberOfLines:[lineNumber integerValue]];
}
- (void)setText:(NSString *)text
{
    [_label setText:text];
}
- (void)setBackgroundColor:(UIColor *)backgroundColor
{
    [_label setBackgroundColor:backgroundColor];
}
- (void)setTextAlignment:(NSString *)textAlignment
{
    [_label setTextAlignment:[textAlignment intValue]];
}
- (void)setTextColor:(UIColor *)textColor
{
    [_label setTextColor:textColor];
}
- (void)setFont:(UIFont *)fontValue
{
    [_label setFont:fontValue];
}
- (void)setDefaultValue:(NSString *)defaultValue
{
    super.defaultValue = defaultValue;
    _label.text = defaultValue;
}
@end

从代码可以看出，Native组件的封装并没有什么特殊之处，只是用过组合的方式将UILabel作为NJCSUIView子类的属性而已，常用的方法也进行了简单封装（其实这也方法也是可以不封装的，后续将实现原理的时候会详细介绍）
与NJCSUILabel对应的JS组件封装就更加简单了代码如下：


defineClass(“NJCSUILabel: NJCSUIView”, {
});

定义了一个继承与NJCSUIView的类NJCSUILabel（这个类是JSContext内部的类，和OC的是不同的）。
关于defineClass方法的使用请参看JS类的定义；

热评文章