鸿蒙版cordova/PhoneGap介绍鸿蒙版cordova或PhoneGap，这里统称为鸿蒙版Cordova，遵守cordova官方，不再使用鸿蒙版PhoneGap了。 cordova移动端跨平台研发的重要框架之一，支持Android和Ios，官方并不支持鸿蒙系统，harmony-cordova是鸿蒙的cordova，这里主要介绍鸿蒙版corddova，安卓和Ios请查看cordova官方文档，cordova除了cordova sdk外，还有很多的插件，开发者根据自己的APP的需要可以选择使用相关的插件，鸿蒙版cordova  sdk地址鸿蒙版cordova已经上架鸿蒙三方库中心，开发者可以直接在DevEco studio中直接使用。cordova sdk 三方库地址：https://ohpm.openharmony.cn/#/cn/detail/harmony-cordova鸿蒙版cordova支持的插件插件ID接口地址说明cordova-plugin-whitelistcid:link_12白名单cordova-plugin-network-informationcid:link_0网络管理cordova-plugin-inappbrowsercid:link_8内置浏览器cordova-sqlite-storagecid:link_11嵌入式数据库cordova-plugin-cameracid:link_14相机功能cordova-plugin-filecid:link_15本地文件管理cordova-plugin-file-transfercid:link_5上传和下载文件cordova-plugin-dialogscid:link_13弹窗cordova-plugin-datepickercid:link_1日期选择phonegap-plugin-barcodescannercid:link_3扫码cordova-plugin-media-capturecid:link_6视频录制cordova-plugin-alipay-v2调用接口：cid:link_9依赖插件：https://ohpm.openharmony.cn/#/cn/detail/@cashier_alipay%2Fcashiersdk自定义支付宝支付插件，只是按照文档接口调用了支付宝插件依赖支付宝官方插件aliyun.uploadvod暂无文档，需联系开发者阿里云OSS插件，实现移动端直接上传文件到阿里云OSScordova-plugin-android-permissionscid:link_2授权插件，接口永远返回为拥有权限，主要为兼容android移植到harmony使用的，避免修改Android端的代码，harmong授权已下放到各个插件，无需单独编写代码phonegap-bluetooth-plugincid:link_10经典蓝牙插件cordova-plugin-ble-centralcid:link_10低功耗蓝牙插件cordova-base64-to-gallerycid:link_7保存图片到相册cordova-plugin-huawei-pushcid:link_4华为推送，自定义插件，详细使用请咨询开发者Android移植鸿蒙步骤1，打开DevEco创建项目，选择Empty Ability进入下一步，填写必要信息，这里要注意，bundle name 先填写com.example.myapplication，也就是保持默认不变，因为在没有cordova.crt证书的情况下，cordova鸿蒙版要求bundle name必须为com.example.myapplication，主要用于研发测试，如果开发测试完成要修改bundle name上架鸿蒙应用市场，请联系开发者申请cordova.ert证书，或者事先联系开发者提供技术服务。2，项目创建成功后，复制原有Android studio的工程assests/www目录下面的所有文件到鸿蒙工程entry/src/main/resources/目录下，注意直接复制原andriod工程www目录下的文件，不包含www。3，复制原android工程res/xml目录下的config.xml文件到鸿蒙工程entry/src/main/resources/目录下。4，打开DevEco studio的Terminal终端，进入工程目录，执行 ohpm install harmony-cordova 安装本插件。5，打开鸿蒙工程文件entry/src/main/etx/pages/Index.ets文件，修改代码如下：import { MainPage, pageBackPress, pageHideEvent, pageShowEvent } from 'harmony-cordova/Index';  @Entry  @Component  struct Index {    onPageShow(){      pageShowEvent(); //页面显示通知cordova    }      onBackPress() {      pageBackPress(); //拦截返回键由cordova处理      return true;    }    onPageHide() {      pageHideEvent(); //页面隐藏通知cordova    }      build() {      RelativeContainer() {        MainPage(); //webview首页index.html      }      .height('100%')      .width('100%')    }  }6，打开鸿蒙工程文件/entry/src/main/ets/entryAbility/EntryAbility.ets文件,修改onCreate函数如下import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';      import { hilog } from '@kit.PerformanceAnalysisKit';      import { window } from '@kit.ArkUI';      import { webview } from '@kit.ArkWeb';      import { setSchemeHandler } from 'harmony-cordova/Index';...onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {webview.WebviewController.initializeWebEngine();//webview引擎初始化setSchemeHandler();//设置webview schemehilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}7，鸿蒙混合研发，也许您会增加其他page页面，不一定应用的首页为cordova webview（index.html)的首页，例如应用增加了鸿蒙的原生的启动页面，包含首页弹窗，同意隐私政策后，然后再从启动页面进入cordova的页面，这样避免在用户没有同意隐私政策的情况下，初始化cordova sdk，因为初始化cordova sdk，系统读取了设备的网络状态，因为国内相关法律规定，在用户没有同意隐私政策的情况下，不允许读取设备的网络标识。8，做以上代码修改后，鸿蒙的移植已经完毕，可以使用模拟器或者真机进行编译和测试了。Ios移植鸿蒙步骤如果您的项目有android和Ios的工程，请参考android项目移植项目的鸿蒙下，如果您的项目没有andriod工程，只有Ios工程，请使用如下方法移植，移植时大部分内容和安卓一样，只是复制的文件的路径不一致，以下只介绍不同部分，相同部分请参考android移植步骤。1，复制Xcode的Ios工程目录下的Staging/www目录下的所有文件到鸿蒙工程entry/src/main/resources/目录下。 2，Xcode工程的config.xml文件在Staging目录下，Xcode工程的该文件不能直接被鸿蒙版cordova使用，需要进行转换，该文件主要记录的是插件的名称和初始化的类，因为鸿蒙版是根据android的config.xml进行插件初始化的，因此需要将Xcode工程config.xml转为安卓的config.xml，请将Xcode工程使用node加入安卓平台，系统会自动生成android版的config.xml。然后将文件复制到鸿蒙版工程的entry/src/main/resources/下。附加说明：本人认为使用cordoca跨平台研发，一般至少都会包含android和ios两大平台，很少只有ios平台，没有android平台的，所以大部分移植鸿蒙参考android移植步骤，后续升级SDK会兼容Ios工程的config.xml，无需转换就可以使用。新项目，一次开发适用于andriod、Ios和Harmony三大平台由于cordova官方当前并不支持HarmonyOS平台，使用node无法直接将HarmonyOS加入到cordova，也无法直接安装插件到HarmonyOS，因此对于新项目要一次开发满足三大平台的话，建议先通过node加入Android和Ios平台和安装插件，后续研发可以使用Android studio研发和调试，待研发成功后，然后再在Xcode和DevEco做跨平台适配。Xcode适配请参考cordova的官方文档，HarmonyOS适配请参考以上Android的移植步骤。特别说明当前版本不支持使用者自定义插件研发，如果该版本没有包含您要使用的插件，或者您的项目中有Android或Ios的自定义插件，需要移植到HarmonyOS平台，请您和本开发者联系，获取技术支持。使用鸿蒙版cordova sdk在开发测试阶段务必将bundle name修改为com.example.myapplication，如果将bunlde name改为正式的Id，鸿蒙版cordova sdk会读取entry/src/main/resources/目录的cordova.crt证书文件，用于验签，如果该文件不存在，启动应用后，应用会闪退。如果应用的bundle name为com.example.myapplication，鸿蒙版 cordova sdk会跳过验签，不检测cordova.crt文件。但是上架鸿蒙应用市场，必须将bundle name改为正式的id，所以请联系开发者申请cordova.ert证书，另外由于操作系统之间的差异，虽然保持了cordova的插件接口不变，但是返回值会有所调整，后续文档会逐步完善，在使用本插件跨平台研发时请联系开发者提供技术服务。

