AngularJS7那些不得不說的事故

題外話

  最近簡直要忙死，因此停更了好久，大家會不會覺得我人間蒸發了？
  正文以前，請容許我先跑個題，就是關於忙的問題。
  作了Freelance，天天過的比上班還累，這徹底不是我想要的生活啊？因此痛定思痛，須要反省一下本身：

1. 首先仍然是目標，工做須要肯定目標，生活也是同樣的。若是你的目標是作一番事業，那不得不說，忙纔是正常的狀態。若是以爲累了，但願生活和工做能有一個平衡，那就要下決心改變本身的狀態。
   
2. 關於工做，若是目標是掙大錢，並且從時間上更緊迫。那接單的時候，就考慮優先完成利潤高的。排序上利潤低的需求，仍是要勇敢的說「不」。
   
3. 若是你的目標是維護朋友、客戶的關係，但願未來能有更好的回報。那如今不少不掙錢的項目，作了也就作了，也沒有什麼好抱怨的。更須要的，是調整本身的心態，接受現狀。

---

前端

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

業務類型	選型
功能性項目，更多偏向HTML層的處理	JQuery.js
小型商業邏輯項目	vue.js
大型或者未來可能快速成長的商務邏輯	AngularJS

  最近的項目使用了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/cli@1.4

  這樣以後使用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編譯就徹底正常了。

最後

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