js、ts、argular、nodejs学习心得

工作中需要前端argular开发桌面程序,后端用nodejs开发服务器,商用软件架构

AngularJS诞生于2009年,由Misko Hevery 等人创建,是一款构建用户界面的前端框架,后为Google所收购。 [3]Angular是AngularJS的重写,Angular2以后官方命名为Angular,2.0以前版本称为AngularJS。AngularJS是用JavaScript编写,而Angular采用TypeScript语言编写,是ECMAScript 6超集

Chrome 「V8 」引擎, 主要职责是用来执行 JavaScript 代码的。

JavaScript 引擎可以将 JS 代码编译为不同 CPU(Intel, ARM 以及 MIPS 等)对应的汇编代码,这样我们就不需要去翻阅每个 CPU 的指令集手册来编写汇编代码了。当然,JavaScript 引擎的工作也不只是编译代码,它还要负责执行代码、分配内存以及垃圾回收

V8 (Google),用 C++编写,开放源代码,由 Google 丹麦开发,是 Google Chrome 的一部分,也用于 Node.js。

V8 会编译、执行 JavaScript 代码,并一样会管理内存、垃圾回收等。

就是因为 V8 的高性能以及跨平台等特性,所以它也是 Node.js 的 JavaScript 引擎。

D8 是一个非常有用的调试工具,你可以把它看成是debug for V8 的缩写。我们可以使用 d8 来查看 V8 在执行 JavaScript 过程中的各种中间数据,比如作用域、AST、字节码、优化的二进制代码、垃圾回收的状态,还可以使用 d8 提供的私有 API 查看一些内部信息

V8 是用 C ++ 编写的开源高性能 JavaScript 和 WebAssembly 引擎,它已被用于 Chrome 和 Node.js 等

V8 最早被开发用以嵌入到 Google 的开源浏览器 Chrome 中,但是 V8 是一个可以独立运行的模块,完全可以嵌入到任何 C ++应用程序中。著名的 Node.js ( 一个异步的服务器框架,可以在服务端使用 JavaScript 写出高效的网络服务器 ) 就是基于 V8 引擎的。

V8 是一个非常复杂的项目,有超过 100 万行 C++代码。它由许多子模块构成,其中这 4 个模块是最重要的:Parser 将 JS 源码转换为 AST,然后 Ignition 将 AST 转换为 Bytecode,最后 TurboFan 将 Bytecode 转换为经过优化的 Machine Code(实际上是汇编代码)

运行的时候先编译再执行,这种方式被称为「即时编译(Just-in-time compilation) 」,简称为 JIT。因此,V8 也属于JIT 编译器

解释执行启动速度快,但是执行时速度慢,而编译执行启动速度慢,但是执行速度快 。为了充分地利用解释执行和编译执行的优点,规避其缺点,V8 采用了一种权衡策略,在启动过程中采用了解释执行的策略,但是如果某段代码的执行频率超过一个值,那么 V8 就会采用优化编译器将其编译成执行效率更加高效的机器代码

尽管现代的JavaScript引擎,‌如V8,‌采用了即时编译(‌JIT)‌技术来提高代码执行效率,‌但这并不改变JavaScript作为一种解释型语言的本质。‌JIT编译技术是在运行时对代码进行优化,‌而不是在编写时代码就被编译成机器码。

在 V8 出现之前,所有的 JavaScript 虚拟机所采用的都是解释执行 的方式,「这是 JavaScript 执行速度过慢的一个主要原因」。而 V8 率先引入了即时编译(JIT) 的双轮驱动的设计,这是一种权衡策略,混合编译执行和解释执行这两种手段,给 JavaScript 的执行速度带来了极大的提升。

另外,V8 也是早于其他虚拟机引入了惰性编译、内联缓存、隐藏类 等机制,进一步优化了 JavaScript 代码的编译执行效率。V8 的出现,将 JavaScript 虚拟机技术推向了一个全新的高度。

chrome V8 详解 Chrome 「V8 」引擎,让你更懂JavaScript

Angular是谷歌开发的一款开源的web前端框架,Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。

Angular环境搭建

安装angular的计算机上面必须安装最新的nodejs

设置淘宝源镜像 ,如果你用npm

npm config set registry https://registry.npm.taobao.org

npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装

