AngularJS7那些不得不說的事故

題外話

  最近簡直要忙死，所以停更了很久，你們會不會以為我人間蒸發了？
  正文之前，請允許我先跑個題，就是關於忙的問題。
  做了Freelance，每天過的比上班還累，這完全不是我想要的生活啊？所以痛定思痛，需要檢討一下自己：

1. 首先仍然是目標，工作需要確定目標，生活也是一樣的。如果你的目標是做一番事業，那不得不說，忙才是正常的狀態。如果覺得累了，希望生活和工作能有一個平衡，那就要下決心改變自己的狀態。
   
2. 關於工作，如果目標是掙大錢，而且從時間上更緊迫。那接單的時候，就考慮優先完成利潤高的。排序上利潤低的需求，還是要勇敢的說“不”。
   
3. 如果你的目標是維護朋友、客戶的關係，希望將來能有更好的回報。那現在很多不掙錢的項目，做了也就做了，也沒有什麼好抱怨的。更需要的，是調整自己的心態，接受現狀。

前端

​  工作終於告一段落，今天念叨念叨最近一個項目的小體會。
​  前端的工具鏈無比繁榮豐富，也帶來了大量的選型、學習的問題，這個在網上吐槽已久，我就不畫蛇添足了。
​  我本身過手的項目比較多，所以挺早就做了一些比較，單純從個人愛好入手（不代表性能、功能、框架結構的優勢）做瞭如下的劃分：

  最近的項目使用了AngularJS7，中間有了不少新的體會，分享出來希望能對大家有用。

AngularJS版本

  通常AngularJS項目的構建、編譯、管理等都是由@angular/cli模塊完成的。這個模塊簡便的安裝方法是依賴npm, 而@angular/cli本身也依賴網路，因此當AngularJS有了新版本，所有使用客戶端ng建立項目，也就自動使用了AngularJS的新版本。更不要說npm的升級中，也會直接升級了@angular/cli本身。
  好在從AngularJS2之後，框架和語法糖方面的變化並沒有多大，如果類似AngularJS1到2那種劇烈的變化，相信很多人會直接哭死吧:)
  即便如此，在一個複雜的項目中，不可避免仍然還會有不少版本升級帶來的相容性問題。這時候如果是以前建立的項目，使用保留的package.json直接安裝依賴包，自動在老版本下工作就好，不一定必須升級到AngularJS新版本，通常這樣能省事不少。
  有的時候會碰到一些意外，就是某些依賴包，可能在npm的庫中已經停止維護了，這時候依賴包的安裝將無法成功。這在大公司中通常不是問題，大公司大多都使用自己的包鏡像伺服器，因此這種情況出現的少。但在中、小型公司，這是個很煩心的問題。我建議對於一些複雜的項目，儘可能的保留下來原有的node_modules 文件夾，畢竟跟硬碟容量比起來，這一點空間不算啥了，能讓你將來項目的維護輕鬆許多。
  此外還可以考慮搜索多家的包伺服器鏡像，比如我經常同時安裝cnpm、npm兩套工具，前者使用阿裡雲的鏡像，後者則是官方的伺服器，發現某些包失維的時候，換一個源試試，很可能會有驚喜。
  有的時候還會碰到一些很特別的情況，必須使用老的AngularJS版本進行開發。這時候可以首先卸載當前的新版本@angular/cli, 然後使用npm 安裝制定的老版本，比如1.4版本的客戶端對應AngularJS4：

npm install @angular/[email protected]

  這樣之後使用ng新建的項目，將是AngularJS4的版本。當然這在工作中，也會碰到上面說的依賴包失維的問題，建議常用的功能包，平常自己就留意保留一些吧。

在AngularJS7中使用JQuery.js/Bootstrap等第三方功能庫

  這幾個包是在使用傳統html頁面的時候常用的，JQuery.js在很多的框架中已經不建議使用了，而是使用框架的組件或組件通訊類功能來完成相似的功能。Bootstrap則有很多社區提供的AngularJS化的組件庫可以直接使用。
  對於前者，雖然的確感覺上在AngularJS中使用JQuery沒有哲學上那麼完美，但你不得不說在很多情況下的確用起來更方便，能大量的簡化代碼。對於後者，我個人的感覺把BootStrap庫AngularJS組件化會帶來額外的學習成本，感覺並不划算。所以介紹一下此類擴展庫的使用方法：
  首先使用npm安裝需要使用的第三方擴展包：

