2016年2月13日 星期六

javascript 中,變數前的 「+」號

最近看到一段程式碼(angular2):

getHero(id: number | string) {
    return heroesPromise
      .then(heroes => heroes.filter(h => h.id === +id)[0]);
  }

對於 h.id === +id 之中的 +id 覺得奇怪,查了一下,原來可以用來轉成數字啊!!

id 其型別可能為數字或字串, h.id 為數字,用了 === 進行比較,所以要轉型呀。


後來在 angular2 官網文件看到了這一段話:

All route parameters are strings. The (+) in front of the routeParameters.get expression is a JavaScript trick to convert the string to an integer.


參考資料:
https://angular.io/docs/ts/latest/guide/router.html
http://stackoverflow.com/questions/6682997/javascript-plus-symbol-before-variable
https://en.wikibooks.org/wiki/JavaScript/Operators

2016年2月12日 星期五

關於 @Injectable()

當一個 service 自己也有 DI 的需求時就要加入 @Injectable()

angular 2 官方的文件也有提到,不管 service 需不需要 DI,最好都加入  @Injectable():

  1. 以後需要 DI 時避免忘記加入 @Injectable()
  2. 一致性

ngFor 可用的變數

<div *ngFor="#item of items; #i = index; #isOdd = odd; #isEven = even; #isLast = last">
.......略過 item 的部份......
索引:{{ i }}
是否為奇數索引:{{ isOdd }} <br>
是否為偶數索引:{{ isEven }} <br>
是否為後一個元素:{{ isLast }}
</div>

index 為索引值,從 0 開始

odd 索引值是否為奇數,布林值

even 索引值是否為偶數,布林值

last 是否為最後一個元素,布林值

2016年2月7日 星期日

[ 參考 ]Variable and Function Hoisting in JavaScript

Variable and Function Hoisting in JavaScript
粗談hoisting...
JavaScript Hoisting Explained ==> 文章只有提到變數的部份,不過影片也有提到 function 的部份

結論:

對於變數,最好是先宣告再使用

對於 function,對於

var a = function () {}; 或 var a = function myfunc() {};

也是先宣告比較好;對於

function myfunc(){}

這種形式的就沒差啦

這一篇也可以看看:

定義 JavaScript 函數(Functions)的各種方式

20170119 新增:

Understanding Hoisting in JavaScript | Scotch

2016年2月3日 星期三

Enable angular2 to production mode

angular 2 預設是 development mode,要如何切換到 production mode?在 browser console 中有提示:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

假設 angular 2 application 是由 bootstrap.js 啟動,則在 bootstrap.ts 中:

import {enableProdMode} from "angular2/core";

然後在執行 bootstrap() 之前執行 enableProdMode() 即可,如:

enableProdMode();
bootstrap(MyApp);

PS: 撰寫本文時使用的版本是 2.0.0-beta.2

參考資料:
stackoverflow.com

Angular-CLI:官方的 angular2 application 產生器

GitHub

需要先安裝 nodejs 4 以上版本

可快速產生 angular 2 application 鷹架,包含測試,也可以產生其他元件的鷹架,包含:

  • Component
  • Directive
  • Pipe
  • Service

相關指令 github 上可以查到

雷與解法:


ng serve 會開啟 development server,會偵測檔案變化執行編譯與live reload,在 Linux 上是利用 inotify watcher 進行檔案變動之偵測,所需資源可能超過系統限制而無法執行:




解決方法是將限制改大一些:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

上述指令是將限制設為 512K,只要做一次即可,我的 OS 是 ubuntu 15.10 x64,預設值 8K


查詢目前限制大小: