JSPatch下发笔记8

简介: JSPatch下发笔记8

OC代码:

-(void)changeTopics:(NSArray *)topics{
    _topicsArr = [NSMutableArray arrayWithArray:topics];
    CGSize size = CGSizeMake(320,2000); //设置一个行高上限
    if ([_shortTextView.topicView subviews]) {
        for (UIView *view in [_shortTextView.topicView subviews])
        {
            if ([view isKindOfClass:[UIView class]])
            {
                [view removeFromSuperview];
            }
        }
    }
    if (topics.count) {
        UILabel *lbl1 = [[UILabel alloc]init];
        NSHotTopicsScrollModel *scrollModel = topics[0];
        [lbl1 setText:scrollModel.name];
        lbl1.font = [UIFont fontWithName:@"PingFangSC" size:12];
        NSDictionary *lbl1Attribute = @{NSFontAttributeName: lbl1.font};
        CGSize lbl1Size  = [lbl1.text boundingRectWithSize:size options:NSStringDrawingTruncatesLastVisibleLine|NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:lbl1Attribute context:nil].size;
        lbl1.textColor = [UIColor whiteColor];
        lbl1.textAlignment = NSTextAlignmentCenter;
        lbl1.backgroundColor = BACK_COLOR1;
        lbl1.layer.cornerRadius = 3;
        lbl1.layer.masksToBounds = YES;
        [_shortTextView.topicView addSubview:lbl1];
        [lbl1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(lbl1Size.width+6, 21));
            make.right.equalTo(@(-10));
            make.top.equalTo(@0);
        }];
        if (topics.count == 2) {
            UILabel *lbl2 = [[UILabel alloc]init];
            NSHotTopicsScrollModel *scrollModel = topics[1];
            [lbl2 setText:scrollModel.name];
            lbl2.font = [UIFont fontWithName:@"PingFangSC" size:12];
            NSDictionary *lbl2Attribute = @{NSFontAttributeName: lbl2.font};
            CGSize lbl2Size  = [lbl2.text boundingRectWithSize:size options:NSStringDrawingTruncatesLastVisibleLine|NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:lbl2Attribute context:nil].size;
            lbl2.textColor = [UIColor whiteColor];
            lbl2.textAlignment = NSTextAlignmentCenter;
            lbl2.backgroundColor = BACK_COLOR1;
            lbl2.layer.cornerRadius = 1;
            lbl2.layer.masksToBounds = YES;
            [_shortTextView.topicView addSubview:lbl2];
            [lbl2 mas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(lbl2Size.width+6, 21));
                make.right.equalTo(@(-(20+lbl1Size.width+6)));
                make.top.equalTo(@0);
            }];
        }
    }
}


JS代码:

