- 博客(87)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 js-手写promise
手写promise以及promise的静态实例方法all、allsettled、any、resolve、reject以及promise实例方法catch、finally
2022-06-10 14:08:11
320
原创 js-代码执行顺序-事件循环机制-宏任务与微任务
JavaScript是一门单线程语言分为同步任务和异步任务同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。异步任务指的是，不进入主线程、而进入"任务队列"的任务，只有等主线程任务全部执行完毕，"任务队列"的任务才会进入主线程执行。而异步任务分为宏任务和微任务......
2022-06-09 16:34:51
942
原创 剑指offer-二叉树结构
1. 什么是二叉树？简单来说二叉树是一个特殊的树，每个节点最多有两个节点二叉树是n(n>=0)个结点的有限集合，该集合或者为空集（称为空二叉树），或者由一个根结点和两棵互不相交的、分别称为根结点的左子树和右子树组成。2. 如何新增二叉树节点？二叉树插入节点，比根节点小的插入左子树，比根节点大的插入右子树//节点类class Node { constructor(key) { this.left = null this.right = nul
2022-04-01 11:49:09
360
原创 剑指offer-链表结构
链表链表特征链表宜于增加和删除、不宜于查找链表的存储不是连续的，而是随意存储的链表通过每一个节点的next来访问下一个节点查找链表只能从链表头开始查找代码javascript没有链表型数据结构所以在javascript中使用链表结构，需要自己定义以下为javascript链表结构函数//创建一个链表，并为其添加一些方法——来自于《学习JavaScript数据结构与算法》function LinkedList(){ //定义一个节点 var Node=functi
2022-03-30 10:55:59
150
原创 vue图片出错显示默认图片
vue图片出错显示默认图片图片出错分为：网络异常导致图片加载不成功图片地址出错导致图片地址加载不成功解决方案网络异常使用样式给图片添加伪类，图片不显示时，显示背景图片img { width: 100%; height: 100%; position: relative; &:after{ content: ""; display: inline-block; position: absolute; z
2022-03-14 15:38:39
1144
原创 《尤雨溪教你写vue》课程笔记
1. 响应性工作原理：使用ES5的Object.definePropery，重写啦所有属性的getter和setter方法实际上就是依赖跟踪的基本形式简易getter和setterconst obj = { foo: 123}convert(obj)function convert(obj) { Object.keys(obj).forEach(key =>{ let internalValue = obj[key] Object.defineProperty(obj,ke
2022-03-04 11:27:10
1218
1
原创 charles抓包安卓手机
手机电脑同一局域网下电脑操作打开电脑charles软件proxy -> proxy setttings ->port 8080 -> okhelp -> ssl Proxying - install …proxy - ssl proxying settings…手机操作找到连接的wifi点进去详情设置代理主机名和端口在手机浏览器输入chls.pro/ssl,下载证书从设置中搜索找到从存储中安装证书...
2022-01-26 14:38:21
2678
原创 前端安全-加密
1 密码安全1.1 泄露渠道数据库被盗服务器被入侵通讯被窃听内部人员泄露其他网站（撞库）1.2 防御严禁明文存储单向变换变换复杂度要求密码复杂度要求加盐（防止拆解）1.3 哈希算法明文-密文 一一对应彩虹表记录明文密文一一对应表，容易破解两次md5加密也容易破解所以密码必须复杂加盐加盐可以使密码更加难破解 加盐+ 字符串 + 密码雪崩效应 - 明文： 明文小幅度变化，密文加剧变化密文： 明文无法反推密文固定长度： md5 sha1 sha256
2022-01-16 11:14:54
5160
原创 前端安全- 常见的网络攻击
1. xss 攻击1.1 反射性攻击url参数直接注入（地址栏运行脚本）1.2 影响：利用虚假输入表单骗取用户个人信息利用脚本窃取用户的cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求显示伪造的文章或图片1.3 防御csp内容安全策略...
2022-01-16 10:15:35
3361
原创 node-sass报错：Module build failed: Error: Node Sass does not yet support your current environment
node，node-sass,sass-loader不兼容//查看node版本node -v v12.6.0“node-sass”: “^4.14.1”,“sass-loader”: “^7.3.1”实验得知： 这三个版本兼容
2021-12-28 17:15:15
1358
原创 charles抓包
1. charles 能做什么？支持http及https代理支持流量控制支持接口并发请求支持重发网络请求支持断点调试2. charles 组件介绍主导航栏抓取到的请求内容请求内容请求内容的导航栏响应内容响应内容的导航栏3. charles 抓包charles代理配置客户端代理配置操作客户端分析请求数据4. https 抓包没有证书获取到的信息乱码需要安装SSL证书windows证书配置打开charles,选择“help”-> “SSL Pr
2021-12-28 16:52:26
265
原创 前端工程化介绍
1. 前端工程化是什么？前端工程化就是通过各种工具和技术，提升前端开发效率的过程前端工程化：转化工具、格式化工具、脚手架工具、压缩工具、自动化工具。。。工程化不等于某个工具Powered by Node.js2. 脚手架工具Yeoman 可以帮助开发人员创建项目的基础结构代码，可以创建很多框架的基础代码(1)全局安装yo npm install --global yo(2) 安装generator npm install --global generator-webapp(3)
2021-12-28 16:03:56
1049
原创 vue3初体验
一、vite初始化项目# 创建vite项目，选择vue -> 选择vue-ts npm init @vitejs/app myProject# 进入项目 cd myProject# 安装依赖 npm install# 启动项目 npm run dev二、Composition API(常用部分)2.1setup和refsetup是组合api中第一个要使用的函数setup是组合api的入口函数ref对象是一个函数，作用是定义一个响应式数据,返回一个ref对象，对象中有一个v
2021-12-27 17:58:05
479
原创 react-同构介绍
react同构react服务端渲染ssr服务端生成html结构，node在服务端解析首屏模板，react支持ssrreact同构api后RenderToString和RenderToStaticMarkupreact16新出的RenderToNodeStream,性能更好react16里，客户端hydrate取代render项目SSR具体步骤ssr实战，build代码后的事情后node使用babel-node配置node里的react环境修改客户端代码，抽离App组件，前
2021-12-17 11:05:42
214
原创 TypeScript快速上手
一.初识TypeScript1. 初识TypeScriptTypeScript是JavaScript类型的超集合，它可以编译成纯JavaScript2. 安装TypeScript// 全局安装npm install -g typescript// 查看版本tsc -v3. TypeScript写程序3.1hello world程序html中引入ts的文件，浏览器会报错，如果ts文件里面没有ts代码只有js代码，不会报错(()=>{ function sayHi(str
2021-12-17 10:51:18
607
原创 npm run dev报错：vant样式报错：Module build failed: Unknown word
自己从零开始搭建项目遇到啦很多坑关于webpack和loader的兼容问题十分费劲因为vant里面有css所有要用css-loader,style-loader所以在webpack配置里面加入如下配置 { test: /\.css$/, use: ['style-loader', 'css-loader'] }然后噩梦开始啦一直报错最后注释掉不报错啦错误描述error in ./node_modules/vant/lib/icon/.
2021-12-10 16:40:29
2065
1
原创 npm run build打包后页面空白报错：Failed to load resource: net::ERR_FILE_NOT_FOUND
静态资源加载错误，原因是assetsPublicPath路径错误需要把assetsPublicPath:’./’再 npm run build就显示成功啦config文件夹下的index.js
2021-12-09 16:34:59
3327
2
原创 前端面试小技巧
方法简历有亮点、知识有亮点拿到面试题，要看到考点以不变应万变（题可变，考点不变）对待题目（题目到知识点，再到题目）前端知识体系高效学习三部曲：找准知识体系；刻意练习；及时反馈知识体系：结构化的知识范围涵盖所有知识点；结构化、有组织、易扩展从哪些方面梳理w3c标准ECMA 262标准开发环境运行环境知识体系JS基础语法JS-Web-API开发环境运行环境...
2021-12-09 10:24:01
436
原创 node.js后端和vue前端的打包与上线
项目打包编译npm run build编译打包后，生成build目录express中间件，拦截路由，手动渲染index.htmlbuild设置为静态资源地址//路由拦截app.use(function(req,res,next){ if(req.url.startsWith('/user')||req.url.startsWith('/static/')){ return next() } return res.sendFile(path.resolve('../build/in
2021-12-09 10:19:07
904
原创 框架-Vue
Vue1.熟练使用Vue的API、生命周期、钩子函数2.MVVM框架设计理念3.Vue双向绑定实现原理、Diff算法的内部实现4.Vue的事件机制5.从template转换成真实DOM的实现机制
2021-12-06 13:40:03
119
原创 框架-React
1.React和vue选型和优缺点、核心架构的区别2.React中setState的执行机制，如何有效的管理状态3.React的事件底层实现机制4.React的虚拟DOM和Diff算法的内部实现5.React的Fiber工作原理，解决了什么问题6.React Router和Vue Router的底层实现原理、动态加载实现原理7.可熟练应用React API、生命周期等，可应用HOC、render props、Hooks等高阶用法解决问题8.基于React的特性和原理，可以手动实现一个简单的Re
2021-12-06 13:39:04
107
原创 项目-性能优化
1.了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案2.了解常见的Web、App性能优化方案3.SEO排名规则、SEO优化方案、前后端分离的SEO4.SSR实现方案、优缺点、及其性能优化5.Webpack的性能优化方案6.Canvas性能优化方案7.React、Vue等框架使用性能优化方案...
2021-12-02 16:30:39
88
原创 项目-前端安全
1.XSS攻击的原理、分类、具体案例，前端如何防御2.CSRF攻击的原理、具体案例，前端如何防御3.HTTP劫持、页面劫持的原理、防御措施
2021-12-02 16:30:12
117
原创 html-css
1.CSS盒模型，在不同浏览器的差异2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则3.CSS伪类和伪元素有哪些，它们的区别和实际应用4.HTML文档流的排版规则，CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理5.水平垂直居中的方案、可以实现6种以上并对比它们的优缺点6.BFC实现原理，可以解决的问题，如何创建BFC7.可使用CSS函数复用代码，实现特殊效果8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种
2021-12-02 16:28:15
215
原创 react-性能优化
1. react组件性能优化属性传递优化尽量不再render里面写函数用bind(this)尽量不要再render,里面写对象，render会执行多次，会创建多个对象，没有销毁传递组件数据，尽量少的传递数据，不要把所有数据都传递多组件优化父组件修改，子组件也会重新渲染，这样性能不好。定制shouldComponentUpdate或者继承React.PureComponent//递归比较，复杂度太高，不可接受// react建议，只做浅层对比let obj = {name:
2021-12-02 16:22:29
805
1
原创 前端工程-开发提速
1.熟练掌握一种接口管理、接口mock工具的使用，如yapi2.掌握一种高效的日志埋点方案，可快速使用日志查询工具定位线上问题3.理解TDD与BDD模式，至少会使用一种前端单元测试框架
2021-12-01 14:28:29
109
原创 前端工程-项目构建
1.理解npm、yarn依赖包管理的原理，两者的区别2.可以使用npm运行自定义脚本3.理解Babel、ESLint、webpack等工具在项目中承担的作用4.ESLint规则检测原理，常用的ESLint配置5.Babel的核心原理，可以自己编写一个Babel插件6.可以配置一种前端代码兼容方案，如Polyfill7.Webpack的编译原理、构建流程、热更新原理，chunk、bundle和module的区别和应用8.可熟练配置已有的loaders和plugins解决问题，可以自己编写load
2021-12-01 14:19:54
667
原创 react-核心原理介绍
虚拟dom在react里面生成dom树，更改数据时把原dom和新生成dom元素比较，找出更新的dom点，更新生命周期定制shouldComponentUpdate(nextProps,nextState){if(nextState.num%5 == 0){return true} return false}setState在render里面不要用setState(),会死循环...
2021-11-30 18:39:21
183
原创 MVC模式和MVVC模式
MVC模式mvc是由三个单词的首字符组成的：分别是模型model-视图view-控制器controller他是一种使用业务逻辑、数据、视图进行分离的方式来组织架构代码的一种模式。复杂项目中改变数据，很难判断那里改变var MVC = {}MVC.model = (function(){ var data = { sidebar:[{ title: 'sidebar1', href: './a.html' },{ title: 'sidebar2', href:
2021-11-30 18:38:07
4000
原创 计算机基础设计模式
1.熟练使用前端常用的设计模式编写代码，如单例模式、装饰器模式、代理模式等2.发布订阅模式和观察者模式的异同以及实际应用3.可以说出几种设计模式在开发中的实际应用，理解框架源码中对设计模式的应用...
2021-11-30 18:36:42
424
原创 算法-JavaScript编码能力
1.多种方式实现数组去重、扁平化、对比优缺点2.多种方式实现深拷贝、对比优缺点3.手写函数柯里化工具函数、并理解其应用场景和优势4.手写防抖和节流工具函数、并理解其内部原理和应用场景5.实现一个sleep函数...
2021-11-30 10:58:10
408
原创 react-redux和redux原理
简单redux实现export function createStore(reducer，enhancer){//中间件 if(enhancer){ return enhancer(createStore)(reducer) } let currentState = {} let currentListeners = [] function getState(){ return currentState } function subscribe(Listener){ curre
2021-11-29 17:20:53
300
原创 react-redux基础
Redux状态管理，单一状态，单向数据流核心概念： store,state,action,reducerstore保存所有状态,那里都有记录state需要改变得时候，需要告诉专员dispatch要干什么action处理变化得人reducer拿到state和action,生成新的state首先通过reducer新建store,随时通过store.getState获取状态需要状态变更，store.dispatch(action) 来修改状态reducer函数接收state和action,返回新的.
2021-11-29 14:44:22
210
原创 html-css-手写
1.手写图片瀑布流效果2.使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）3.使用纯CSS实现曲线运动（贝塞尔曲线）4.实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点...
2021-11-26 16:54:15
306
原创 计算机基础-编译原理
1.理解代码到底是什么，计算机如何将代码转换为可以运行的目标程序2.正则表达式的匹配原理和性能优化3.如何将JavaScript代码解析成抽象语法树(AST)4.base64的编码原理5.几种进制的相互转换计算方法，在JavaScript中如何表示和转换...
2021-11-26 15:53:06
975
原创 计算机网络-基础知识
1. 计算机网络的两种体系结构tcp/ip体系结构：网络接口层- 网络层-运输船-应用层osi体系结构：物理层-数据链接层、网络层、运输层、会话层、表示层、应用层原理体系结构：物理层-数据链路层-网络层-运输层-表示层各个层传递信息，每次加一个协议头，接收设别层层解析2. http两个进程的响应http超文本传输协议请求响应过程：请求地址然后解析域名然后请求ip地址，客户端接收到请求报文，返回响应持久性连接和非持久连接，http是非持久连接http请求特点：简单、灵活和易于扩展、应
2021-11-26 14:22:07
1858
原创 react报错：require(...) is not function
npm start 报错require(…) is not function页面中也没有引用require的地方最后百度得知setupProxy.js之前设置跨域新建啦setupProxy.js,但是后来没有使用setupProxy,里面的内容注释掉啦setupProxy.js文件不能为空，为空就删除否则会报错...
2021-11-25 10:42:02
2451
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人