米斯特尔曾-CSDN博客

原创 react学习之组件间通信

react学习之组件间通信代码：github-learn-react父组件与子组件通信通过props传递export interface IChildProps { parentTellMe: string;}export interface IChildState {}export class Child extends React.Component<IChildP...

2019-09-04 17:12:46 359

原创 react之组件基本用法

react之组件基本用法代码：github-learn-react普通组件代码import React from 'react';import './regular.scss';export interface IRegularProps {}export interface IRegularState {}export class Regular extends Rea...

2019-09-04 17:12:03 306

原创 create-react-app 添加 sass

#下载依赖npm install node-sass sass-loader --save-dev#修改webpack配置npm run eject在./config/webpack.config.js下的oneOf:中添加 { test: /\.scss$/, loaders: ['style-loade...

2019-08-20 16:14:29 217

原创 flex 布局

flex布局可有有两种flex、inline-flex。当设置为display为flex后子元素的float、clear和vertical-align属性将失效容器上的属性flex-direction属性值含义备注row主轴为水平方向，起点在左端。默认值row-reverse主轴为水平方向，起点在右端column主轴为垂直方向，起点在上沿...

2019-08-20 15:05:15 218

原创 npm 学习

npm 的使用命令概览zengwe$ npm --helpUsage: npm <command>where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, completion, config, create, ddp, dedupe, dep...

2019-08-14 11:34:20 1241

原创 console 的用法