https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者 安装yarn ,注意,只要选 一个命令工具就行

yarn

npm install yarn -g

然后切换为淘宝源你才能感受到速度:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

选择用npm安装angular

安装Angular CLI

全局安装typescript(可选)
$ npm install -g typescript

  1. 全局安装Angular CLI

yarn global add @angular/cli 或者 npm install @angular/cli -g

  • 如果要卸载,执行下面命令:
    yarn global remove @angular/cli

经过不算漫长的等待,你的Angular CLI就装好了。确认一下:

  • 检验安装是否成功
    ng version 或者 ng v

新建Angular项目

ng new my-app

如果要跳过npm i安装

ng new my-app --skip-install

趁着它在下载,来看一下运行ng new之后Angular cli已经帮我们干了什么:

那么,这时候Angular cli帮你干了以下这么多事情:

创建 my-app 目录

应用程序相关的源文件和目录将会被创建

应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装

自动配置项目中的 TypeScript 开发环境

自动配置 Karma 单元测试环境

自动配置 Protractor (end-to-end) 测试环境

创建 environment 相关的文件并初始化为默认的设置

启动项目

安装完成之后就可以启动项目了:

cd my-app //进入my-app

npm start 或者 ng serve //启服务

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。

使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。

ng serve命令提供了很多参数,可以适当参考。

以下参数仅供参考:

--dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件

--verbose: boolean, 默认为 false

--link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包

--skip-install: boolean, 默认为 false, 表示跳过 npm install

--skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库

--skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件

--skip-commit: boolean, 默认为 false, 表示不进行初始提交

--directory: string, 用于设置创建的目录名,默认与应用程序的同名

--source-dir: string, 默认为 'src', 用于设置源文件目录的名称

--stylring, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')

--prefix: string, 默认为 'app', 用于设置创建新组件时,组件选择器使用的前缀

--mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序

--routing: boolean, 默认为 false, 表示新增带有路由信息的模块,并添加到根模块中

--inline-style: boolean, 默认为 false, 表示当创建新的应用程序时,使用内联样式

--inline-template: boolean, 默认为 false, 表示当创建新的应用程序时,使用内联模板

其他文件:

.editorconfig: 给你的编辑器看的一个简单配置文件

.gitignore: git 排除文件

angular.json: angular cli 的配置文件

package.json:npm 配置文件,项目使用到的第三方依赖包

protractor.conf.js- :运行 ng e2e 的时候会用到

README.md:项目的基础文档

tsconfig.json:TypeScript 编译器的配置

tslint.json:运行 ng lint 时会用到

Angular CLI简单使用

新建组件

ng generate component news

installing component

create src/app/great-angular/news.component.css

create src/app/great-angular/news.component.html

create src/app/great-angular/news.component.spec.ts

create src/app/great-angular/news.component.ts

update src/app/app.module.ts

如你所见,Angular cli帮我们干了如下事情:

src/app/news 目录被创建

news目录下会生成以下四个文件:

CSS 样式文件,用于设置组件的样式

HTML 模板文件,用于设置组件的模板

TypeScript 文件,里面包含一个 组件类和组件的元信息

Spec 文件,包含组件相关的测试用例

news 组件会被自动地添加到 app.module.ts @NgModule 装饰器的 declarations 属性中。

其他命令

Angualr CLI提供了许多常用命令供我们选择:

ng generate class my-new-class // 新建类, 新建一个名为my-new-class的类 (class)

ng generate component my-new-component // 新建组件

ng generate directive my-new-directive // 新建指令

ng generate enum my-new-enum // 新建枚举

ng generate module my-new-module // 新建模块

ng generate pipe my-new-pipe // 新建管道

ng generate service my-new-service // 新建服务

当然选择。。简写:

ng g cl my-new-class // 新建 class

ng g c my-new-component // 新建组件

ng g d my-new-directive // 新建指令

ng g e my-new-enum // 新建枚举

ng g m my-new-module // 新建模块

ng g p my-new-pipe // 新建管道

ng g s my-new-service // 新建服务

单元测试

