- 博客(38)
- 收藏
- 关注
RSS订阅
原创 笔记（持续更新~~~）
第一周react中props.children相当于vue里slot插槽作用，来展示父组件穿过来的内容。{…obj, attr:val} 和 Object.assign({}, obj, {attr:val})作用类似。vue的minix，react的高阶组件、render prop都是解决功能复用问题；react的hook是函数式编程的全新解决方案。扁平化的数据结构原则，Array+Object不要嵌套太深。Centos有yum（基于rpm），Ubuntu有apt-get，m
2020-09-18 19:33:01
1311
1
原创 微前端实践
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言本文对微前端的概念和场景进行科普，介绍一些主流的微前端的实现库及其用法，并讲解部分这些库的原理和实践知识。一、微前端是什么？二、qiankun微前端框架总结前言本文对微前端的概念和场景进行科普，介绍一些主流的微前端的实现库及其用法，并讲解部分这些库的原理和实践知识。一、微前端是什么？在项目迭代中，随着业务的发展壮大，项目的功能模块通常也会越来越多。可能原来所有的代码模块都在一个仓库里，由一个团队负责。但随着功能模块.
2022-05-05 14:13:24
647
原创 柯里化和偏函数简单实现
柯里化和偏函数在一些js库中会有实现，如loadsh，underscore等，今天我们来探讨一下~柯里化会让一个多参数的函数转换成单参数的函数：fn(a,b,c) ——> fn(a)(b)(c )function add(a, b) { return a + b;}add(1, 2) // 3// 假设有一个 curry 函数可以做到柯里化var addCurry = curry(add);addCurry(1)(2) // 3它的实际应用如：// 虽然 ajax 这个函
2021-02-07 14:28:58
202
原创 装饰器应用demo
log为一个方法添加 log 函数，检查输入的参数：class Math { @log add(a, b) { return a + b; }}function log(target, name, descriptor) { var oldValue = descriptor.value; descriptor.value = function(...args) { console.log(`Calling ${name} with`, args); .
2021-01-19 13:02:25
117
原创 装饰器的源码解读
装饰器主要有两个用处:装饰类装饰方法或属性废话不多说，先上代码感受一下下面是装饰类的：function log(target, name, descriptor) { console.log(target)//Car console.log(name)//undefined console.log(descriptor)//undefined}@log // 装饰类的装饰器class Car { run() { console.log('Car is runni
2020-12-26 13:40:07
262
原创 generator执行器的简单实现
首先写一个获取promise的函数：const getPromise = function(val){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(++val) },1000) })}再写一个generator函数：function *generatorFn(){ const res1 = yield getPromise(1) console.log(res1) const res2 = y
2020-11-25 11:57:26
414
1
原创 WeakMap实现私有属性和防止内存泄露
axios是xhr的封装，支持promise操作的请求库，并且提供了一系列方便的api接口。请求和返回的拦截// 添加请求拦截器axios.interceptors.request.use(function (config) { config.headers.token = 'added by interceptor'; return config;});// 添加响应拦截器axios.interceptors.response.use(function (data) { da
2020-11-05 11:50:07
830
原创 前端各种渲染策略的简介
预加载(preload)：资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。预请求(prefetch)：是为了提前加载下一个导航所需的资源，提升下一次导航的首屏渲染性能。但也可以用来在当前页面提前加载运行过程中所需的资源，加速响应。预渲染(prerendering)：预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态html页面
2020-10-19 17:11:35
472
原创 前端内存泄露问题
无论是分布式计算系统、服务端应用程序还是 iOS、Android 原生应用都会存在内存泄漏问题，Web 应用自然也不可避免地存在着类似的问题。虽然因为网页往往都是即用即走，较少地存在某个网页长期运行的问题，即使存在内存泄漏可能表现地也不明显；但是在某些数据展示型的，需要长期运行的页面上，如果不及时解决内存泄漏可能会导致网页占据过大地内存，不仅影响页面性能，还可能导致整个系统的崩溃。前端每周清单推荐过的 How JavaScript works 就是非常不错地介绍 JavaScript 运行机制的系列文章，其
2020-10-03 11:41:23
1251
转载 JavaScript 代码优化技巧
1 前端性能优化无非就这四点：资源优化（文件优化）、网络优化、渲染优化、用户体验优化。2 前端定时器是浏览器或node实现的，不是v8。3 ssr会有前后端不同时发布，前端js，css资源和后端html资源不一致问题。...
2020-09-07 10:02:00
1001
原创 hooks中注意事项
1 花了半天时间把700多个格式不符合的代码块修复，有这么多是因为代码库突然加了前端代码准入规则，使用prettier进行格式化，支持批量修改，主要规则有：不用闭合标签的不使用"/"去闭合；行数120字符限制；换行是运算符在行前；使用空格不使用tab；4个字符缩进；有些文件代码前加文件描述；代码结束加分号；正常情况使用单引号；对象解构前后不加空格。2 前端中，mvvm使用数据控制视图，mvc使用dom控制。3 new Image可以用在图片预加载的场景下，如加载多张图的动画。...
2020-08-31 10:24:07
1932
原创 前端class实现原理
1 fiber分片机制主要包括两个方向：一个是调度机制，把任务分成多个小任务，在浏览器空闲时调用，检测到用户输入等高优先级的事件及时让给渲染线程；二是数据结构，通过增加父节点和兄弟节点指针来让它可以随时中断，并且下次能找到正确位置继续执行。2 ajax会有跨域问题，但是表单提交不会有（img，script等也不会），因为表单提交到只能提交到另一个域，没法获取返回数据，ajax却可以，同源策略就是不让获取另一个域的内容。3 csrf如果是get请求可以使用img，script标签来实施攻击，po...
2020-08-17 10:12:02
3192
1
原创 JS闭包无处不在
闭包的概念和特性首先看个闭包的例子：function makeFab () { let last = 1, current = 1 return function inner() { [current, last] = [current + last, current] return last }}let fab = makeFab()console.log(fab()) // 1console.log(fab()) // 2console.log(fab())
2020-08-13 20:09:55
1603
原创 axios作用小结
1 原型链继承需要定义个空函数来过渡。2 html文件一般设置为协商缓存，Cache-Control:max-age=0表示过期，则会使用协商缓存的字段etag等来执行判断。3 async/await也有缺点，太同步化容易把一些并行请求写成串行，try/catch的错误机制不太友好等。4 清除浮动主要有两种，一种是clear方式，它包括加空标签，伪元素等；一种是overflow设置，它的原理是bfc。5 flex布局中,justify-content设置横向排列，align-ite...
2020-08-02 21:48:36
4140
3
转载 2020！前端开发应知网站(墙裂推荐！)
文章目录 一、搜索技巧 二、接下来笔者与大家分享一下我个人积累的网站： 1.基础学习类网站 2.开发文档类网站 3.解决开发难点类网站【各种库，插件，开源网站介绍】 4.想要实现快速开发不可不知的 5.各种功能网站 6.在线工具 7.开发人员应知技术 8.前端UI组件库 9.刷题 10.代码托管平台 11.社区类 12.项目合作 13.新闻资讯类 14.书籍类 15.学习网站
2020-07-30 10:29:09
5608
4
原创 js参数按值传递
1 http1.1及之后添加tcp的长连接字段Connection，请求头设置close才会关闭。2 http2可以在一个tcp中同时进行多个http请求，在此之前只能通过建立多个tcp连接来优化性能，但也仅限6个连接数量。3 数组判断最好使用对象的tostring方法去判断。4 抓包https需要客户端信任证书，抓包其实就是构建一个中间人来攻击。5 https的过程分为两个阶段：证书验证、数据传输；过程为：服务端发送证书和公钥===》客户端验证证书合法性、生成随机数并用公钥加密=...
2020-07-19 14:48:11
3145
原创 js原型和原型链
1 symbol可以消除魔法字符串；避免对象key被覆盖；class中定义私有方法。2 for of实现如下。function forOf(obj, cb) { let iterable, result; if (typeof obj[Symbol.iterator] !== "function") throw new TypeError(result + " is not iterable"); if (typeof cb !== "function..
2020-07-05 21:26:32
2807
原创 xss和csrf的原理
1 react使用rollup打包，flow做类型检测。2 解构赋值不仅可以用在对象上，也可以用在数组上。3 flow主要使用冒号来添加类型限制；不手动添加flow也可以自动识别部分类型错误。4 python2的print打印简单类型会做编码转换，打印对象不会；print打印单个参数会转换，两个参数也不会。5utf-8一般是\x带头的，后面跟两位字母或数字，例如\xe6\xb5\x8b\xe8\xaf\x95\xe5\x95\x8a，三个\x代表一个汉 ...
2020-06-22 15:04:31
3045
原创 python2中编码问题
1 浏览器缓存属于私有缓存，代理服务器缓存属于公有缓存，可以给多个用户使用。2 除了使用跳板机登录内部机器外，可以直接使用内部机器登录内部机器。
2020-06-07 21:21:36
2838
原创 python相比js的语法差异？
装饰器的原理其实就是Object.defineProperty()symbol使得对象属性可以不是字符串了，并且他的唯一性，避免属性别覆盖未来禁用第三方cookie，可以使用替代方案如：把id当请求字段，每次请求带上；浏览器指纹，浏览器的版本，系统版本等等一系列信息组合，很难出现重复http缓存，浏览器缓存，应用缓存都有区别csp（内容安全策略）防止xss是让网站配置白名单的方式...
2020-05-18 16:53:16
2719
1
原创 观察者模式和发布订阅模式一样吗？
httponly能禁止js获取cookie，但是浏览器本身会把cookie添加到请求头的特性，导致xss中加个ajax请求，后端还是可以拿到cookiecookie太大会占用网络，应该只有需要发送到服务端的数据（如用户id）存cookie，其它存localstorage...
2020-04-12 19:39:18
2986
1
原创 基于tornado的WEB服务
能通过下面来修改数组元素arr.forEach(function(item,index,arr){ arr[index] = 30; })如果数组元素是对象，可以修改item的属性值。建议修改数组使用map浏览器点击禁用缓存，请求头会添加Pragma：no-cache和cache-control：no-cach...
2020-04-06 20:50:03
3782
原创 前端性能优化总结
1 实现call或者apply，内部实现是把方法赋给没有此方法的对象（对象上新增方法，并给它赋值），并且执行；实现bind，内部实现是调用call或者apply即可。2 选择排序不是冒泡哦！...
2020-03-29 19:57:06
3077
原创 react的fiber分片机制
1 前端优化我曾使用过的一些方法：cdn加速；ssr服务端渲染；首屏懒加载（webpack分块打包）；合并请求，减少请求数；防抖，节流（按钮加上loading状态）；图片使用占位；图片合并通过位置切换；浏览器缓存使用和代码里缓存（keep-alive）。2 闭包可以保存变量在内存中，有点单例模式的思想。30.1 + 0.2 === 0.3 错误的，不止js有，其它语音也有，因为是计...
2020-03-22 20:37:50
3118
原创 DOM-XSS攻击原理与防御
continue和break在python和js中一样json.dumps(dict, ensure_ascii=False)可以解决字典，列表等print打印中文乱码问题，str.encode('utf-8')可以直接对中文字符串编码让其正常显示python中字典取属性值用中括号([])，对象取属性或方法用点(.)try { const data = await f...
2020-03-14 10:01:52
3432
原创 VS code插件配置
props.childrenvue的minix，react的高阶组件、render prop都是解决功能复用问题；react的hook是函数式编程的全新解决方案，可以渐进式使用，不用完全重写class方式扁平化的数据结构：Array+Object不要嵌套太深 Centos有yum（基于rpm），Ubuntu有apt-get，macOs有brew，都可以解决依赖包的问题...
2020-02-29 12:40:13
2966
3
原创 js错误有几种类型？
#1.运算符减法、除法和乘法运算符，都是将字符串自动转为数值，然后再运算。#2.&和||&它的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。||它的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个...
2019-05-25 15:57:27
2512
原创 ngnix部署静态服务器
在我们老大的要求下，准备一个月读完这本书，巩固下基础，并写十篇总结博客。1.语句和表达式区别let a = 1+ 3;等号右边是表达式，整行是语句，一般在一些框架中如vue中模板{{}}中可以写表达式，return可以写表达式等。2.变量声明可以连续声明多个变量如： let k=1,j下图是一些常规关于变量的一些报错：变量常规报错3.标识符最后一种...
2019-05-25 15:55:39
2261
原创 烦人的this问题
本人用atom大概一年了，vscode大概两个月，但其实最近一两天才开始研究它们的不同，主要是插件这块和一些优缺点（自身感受）。atom：内存：占用大，插件越多，开启越慢git：有修改文件的标识界面：更加美观，有一个写代码特效的插件（当时选择的原因）插件：插件存储在packages里vscode：内存：占用小，感觉开启更快，更轻量git：无修改文件的标识稳...
2018-12-18 12:52:46
13408
1
原创 cesium淹没分析（纯前端实现）
原理：利用polygon的extrudedHeight属性，动态增加（原理很简单，但效果挺好）效果图：核心代码： _drawWater(targetHeight, adapCoordi) { let entity = this.earth.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDeg.........
2018-12-17 12:22:40
18124
22
转载 微前端正在路上
问题一：之前如果有人问我这个问题，我一定回答是，因为经常上传会在找工作的时候给面试官看自己的github里面的提交日志，如果每天都有提交，那一定会让面试加分。而且，github上如果有很多粉丝或者star会是很酷的一件事。但是，github的核心追求是开源，而我们工作中几乎都是需要代码保密的（除非你的团队正在做着开源项目），当然也可以选择github上收费的私有库，但是如果团队选择的代码仓库并...
2018-12-16 13:11:27
2519
原创 js条件控制语句最佳实践
目前主流浏览器对es6的大部分新特性都支持，这是在网上看的。自己在实际应用中的，有以下这些浏览器是支持的：1.class2.let const3.箭头函数4.map,set5.数组，字符串操作api以下是浏览器不支持的：1.import export...
2018-11-27 12:55:41
9116
原创 浏览器垃圾回收
import * as turf from '@turf/turf'export default class MeasureDistance { constructor(viewer, isTerrain, style,callback) { this.viewer = viewer; this.isTerrain = isTerrain; ...
2018-11-22 12:17:16
3948
1
原创 js执行机制深入理解！
监听js改变input的值触发的onchange事件$("#inpstart").attr("value",$("#inpend")[0].value);当 我们像上面这样给一个input赋值时，由于onchange时间对input框不起作用，大家首先会想到使用 oninput事件，然而oninput是需要用户手动输入，先获取焦点改变了值后失去焦点才触发，所以没卵用，大多数论坛...
2018-11-14 15:35:41
16771
2
原创 JavaScript中什么时候使用Class？
console.log(Object.prototype.toString.call([]));//[object Array]console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]这是因为toString为Object的原型方法，而Array ，function等类型作为Obje
2017-10-29 19:24:39
5321
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人