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编译就彻底正常了。

最后

  最后决定选择一个更开心的生活，因此给本身放个假。头一次，看着星光下闪烁的大海，听着潮水细微而深邃的波动，感受微微腥咸的海风轻柔的拂面。而后手指在键盘上跳动，心情也变得轻快了。所谓幸福，不过如此。