首先很多人向我推薦這個(gè)庫(kù)了。兼容到手機(jī)端的 Angular 庫(kù)，穩(wěn)定強(qiáng)大。
但當(dāng)我看到這個(gè)官網(wǎng)的時(shí)候，還是被嚇了一跳，這是個(gè)什么鬼東西？
primefaces.org
看了這個(gè)依賴以后，更加無(wú)力吐槽了。
"devDependencies": {
"@angular/animations": "^4.2.0",
"@angular/cli": "1.1.0",
"@angular/common": "^4.2.0",
"@angular/compiler": "^4.2.0",
"@angular/compiler-cli": "^4.2.0",
"@angular/core": "^4.2.0",
"@angular/forms": "^4.2.0",
"@angular/http": "^4.2.0",
"@angular/language-service": "^4.2.0",
"@angular/platform-browser": "^4.2.0",
"@angular/platform-browser-dynamic": "^4.2.0",
"@angular/router": "^4.2.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"chart.js": "2.1.3",
"codelyzer": "~3.0.1",
"core-js": "^2.4.1",
"del": "^2.2.0",
"font-awesome": "4.7.0",
"fullcalendar": "^3.1.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-flatten": "^0.2.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"gulp-uglifycss": "^1.0.6",
"install": "^0.10.1",
"intl": "^1.2.5",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"jquery": "^3.1.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"moment": "^2.17.1",
"npm": "^5.0.1",
"prismjs": "^1.6.0",
"protractor": "~5.1.2",
"quill": "^1.1.8",
"rxjs": "^5.1.0",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3",
"web-animations-js": "^2.2.2",
"zone.js": "^0.8.4"
}
打眼一看，這不就是 MD+Bootstrap 么。。。尷尬，他們自己寫的。不過(guò)開(kāi)源項(xiàng)目就像實(shí)習(xí)生一樣，犯了錯(cuò)誤也可以讓大家輕易原諒。
不過(guò)話說(shuō)bootstrap 都 beta 了，是不是應(yīng)該順勢(shì)做了個(gè) ng-bootstrap4呢，哈哈想想也不錯(cuò)。國(guó)內(nèi)有了antD 基本沒(méi)其他 UI 庫(kù)的活頭了，這絕對(duì)是 Bootstrap 給讓出來(lái)的機(jī)會(huì)?？蓯u。
分析
總不能打著大旗不干正事兒，分析還是要有的。直奔 prime-ng/src/app
兩個(gè)文件夾 component / showcase 一個(gè)是組件源碼，一個(gè)是組件 demo 以及官網(wǎng)本身。所以當(dāng)你組里的老大逼你寫 Angular 組件的時(shí)候，你可以過(guò)來(lái) copy 一兩個(gè)當(dāng)做周報(bào)內(nèi)容，雖然 CSS 和 template 需要用其他小伙伴寫好的樣式。ts 的處理方式總會(huì)能給你些啟發(fā)。
假如你現(xiàn)在正在寫一個(gè)進(jìn)度條組件
primeng/src/app/components/progressbar/progressbar.ts
打開(kāi)一看，這么簡(jiǎn)單
@Component({
selector: 'p-progressBar',
template: `
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" [attr.aria-valuenow]="value" aria-valuemax="100">
<div class="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" [style.width]="value + '%'" style="display:block"></div>
<div class="ui-progressbar-label" [style.display]="value ? 'block' : 'none'" *ngIf="showValue">{{value}}{{unit}}</div>
</div>
`
})
export class ProgressBar {
@Input() value: any;
@Input() showValue: boolean = true;
@Input() unit: string = '%';
}
@NgModule({
imports: [CommonModule],
exports: [ProgressBar],
declarations: [ProgressBar]
})
export class ProgressBarModule { }
當(dāng)然，也不能全看這個(gè)了，當(dāng)你知道寫這段代碼的是一個(gè)不到20歲的小毛頭小子的時(shí)候，你一定會(huì)三思而行的。
比如比較核心的部分
<div class="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" [style.width]="value + '%'" style="display:block"></div>
首先，這個(gè) [style.width] 的值是 value + % 是什么鬼，學(xué)前端兩天的新手都知道這么拼接字符串不光蠢，bug 百出。Angular 本身提供了 width.<unit>的寫法
[style.width.%]=value 會(huì)更好一點(diǎn)點(diǎn)吧。
另外，display：block 是嚇唬誰(shuí)呢？
最最離譜的是，為啥這是個(gè)單項(xiàng)的組件呢？我如何讓我的進(jìn)度條跟其他組件互動(dòng)呢？
所以吧。拿個(gè)有技術(shù)含量的出來(lái)看一看吧（。。。這浪費(fèi)了我老長(zhǎng)時(shí)間）
可以試著提問(wèn)一下。
- 主題系統(tǒng)怎么實(shí)現(xiàn)的？
- 例子中源碼和效果怎么分割的
- 如何處理的組件之間的事件流
- 如何自定義組件接口
我本來(lái)吧，想著他這個(gè)官網(wǎng)怎么看也算是有點(diǎn)技術(shù)含量的東西，于是看了一下某個(gè)組建的頁(yè)面，嚇?biāo)览献恿恕?/p>
中間的源碼部分，竟然用了手動(dòng)轉(zhuǎn)碼，哈哈哈哈
最后
吐槽歸吐槽，PrimeNG 給我們最大的幫助其實(shí)不是他的源碼，而是組件 list。70多個(gè)啊，當(dāng)然不會(huì)像 React 那樣細(xì)碎到3000+，但這些足矣支撐各種開(kāi)發(fā)場(chǎng)景了。
列一列，也算是沒(méi)白看這個(gè)。
輸入框 22個(gè)
按鈕 2 個(gè)
數(shù)據(jù)處理 13個(gè)
面板容器 6個(gè)
遮罩容器 5個(gè)
文件上傳 1個(gè) 不截圖了，不知為啥大家都喜歡做這個(gè)
菜單欄11個(gè)
表格 7 個(gè) 基于 chartjs@2.0 做的
信息容器 2個(gè)
多媒體 1個(gè)
拖拽 1個(gè)
小雜貨 10個(gè)