安装 obs，使用的 npm install esdk-obs-nodejs 进行安装安装之后，项目编译就报错了（Angular12项目）在使用下面语句引入时，就会报错了var ObsClient = require('esdk-obs-nodejs');有没有遇到同样问题的，烦请大佬帮忙解答一下啊，感谢~

亲爱的开发者们大家心心念念的【移动应用开发全栈成长计划】第三阶段小程序&Angular框架篇内容已开课我们也特别为大家设置了【学习任务打卡】环节为的就是让大家巩固学习成果，紧跟学习进度请将需要完成的每章随堂测验按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2021.03.22-2021.05.09 23:59征集要求在本帖中，回复自己本章随堂测验内容打卡要求在本帖中，回复对应章节的随堂测验并提交截图 ↓章节作业位置：打卡回复格式：华为云ID+作业完成截图，如图所示↓↓↓华为云ID：grandmaster奖励方式每周每篇有效笔记可获得2积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，在完成每章随堂测验打卡的用户中，抽取10位幸运奖由于第三阶段课程内容较多，每章随堂测验抽奖与每周读书笔记抽奖改为每两周抽取一次奖励华为云定制敏捷扑克牌 各阶段积分排行榜奖品三个阶段总积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交学习笔记任务，可获得的积分上限为2积分/每章；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：阶段考核>问答官>分享转发>每周学习笔记>每章随堂测验；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-84766-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看每周读书笔记打卡帖：https://bbs.huaweicloud.com/forum/thread-114924-1-1.html查看问答官排位打卡帖：https://bbs.huaweicloud.com/forum/thread-114947-1-1.html

