xiaobing_hope-CSDN博客

原创 Element implicitly has an ‘any‘ type because expression of type ‘string‘ can‘t be used to index type

当typescript编写代码时出现这个报错怎么办？例如如下代码及声明interface IJobData { generation?: {id: number; name: string; code: string;}[] publishing?: {id: number; name: string; code:string;}[]}const method = ['generation', 'publishing']const originJobData = { g

2022-03-29 19:54:52 7878

原创 web api - mutationObserver

MutationObserver接口提供了监听对DOM树所做更改的能力。是DOM3 Events规范的一部分。构造函数MutationObserver()创建并返回一个新的MutationObserver，它会在指定DOM发生变化时被调用。方法disconnect()阻止MutationObserver实例继续接收通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会被调用observe()配置MutationObserver在Dom更改匹配给定选项时，通过其回调函数

2021-04-06 18:41:20 262

原创浏览器缓存小结

浏览器缓存是前端优化的一个重要手段，缓存可以带来很多好处：减少冗余数据传输，节省带宽减轻服务器的请求负担，有缓存就可以减少向服务器发送请求资源从缓存中读取，无需向服务器发送请求再等待返回，加快了客户端的访问速度但缓存带了了一个问题，就是如果文件更新了，但用户访问时浏览器读取的是缓存资源，则用户就获取不到最新的页面，影响用户使用。这种情况如何解决呢？浏览器缓存主要是指http缓存，其机制是根据http报文的缓存标识进行相应的操作。状态码含义200 from memory c

2021-04-01 15:09:27 200

原创前端应用--工程化主题切换功能

随着各个应用平台和网站都开始支持深色模式，相较于传统的页面配色方案，深色模式具有较好的降噪性，也能让用户的眼睛看内容更加舒适。那么对于前端开发来说，如何高效的支持深色模式呢？这里的高效指的是工程化、自动化方案，不需要在开发过程中hard coding。PostCSS原理及相关插件能力postcss是一款使用JavaScript编写的用于编译css的工具，具有良好的插件性，非常有利于开发者扩展。原理： PostCSS接受一个css文件，并提供了插件机制，提供给开发者分析、修改css规则，具体实现方式是

2021-03-28 22:47:19 679

原创前端性能优化 - 代码拆分和按需加载（减少bundle size）

代码拆分和按需加载的设计决定着工程化构建的结果，将直接影响应用的性能表现，因为合理的加载时机和代码拆封能够使初始代码体积更小，页面加载更快。按需加载和按需打包区别按需加载表示代码模块在交互需要时，动态引入；而按需打包针对第三方依赖库，及业务模块，只打包真正在运行时可能会需要的代码。按需打包的方式使用ES Module支持的Tree Shaking方案，在使用构建工具打包时，完成按需打包使用以babel-plugin-import为主的Babel插件，实现自动按需打包Tree Shaking实

2021-03-21 22:41:54 1307

原创 Monorepo + lerna & rush.js

Monorepomonolithic repository 单体式仓库，与之对应的是Multirepo（Multiple repository）Multirepo是比较传统的做法，即每个package都单独使用一个仓库来进行管理Monorepo是吧所有相关的package都放到同一个仓库进行管理，每个package独立发布。如React、Babel、VueMultiRepo方式允许多元化发展（各项目可以有自己的构建工具、依赖管理策略、单元测试方法）。虽然拆分子仓库、拆分子npm包是进行项目隔离的天

2021-03-15 17:11:52 1704 1

原创 rush.js基础

Rush方案多项目并存下，Symlink实现依赖只需一套，无重复安装提供项目间的自动link多线程构建多项目，加快构建速度自动检测有改动的项目，按配置产出版本号和changelogSymlink（符号链接）Rush一次性安装全部原始依赖在Root下的common/temp目录下，从该目录下提供Symlink给单个项目引用。Symlink只是提供指针，这样保证了对于依赖本身的更新会实时展现在项目中，且依然保有原有各项目的node_modules的结构Rush支持pnpmSymlink帮

2021-03-03 15:28:00 1587

原创 Typescript学习笔记四 - 第三方库的使用

第三方库的常见使用方式主要分为：script标签直接引入npm包引入（npm install 方式）其中npm库的形式又分为：有typescript版本的库，即声明文件和源码放在一起，则不需任何配置，直接使用源码中无声明文件，但@types里有对应的声明文件，可直接安装使用，不需自己手动写声明文件（npm install @types/jQuery）更推荐的是使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQ

2020-10-19 19:39:20 1337

原创 Typescript学习笔记三 --- 声明文件

声明语法declare var声明全局变量declare function声明全局方法declare class声明全局类declare enum声明全局枚举类型declare namespace声明全局对象interface和type声明全局类型export导出变量export namespace导出（含子属性的）对象export defaultES6 默认导出export =commonjs 导出模块export as namespaceUMD 库声明全局变量declare g

2020-10-15 18:03:10 1266

原创浏览器原生支持base64编解码

浏览器原生支持base64编解码在之前的开发过程中，遇到base64的编解码，习惯性的去寻找了开源的base64编解码库，如base64.js使用方式很简单，一般开源的库都会提供对应的使用文档今天才突然发现，原来浏览器原生支持base64编解码，引入外部依赖库，简直是多次一举！！atob和btoa实际上，从IE10+浏览器开始，所有浏览器就原生提供了Base64编码解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。方法名就是atob和btoa，具体语法如下：Bas

2020-09-03 14:29:19 1194

原创检测js数据类型的方法总结

js中数据类型分为两大类，基础类型和引用数据类型，主要有：基本数据类型NumberStringBooleanNullUndefinedSymbol复杂数据类型ArrayFunctionObject检测js中的数据类型常用的方法有：typeofinstanceofObject.prototype.toString对比一下这三种方法的优缺点：typeof方...

2020-04-28 17:00:27 150

原创 javascript -- this指向问题

看如下代码：var bar = { myName: 'time.geekbang.com', printName: function() { console.log(myName) }}function foo () { let myName: 'geek' return bar.printName}let myName = 'g...

2020-03-05 15:38:42 219

原创 axios发送异步请求文件，并下载文件到本地

背景：业务上有这样一个需求：一个列表数据，通过条件查询筛选出目标列表数据，然后将这些目标列表数据导出到本地后端提供了一个post的异步请求接口，并返回了文件（此处后端逻辑应该是接收到查询条件，去数据库中筛选目标数据，并生成一个excel表格，返回给前端）axios发送异步post请求常见方式：axios.request({ url: '/***/getFile', method: ...

2019-12-03 11:26:30 3917 1

原创 git常用指令

修改本地分支名称git branch -m old_branch new_branch

2019-10-09 10:32:07 131

原创数据类型

数据类型ECMAScript标准规定了7中数据类型，这7种数据类型又分为两大类原始类型对象类型原始类型：NullUndefinedNumberStringBooleanSymbol：一种实例是唯一且不可改变的数据类型对象类型：Object：包含常用的Array、Function、Object变量的存储在javascript中，每个变量在内存中都需要一些...

2019-09-05 15:09:11 124

原创常用linux指令 - 关于端口

netstat 工具检测开放端口：netstat -anlp | grep 3306 查看3306端口是否开放telnet工具检测开放端口telnet ip port 如：telnet 10.202.29.443 8080查看端口开放情况：iptable -L -n开放某个端口iptables -I INPUT -p tcp --dport 8099 -j ACCE...

2019-01-15 16:09:53 288

原创 ecodeURI、encodeURIComponent、escape区别

Url的编码格式采用的是ASCII码，而不是Unicode，也就是说你不能在Url中包含任何非ASCII字符，例如中文，如若包含特殊字符，都需要进行url编码，否则会导致服务器识别错误。URl 中只允许包含英文字符（a-zA-Z）、数字（0-9）、-_.~4 个特殊字符及所有保留字符保留字符 - URL编码值空格 - %20" - %2...

2018-11-30 16:08:56 474

原创前端项目部署 - docker

dockerdocker的概念在这里就不在累述，大家google一下都能得到很详细的描述。

2018-10-31 19:39:37 3218 1

原创 js数据结构 -- 链表, 双向链表，循环链表

数组作为js常用的数据结构，存取元素都非常的方便，但是其内部的实现原理跟其他计算机语言对数组的实现都是一样的。由于数组在内存中的存储是连续的，所以当在数组的开头或者中间插入元素时，内部都需要去移动其他元素的位置，这个移动其他元素的成本很高。而链表存储有序的元素集合，但不同于数组，链表中的元素在内存中的存放并不是连续的，每个元素有一个存储元素自身的节点和一个指向下一个元素引用（也称为指针）的...

2018-05-19 15:53:20 1411 1

原创函数柯里化 - 函数链式调用 - lazyman

实现链式调用实现 add函数，add(1)(2)(3)(4)输出10，然后考虑拓展性// 解析为add(1)返回函数A，A(2)返回函数B, B(3)返回函数Cfunction add(num) { var sum = 0; sum += num; return function(a) { sum += a; return functi...

2018-03-13 19:08:04 2336 1

原创 Object.defineProperty方法

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。“`// 语法:/* * @param: obj:需要定义属性的对象; * prop:需要定义或修改的属性； * ...

2018-03-11 17:22:03 10744

原创 js数组去重与去扁平化

数组去重 var arr = [1, 43, 4, 3, 2, 4, 3]; // 去重后 arr = [1, 43, 4, 3, 2]传统方法，for循环实现function dedupe(arr) { var rets = []; for (var i = 0; i < arr.length; i ++) { if (!...

2018-03-06 14:49:59 1072 1

转载 XSS攻击及防御

本文来自：高爽|Coder，原文地址：http://blog.csdn.net/ghsau/article/details/17027893，转载请注明。 XSS又称CSS，全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户...

2018-02-26 11:59:35 385

原创 TypeScript学习笔记二 -- 类、接口、模块

类class Person { name; eat() { console.log('im eating'); }}var p1 = new Person(); // 类的实例化p1.name = 'batman';p1.eat(); // im eating访问控制符： - public(默认): public的属性和方法在类的内部和外部都

2018-01-03 17:52:00 2241

原创 js将图片转为base64编码 && js将base64编码图片转为Blob格式

将图片转为base64编码格式function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image(); img.crossOrigin = '

2017-12-18 18:08:43 8535

原创 TypeScript学习笔记一

typescript声明变量类型 // 字符串类型声明var myname: string = 'chris';// 将myname声明为string类型myname = '123'; // 会提示myname为string类型，不能将数字赋给myname// 但是这种报错提示，并不会在编译后的js代码中报错，因为es5没有类型检测var age: number = 13; //

2017-12-13 16:59:44 1178

原创 js字符与ASCII码互转的方法

大写字母A-Z对应的ASCII码值是65-90 小写字母a-z对应的ASCII码值是97-122将字母转为ascii嘛的方法：var str = "A";str.charCodeAt(); // 65var str1 = 'a';str1.charCodeAt(); // 97将ascii码转为对应字母的方法：var num = 97;String.from...

2017-11-27 15:11:14 117735 4

原创 css相关

css的优先级行内样式（inline style）> ID选择符 > 样式（class）> 伪类（pseudo-class）和属性选择符（attribute）> 标签选择符伪类： a:link; a:visited等伪对象选择器：div:first-letter; li: first-child（选择属于其父元素的首个子元素的第一个 li 元素）多重css样...

2017-10-25 17:34:26 263

原创怎样判断js脚本是否加载完，并在加载完后进行操作

在工作过程中，经常会遇到按需加载的需求，即在脚本加载完成后，返回一个回调函数，在回调函数中进行相关操作，那如何去判断脚本是否加载完成了呢？可以对加载的js对象使用onload来判断，jsDom.onload // ie6、7不支持js.onload方法，使用js.onreadystatechange来解决 js.onreadystatechange来跟踪每个状态的变化（loading、load

2017-10-23 14:26:11 22005 1

原创 forEach与map的使用与区别

js中，经常需要对数组进行遍历操作，对数组进行遍历操作可以使用Array提供的forEach方法和map方法那两者在使用上有啥区别呢？分别在什么情况下使用呢？forEach()方法对数组的每一个元素都执行一次提供的函数let a = ['a', 'b', 'c'];a.forEach((item) => { console.log(item);});// a// b// c语法： a

2017-08-09 15:10:45 9551 1

原创 npm-node相关及 git常用命令

I. 临时使用npm源// 临时从淘宝的镜像源安装node-sassnpm --registry https://registry.npm.taobao.org install node-sassII. 持久使用npm源 // 设置npm的源为淘宝的镜像源npm config set registry https://registry.npm.taobao.or...

2017-07-03 14:31:19 768

原创 vue踩坑记录

vue中通常数据是单向传递的，即父组件通过props属性将数据传递给自组建，不能逆向传递数据，如果需要双向数据绑定，则需自己实现在vue2.0种组件的props的数据只能单向流动，组件内只能被动接受父组件传递过来的数据，但是在自组建内，不能修改由外层组件传递过来的props数据。

2017-05-22 18:25:27 468

原创对象数组通过对象的属性进行排序

最常见的对数组进行排序，可以用sort()方法，按照数组中元素的首字母或者数字大小进行排序var arr = [2,5,13,7,4,9,1];var arr1 = arr.sort();console.log(arr); // [1, 13, 2, 4, 5, 7, 9]console.log(arr1); // [1, 13, 2, 4, 5, 7, 9]sort()方法会改变原来的

2017-03-31 00:11:38 45782 6

原创 python学习二----内置数据结构

Python内置数据结构学习1. 列表List列表list可以实现增加，删除，查找操作>>> list = ['dog','cat','mouse'];>>> list['dog','cat','mouse']1-1. 列表添加元素，append(value)>>> list.append('monkey');>>>list['dog','cat','mouse

2017-02-17 21:47:29 572

原创计算机基础知识--TCP

TCP相关知识TCP（传输控制协议） tcp是面向连接的，在通信前需要首先建立连接，通信结束时需要释放连接。 tcp特点 tcp提供可靠交付服务：tcp发送的数据无重复，无丢失，无错误，与发送端顺序一致 tcp是面向字节流的：tcp以字节为单位 tcp提供全双工通信：tcp的两端既可作为发送端也可作为接收端一条tcp连接的两端只能有两个端点：tcp只能提供点到点的通信t

2017-02-15 12:30:03 473

原创 Javascript中数据类型&深浅拷贝二

数据类型：Javascript中有5种基本数据类型（简单数据类型），分别为：Undefined, Null, Boolean, Number和String；同时还含有一种复杂数据类型，即对象（虽然js中一切皆为对象）其中Undefined和Null的区别为： Undefined: 其实是已申明，但是并未赋值的变量，输出的结构就是undefined Null：是一个不存在的对象的结果例如

2017-02-14 11:39:51 545

原创 express中的路由规则及获取请求参数方法

express中常见的路由规则主要使用的路由规则是get和post两种，即var express = require('express');var app = express();app.get(); // get和post两种请求方式app.post();app.get()和app.post()的第一个参数为请求路径，第二个参数为处理请求的回调函数；回调函数有两个参数，分别为req

2017-02-13 11:52:53 6519

原创 dependencies和devDependencies的区别

dependencies与devDependencies的区别一个node的package.json中有两种依赖，一种是dependencies，另一种是devDependencies，那么两者有啥区别呢？ dependencies：依赖的项是正常运行该包时所需要的依赖项 devDependencies：开发过程中需要的依赖项，例如一些进行单元测试的包。

2017-02-09 17:44:59 2420

原创 express将简单的服务跑起来过程

简单运行步骤1. 安装/* 进入项目文件中*/$ npm initentry point: (app.js) /*指定项目入口文件*/$ npm install express --save /* 下载express */2. 编写入口文件app.jsvar express = require('express');var app = express(); app.get('/',fun

2017-01-19 15:01:25 2833

原创 es6语法学习

letes5中没有块级作用域的概念，只有全局作用域和函数作用域，在if或者for循环定义变量的时候，导致变量变成全局作用域中变量； let定义的变量只在let所在的块级作用域中有效，不会污染全局变量。var a = [];for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6]();

2017-01-19 14:53:54 501