前端漫漫兮

操作符实战1.工具方法型count统计总数import { range } from 'rxjs';import { count } from 'rxjs/operators';const numbers = range(1, 7);const result = numbers.pipe(count(i => i % 2 === 1));result.subscribe(x => console.log(x));// Results in:// 4reduce累

1.Angular-CLI - angular工具命令行GitHub: https://github.com/angular/angular-cliStars: 23.4kWeb-site: https://cli.angular.io/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjLB5WBk-1591767098652)(https://s1.ax1x.com/2020/06/09/t5vXTK.png)]2.Angular Material - UI

1.else使用语法糖else <div *ngIf="isLoggedIn; else loggedOut"> Welcome back, friend. </div> <ng-template #loggedOut> Please friend, login. </ng-template>code 等同于下方<ng-template [ngIf]="isLoggedIn" [ngIfElse]="

Render2介绍Render2 是angular中用于操作dom的，Angular做了封装，屏蔽底层差异，通用性更强。不仅仅可以用于浏览器端，还可以用于Server Side rendering, Web-Worker, mobile apps, and desktop apps等。Render2之指令用法setStyle、removeStyle # 定义指令 import { Directive, ElementRef, OnInit, Renderer2, HostListene

需求背景D3 tooltip内容过多，需要展示滚动条。鼠标离开定位后，立刻触发mouseout,此时tooltip会隐藏。但是，需求是不能隐藏。那么久从离开到隐藏之间，存在一定时间的隐藏。用delay实现# 全局变量控制 cancelDealHandler(){ if(something){ //取消 cancle = true; }else { ...

ts类型声明文件的正确使用姿势ts声明文件类型DefinitelyTyped社区已定义 npm install @types/jquery --save-dev与npm一同发布解释： package.json 中有 types 字段，或者有一个 index.d.ts 声明文件自给自足型创建一个 node_modules/@types/foo/index.d.ts 文件，存放 f...

ts使用技巧变量、属性把变量置空// null、undefined为任意类型子类型let num: number = undefined;let num: number = null;访问任意属性let anyThing: any = 'hello';console.log(anyThing.myName);console.log(anyThing.myName.firstNa...