隔离程序的每个部件，在隔离环境中运行测试用例。karma.conf.js ：文件是为了告知 Karma 需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。具体配置内容参见 karma.conf.js。https://karma-runner.github.io/5.0/config/configuration-file.html>测试文件的扩展名必须是 .spec.ts，这样工具才能识别出它是一个测试文件，也叫规约（spec）文件"test": {     "options": {         "codeCoverage": true     } }Jasmine Angular 单元测试是使用 Jasmine 框架来编写的。基础知识describe(string, function)：是 Jasmine 的全局函数，可以理解为一个测试集（Test Suite），主要功能是用来划分单元测试的。describe 可以嵌套使用。it(string, function)：可以理解为测试用例。Specs 通过调用 it 的全局函数来定义。每个 Spec 包含一个或多个 expectations 期望值来测试需要测试代码。Jasmine 中的每个 expectation 是一个断言，可以是 true 或者 false。当每个 Spec 中的所有 expectations 都是 true，则通过测试。有任何一个 expectation 是 false，则未通过测试。而方法的内容就是测试主体。每个 Matchers 实现一个布尔值，在实际值和期望值之间比较。它负责通知 Jasmine，此 expectation 是真或者假。然后 Jasmine 会认为相应的 spec 是通过还是失败。所有的 expect 都可以使用 not 表示否定的断言。JavaScript 的作用域的规则适用，所以在 describe 定义的变量对 Suite 中的任何 it 代码块都是可见的。beforeAll：每个 suite（即 describe）中所有 spec（即 it）运行之前运行，整个suite里只运行一次afterAll：每个 suite（即 describe）中所有 spec（即 it）运行之后运行 xdescribe：该 describe下的所有 it 将被忽略，jasmine 将直接忽略这些it，因此不会被运行 // 引入相关模块 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { BackupListComponent } from './backup-list.component'; import { DebugElement } from '@angular/core'; describe('HorizontalGridComponent test', () => {    let component: HorizontalGridComponent;  let fixture: ComponentFixture<HorizontalGridComponent>;     // 配置 TestBed 环境    beforeEach(async(() => {       TestBed.configureTestingModule({          imports: [            HttpClientTestingModule          ],          declarations: [HorizontalGridComponent],   }).compileComponents();    }));    beforeEach(() => {         // 创建一个HorizontalGridComponent 的实例   fixture = TestBed.createComponent(HorizontalGridComponent);         // 使用 fixture.componentInstance 来访问组件实例   component = fixture.componentInstance;         // TestBed.createComponent 不能触发变更检测，使用 detectChanges() 触发检查。   fixture.detectChanges();  });     it('should create', () => {   expect(fixture).toBeDefined();        expect(component).toBeDefined();  });  it('should have <h3> with "Hello"', () => {         // const El: HTMLElement = fixture.nativeElement;         const De: DebugElement = fixture.debugElement;         const El: HTMLElement = De.nativeElement; // nativeElement相当于debugElement的一个属性         // js原生的querySelector api去获取h3标签         const p = El.querySelector('h3');         // 判断h3标签的内容         expect(p.textContent).toEqual('Hello');     });     it('should find the <h3> with fixture.debugElement.query(By.css)', () => {         const De: DebugElement = fixture.debugElement;         const El = De.query(By.css('h3')); // nativeElement相当于debugElement的一个属性         // js原生的querySelector api去获取h3标签         const p: HTMLElement = El.nativeElement;         // 判断h3标签的内容         expect(p.textContent).toEqual('Hello');     });    afterEach(() => {       TestBed.resetTestingModule();    }); });置好 TestBed 之后，调用它的 createComponent() 方法，它会创建一个 HorizontalGridComponent 的实例，把相应的元素添加到测试运行器的 DOM 中，然后返回一个 ComponentFixture 对象。ComponentFixture 用来与所创建的组件及其 DOM 元素进行交互。获取组件元素 nativeElement 和 DebugElement。 前者原生 DOM 元素，属性取决于运行环境，如果是浏览器，就提供浏览器的一些api，后者是由 Angular 进行包装可以安全的横跨其支持的所有平台运行并提供诸如 query 或者 triggerEventHandler 事件dom操作等方法。TestBed.createComponent 不能触发变更检测，使用 detectChanges() 触发检查。运行完成后，控制台输出：chrome浏览器输出：

