「已注销」-CSDN博客

原创不同类型的数组快速去重（适用于 vue,react,angular,js）

moval是什么?数组去重，是开发项目中经常使用到的工具类。moval源码仓库：下載地址moval使用教程帮助文档:1、安装下载$ npm install --save moval2、快速使用引入const tools = require('moval');数组快速去重tools.Simplify(array)json数组以某个key值进行去重tools....

2019-11-19 15:24:06 322

原创 React组件中的constructor 概述

在react官网中，我们看到经常会有这样声明组件的，但是我们自己在写的时候很少会使用constructor，super，那么这两个方法到底是用来做什么的呢？在写react中一定要写吗？我们在下面具体看一下：class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return (

2021-03-22 15:49:33 1343 1

原创 React + React Hook + TS4

项目初始化与配置create-react-app 创建项目 tsconfig.json配置详解提交代码自动格式化【prettier检验代码格式】Pre-commit Hook //提交代码之前进行代码格式化检查提交代码时commit message是否符合规范[ build: 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 ci: 主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle

2021-03-21 19:15:05 478 3

原创 TypeScript 基本知识梳理

TypeScript vs JavaScriptTypeScript 是 “强类型” 版的 JavaScript，当我们在代码中定义变量(包括普通变量、函数、组件、hook等)的时候，TypeScript 允许我们在定义的同时指定其类型，这样使用者在使用不当的时候就会被及时报错提醒interface SearchPanelProps { users: User[], param: { name: string; personId: string; }, setParam:

2021-03-21 19:00:37 497

原创为什么react列表要加key

为什么列表要加 key 属性，以及为什么用 index 是不好的遍历对象的每一个属性深度对比是非常浪费性能的React 使用列表的key来进行对比，如果不指定，就默认为 index 下标那么，为什么不指定 key/用 index 下标是不好的呢？假设现在有这样一段代码：const users = [{ username: "bob" }, { username: "sue" }];users.map((u, i) => <div key={i}>{u.username}&

2021-03-21 18:59:54 225

原创 Rxjs 使用笔记

简介Rxjs的内容可以概括为一个核心三个重点，核心就是Observable和Operators，三个重点分别是：observerSubjectschedulers其中众多的operator一直是我门学习Rxjs路上的拦路虎，文章主体内容也将是围绕这部分内容讲解。简单的例子下边用一个简单的例子来展示下Rxjs如何工作。var observable = Observable .create(function(observer) { observer.next('Jerr

2020-12-16 10:59:06 417

原创微前端使用笔记

微前端工具ngx-planet项目流程1、创建主项目ng new main 2、创建子项目cd mainng generate application first-appng generate application second-app3、安装@worktile/planetnpm i @worktile/planet --savenpm i @angular/cdk --save...

2020-10-19 17:12:29 477

原创 angular library构建笔记

构建 libraryng new project --createApplication=false （-- cd project）参数默认为true，就是说当你使用ng new project的时候，ng会自动创建可以供你直接上手编程的应用（application）ng g library library-name --prefix=ngx这里的prefix参数很有用，在你引用library的时候需要加上这个prefix会显得你的library更加专业。比如想要引用这个libr

2020-10-19 09:53:05 522

原创 Angular 核心知识使用笔记

angular 结构性指令语法糖【*】常用的angular语法糖有： *ngif,*ngfor… <mat-icon *ngIf="task.reminder">alarm</mat-icon> 相当于 => <ng-template [ngIf]="task.reminder"> <mat-icon >alarm</mat-icon> </ng-template>angu

2020-09-08 09:57:42 652

原创 Angular 双向绑定&星号（*）前缀

星号是一个用来简化更复杂语法的“语法糖”这里的 *ngIf 会在 hero 存在时显示英雄的名字。<div *ngIf="hero" class="name">{{hero.name}}</div>你可能注意到了指令名的星号（*）前缀，并且困惑于为什么需要它以及它是做什么的。从内部实现来说，Angular 把 *ngIf 属性翻译成一个元素并用它来包裹宿主元素，代码如下：<ng-template [ngIf]="hero"> <div cla

2020-09-07 16:18:56 715

原创 Angular 路由

路由顺序路由的顺序很重要，因为 Router 在匹配路由时使用“先到先得”策略，所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由，然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个，因为它匹配每一个 URL，只有当其它路由都没有匹配时，Router 才会选择它。获取路由信息 ( ActivatedRoute)import { Router, ActivatedRoute, ParamMap } from '@angular/router';....constructo

2020-09-04 11:01:23 254

原创 Lodash 速查表

Array数组_.chunk(array, [size=1]) ：将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。_.chunk(['a', 'b', 'c', 'd'], 3);// => [['a', 'b', 'c'], ['d']]_.compact(array)：创建一个新数组，包含原数组中所有的非假值元素。例如false, null, 0, “”, undefi

2020-09-03 17:53:44 357

原创 JS 数组的reduce

arr.reduce((prev,cur,index,arr)=>{}, init);或者arr.reduce((prev,cur,index,arr)=>{},);arr 表示将要原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init 表示初始值。常用的参数只有两个：prev 和 cur。example:数组求和，求乘积

2020-09-01 11:25:00 105

原创 Typescript 字典类型

集合、字典和散列表可以存储不重复的值。字典和集合相似，集合以[值，值]的形式存储元素，字典是以[键，值]的形式来存储元素，字典也叫做映射set(key,value) 添加元素 set(key: any, val: any) { this.items[key] = val; }delete(key) 通过键删除元素 delete(key: any): boolean { if (this.has(key)) { delete this.items[key]

2020-09-01 11:07:30 2156

原创 Less使用笔记 ( CSS 预处理器 )

什么是CSS 预处理器？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等

2020-08-13 17:36:02 297

原创 Cordova 转换多端应用（angular 配置为例）

CordovaCordova 是用于使用HTML，CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器，用于将我们的网络应用程序与本机移动功能连接。默认情况下，Web应用程序不能使用本机移动功能。这就是Cordova进来的地方。它为网络应用和移动设备之间的连接提供了桥梁。通过使用cordova，我们可以使混合移动应用程序，可以使用摄像头，地理位置，文件系统和其他本地移动功能。打包配置流程如下更改打包之后的文件位置: "build": { "builder": "

2020-08-11 16:51:38 343

原创组件之间的通讯方式

props emit父组件与子组件通信，通过属性传值的方法。子组件通过事件传值与父组件（子 emit=>change 父）监听跨级组件里用监听数据的改变状态管理（redux,vuex,ngrx）父子组件，兄弟组件，跨级组件都可以利用状态管理进行通讯refsrefs如果作用在dom元素上，引用的就是dom元素；如果作用在组件上，引用的就是该组件，<component refs="child01" /> // this.$refs..child01 con

2020-08-10 16:03:34 598

原创 Angular状态管理框架NgRx

NgRx : Reactive State for Angular ，是一款集成RxJS的Angular状态管理库。它和Redux的核心思想相同，但使用RxJS实现观察者模式。它遵循Redux核心原则，但专门为Angular而设计。ts配置别名：在compilerOptions中添加字段paths来进行声明映射 "paths":{ "@/*": ["src/app/*"] //之后使用@/就相当于使用src/app/ }View ：展示使用者的界面，例如： com

2020-08-10 15:54:57 1090

原创 Node 版本太高兼容操作

处理：在 \node_modules\stylus\lib\nodes\index.js 文件中加入exports.lineno = null;exports.column = null;exports.filename = null;

2020-07-20 10:22:52 5592 1

原创 ES6 使用笔记

ES6 是一种客户端脚本语言规范；（ES2015,ES2016,ES2017等，ES2015 则是正式名称，特指该年发布的正式版本的语言标准）let 和 const 命令（只在声明所在的块级作用域内有效）let 块级定义变量，只在let命令所在的代码块内有效。const 声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之

2020-06-30 17:19:00 1015

原创 TypeScript 使用笔记

TS 是 JS的超集，它可以编译成纯JS。TS可以在任何浏览器、任何操作系统、任何平台上运行TS 数据类型类型注解let flag : boolean = false;变量后面跟的冒号后面的类型就是这个变量的类型注解。类型的注解是可选的，不加就变成了JS，因为TS设计目标就是：兼容JS，减少JS迁移TS的成本。类型描述Boolean布尔类型Number数字类型String字符串类型Array与JS相同; 增加了泛型数组, 元组(Tuple)E

2020-06-30 17:18:49 521

原创 nrm 使用笔记

NRMNRM(Npm Registry Manager )是npm的镜像源管理工具，有时候国外资源太慢，就可以使用 nrm 快速地在 npm 源间切换。安装在命令行执行命令，全局安装nrmnpm install -g nrm使用执行命令查看可选的源：nrm ls其中，带*的是当前使用的源，上面的输出表明当前源是官方源。切换如果要切换到taobao源，执行命令nrm use taobao测速nrm test npm注意：npm : 服务器在国外，导致于国内使用非

2020-06-11 10:37:05 160

原创提高网站性能小记

尽可能的减少 HTTP 请求数通过图片、css、script、文件等等增加http请求数，减少这些元素的数量就能减少响应时间。使用CDN（内容分发网络）通过增加CDN，判断用户来源就近访问服务器取得所需的内容。添加Expire/Cache-Control头浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。启用Gz...

2020-04-29 15:05:12 131

原创 navicat 连接 mysql失败

出现 Client does not support authentication protocol requested by server…的解决方案mysqladmin -u root -p password 123456qmysql -u root -pALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password...

2020-03-27 10:11:20 374

原创正则表达式手记

修饰符（g,i,m）g : 全文进行匹配（不加则匹配至第一个即停止）i : 忽略大小写（默认大小写敏感）m : 多行搜索“He is a boy,Is he?”.replace('/\bis\b/gi','0')=> "He 0 a boy,0 he?"元字符(*,.,[],(),{},+,?,$,^,|,,)[] 字符类，满足其中一个即可 [ab...

2020-03-17 09:44:10 1503

原创 angular 资源总结

自动生成二维码（angular2-qrcode） git地址导入 import {QRCodeModule} from "angular2-qrcode"; .... @NgModule({ imports: [ QRCodeModule, ], declarations: [Component] })使用： <qr-...

2020-03-10 14:39:35 243

原创 gitbook 使用笔记

问题解决：1、报错信息：Error loading version latest: Error: Cannot find module ‘internal/util/types’问题解决：这个问题原因在于graceful-fs引入了node模块internal/util/types，此模块用处是给vm引入内置js文件，具体作用不可知也不想去考究了，重点在于此法已被废除，只有低版本nodejs...

2019-09-24 16:33:17 459

原创 babel7 升级

babel6:升级至babel7 :安装其中babel/preset-env相当于 es2015 ，es2016 ，es2017 及最新版本。 npm install -D babel-loader @babel/core @babel/preset-env webpack1、如要使用Promises等，还需要引入Babel的 polyfill。（注意是–save）npm ins...

2019-09-24 12:04:50 249

原创百度云存储 BOS javascript sdk 开发问题小记 ( angular )

node.js 引用sdk直接在 index.html 中引入 <script src="https://bce.bdstatic.com/lib/@baiducloud/sdk/1.0.0-rc.10/baidubce-sdk.bundle.min.js"></script>使用时需要的信息初始化BosClientdeclare var baidub...

2019-08-27 14:58:54 1451

原创 angular7 + ng-zorro-antd 开发问题小记

1、通过ip地址访问同一局域网下已经启动的angular项目ng serve --host 192.168.1.136（ip地址）

2019-05-16 18:12:05 3171 1

原创 angular7+ionc4 开发笔记

基本语法1、*ngFor

2019-05-09 16:10:05 512

原创 npm 使用笔记（ npm 开发笔记）

登录- npm login- 用户名- 密码- 邮件地址发布- npm publish删除- npm unpublish <项目名> --force

2019-04-16 16:37:16 245

原创 dva自定义组件及使用方法

1、表格①. 参数参数意义参数名参数类型是否必填默认值表格边框borderedboolean是-表格 columnscolumnsarray是-表格请求参数paramsobject是-表格请求地址requestUrlstring是-是否有表格侧边勾选框selectHiddenboolean否false...

2018-09-25 14:51:21 1755

原创 Git 命令记录

查看分支：git branch创建分支：git branch 切换分支：git checkout 创建+切换分支：git checkout -b 合并某分支到当前分支：git merge 删除分支：git branch -d

2018-09-20 15:28:13 289

原创 dva 使用笔记

1. model 与组件1) . 新建页面=&amp;gt;src/routrs/demo/demo.jsimport React from 'react';const demo = ()=&amp;gt;{ return &amp;lt;h1&amp;gt;demo is good false&amp;lt;/h1&amp;gt;};export default demo;2)

2018-07-31 13:43:23 760

原创 egg.js 使用笔记

脚手架安装1、安装$ npm i egg-init -g$ egg-init egg-example --type=simple$ cd egg-example$ npm i2、启动项目 npm run dev然后浏览器打开http://localhost:7001 就可以看到 “hellow,egg” 字样说明运行成功。基础编写1、静态资源（imag...

2018-07-13 14:19:01 7770

原创 HTML常用颜色RGB值

通常页面底色: 常用的页面底色 #F4F4F4 引用背景灰色 #DEDEDE 比文字灰色略浅，比背景色深文字灰色 #7A7A7A 比引用背景色深比导航色浅导航 #363636 比深黑字体略浅大于H3开头的灰色深黑字体色 2A2A2A 小于H3开头的灰色通用禁用的颜色 #EFF3F8通用不能编辑的背景色 #FCFAF2...

2018-07-09 12:06:02 6446

原创自造轮子：React, React-Redux, React-Router,Webpack搭建框架

项目创建以及配置1、新建空项目 npm init用来初始化生成一个新的package.json文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。如果使用了-f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的package.json文件。npm init 2、创建webpack.config.js 文件，简单...

2018-07-06 11:58:35 551

原创 Taro —— 开发微信小程序总结

Taro官网：https://nervjs.github.io/taro/GETTING-STARTED.html#安装及使用1、安装：npm install -g @tarojs/cli2、创建项目：taro init movies3、编译预览：小程序# npm script$ npm run dev:weapp# 仅限全局安装$ taro bu...

2018-06-29 09:41:03 3782 2

原创 Fetch —— 中止尚未完成的接口请求

问题描述：在项目开发中会遇到用户在一个页面中多次点击之后，再点击下一个页面。但是会遇到上一个页面的接口请求还在pending当中，第二个页面的接口请求会排队等待。这样就会非常影响用户的体验，所以要做到离开一个页面的同时也中止这个页面上所有尚未完成的接口请求。问题解决：构造函数AbortController.AbortController()创建一个新的AbortControl...

2018-06-27 16:25:00 6089 1

egg-notes.zip

cropper.css

buycar_svg

空空如也