Angular默认帮我们集成了``karma`测试框架,我们只需要:

ng test

端到端测试

ng e2e

构建应用程序

ng build

其中过程应该是这样的:

Angular CLI 从 .angular-cli.json 文件中加载配置信息

Angular CLI 运行 Webpack 打包项目相关的 html、 CSS 等文件

打包后的资源,将被输出到配置文件中 outDir 所指定的目录,默认是输出到 dist 目录。

Angular开发工具介绍

Visual Studio Code

目录分析:

|--E2e 应用的端对端(e2e)测试,用 Jasmine 写成并用 protractor 端对端测试运行器测试。

|--Node_modules 依赖包

|--Src

|--App Angular应用文件

|--App.module.ts

|---App.component.ts

|--assets 资源文件

|--environments 环境配置:开发、部署

|--index.html 应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用,将根AppComponent放置到自定义<my-app>标签里。

|--main.ts 项目的入口文件

|--polyfills.ts 处理浏览器兼容问题

|--angular.json Cli配置文件

|--.editorconfig 统一代码风格工具配置,不支持的需要安装插件

|--.gitignore Git配置文件

|--karma.conf.js 在测试指南中提到的 karma 测试运行器的配置。

|--package.json 项目指定npm依赖包

|--tsconfig.app.json Typescript编译配置

|--tsconfig.spec.json Typescript测试编译配置

|--tsconfig.json Typescript编译配置

|--tslint.json Typescript语法检查器

Angular不会生成HTML字符串,它直接生成DOM数据结构

mvvm

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心,它是连接view和model的桥梁。

它有两个方向:

一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。

二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。

实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

总结

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。

Angular 绑定数据

Angular 中使用{{}}绑定业务逻辑里面定义的数据

数据文本绑定

{{}} <div class="title"> {{title}}</div> {{userinfo.username}} {{message}} {{student}}

angualr模板里面绑定属性

<span [innerHTML]='content' class="red"></span>

angualr模板里面允许做简单的运算

1+2={{1+2}}

数据循环 *ngFor

<ul> <li *ngFor="let item of list">{{item}}</li> </ul>

循环的时候设置 key

<ul>

<li *ngFor="let item of list;let key=index;">

{{key}}---{{item.title}}

</li>

</ul>

条件判断语句 *ngIf

<div *ngIf="flag">

<img src="assets/images/02.png" />

</div>

<div *ngIf="!flag">

<img src="assets/images/01.png" />

</div>

<ul>

<li *ngFor="let item of list;let key=index;">

<span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>

<span *ngIf="key!=1">{{key}}---{{item.title}}</span>

</li>

</ul>

属性[ngClass]

<div [ngClass]="{'blue':true,'red':false}">

ngClass演示

</div>

<div [ngClass]="{'orange':flag,'red':!flag}">

ngClass演示

</div>

管道

{{today | date:'yyyy-MM-dd HH:mm ss'}}

执行事件(click)

home.component.html

<strong>{{title}}</strong>

<button (click)="run()">执行事件</button>

<button (click)="setData()">执行方法改变属性里面的数据</button>

<button (click)="runEvent($event)">执行方法获取事件对象</button>

home.component.ts

run(){

console.log('这是一个自定义方法')

console.log(this.title);

}

setData(){

this.title='我是一个改变后的title';

}

// $event

runEvent(event){

//ionic必须这样写

let dom:any=event.target;

dom.style.color="red";

}

相关推荐
diandian~1 天前
[N1CTF 2018]eating_cms
web
IDC02_FEIYA1 天前
Discuz论坛网站管理员的默认用户名admin怎么修改啊?
服务器·web
Dovir多多3 天前
Linux守护Pythom脚本运行——Supervisor学习总结
linux·运维·服务器·python·安全·云计算·web
墨渊君9255 天前
CSS 技巧:如何让 div 完美填充 td 高度
前端·javascript·css·web
OEC小胖胖5 天前
深入理解 Vue 3 中的 emit
前端·javascript·vue.js·前端框架·web
LLLLLindream5 天前
11.15 HTML
java-ee·web
OEC小胖胖6 天前
Vue 3 插槽详解
前端·javascript·vue.js·web
OEC小胖胖6 天前
Vue 3 中的 ref 完全指南
前端·javascript·vue.js·前端框架·web
曾经的三心草6 天前
JavaWeb之AJAX
java·ajax·json·axios·web
kali-Myon6 天前
ctfshow-web入门-JWT(web345-web350)
前端·学习·算法·web安全·node.js·web·jwt