文章目录
  1. 1. 组件的划分和封装
    1. 1.1. 组件的划分
    2. 1.2. 组件的封装
  2. 2. 可配置的组件
    1. 2.1. 通过配置控制组件的展示
    2. 2.2. 通过某个属性配置某个部分是否显示
    3. 2.3. 通过一个属性配置需要显示的所有部分
  3. 3. 结束语

AngularJS(v1.5.8)已经成为项目们的基本框架,《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文简单说明一下,目前来说,个人认为的较好的组件的设计思想。

组件的划分和封装


组件的划分

通常来说,组件的划分,与视觉、交互等密切相关,我们可通过功能、独立性来判断是否适合作为一个组件。

小组里面有个小朋友提出,所有的东西都可以当作一个组件,一个卡片可以是个组件,一个卡片+标题也可以作为一个组件。
不得不说,这种的想法也是挺有意思的,所以我们的可以根据两种情况进行组件的划分:

  1. 视觉和交互上是一个完整的组件。
  2. 写代码的时候,可重复的内容即可视为一个组件。

当然,在一个项目中,我们最好是使用其中一个规范,因为对于成员的相互配合和项目的维护来说,统一的规范是比较重要的。

这里可能需要简单说明一下两种思路的区别:
例如我们的界面中,有以下的设计场景:

  • 单张卡片的展示
  • 多张卡片的展示
  • 标题+若干卡片的展示

若是按照1划分:

  • 卡片是一个组件
  • 多张卡片时,通过ng-repeat实现
  • 标题+若干卡片时,通过header+ng-repeat实现

若是按照2划分:

  • 标题+若干卡片是一个组件
  • 多张卡片时,通过配置is-title-shown="false",不显示title,并通过传入data[],设置多张卡片形式
  • 单张卡片时,通过配置is-title-shown="false",不显示title,并通过传入item,设置单张卡片形式
  • 卡片内根据传入的数据进行相应的初始化处理

对于第二种方式的实现,很有意思,但是这样的界限比较难划清,同时在设计上需要花费的精力和时间都相对较多,所以目前我们使用的多是第一种组件规范。

组件的封装

对于组件的封装,参考了小组成员的意见后,个人认为可以有以下的一些良好设计方式:

  • 组件内维护自身的数据和状态
  • 组件内维护自身的事件
  • 通过初始化事件(event、绑定的scope事件,传入数据),来初始化组件状态,激活组件
  • 通过更改某个配置,来控制展示
  • 通过对外提供接口,可查询组件状态

现在,我们有一个筛选的模块,里面有多个单选、多选、填写内容等数据:

  • 可点击查询,发送数据至后台接口
  • 可点击重置,将所有选中数据恢复为初始状态
  • 其中,选择第一个单选的时候,后面的所有数据都会根据该选项进行切换
  • 第一个单选里,数组的数据通过固定的接口获取

这时候,我们可以这样来设计我们的组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
export default (ngModule) => {
/*
* @ 筛选组件
* @param: {
* getStates() 返回组件状态(所有选中)
* VM:{} 用于绑定视图相关对象
* }
* @event: {
* on: 'selectable:init'触发初始化事件
* emit: 'selectable:render'发送render事件
* }
* @attribute:{
* ui-config: 传入字符串,用于定制化组件显示,TaskName/DataSetting/DepolyFilte/TargetFilter/PropertyFilter
* }
*
*/
ngModule
.directive('selectable', () => {
return {
templateUrl: './shared/components/selectableSelection.template.html',
restrict: 'AE',
scope: {
getStates: '<',
uiConfig: '<',
},
link(scope, ele, attrs) {
const VM = {} as TODO; // 视图模板中将要绑定的数据
scope.VM = VM;
VM.states = {} as TODO; // 选中状态对象
scope.handleService = handleService; // 处理服务
scope.init = init; // 初始化与重置
scope.render = render; // 查询事件
// 监听'selectable:init'事件并进行初始化
scope.$on('selectable:init', (e, data) => {
// 获取服务数据
getServices();
});
// 处理服务
function handleService(service?) {
// 选中服务
VM.serviceSelected = service || VM.services[0];
// 其他选项数据更新
}
// 获取服务数据
function getServices() {
getService().then(res => {
// 获取服务数据,并进行初始化
VM.services = res;
init();
});
}
// 初始化&&重置事件
function init() {
// 初始化数据
angular.merge(VM, {...});
// 初始化状态
angular.extend(VM.states, {someSelected: value});
// 给states对象赋值get方法用于查询,查询的数据不可更改影响组件状态
if (scope.states) {
scope.getStates = () => angular.merge({}, VM.states);
}
handleService();
render();
}
// 查询事件
function render() {
scope.$emit('selectable:render');
}
}
};
}]);
};

可配置的组件


通过配置控制组件的展示

上面我们也提到过,我们在开发产品的时候,未免会遇到这样的需求:

  • 卡片A与卡片B、卡片C结构基本相似
  • 卡片B没有头部
  • 卡片C没有底部

这时候,我们可以设计一个组件,并提供视图配置,来适应不同场景的使用,我们可以有以下方法:

  • 通过某个属性配置某个部分是否显示
  • 通过一个属性配置需要显示的所有部分
  • 通过传入初始值进行相关显示控制

通过某个属性配置某个部分是否显示

  • 指令模板
1
2
3
4
5
<div>
<header ng-show="hasHeader"></headesr>
<body></body>
<footer ng-show="hasFooter"></footer>
</div>
  • 指令逻辑
1
2
3
4
5
6
...
scope: {
hasFooter: '@?',
hasHeader: '@?'
},
...
  • 使用
1
2
3
<card has-header="yes" has-footer="yes">A</card>
<card has-footer="yes">B</card>
<card has-header="yes">C</card>

通过一个属性配置需要显示的所有部分

  • 指令模板
1
2
3
4
5
<div>
<header ng-show="uiConfig.indexOf('header') > -1"></headesr>
<body></body>
<footer ng-show="uiConfig.indexOf('footer') > -1"></footer>
</div>
  • 指令逻辑
1
2
3
4
5
...
scope: {
uiConfig: '@?'
},
...
  • 使用
1
2
3
<card ui-config="header footer">A</card>
<card ui-config="footer">B</card>
<card ui-config="header">C</card>

结束语


这节主要简单介绍了一些经过团队思想碰撞后,个人总结的一些组件的设计思想,有很多已经在项目中使用了。
所以其实,很多时候争论也是需要的,这是多人协作最有意思的地方,我们能在这样的过程中,扩大我们的视野,同时能学习到不同的思路和想法。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 组件的划分和封装
    1. 1.1. 组件的划分
    2. 1.2. 组件的封装
  2. 2. 可配置的组件
    1. 2.1. 通过配置控制组件的展示
    2. 2.2. 通过某个属性配置某个部分是否显示
    3. 2.3. 通过一个属性配置需要显示的所有部分
  3. 3. 结束语