npm install jquery bootstrap@3 bootstrap-switch createjs-module --save

  隨後打開angular.json文件，在projects一節，找到你的項目名稱，隨後在其options中，scripts參數後面的數組中添加所有需要引用的js庫：

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.js",
    "node_modules/bootstrap-switch/dist/js/bootstrap-switch.js"]

  需要註意，如果是AngularJS4, 文件名應當是.angular.json，scripts數組中添加的路徑，應當是../node_modules/xxxx這樣的路徑，因為AngularJS7和4的預設路徑是不同的。
  第三步是為bootstrap這樣的UI庫添加額外的css，這個比較容易。直接在預設的主css文件：src/styles.css增加額外的引用就可以了,比如：

@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";

  做完第三步，css可以立即生效，js文件則仍然需要在AngularJS主程式中引用，比如：

...
import * as _ from 'lodash';
import * as $ from 'jquery';
import 'bootstrap-switch';
import * as createjs from 'createjs-module';
...
    $('.url1').attr('href', '/home');

  註意這裡面的引用並沒有指定js的路徑，路徑實際是由angular.json文件中我們剛纔修改的scripts一節決定的。此外就是通常我們使用import都是標準的typescript的形式，比如：

import { Component, OnInit } from '@angular/core';

  而我們對於JQuery.js庫的引用，則使用了引用非結構化js的方法，重點是引用“”也就是所有內容，然後用“as $”命名成平常我們喜歡的樣子。對於bootstrap-switch庫因為是直接在bootstrap原型上添加功能，所以乾脆連“ as ”也省略了。

使用自己積累的js庫

  在日常的工作中，大多程式員肯定都保存了不少的函數庫、功能庫。這些庫可以直接在typescript中引用，不需要改名字，引用的時候也不需要添加尾碼。引用時候的路徑，使用當前typescript文件的相對路徑就可以。比如：

import { Lists } from '../jslib/lists';

  在使用的時候，跟原來在js中引用也完全一致。通常說，比上面介紹的引用JQuery.js之類的引用會更容易。其實這大多是因為npm所管理的node_modules路徑規則太複雜所致，相比較npm模塊管理帶來的好處，你還是忍受的好:)

編譯中報錯的問題

  通常AngularJS的編譯都能給出來比較清晰的錯誤提示，按圖索驥，能夠比較容易的解決問題。
  但也有很多時候，AngularJS並不能給出清晰的提示，比如UglifyJS處理中所出現的Unexpected token: punc (() - ES6 parsing errors。
  這時候可以在編譯的時候增加參數：

ng build -prod --source-map

  此時編譯過程中，雖然信息仍然不夠完整，但能夠比較清楚的界定到時哪一個文件的哪一行出現了問題。相信再找錯誤，就容易多了。當然既然開發模式編譯時通過的，這時候的報錯往往也是相容性問題或者更嚴格的語法限制。

編譯結果，在老版本ios設備無法使用的問題

  為了支持更多的設備，相容早期的ios瀏覽器是很有必要的。但原本運行良好的項目，移植到AngularJS後就無法 在早期ios瀏覽器中使用了。現象是屏幕全白，沒有任何內容和功能。
​  使用ios的聯機功能，可以檢查在瀏覽器中的報錯信息。ios聯機調試不是今天的重點，這裡就跳過了。通常能得到錯誤信息為：

SyntaxError: Use of const in strict mode.

  其實主要還是老版本瀏覽器不能很好支持新的js語法的問題。在AngularJS中呈現出來，是因為AngularJS預設使用typescript編譯。而通常的開發工具鏈是使用babel編譯，而後者的編譯結果，從向前相容上，顯然做的更好一些。
  解決辦法有很多，網上有很多使用babel替代typescript的方法，但總體都比較麻煩,如果不是特別必要，就別折騰了。
  或者你還可以把js改寫到ts文件，估計你更不願意了，如果積累的庫比較多，真的會累死人:)
  我的建議是，所有你自己添加的js包，集中存放在同一個目錄下，比如我例子中的jslib。然後在另外的工作目錄中，安裝babel的工作環境：

npm install -g babel-cli
npm init
npm install --save-dev babel-preset-es2015

  在工作目錄中，新建一個.babelrc的文件，內容為：

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

  隨後就可以將原有的js文件都編譯一遍了（ts文件typescript處理的挺好，完全不需要使用babel），編譯方法示例：

babel ../some_dir/jslib -d ../some_angular_dir/jslib

  這會編譯jslib中的所有文件，文件夾結構也會保留，所以編譯完成，直接用生成的jslib替換原來的文件夾。然後再使用AngularJS編譯就完全正常了。

最後

  最後決定選擇一個更開心的生活，所以給自己放個假。頭一次，看著星光下閃爍的大海，聽著潮水細微而深邃的波動，感覺微微腥鹹的海風輕柔的拂面。然後手指在鍵盤上跳動，心情也變得輕快了。所謂幸福，不過如此。