前端小技巧
文章平均质量分 56
「已注销」
这个作者很懒,什么都没留下…
展开
-
TypeScript 基本知识梳理
TypeScript vs JavaScriptTypeScript 是 “强类型” 版的 JavaScript,当我们在代码中定义变量(包括普通变量、函数、组件、hook等)的时候,TypeScript 允许我们在定义的同时指定其类型,这样使用者在使用不当的时候就会被及时报错提醒interface SearchPanelProps { users: User[], param: { name: string; personId: string; }, setParam:原创 2021-03-21 19:00:37 · 546 阅读 · 0 评论 -
微前端 使用笔记
微前端 工具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 · 526 阅读 · 0 评论 -
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 · 421 阅读 · 0 评论 -
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 · 138 阅读 · 0 评论 -
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 · 2378 阅读 · 0 评论 -
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 · 725 阅读 · 0 评论 -
Less使用笔记 ( CSS 预处理器 )
什么是CSS 预处理器?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等原创 2020-08-13 17:36:02 · 428 阅读 · 0 评论 -
Cordova 转换多端应用 (angular 配置为例)
CordovaCordova 是用于使用HTML,CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器,用于将我们的网络应用程序与本机移动功能连接。默认情况下,Web应用程序不能使用本机移动功能。这就是Cordova进来的地方。它为网络应用和移动设备之间的连接提供了桥梁。 通过使用cordova,我们可以使混合移动应用程序,可以使用摄像头,地理位置,文件系统和其他本地移动功能。打包配置流程如下更改打包之后的文件位置: "build": { "builder": "原创 2020-08-11 16:51:38 · 383 阅读 · 0 评论 -
组件之间的通讯方式
props emit父组件与子组件通信,通过属性传值的方法。子组件通过事件传值与父组件 (子 emit=>change 父)监听跨级组件里用监听数据的改变状态管理(redux,vuex,ngrx)父子组件,兄弟组件,跨级组件都可以利用状态管理进行通讯refsrefs如果作用在dom元素上,引用的就是dom元素;如果作用在组件上,引用的就是该组件,<component refs="child01" /> // this.$refs..child01 con原创 2020-08-10 16:03:34 · 644 阅读 · 0 评论 -
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 · 1168 阅读 · 0 评论 -
ES6 使用笔记
ES6 是一种客户端脚本语言规范;(ES2015,ES2016,ES2017等,ES2015 则是正式名称,特指该年发布的正式版本的语言标准)let 和 const 命令 (只在声明所在的块级作用域内有效)let 块级定义变量,只在let命令所在的代码块内有效。const 声明一个只读的常量。一旦声明,常量的值就不能改变。const一旦声明变量,就必须立即初始化ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之原创 2020-06-30 17:19:00 · 1157 阅读 · 0 评论 -
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 · 194 阅读 · 0 评论 -
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 · 605 阅读 · 0 评论 -
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 · 578 阅读 · 0 评论 -
提高网站性能小记
尽可能的减少 HTTP 请求数通过图片、css、script、文件等等增加http请求数,减少这些元素的数量就能减少响应时间。使用CDN(内容分发网络)通过增加CDN,判断用户来源就近访问服务器取得所需的内容。添加Expire/Cache-Control头浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。启用Gz...原创 2020-04-29 15:05:12 · 148 阅读 · 0 评论 -
正则表达式手记
修饰符 (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 · 1619 阅读 · 0 评论 -
不同类型的数组快速去重(适用于 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 · 366 阅读 · 0 评论 -
ReactJS & antd 环境中项目上传图片后压缩(lrz的使用)
lrz说明 用于:在客户端压缩好要上传的图片可以节省带宽更快的发送给后端,特别适合在移动设备上使用。解决了很多问题:图片扭曲、某些设备不自动旋转图片方向,没有jpeg压缩算法..不支持new Blob,formData构造的文件size为0..还有某些机型和浏览器(例如QQX5浏览器)莫名其妙的BUG..按需加载(会根据对应设备自动异步载入JS文件,节省不必要带宽)原生JS编写,不依赖例如原创 2017-12-26 15:30:45 · 6085 阅读 · 9 评论 -
PS 制作 图片放大镜效果 和 鼠标点击效果
* 图片放大镜效果*选取一张图片 ——> 选区 ——> 放大;选区描边 ——> 加阴影;锐化 ——> 进一步锐化;* 鼠标点击效果*选区(小区是1.41),加颜色描边 ,颜色为#47BEFD加外发光 颜色为#47BEFD原创 2018-01-12 10:42:36 · 2079 阅读 · 0 评论 -
React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)
react项目中利用dva脚手架,roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中,所以这个文件有1.1M。部署到服务器上,首次访问首页加载的会特别慢,这样会流失很多的用户。解决办法: gzip 压缩。GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来...原创 2018-03-21 18:08:57 · 18483 阅读 · 3 评论 -
jquery / javascript —— 常用方法总结
1. 创建时间戳 (都是以毫秒为单位,若以秒为单位,则 timestamp/1000) 第一种:(精确到秒)```var timestamp = Date.parse(new Date());``` 第二种:(精确到毫秒)```var timestamp = (new Date()).valueOf();``` 第三种:(精确到毫秒)```var time...原创 2017-12-06 15:43:27 · 590 阅读 · 1 评论 -
HTML常用颜色RGB值
通常页面底色: 常用的页面底色 #F4F4F4 引用背景灰色 #DEDEDE 比文字灰色略浅,比背景色深 文字灰色 #7A7A7A 比引用背景色深 比导航色浅 导航 #363636 比深黑字体略浅 大于H3开头的灰色 深黑字体色 2A2A2A 小于H3开头的灰色 通用禁用的颜色 #EFF3F8通用不能编辑的背景色 #FCFAF2...原创 2018-07-09 12:06:02 · 6794 阅读 · 0 评论 -
Fetch —— 中止尚未完成的接口请求
问题描述:在项目开发中会遇到用户在一个页面中多次点击之后,再点击下一个页面。但是会遇到上一个页面的接口请求还在pending当中,第二个页面的接口请求会排队等待。这样就会非常影响用户的体验,所以要做到离开一个页面的同时也中止这个页面上所有尚未完成的接口请求。问题解决:构造函数AbortController.AbortController()创建一个新的AbortControl...原创 2018-06-27 16:25:00 · 6235 阅读 · 1 评论 -
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 · 7852 阅读 · 0 评论 -
angular7+ionc4 开发笔记
基本语法1、*ngFor原创 2019-05-09 16:10:05 · 536 阅读 · 0 评论 -
angular7 + ng-zorro-antd 开发问题小记
1、通过ip地址访问同一局域网下已经启动的angular项目ng serve --host 192.168.1.136(ip地址)原创 2019-05-16 18:12:05 · 3221 阅读 · 1 评论 -
百度云存储 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 · 1567 阅读 · 0 评论 -
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 · 275 阅读 · 0 评论 -
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 · 508 阅读 · 0 评论