github action概念介绍能力介绍支持分支 build, test, package, release, or deploy支持 end-to-end continuous integration (CI) and continuous deployment (CD)支持在第三方云平台、github平台、以及[开发者自己的服务器]构建(https://help.github.c...

环境搭建ng new angular-demo// assets/data.json [ { "letter": "A", "frequency": 0.08167 }, { "letter": "B", "frequency": 0.01492 }, { "letter...

pkg包安装nodejs 官网下载验证> which node/User/<your's-user-name>/.nvm/versions/node/<latest-node-lts-version>/bin/node> node -vv10.16.3pkg卸载sudo rm -rf /usr/local/{bin/{node,npm},li...

v3 → v5 改动js url<script src="https://d3js.org/d3.v3.js"></script><script src="https://d3js.org/d3.v5.js"></script>styleselection.style({ width:'100%', height:'30...

背景从angularjs升级到angular8, 对应ui-grid不支持。寻找替代方案，入门可以参考。小插曲基于组件思想，尝试把组件样式，放到组件同级目录将ag-grid css样式引入到app.component.scss中，非styles.css中 @import "~ag-grid-community/dist/styles/ag-grid.css...

angular 项目搭建ng new ag-grid-demoag-grid安装npm install --save ag-grid-community ag-grid-angularapp.module.ts修改import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@...

brew 安装常用开发软件brew 安装/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"brew update brew tap homebrew/cask-caskbrew cleanupwgetbrew install wget...

文档查询find> db.test.find() # 返回集合所有内容{ "_id" : ObjectId("5dea69eef569f62997971b0d"), "title" : "mongodb" }{ "_id" : ObjectId("5dea6a00f569f62997971b0e"), "title" : "mongodb2" }{ "_id" : Object...

集合上的方法db.test.addIdIfNeeded( db.test.getSplitKeysForChunks(db.test.aggregate( db.test.getWriteConcern(db.test.bulkWrite( db.test.group(db.test.constr...

背景：向小程序，提供http/https接口服务，存储用户数据、日志数据。技术选型resitify纯粹的http服务，不涉及视图typescript 2.1 类型校验，规范代码mock.js提供mock服务mongodb文档结构，存储数据rollupjs管理node后端服务管理pm2后端node进程管理环境搭建安装node默认已安装node，当前使用版本v10...

环境搭建安装tsnpm i -g typescript初始化工程mkdir ts-demonpm init -y 安装rollupnpm i -g rollupnpm i rollup -D添加rollup.config.jstouch rollup.config.js npm i rollup-plugin-json -Dnpm i rollup-plugin-...

ngrx概念一个框架用于构建Angular8响应式应用用于状态管理使用可观察对象使用Typescript使用OnPush策略，变更检测更高效状态序列化存储易于测试原理图component产生action(事件)action触发effect，业务处理数据store中存储state、reducerreducer产生新的statestate修改，更新compone...

docker额外消息2019年11月13日– 开放云公司Mirantis 今天宣布收购Docker的企业平台业务。其行业领先的容器平台，员工和数百名企业客户将加快Mirantis的目标，即为开发人员在任何云和本地基础架构上提供一致的体验，从而提供Kubernetes即服务。交易条款是保密的。安装docker brew cask install docker //下载安装过程Updati...

自动devtool//快捷键中配置 --auto-open-devtools-for-tabs显示继承样式compute 面板中勾线show all定位未使用的css在聚焦DevTools的情况下，按Command Shift P（Mac）或 Control Shift P（Windows，Linux，Chrome OS），以打开“命令菜单”。开始输入coverage并...

Chrome常用命令chrome://aboutchrome://accessibilitychrome://appcache-internalschrome://appschrome://blob-internalschrome://bluetooth-internalschrome://bookmarkschrome://chrome-urlschrome://compone...

nodejs接口性能优化v8-profiler api 分析需要在接口中添加node profile apiab压测 产生xxxx.cpuprofileab -c 20 -n 2000 "http://xxxxx"chrome devtool 分析使用chart，可视化查看峰值所在，着重分析js代码使用Tree形式，根据total Time 倒序，查看各自代码耗时self tim...

概念吞吐率(Requests per second)每秒处理的请求数并发连接数(The number of concurrent connections)某个时刻同时存在的连接数。并发用户数（The number of concurrent users，Concurrency Level）某个时刻同时存在的用户数。一个用户可能存在多个连接。譬如一个账号不同浏览器登录。用户平均请求等待...

背景angular1升级Angular8需要了解的改变，请移步传送门。angular8核心思想：模块化，各组件维护自己的样式。样式升级angular1代码 //之前代码scss, 图便利，常写在父组件的scss文件中,.parent-container{ .demo-container { .items{ ..... } }} an...

常用操作符本地使用环境为rollup rxjs，具体的rollup配置，请参考另一篇文章，这里不再赘述。import { of,Observable, interval,Subject ,from,bindCallback} from 'rxjs';import { version } from './package.json';import { ajax } from 'rxjs/aja...

技术选型Angular8-cli -- 构建环境、视图组件Rxjs -- 提供数据流Stylus -- 定制样式d3 -- 绘制图表，使用HTML、SVG和CSS3让数据鲜活起来echart -- demo参考前提基础知识HTMLHTML提供了定义标题、段落、表格等等内容的元素 #### SVG * SVG也提供了一些元素，用于定义圆形、矩形、简...

响应式编程以下概念介绍，基于 node v10.16.3 版本进行。不满足条件的，请移步 google or 度娘。概念介绍const a = 1,b = 2;const c = a b;响应式编程，当a,b再次变化时，c会再次做出修改。背景RxJS是一个用于使用Observables进行响应式编程的库可简化编写异步或基于回调的代码本地环境搭建nodenpm s...

Httpclient引入模块引入import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { HttpClientModule } from '@angular/common/http';@NgModule({...

Node简介Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。nodejs 实现 commonjs规范nodejs 让 js在后端运行提供服务成为可能。nodejs优秀框架有express、koa等事件驱动，适用于i/o密集型开发简单业务开发Js 原生ApiES6箭头函数map...

异步请求背景：异步请求，为了优化用户体验，而诞生。ajaxvar xmlhttp;if (window.XMLHttpRequest) {// code for IE7 , Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else {// code for IE6, IE5 xmlhttp=new A...

测试单独service - 框架new实例测试代码如下：@Injectable()export class ValueService { value:string; constructor() { } getValue() { return this.value}}测试用例如下：//直接new service 实例let service: ValueService; ...

生命周期生命周期列表接口描述ngOnChanges()1.仅当设置@Input才会触发。2.组件绑定的属性修改时，触发。ngOnInit()每当一个或多个数据绑定输入属性更改时 调用。ngOnInit()在Angular首先显示数据绑定属性并设置指令/组件的输入属性之后，初始化指令/组件。调用一次，后第一 ngOnChanges()。ngDoCheck()...

ngModule中小型项目中ngModule往往只有一个，但在大型应用中，往往多个功能相关的ngModule。定义在同一个ngModule中的视图组件，可以同范围内直接使用标签。import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';@Ng...

1. Angular-cli初始化，开发，构建和维护Angular应用程序的命令行界面工具。安装 npm install -g @angular/cli 命令列表 ng helpng new my-first-projectcd my-first-projectng serve多模块创建默认创建单模块创建多模块ng new my-works...

原则：多人协作，逐步升级，采用ngUpgrade, 兼容Angularjs和Angular一个文件，一个组件，控制器、service、template划分清晰引入ts进行类型校验逻辑功能划分清晰使用webpack等构件工具，进行依赖管理思路：使用 ngUpgrade 时，你实际上在同时运行 AngularJS 和 Angular。所有 Angular 的代码运行在 Ang...

从AngularJS到Angular看前端web开发1.1995年完成"HTML 2.0"这是第一个旨在成为对其后续实现标准的依据的HTML规范纯HTML,简单的页面数据展示。代表技术：HMTL。特征：数据一次返回，浪费带宽，体验不好。2. 2005年，Google Maps、Google Suggest、Gmail 等应用被大众所接受出现AJAX,异步加载数据。代表技术：...

安装web 页面中运行jasmine官方地址替换其中spec文件夹下测试用例即可node环境下npm install jasmine npm install -g jasmine// 创建spec 文件夹和jasmine.json -- 全局安装：jasmine init -- 本地安装：npx jasmine init Jasmine Api宗旨：...

HTML5 元素有多种维度展示方式，常见以下：1.按照类别分类2.按照是否Block元素 #### 按照类别分： * 根元素 - html 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。文档元数据head 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。title 定义文档的标题，将...

Jasmine实战常用测试命令afterAll 所有测试用例调用后，触发* afterEach每个测试用例执行后，触发beforeAll所有测试用例调用前，触发beforeEach每个测试用例执行前，触发describe 定义测试用例集合* expect期望，返回MatcherexpectAsyncfailfdesc...