- 博客(33)
- 收藏
- 关注
RSS订阅原创 vue基础
初识vue，笔记数据代理Object.defineProperty理解数据代理vue中的数据代理事件处理事件的基本使用事件修饰符键盘事件计算属性姓名案例-插值语法实现姓名案例-methods实现姓名案例-计算属性实现计算属性使用，不加小括号()姓名案例- 计算属性简写只考虑读取，不考虑修改的时候才用简写形式监视属性深度监视...
2022-02-23 14:35:11
369
原创 由文件依赖关系输出加载排序
function sortDeps(fileMaps) { return Object.keys(fileMaps).reduce((result,itemKey) => { const itemDeps = fileMaps[itemKey] // 看看结果列表中有没有当前的文件 // 如果有 要将当前文件的依赖插入当前文件前面 // 如果没有 直接依次放入当前文件的依赖、当前文件 let itemIndex ...
2022-02-15 14:25:22
361
原创 React Route
1.React路由原理不同的路径渲染不同的组件有两种实现方式HashRouter:利用hash实现路由切换BrowserRouter:实现h5 Api实现路由的切换1.1HashRouter利用hash实现路由切换public\index.html<body> <ul> <li><a href="#/a">/a</a></li> <li><a href="#/b
2021-09-06 10:30:13
244
原创 React Hooks
Hook可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性useStateuseState 就是一个 Hook通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 stateuseState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并useState 唯一的参数
2021-09-01 12:12:09
922
原创 node基础
Node1node基础你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。node和前端的区别前端里面有DOM BOM，服务端中没有window，服务端中有globalglobal里的属性：process 进程（重要）Buffer 类型来处理二进制文件clearInterval、clearTimeoutsetInterval、setTimeoutclearImmed
2021-08-31 11:06:28
121
原创 React.js的实现
cross-env 是一个库用来 设置环境变量的React.js 实现JSXfunction createElement(type, config, children) { let ref; let key; if (config) { delete config._source; delete config._self; ref = config.ref; key = config.key; .
2021-08-26 20:24:20
270
原创 浏览器渲染原理
渲染流程地址栏输入了url后都发生了什么http协议http1和http2的区别http1 服务端到静态目录查找html,若文件存在，返回静态资源后，若有js 或css，再请求资源http2 服务端找到静态文件html后，循环里面需要的静态文件，做一次服务端推送，而不是请求的时候才返回。（就是第一次请求就把资源都返回）浏览器收到内容后做什么？6.将不同图层进行绘制，转交给合成线程处理，最终产生页面，并显示在浏览器上（painting, display）为什...
2021-08-25 19:03:19
73
原创 vite原理
vite是一个基于vue3的单位组件非打包开发服务器，它做到了本地开始开发启动，实现按需编译，不再等待整个应用编译完成。基于原生模块系统ESModule实现，（webpack开发环境很慢，开发时需要进行编译整个包放到内存中）安装npm install create-vite-app -g --force用vite创建一个项目create-vite-app vite-project也可以一条命令，代替上面两条npm init vite-app projectName像
2021-08-25 13:51:43
406
原创 Create React App
开始命令窗口，进入你要放置工程的目录npx create-react-app my-appcd my-appnpm start打开http://localhost:3000/看一下你的项目。要是创建TS版的：npx create-react-app my-app --template typescript还可以设置包管理器npx create-react-app my-app --use-npm命令：启动项目 npm start打包：npm run bui.
2021-08-13 15:17:23
130
原创 flutter探索
目标：1、做一个自己认为的移动端产品最常用页面的demo，比如无线列表+详情等等这样的，自己定2、产出这个过程中切换的难易程度，切换的心得体会，以及遇到的问题总结3、如果新产品要用Flutter 我们怎么做强类型， 类C桌面应用，能跑起来，还不能打包目前稳定版不支持windowshttps://flutter.dev/docs/development/tools/sdk/release-notes 版本 有些不支持移动平台Andr...
2021-08-06 17:14:22
119
原创 如何撤销某次提交 git revert -m
如果我在develop分支 commit了三个版本（版本一、版本二、 版本三），突然发现版本二不行（如：有bug），想要撤销版本二，但又不想撤销版本三的提交，就可以用 git revert 命令来反做版本二，生成新的版本四，这个版本四里会保留版本三的东西，但撤销了版本二的东西。一、进行如下操作：1、可以用git log查看提交的版本号。找到想要撤销的版本二，查看commit版本号1ab3sbs1023，粘贴出来。git log2、撤销（返做）版本1ab3sbs1023git reve
2021-06-04 17:02:20
1789
转载 JS知识点梳理
本知识体系是为了查漏补缺,提升自己(不一定适合你们)而整理的。本文结构尽量做到精简，详细内容点击每个模块下方链接。文章将按模块进行分类，以简单的文字和外链相对深入的文章来整理各个模块。1js基础1-1 声明「js函数声明三种方式：」//(1) Function()构造器var f =new Function()//(2) 函数声明function f (){ console.log(2);}//(3) 函数表达式var f = function()
2021-03-24 17:44:29
153
转载 JS 异步编程六种方案
前言我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步和异步。
2021-03-24 15:03:24
151
原创 类的继承
function _inherits(subClass, ParentClass) { // 继承公有属性 subClass.prototype = Object.create(subClass.prototype, {constructor: {value: subClass}}) // 继承静态方法 Object.setPrototypeOf(subClass, parentClass);}let Child = (function(Pa...
2020-12-23 13:19:57
76
原创 无状态组件、高阶组件、纯组件
无状态组件函数，有两个参数props和context，没有内部状态state，无生命周期，没有实例化过程，也就没有ref。缺点：每次props更新，它都会重新绘制render函数。function Animal(props, context) {return(<div><label></label><Input /></div>)}纯组件PureComponent 实现了shouldComponent
2020-12-22 10:58:32
236
转载 ES6箭头函数
1. 箭头函数基本形式let func = （num) => num;let func = () => num;let sum = (num1,num2) => num1 + num2;[1,2,3].map(x => x * x);普通函数function a() { console.log('aa');}2. 箭头函数基本特点(1). 箭头函数this为父作用域的this，不是调用时的this箭头函数的this永远指向其父作用域，任何..
2020-12-21 15:47:14
145
原创 webpackd的基础
webpack安装本地安装webpack命令yarn init -yyarn add webpack webpack-cli -Dwebpack可以进行0配置打包支持js的模块化手动配置默认配置文件的名字 webpacck.config.jswebpack 是node写出来的，用node的写法let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin')module.
2020-09-03 20:55:47
226
原创 原型和原型链
原型 prototype 原型链 _proto_每一个函数都有一个Prototype属性每一个对象都有_proto_属性function Animal () { this.type = '哺乳类'}console.log(Animal.prototype) // Animal {}let animal = new Animal();console.log(animal._proto_ === Animal.prototype) // true ...
2020-07-30 20:28:12
95
原创 JavaScript执行上下栈和作用域链
全局上下文有三个非常重要的属性：1.变量对象2.作用域链3.this指向var a = 1function sum () {var b = 2;return a + b;}sum();sum.[[scope]] = { globalContext.VO}ECS = [ globalContext, sumContext]sumContext = { AO:{ arguments:{ ...
2020-07-30 19:49:17
210
原创 使用rollup配置
安装rollup包命令：yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env -Drollup.config.jsexport default { input: './index.js', output:{ file:'../src/client/bundle.js', format:'mud' // and cmd commonjs 都支持 }, wa
2020-07-09 14:39:25
516
原创 前端监控-静态资源
静态资源的加载情况index。js中import resource from './resource.js';resource.init(data => { console.log(data);})resource.jslet processData = () => { let data = { name: _.name, initiatorType: _.initiatorType, duration:_.
2020-07-09 11:47:28
231
原创 前端性能优化1
1. 使用Fragment2. pureComponent2.1 重复渲染 浅比较class PureComponent extends Component { shouldComponentUpdate(newProps) { return !shallowEqual(this.props, newProps); // 浅比较 }}function shallowEqual(obj1,obj2) { if (obj1 === obj2) {...
2020-07-07 18:06:17
113
原创 generator的使用
generator生成器 =》 遍历器 =》 数组 =》 类数组const likeArray = {0: 'a', 1: 'b', 2:'c', 3: 'd', length: 4}1. Array.from(likeArray); 转成了数组2. 给likeArray增加个属性：遍历器 likeArray[Symbol.iterator] = function() { let i = 0; return { next: () => { retu...
2020-07-02 11:23:56
327
原创 柯里化-写抽象函数
函数柯里化，反柯里化判断变量的类型常用的判断类型的方法有四种：1.typeof 不能判断对象类型2.constructor 可以找到这个变量是通过谁构造出来的3.instanceos 判断谁是谁的实例 _proto_4.Object.prototype.toString.call() 缺陷不能区分谁是谁的实例写个方法判断类型function isType(type,value) { return Object.prototype.toString.call(va...
2020-07-01 14:59:19
178
原创 promise特点
promise 为什么会产生 解决异步问题1.多个异步请求并发（希望同步最终的结果）promise.all2.链式异步请求的问题 上一个人的输出是下一个人的输入 promise的链式调用可以解决这个问题3.缺陷：还是基于回调1. promis有三个状态：成功态resolve，失败态reject， 等待态pendingpromise就是一个类 new Promise((resolve, reject) => {2. 用户自己决定成功的原因和失败的原因， 成功和失败也是用...
2020-07-01 14:20:28
395
转载 Mac terminal下解压缩命令大全
tar解包：tar xvf FileName.tar打包：tar cvf FileName.tar DirName（注：tar是打包，不是压缩！）———————————————.gz解压1：gunzip FileName.gz解压2：gzip -d FileName.gz压缩：gzip FileName.tar.gz 和 .tgz解压：tar zxvf FileName.t...
2020-02-10 14:16:05
555
原创 callback回调-高阶函数的使用
1、高阶函数1）装饰器、前端埋点、在ajax请求外包装一层自己的逻辑2）几次之后再执行函数2、异步 并发，积攒结果到school中3、发布emit 订阅on， 中间媒介this._arr订阅就是把fn放进数组里，发布就是循环执行数组里的每一个函数。...
2020-01-27 18:55:58
376
原创 Throttle和Debounce
避免 某个【事件】 在【较短时间段内】（称为 delta T）连续触发而引起的不必要的连续执行。二者的根本的区别在于 throttle 保证了在每个 delta T 内至少执行一次，而 debounce 没有这样的保证。体现在实现层面上的区别就是，对于 debounce 来说每次事件触发时参考的「时间点」是「上一次事件触发的时间」并且在延时没有结束时会重置这个延时为 500ms，而对于...
2019-11-07 16:24:04
281
原创 for in 、 for of、 forEach 、map 区别
for...in1.for in是为循环enumerabe 对象设计的let obj = {a: '1', b: '2', c: '3', d: '4'}for (let o in obj) { console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d console.log(obj[o]) //这个才是属性对应的值1，2，3，4}...
2019-10-10 13:55:41
235
原创 sass入门
变量声明•你可以把反复使用的css属性值 定义成变量，使用$符号来标识，赋予其一个易懂的变量名然后通过变量名来引用它们。 $highlight-color: #F90;•sass变量的声明和css属性的声明很像，任何css属性值都可以用作sass的变量值。•与css属性不同，sass变量可以在{}规则块外定义，若定义在了{ }块内就只能在块内使用。 ...
2018-12-13 17:29:29
169
原创 基本 git 分支管理命令
1. 查看本地分支 git branch 。命令会列出所有分支，当前分支前面会标一个*号。2. 查看本地和远程所有分支 git branch -a3. 切换分支 git checkout xxx 。命令切换到xxx分支。4. 创建本地分支 git branch local_branch5. 创建本地分支 并切换 git ch...
2018-07-24 11:45:58
216
原创 webstorm打开项目不显示文件夹
删除过项目，重新clone项目再打开，其中的文件夹 不显示了。问题原因：webstorm自动生成的配置文件 .idea/modules.xml损坏解决办法：close WebStorm;in project's folder remove .idea/ (hidden directory);open your project, enjoy:)附：Mac系统 ，finder下使用Command+Sh...
2018-04-09 15:42:48
7176
4
原创 从TFS克隆代码，用Webstorm 打开
TFS中的代码管理工具为git，先在电脑中生成git所需的ssh key，本地创建存放项目的文件夹，用命令行工具进入项目要存放的文件夹然后运行“git clone http://项目地址”，（项目地址为tfs中给出）项目就克隆到本地的文件夹中了，然后用webstorm打开就可以了。具体步骤如下：1、本机中生成git登陆所需要的ssh key。（无论使用http地址还是ssh地址克隆代码到本地，都需...
2018-04-09 15:29:09
1020
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人