angular模块库开发

随着前端框架的诞生,也会随之出现一些组件库,方便日常业务开发。今天就聊聊 angular4 组件库开发流程。

下图是 button 组件的基础文件。

image

nk-button.component.ts 为该组件的核心文件,看看代码:

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
import {Component, Renderer2, ElementRef, AfterContentInit, ViewEncapsulation, Input} from '@angular/core';

@Component({
selector: '[nk-button]',
templateUrl: './nk-button.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./nk-button.component.scss']
})
export class NkButtonComponent implements AfterContentInit {
_el: HTMLElement;
_prefixCls = 'ky-btn';
_type: string;
_size: string;
_shape: string;
_classList: Array<string> = [];

@Input()
get nkType() {
return this._type;
}

set nkType(value) {
this._type = value;
this._setClass();
}

@Input()
get nkSize() {
return this._size;
}

set nkSize(value: string) {
this._size = value;
this._setClass();
}

@Input()
get nkShape() {
return this._shape;
}

set nkShape(value: string) {
this._shape = value;
this._setClass();
}

constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
this._el = this._elementRef.nativeElement;
this._renderer.addClass(this._el, this._prefixCls);
}

ngAfterContentInit() {
}

/**
*设置class属性
*/
_setClass(): void {
this._classList = [
this.nkType && `${this._prefixCls}-${this.nkType}`,
this.nkSize && `${this._prefixCls}-${this.nkSize}`,
this.nkShape && `${this._prefixCls}-${this.nkShape}`
].filter(item => {
return item;
});
this._classList.forEach(_className => {
this._renderer.addClass(this._el, _className);
});
}
}

针对核心概念 ElementRef、Renderer2、ViewEncapsulation 做简要说明:

阅读更多

前端框架分享

前端 web 开发中会遇到很多框架,今天主要介绍三种:angular.js、react.js、vue.js(无排序之分)

angular.js

angularJS 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。

angularJS 的特性如下:

  1. 良好的应用程序结构
  2. 双向数据绑定
  3. 指令
  4. HTML 模板
  5. 可嵌入、注入和测试

优点:

阅读更多