console 的用法console.logconsole.log 就是打印对象，Element打印时就和选中dom检查一样, 可多对象打印let obj1 = { name: 'zengwe', gender: 'mal', age: 18, other: { career: 'font-end' }}let obj2 = { ...

2019-08-14 09:52:05 643

原创 angular 测试 ng test出错@angular-devkitild-angular

错误信息zengwe$ ng testYour global Angular CLI version (7.3.8) is greater than your localversion (6.1.0). The local Angular CLI version is used.To disable this warning use "ng config -g cli.warning...

2019-08-06 15:12:06 1039

font-size设置的是什么?line-height设置的是什么?各种行高是怎么计算出来的?你真的知道吗?1 从font-size讲起，说文字高度：当你按住鼠标左键选中一段文字的时候，这段文字背后会有一个颜色变化的区域，这个区域可以近似的视为是这段文字的content-area（内容区域）。又或者当我们给一行文字设置background的时候，文字背景所占的区域可以近似的视为是这段文字的c...

2019-08-05 09:54:37 6970 2

原创 JSON.stringify的使用

JSON.stringify 详细使用官方定义interface JSON { /** * Converts a JavaScript Object Notation (JSON) string into an object. * @param text A valid JSON string. * @param reviver A function...

2019-07-26 10:22:59 764

原创 rxjs 同时处理指定数量异步程序

描述现在有一百个数据操作，只能同时处理10个，当10个中有一个完成，下一个立马跟上代码// 需要处理的数据const data = [1, 2, 3,...]// 异步处理函数const asyncFn = d => Promise.resolve(d)from(data).pipe(mergeMap(asyncFn, 10))...

2019-05-15 16:14:17 936

原创 angular 报错 JavaScript heap out of memory

JavaScript heap out of memory原因是angular内存溢出解决办法node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve

2019-05-05 15:07:28 1482

原创使用 // @ts-ignore 隐藏文件中的报错

ts中有时莫名报错// @ts-ignore 注释功能。这些注释是一种轻量级的方法来抑制下一行中出现的任何错误。

2019-03-28 17:48:15 19504

原创 JavaScript 各种类型判断

变量function User(){}User.prototype.callName=function(){return 'zengwe'}let num = 123;let str = '123';let bool = true;let und = undefined;let nul = null;let obj = new User();let obj2 = {};let ...

2019-03-18 19:26:35 186

原创 nestjs 试水

安装$ npm i -g @nestjs/cli$ nest info _ _ _ ___ _____ _____ _ _____| \ | | | | |_ |/ ___|/ __ \| | |_ _|| \| | ___ ___ | |_ | |\ `--. | / \/| ...

2019-03-17 23:41:45 1432

原创 angular 实现自定义类似ngModel的双向绑定

前言在angular中[(ngModel)]等价于[ngModel]&(ngModelChange),所以自定义的双向绑定实现同样的两个功能即可代码two-way.component.tsimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Component({ se...

2019-03-17 18:58:34 1173 1

原创 Set、Map、WeakSet 和 WeakMap 的区别

SetMDN：Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。let a = new Set();undefineda.add(1);// 输出 Set(1) {1}a.add(2);// 输出 Set(2) {1, 2}a.add(2);// 输出 Set(2) {1, 2}从代码上可以看出去重但是let b = new Set();b.add(...

2019-03-13 23:48:36 2317

原创 Angular 自定义组件实现 ngModel

自定义组件需要实现数据双向绑定angular中ControlValueAccessor实现model->view,view->model,从而实现的双向绑定自定义组件需要双向绑定即实现ControlValueAccessor的接口即可代码app.componentimport { Component, OnInit, Input, forwardRef, ViewChild ...

2019-03-07 19:52:12 5664 2

原创 Angular报错: Error encountered in metadata generated for exported symbol

错误信息Error encountered in metadata generated for exported symbol 'Calculate';Metadata collected contains an error that will be reported at runtime: Only initialized variables and constants can be ref...

2019-02-20 14:17:17 1053 1

原创 react学习笔记路由(1)

react 路由(1)install相应的模块zengwe:try-router$ npm install --save react-router-domzengwe:try-router$ npm install --save-dev @types/react-router-domreact-router-dom这个包比react-router要多一下东西,具体可百度,这个为type...

2019-02-12 11:18:38 210

原创包的版本号的含义

版本号通常在package.json中都有一个三位的版本。"@angular/animations": "~7.1.0"各个位置的版本号的含义第一位主版本号，俗称大版本升级。标志这大变化，有可能不兼容上一个版本。第二位次版本号一般进行常规的新增或修改API，对于下一个大版本号要删除的API给予提示。最后三位仅仅是修复bug偶尔还会看到-×××的tag如alpha、beta、...

2019-01-09 22:24:01 1155

原创解决angular依赖注入的弱依赖实现解耦

解决angular依赖注入的弱依赖实现解耦在angular的官方hero的demo中依赖注入的使用为import { Component } from '@angular/core';import { ProjectService } from './services/project.service';@Component({ selector: 'app-root', templ...

2019-01-09 11:40:45 1566 2

原创 angular library 打包多入口

构建自己的私有library太零散希望达到想@angular那样将相同种类的包放到一个文件夹下如：zengwe:boundary$ ll node_modules/@angular总用量 48drwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:35 animationsdrwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:3...

2019-01-09 11:01:42 1547

原创 linux 代码统计

2018-12-25 19:10:30 292

原创 JavaScript 垃圾回收

引用计数let a = { name: 'zengwe'};let b = a;// a 对象引用次数加1a = null;// a 对象引用次数减1b = null；引用次数减为0，此时退出这个环境时变量的内存将被回收循环引用function test() { let a = {name: 'zengwe'}; let b = {age: 18}; a.name = ...

2018-12-24 22:41:10 146

原创 typescript 设计模式--桥模式

意义与作用隔离原来一个类中两个或多个维度的变化按照多个维度变化又不相互影响减少产生类的个数提高了可扩展性举例电脑的可分为pad、笔记本、台式，电脑的品牌可能又分为苹果、联想、小米、戴尔，如果每增加一个类型比如pad就是后来才有的，那就需要每个品牌都要创建，反过来也是一样，所以要分离品牌和电脑的类型interface IBrand { name: string; i...

2018-12-19 23:09:58 201

原创 angular ng-template 灵活运用

用处可以随意调整组件显示的位置，个人觉得在嵌套组件中最方便举例app.component.tsimport { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';@Component({ selector: 'app-root', styleUrls: ['./app.compone...

2018-12-19 22:28:55 6138

原创 angular ng-template

解释其实和html5的template是一样的就是将模板保存到html中然后需要时再抓出来显示到指定位置代码import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';@Component({ selector: 'app-root', // templateUrl: './...

2018-12-19 22:00:05 3661 1

原创 react 组件通信

父级组件和子组件或者子组件与父组件通信import React, { Component } from 'react';import './App.css';import { LifeCycleComponent } from './pages/life-cycle';class App extends Component<any, {count: number}> { s...

2018-12-05 23:01:36 318

原创 angular library application 开发

前言从angular6开始已经有library和project的开发命令applicationapplication的相关命令zengwe@zengwe-PC:ng-testing$ng generate application --helpGenerates and/or modifies files based on a schematic.usage: ng generate a...

2018-12-04 23:03:38 1577

原创 react组件基本使用（typescript）

如果是用JavaScript开发可以忽略一切typescript的东西也是可以照常执行的新建一个组件interface Component<P = {}, S = {}, SS = any>{ // ..... }组件基类的接口定义，P表示props，S表示state，SS未知,默认可以啥也不传新建import React, { Component } from 'r...

2018-12-04 22:03:49 6225

原创 npm 私有库搭建- verdaccio (一)

安装npm install -g verdaccio --unsafe-perm加上–unsafe-perm的原因会导致某些权限上的问题，哪怕是用root去执行也是存在权限问题错误信息如下gyp WARN EACCES user &quot;root&quot; does not have permission to access the dev dir &quot;/root/.node-gyp/10.13.0&quot;...

2018-12-04 20:55:14 1984

转载 linux vscode文件保存不刷新不从新编译问题（来源于网络）

看到too many open files可能想到fs.file-max参数，其实还受下面参数影响：fs.inotify.max_queued_events：表示调用inotify_init时分配给inotify instance中可排队的event的数目的最大值，超出这个值的事件被丢弃，但会触发IN_Q_OVERFLOW事件。fs.inotify.max_user_instances：表示每...

2018-11-30 15:45:14 4259

原创 linux下配置chrome代理

需要配置的理由在linux用ss启动系统代理，我艹全走代理了，很慢，所以想指定路由走代理配置方法直接命令行启动sudo google-chrome --proxy-server=“socks://127.0.0.1:1010” --no-sandbox --user-data-dirsudo 是必须的不然–no-sandbox就无效，代理走不起来–user-data-dir 我也不清...

2018-11-29 22:27:17 7978 2

原创 angular 依赖注入3---作用范围

依赖注入作用范围依赖注入可以来模块中注入，也可以在component中注入，两者可见范围还是有很大区别的具体可见范围提供器的作用域原则在模块中provider时对所有组件是可见的，所有组件都可以注入。在组件中provider时，只对他声明的组件和子组件可见，其他组件不可注入。在子模块中provider时，然后在组件中使用时依然使用的最先provider的那个实例。...

2018-11-01 10:14:21 311

原创 react学习-开篇

工具create-react-app安装npm install -g create-react-app当前使用版本 2.0.4（create-react-app -V）创建democreate-react-app demo1安装完成的目录命令运行 npm run start默认端口为3000测试 npm run test打包 npm run build需要对...

2018-10-24 21:30:42 187

原创 typescript 设计模式--装饰器模式

作用动态为一个对象添加新功能。同时不改变现有的功能。示例示例interface IStream{ read(); write();}class FileStream implements IStream{ public read() { } public write() { }}abstract class Decorate imp...

2018-10-24 21:00:14 558

原创 angular directive 实现自定义事件

directive通过directive可以获取到dom节点，并且可以在基础事件之上分装自定义的一些事件###例子host-listen.directive.tsimport { Directive, Output, EventEmitter, OnInit, Renderer, Renderer2, ElementRef } from '@angular/core';@Directi...

2018-10-22 14:23:12 2571

原创 typescript 类型映射（ReadOnly、Partial）

应用特点有时候需要一个类型，是依赖于上一个类型但是，对属性的要求去不同interface Person{ name: string; agent: number;}type Person2 = Readonly<Person>;type Person3 = Partial<Person>;class Test { run() { ...

2018-10-20 16:12:08 13879

原创 typescript 设计模式--观察者模式

模式定义在对象之间定义了一对多的依赖，这样一来，当一个对象改变状态，依赖它的对象会收到通知并自动更新。使用场景文件上传，并显示上传进度例子interface Progress { doProgress(percent: number);}class UploadFile { protected file: File; protected progresses:...

2018-10-20 15:31:53 476

原创 typescript 设计模式--策略模式

用到的地方1.代码中switch-case，if-else if这些比较多，并且可能扩展的2.需要安全地封装多种同一类型的操作时定义：策略模式定义了一系列的算法，并将每一个算法封装起来，而且使他们可以相互替换，让算法独立于使用它的客户而独立变化。例子： interface Cell { type: string; value: any; ...

2018-09-27 22:53:01 809

空空如也

空空如也