defineClass('ShortTextViewController', {
            changeTopics: function(topics) {
            var _topicsArr = self.valueForKey("_topicsArr");
            var _shortTextView = self.valueForKey("_shortTextView");
            _topicsArr = NSMutableArray.arrayWithArray(topics);
            var size = {width:320,height:2000}; //设置一个行高上限
            var count = _shortTextView.topicView().subviews().count();
            for (var i = 0; i < count; i++) {
            _shortTextView.topicView().removeAllSubviews();
            }
            if (topics.count()) {
            var lbl1 = UILabel.alloc().init();
            var scrollModel = topics.objectAtIndex(0);
            lbl1.setText(scrollModel.name());
            lbl1.setFont(UIFont.fontWithName_size("PingFangSC", 12));
            var lbl1Attribute = {
            NSFontAttributeName: lbl1.font()
            };
            var NSStringDrawingUsesLineFragmentOrigin = 1 << 0;
            var lbl1Size = lbl1.text().boundingRectWithSize_options_attributes_context(size, NSStringDrawingUsesLineFragmentOrigin, lbl1Attribute, null);
            lbl1.setTextColor(UIColor.whiteColor());
            lbl1.setTextAlignment(1);
            lbl1.setBackgroundColor(UIColor.colorWithHexString("#c4c4c4"));
            lbl1.layer().setCornerRadius(1);
            lbl1.layer().setMasksToBounds(YES);
            _shortTextView.topicView().addSubview(lbl1);
            lbl1.mas__makeConstraints(block('MASConstraintMaker*', function(make) {
                make.width().equalTo()(lbl1Size.width + 6);
                make.height().equalTo()(21);
                make.right().equalTo()(-10);
                make.top().equalTo()(0);
            }));
            if (topics.count() == 2) {
            var lbl2 = UILabel.alloc().init();
            var scrollModel = topics.objectAtIndex(1);
            lbl2.setText(scrollModel.name());
            lbl2.setFont(UIFont.fontWithName_size("PingFangSC", 12));
            var lbl2Attribute = {
            NSFontAttributeName: lbl2.font()
            };
            var lbl2Size = lbl2.text().boundingRectWithSize_options_attributes_context(size, NSStringDrawingUsesLineFragmentOrigin, lbl2Attribute, null);
            lbl2.setTextColor(UIColor.whiteColor());
            lbl2.setTextAlignment(1);
        lbl2.setBackgroundColor(UIColor.colorWithHexString("#c4c4c4"));
            lbl2.layer().setCornerRadius(1);
            lbl2.layer().setMasksToBounds(YES);
            _shortTextView.topicView().addSubview(lbl2);
            lbl2.mas__makeConstraints(block('MASConstraintMaker*', function(make) {
                make.width().equalTo()(lbl2Size.width+6);
                make.height().equalTo()(21);
                make.right().equalTo()(-(20 + lbl1Size.width + 6));
                make.top().equalTo()(0);
                }));
            }
            }
            },
            });


总结:


1.注意for in循环和for循环的区别,for in循环是一次性取出所有的元素进行操作,而for循环是在每次循环时重新取出元素,取出的值可能和在for循环中是不一样的。

2.对于类似于1 << 0的枚举值,可以先声明一个变量赋值var NSStringDrawingUsesLineFragmentOrigin = 1 << 0;然后再取值。

3.OC中的boundingRectWithSize函数,在JS中去掉结尾的.size。

目录
相关文章
|
9天前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
14 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
5月前
|
安全
JSPatch被停用了,也就是不能使用JSPatch第三方框架热修复了
JSPatch被停用了,也就是不能使用JSPatch第三方框架热修复了
76 0
|
5月前
|
JavaScript API
Vue.js组件精讲 组件的通信2:派发与广播——自行实现dispatch和broadcast方法
Vue.js 的 provide/inject API 主要用于跨级组件通信,侧重于子组件获取上级状态。但无法良好处理两种场景:父向子(跨级)传递数据和子向父(跨级)传递数据。在这种情况下,虽然Vue推荐使用Vuex,但在某些场景下,可以使用自定义的`dispatch`和`broadcast`方法。这两个方法在Vue 1.x中存在,但在2.x中被废弃。`$emit`用于触发当前组件的自定义事件,而`$on`用于监听这些事件。在Vue 2.x中,我们将自行实现`dispatch`和`broadcast`以实现类似的功能,允许父子组件(包括跨级)之间的通信,特别是当组件层级不深且无需全面状态管理时
45 0
|
前端开发 JavaScript CDN
Nuxt.js 使用 fullPage.js 支持 SSR
Nuxt.js 使用 fullPage.js 支持 SSR
303 0
Nuxt.js 使用 fullPage.js 支持 SSR
|
算法
vue2-patch流程分析
我们在上篇文章分析了虚拟节点的创建及渲染流程,其中也有简单分析了 patch 过程,但是对于新旧节点的对比逻没有去仔细分析,所以我们打算好好梳理下 patch 的整个流程。
|
Web App开发 JavaScript iOS开发
JSPatch 断点调试
JSPatch 断点调试
135 0
JSPatch 断点调试
|
JavaScript
JSPatch下发笔记2
JSPatch下发笔记2
137 0
|
JavaScript
JSPatch下发笔记3
JSPatch下发笔记3
119 0
|
JavaScript
JSPatch下发笔记1
JSPatch下发笔记1
111 0
|
JavaScript
JSPatch下发笔记4
JSPatch下发笔记4
122 0