【引言】前段时间写过一篇关于前端技术的概括性文章《前端技术的选择]》(http://3ms.huawei.com/km/blogs/details/7971337)，本文就对于当下顶级的前端开发技术做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。 【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需要使用额外的库来进行状态管理和路由，Redux和React Router分别是这类库的例子。基本用法下面是一个简单的React在HTML中使用JSX和JavaScript的例子。 <div id="myReactApp"></div> <script type="text/babel">  function Greeter(props) {    return <h1>{props.greeting}</h1>;  }  var App = <Greeter greeting="Hello World!" />;  ReactDOM.render(App, document.getElementById("myReactApp"));</script>  Greeter函数是一个React组件，它接受一个属性问候语。变量App是Greeter组件的一个实例，其中问候语属性被设置为 "Hello World！"。然后，ReactDOM.render方法将我们的Greeter组件渲染在DOM元素（id为 myReactApp）中。 在web浏览器中显示时，结果将是： <div id="myReactApp">  <h1>Hello World!</h1></div>  显著特点 组件化React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时，可以传入被称为 "props "的值。 ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));  React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。 功能函数组件 功能组件是用一个函数声明，用来返回一些JSX。 const Greeting = (props) => <div>Hello, {props.name}!</div>;  类组件基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件，因为它们的状态可以在整个组件中保持，并且可以通过props传递给子组件。class ParentComponent extends React.Component {  state = { color: 'green' };  render() {    return (      <ChildComponent color={this.state.color} />    );  }} 虚拟 DOM另一个值得注意的特点是React使用了虚拟文档对象模型，也就是虚拟DOM。React创建了一个内存中的数据结构缓存，计算得出变化差异，只渲染实际变化的子组件, 从而高效地更新浏览器显示的DOM。 生命周期方法生命周期方法是指在组件的生命周期内，允许在设定的点执行代码的hooks处理函数。 l  shouldComponentUpdate允许开发者在不需要渲染的情况下，通过返回false来防止不必要的重新渲染组件。l  componentDidMount是在组件 "挂载 "后调用的（组件已经在用户界面中创建了，通常是通过将其与DOM节点关联起来）。这通常用于通过API从远程数据源触发数据加载。l  componentWillUnmount是在组件被拆解或 "解挂 "之前立即调用的。这通常用于清除组件的资源依赖关系，这些依赖关系不会随着组件的卸载而简单地被移除（例如，移除任何与组件相关的setInterval()实例，或者因为组件的存在而在 "文档 "上设置的 "eventListener"）。l  render是最重要的生命周期方法，也是任何组件中唯一必须存在的方法。它通常在每次更新组件的状态时都会被调用。 JSXJSX，即JavaScript XML，是对JavaScript语言语法的扩展。JSX在外观上类似于HTML，它提供了一种开发者熟悉的语法结构化组件渲染的方法。React组件通常是使用JSX编写的，尽管不一定非要使用JSX（组件也可以用纯JavaScript编写）。JSX类似于Facebook为PHP创建的另一种名为XHP的扩展语法。 JSX代码的一个例子:class App extends React.Component {  render() {    return (      <div>        <p>Header</p>        <p>Content</p>        <p>Footer</p>      </div>    );  }}  嵌套元素同一层次上的多个元素需要被包裹在一个容器元素中，如上图中的<div>元素。 属性JSX提供了一系列的元素属性，旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件，所有的属性都会被组件作为props接收。 JavaScript表达式JavaScript表达式（但不是语句）可以在JSX内部通过大括号{}使用。<h1>{10+1}</h1> 上面代码的显示结果是：<h1>11</h1> 条件语句If-else语句不能在JSX中使用，但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ? 'true' : 'false' } 呈现为字符串 'true'。 class App extends React.Component {  render() {    const i = 1;    return (      <div>        <h1>{ i === 1 ? 'true' : 'false' }</h1>      </div>    );  }} 结果会是：<div>  <h1>true</h1></div> 函数和JSX可以用于条件表达式中:class App extends React.Component {  render() {    const sections = [1, 2, 3];    return (      <div>        {sections.length > 0 && sections.map(n => (            /* 'key'必须唯一 */            <div key={"section-" + n}>Section {n}</div>        ))}      </div>    );  }} 结果会是：  <div>  <div>Section 1</div>  <div>Section 2</div>  <div>Section 3</div></div> 用JSX编写的代码需要被Babel等工具进行转换以后才能被Web浏览器所理解，这种处理一般是在软件构建过程中进行的，然后再部署构建后的应用程序。 超越HTML的架构React的基本架构不仅仅适用于在浏览器中渲染HTML。例如，Facebook有动态图表，可以渲染到<canvas>标签，而Netflix和PayPal使用通用加载，在服务器和客户端上渲染相同的HTML。 React HooksHooks是让开发者从函数组件中 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作，它的终极目标是在React中消除类组件的存在。 React提供了一些内置的Hooks，如useState、useContext、useReducer和useEffect等。它们都在Hooks API参考书中做了说明。使用最多的是useState和useEffect，分别在React组件中控制状态和检测状态变化。  Hooks规则 Hooks也有一些规则，在使用Hooks之前必须遵循这些规则: l  钩子只能在顶层调用（不能在循环或if语句中调用）。l  钩子只能在React函数组件中调用，不能在普通函数或类组件中调用。 定制Hooks构建自己的Hooks，也就是所谓的自定义Hooks，可以让你把组件逻辑提取到可重用的函数中。自定义钩子是一个名称以 "use "开头的JavaScript函数，它可以调用其他的钩子。钩子的规则也适用于它们。 常用术语 React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的，因此并不包括许多一些开发者认为构建应用程序所需的工具。这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。这种情况也就决定了React技术在创建网页应用时标准无法统一。 Flux架构的使用为了支持React的单向数据流的概念（与AngularJS/Angular的双向数据流形成对比），Flux架构是流行的模型-视图-控制器(MVC)架构的具有代表性的替代方案。Flux的特点是，数据动作通过中央调度器发送到一个存储仓库，而对存储仓库数据的变化会被传送回视图。当与React一起使用时，这种传送是通过组件属性完成的。 Flux可以被认为是观察者模式的一个变种。 Flux架构下的React组件不应该直接修改传递给它的任何props，而是应该传递回调函数，这些回调函数可以创建由调度器发送的数据动作来修改存储仓库。数据动作是一个对象，其职责是描述已经发生的事情：例如，一个数据动作描述的是一个用户 "follow"另一个用户。它可能包含如下数据：用户ID，目标用户ID，以及USER_FOLLOWED_ANOTHER_USER枚举类型。存储仓库，是一个数据模型，可以根据从调度器接收到的数据动作来改变自己。这种模式有时被表述为 "属性向下流动，数据动作向上流动"。自Flux诞生以来，Flux的许多实现被创造出来，其中最著名的是Redux，它的特点是单一的存储仓库，通常被称为单一的数据真相源。 历史React是由Facebook的软件工程师Jordan Walke创建的，受PHP的HTML组件库XHP的启发，发布了React的早期原型，名为 "FaxJS"，。它于2011年首次部署在Facebook的News Feed上，后来于2012年部署在Instagram上。2013年5月在美国JSConf大会上开源。 React Native是2015年2月在Facebook的React Conf上宣布的，2015年3月开源的React Native，实现了原生的Android、iOS和UWP开发。 2017年4月18日，Facebook宣布了React Fiber，这是React库的一个新的核心算法，用于构建用户界面，React Fiber将成为React库未来任何改进和功能开发的基础。 2017年9月26日，React 16.0正式对外发布。 2019年2月16日，React 16.8正式对外发布，该版本引入了React Hooks。 常用命令 创建工程：npx create-react-app my-app开发环境运行：npm start 生产环境打包：npm run build 【官方网站】http://reactjs.org/ 【最新版本】16.13.1于2020年3月19日【授权】MIT License  【Angular】Angular（通常被称为 "Angular 2+"或 "Angular v2及以上版本"）是一个基于TypeScript的开源Web应用框架，由Google的Angular团队和由个人以及企业组成的社区领导。 Angular是由构建AngularJS的同一个团队从零开始重写的。 Angular和AngularJS的区别 l  Angular没有 "Scope"或控制器的概念，相反，它使用组件的层次结构作为其主要的架构特征。l  Angular有不同的表达式语法，重点是"[]"用于属性绑定，"() "用于事件绑定l  模块化 - 许多核心功能已转移到模块上l  Angular推荐使用微软的TypeScript语言，它引入了以下特性。n  静态键入，包括Genericsn  注解l  TypeScript是ECMAScript 6 (ES6)的超集，向后兼容ECMAScript 5（即：JavaScript）。l  动态加载l  异步模板编译l  由RxJS提供的迭代回调。RxJS限制了状态的可见性和调试，但这些问题可以通过像ngReact或ngrx这样的反应式附加组件来解决。l  支持Angular Universal，可以在服务器上运行Angular应用程序。 历史命名最初，AngularJS的重写被称为 "Angular 2"，但这导致了开发人员的迷糊。为了澄清，团队宣布，每个框架使用不同的术语，其中 "AngularJS "指的是1.X版本， "Angular " 指的是2及以上版本。 版本2Angular 2.0在2014年10月22-23日的ng-Europe大会上宣布。2.0版本的剧烈变化在开发者中引起了相当大的争议。 2015年4月30日，Angular开发者宣布Angular 2从Alpha转为开发者预览版，2015年12月Angular 2转为Beta版，2016年5月发布了第一个发布候选版本，2016年9月14日发布了最终版本。 版本42016年12月13日Angular 4发布，跳过了3，避免了因路由器包的版本错位导致的混乱，当时已经发布的版本为v3.3.0。最终版本于2017年3月23日发布，Angular 4向后兼容Angular 2。 Angular 4.3版本是一个小版本，它是4.x.x版本的替换版本。 4.3版本的功能 l  介绍了HttpClient，一个更小、更容易使用、更强大的HTTP请求库。l  为守护者和解析器提供了新的路由器生命周期事件。四个新事件。GuardsCheckStart、GuardsCheckEnd、ResolveStart、ResolveEnd加入了现有的NavigationStart等生命周期事件集。l  有条件地禁用动画。  版本5Angular 5于2017年11月1日发布，Angular 5的主要改进包括支持渐进式Web应用、构建优化器以及与Material Design相关的改进。版本6Angular 6于2018年5月4日发布。这个版本，关注的重点不在于底层框架，更多的是工具链，以及让Angular在未来的更新和升级更加容易，比如：ngupdate、ng add、Angular元素、Angular Material+CDK组件、Angular Material入门组件、CLI工作区、库支持、树形摇动提供者、动画性能提升、RxJS v6。版本7Angular 7已于2018年10月18日发布。更新内容涉及到应用性能、Angular Material & CDK、虚拟滚动、Selects的可访问性改进、现在支持自定义元素使用Web标准的内容投影，以及关于Typescript 3.1、RxJS 6.3、Node 10（仍支持Node 8）的依赖性更新。版本8Angular 8已于2019年5月28日发布。具有所有应用代码的差异化加载、惰性路由的动态导入、Web工作者、TypeScript 3.4支持、以及Angular Ivy作为预览版可配置使用。Angular Ivy预览包括： l  生成的代码，在运行时更容易阅读和调试。l  更快的重建时间l  减少有效载荷l  改进了模板类型检查l  向后兼容 版本9Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。Angular可以与TypeScript 3.6和3.7兼容。除了数百个bug修复之外，Ivy编译器和运行时还提供了许多优势: l  更小的软件包l  更快的测试l  更好的调试l  改进的CSS类和样式绑定l  改进的类型检查l  改善了构建错误l  改善了构建时间，默认开启AOT功能l  提高国际化功能 特点组件化一个组件例子Html部分 <h2>Products</h2> <div *ngFor="let product of products">   <h3>      {{ product.name }}  </h3> </div>  Typescript部分export class ProductListComponent {  products = products;}  路由 @NgModule({  imports: [    BrowserModule,    ReactiveFormsModule,    RouterModule.forRoot([      { path: '', component: ProductListComponent },      { path: 'products/:productId', component: ProductDetailsComponent },    ])  ], 数据管理定义服务类export class CartService {  items = [];   constructor(    private http: HttpClient  ) {}   addToCart(product) {    this.items.push(product);  }   getItems() {    return this.items;  }   clearCart() {    this.items = [];    return this.items;  }   getShippingPrices() {    return this.http.get('/assets/shipping.json');  }}调用服务类export class ShippingComponent implements OnInit {  shippingCosts;   constructor(    private cartService: CartService  ) {  }   ngOnInit() {    this.shippingCosts = this.cartService.getShippingPrices();  } }常用命令 从终端上，全局安装Angular CLI：npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区:ng new my-project-name 开发环境运行：ng serve 生产环境打包：ng build --prod 【官方网站】https://angular.io/ 【最新版本】9.1.2于2020年4月15日【授权】MIT License  【Vue】 Vue.js（通常被称为Vue；发音为/vjuː/，类似于 "view"）是一个开源的Model-view-viewmodel JavaScript框架，用于构建用户界面和单页面应用程序。它由Evan You创建，由他和来自Netlify和Netguru等多家公司的核心成员维护。 概述 Vue.js的特点是，它采用了一个渐进式的架构，专注于声明式渲染和组件合成。复杂应用所需的高级功能，如路由、状态管理和构建工具等，都是通过官方维护的支持库和包提供的，其中Nuxt.js是最受欢迎的解决方案之一。 Vue.js可以让你用称为指令（directives）的HTML属性来扩展HTML。 历史Vue是由Evan You创建的。在Google工作期间，他使用AngularJS技术参与了多个项目的开发的，之后创建了Vue。他后来总结了自己的思考过程。"我想，如果我可以把AngularJS真正优秀的部分提取出来，然后构建一些轻量级的东西，会怎么样呢？" 项目的第一个版本源码提交日期是2013年7月，Vue在2014年2月首次发布。 特点组件化Vue 组件扩展了基本的 HTML 元素来封装可重用的代码。从高层次的角度看，组件是Vue编译器附加行为的自定义元素。在Vue中，组件本质上就是一个带有预设选项的Vue实例。下面的代码片段包含了一个Vue组件的例子。该组件显示了一个按钮，并打印出按钮被点击的次数。 <div id="tuto">    <button-clicked v-bind:initial-count="0"></button-clicked></div> <script>Vue.component('button-clicked', {  props: [ "initialCount" ],  data: () => ({    count: 0,  }),  template: `<button v-on:click="onClick">Clicked {{ count }} times</button>`,  computed: {    countTimesTwo() {      return this.count * 2;    }  },  watch: {    count(newValue, oldValue) {      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);    }  },  methods: {    onClick() {        this.count += 1;    }  },  mounted() {    this.count = this.initialCount;  }}); new Vue({  el: '#tuto',});</script> 模板Vue使用基于HTML的模板语法，允许将渲染的DOM绑定到Vue实例的底层数据。所有 Vue 模板都是有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。Vue 将模板编译成虚拟 DOM 渲染函数。虚拟文档对象模型（或 "DOM"）允许Vue在更新浏览器之前在其内存中渲染组件。结合反应式系统，Vue能够计算出需要重新渲染的组件的最小数量，并在App状态发生变化时，启动最小量的DOM操作。 Vue用户可以使用模板语法，也可以选择使用JSX直接编写渲染函数，渲染函数允许从软件组件中构建应用程序。 反应式系统Vue的特点是采用了反应式系统，它使用纯JavaScript对象和优化的重渲染。每个组件在渲染过程中都会跟踪其反应式的依赖关系，因此系统可以精确地知道什么时候重新渲染，以及哪些组件需要重新渲染。 变换效果当从DOM中插入、更新或删除项目时，Vue提供了多种方法来部署变换效果。这包括了以下工具： l  自动应用CSS变换和动画的类l  集成第三方CSS动画库，如Animate.css等。l  在变换hooks期间，使用JavaScript直接操作DOM。l  集成第三方JavaScript动画库，如Velocity.js等。 当在变换组件中的元素**入或移除时，会出现这样的情况：l  Vue会自动检测到目标元素是否应用了CSS变换或动画。如果有，CSS变换类将在适当的时间添加/删除。l  如果变换组件提供了JavaScript hooks，这些hooks将在适当的时间被调用。l  如果没有检测到CSS变换/动画，并且没有提供JavaScript hooks，那么插入和/或移除的DOM操作将在下一帧中立即执行。  路由单页面应用程序（SPA）的一个传统缺点是无法分享到特定网页中的确切 "子 "页面的链接。由于SPA只向用户提供一个基于URL的服务器响应（它通常服务于index.html或index.vue），因此通常情况下，将某些屏幕作为书签或分享到特定部分的链接是很困难的，甚至是不可能的。为了解决这个问题，许多客户端路由器用 "hashbang"(#!)来划分动态URL，例如page.com/#!/。然而，在HTML5中，大多数现代浏览器都支持不使用hashbang的路由。 Vue提供了一个界面，可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式（无论是通过电子邮件链接、刷新还是页面内链接）。此外，当某些浏览器事件（如点击）发生在按钮或链接上时，使用前端路由器可以有意识地转换浏览器路径。Vue本身并没有自带前端路由。但开源的 "vue-router "包提供了一个API来更新应用程序的URL，支持返回按钮（导航历史记录），并支持电子邮件密码重置或电子邮件验证链接的认证URL参数。它支持将嵌套路由映射到嵌套组件，并提供精细化的过渡控制。添加了vue-router后，组件只需映射到它们所属的路由，父/根路由必须指明子路由的渲染位置。 <div id="app">  <router-view></router-view></div>... <script>...const User = {  template: '<div>User {{ $route.params.id }}</div>'} const router = new VueRouter({  routes: [    { path: '/user/:id', component: User }  ]})...</script> 上面的代码: l  在websitename.com/user/<id>中设置一个前端路径。l  这将在(const User...)中定义的User组件中呈现。l  允许用户组件使用$route对象的params键输入用户的特定ID：$route.params.id。l  这个模板（根据传递到路由器中的参数变化）将被渲染到DOM的div#app里面的<router-view></router-view>。l  最后生成的HTML将是：websitename.com/user/1： <div id="app">  <div>    <div>User 1</div>  </div></div> 生态系统核心库自带的工具和库都是由核心团队和贡献者开发的。 官方工具l  Devtools - 用于调试Vue.js应用程序的浏览器devtools扩展。l  Vue CLI - 用于快速开发Vue.js的标准工具书l  Vue Loader - 一个webpack加载器，允许以单文件组件（SFCs）的格式编写Vue组件。 官方程序库 l  Vue Router - Vue.js的官方路由器l  Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。l  Vue Server Renderer - 用于 Vue.js 的服务器端渲染。 常用命令安装工具npm install -g @vue/cli 创建工程：vue create my-project 开发环境运行：npm run serve 生产环境打包：npm run build 【官方网站】https://vuejs.org/ 【最新版本】2.6.1于2019年12月13日【授权】MIT License                           【小结】本文对于当前顶级的前端技术做了较为详尽的探索，前端技术一个大的方向是单页应用 (SPA，Single Page Application)，我们在选取针对本业务的前端技术时需要结合如下几个方面来考虑： 1.     成员当前技能，这是一个很现实的问题，大多数程序员会选择自己比较熟悉的技术。这里要思考一下，目前自己熟悉的技术是不是最优选项？2.     可利用的学习时间，如果发现要使用的技术需要一些时间学习，这个时间的开销到底会不会与开发进度有冲突？3.     能否保证项目的复杂度最低，这个是比较关键的因素。先进技术之所以先进就是因为可以让开发者把时间和精力放在真正的业务开发上面来，如果要使用的技术需要进行很多与业务不相关的配置，就需要问一个问题，有没有更好的办法？ 最后，希望本文对现有或者以后的业务开发有指导或者借鉴作用。

RT

2018年12月13日的前端开发内部培训，分享关于如何重构controller的一些经验，以及代码结构规划的一些建议，欢迎交流指点。Angularjs培训-如何重构controller.pdf( 预览 )安利一下自己的大前端技术博客，欢迎互粉。博客园：http://www.cnblogs.com/dashnowords华为云社区：https://bbs.huaweicloud.com/community/iblognew/id_1524611247318830