2BTV-Web

To B Web for TV Platform

1. 项目结构简述

• component目录用来存放UI组件相关代码
• util/API目录用来存在API请求相关代码
• util目录用来存放其他工具类
• 其他的照旧

2.代码规范简述（待补充）

• 类型命名，驼峰式命名，component内相关类型建议首字母大写，其他的根据情况可以首字母小写
• 变量命名，驼峰式命名
• JSON变量命名，全小写，下划线风格单词
• html中如无特殊情况class用来写样式，id用来js操作
• class命名字母小写，中划线风格（CSS中无法识别大小写）
• CSS书写顺序推荐：只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性
• 公共样式在mixins.less文件中，后续如再有公共样式再补充

显示属性	自身属性	文本类及修饰类属性
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

附：

API Mock方法

• 添加Mock API的返回数据json文件在 src/lib/mockapi/ 目录下如 src/lib/mockapi/test1.json
• util/API/APIClient.js中增加访问方法，比如：

static getMockData(callback){
    let apiUrl = AJAXHelper.genMockDataUrl('test1');
    AJAXHelper.get(apiUrl,callback);
}

• sence中引用APIClient

import APIClient from '../../../util/API/APIClient'

• scene业务程序中使用：

APIClient.getMockData((isTrue,res)=>{
    console.log(res);
});

EFMarquee使用说明：

• 类型导入

import Marquee from '../../../component/EFMarquee.js'

• 代码中使用

this.marquee = Marquee.getInstance();
this.marquee.create(document.getElementById('title_marquee'),100);
this.marquee.setStr(document.getElementById('title_marquee').innerHTML);
this.marquee.start(true);

• 停止跑马灯

this.marquee.stop();

ScrollEventPlugin使用说明：

针对阿里小程序Scroll控件定制的补充事件的插件类。
阿里小程序要求Scroll控件内必须有一个class为scroll-list的元素，这里我们的插件对scroll-list也有一定要求，
scroll-list相对于父级元素不要有高度的padding或margin的情况，否则会导致滚动计算不准确导致无法命中事件的情况

• 类型导入

import ScrollEventPlugin from '../../../util/ScrollEventPlugin'

• 代码中使用
  

//创建插件对象
this.rightScrollEvent = new ScrollEventPlugin();
//绑定目标Scroll widget
this.rightScrollEvent.bind(this.moye.root.getWidgetById('cl-right-content-scroll'));
//设置回调触发事件
this.rightScrollEvent.onScrollToBottom(()=>{
    console.log('on scroll to bottom');
});
//释放事件锁
this.rightScrollEvent.releaseEventLock();

本插件在触发“到底”或者“到顶”事件时，为了防止非自愿的再次触发，所以在触发事件之后，插件内部会加锁防止再次触发，
直到调用方完成了触发后的相关任务之后，认为可以再次处理触发事件时，可手工解锁。

NotificationCenter使用说明

专门为moye框架下应用程序实现的全局观察者模式的消息中心，方便跨Scene的消息传递，局部状态变更。
使用时需要在Scene下引用NotificationCenter类

• 类型导入

import NotificationCenter from '../../../util/NotificationCenter';

• 注册观察者

// name:观察者名称
// selector：为观察者绑定的消息回调
static add(name, selector)

//调用示例
NotificationCenter.add('collection_refresh', this.collectionGlobalListener.bind(this));

同一个name可以依次绑定多个消息回调，可以在不同scene中为同一个name绑定消息回调

• 向已注册的观察者发送消息

// name:观察者名称
// obj:需要通过消息中心发送的数据对象（非必要参数）
static call(name, obj)

//调用示例
NotificationCenter.call('collection_refresh');

• 删除观察者

当观察者所在scene被destroy时，观察者也会失效，这时我们建议手动移除之前注册过的观察者

// name:观察者名称
// selector:之前注册的观察者，消息中心会通过比对找到之前注册过的同名观察者，然后移除
static remove(name, selector)

selector参数如果缺省，则删除该name下所有的观察者

//调用示例
NotificationCenter.remove('collection_refresh', this.collectionGlobalListener.bind(this));