- 博客(29)
- 收藏
- 关注
RSS订阅
原创 vue-vue2.0源码分析
一、vue2源码目录compiler：将template编译成 render 函数。对于在线编译，render 在运行时执行，执行时会生成 vnode core：核心 platform：web平台、weex多平台、mpvue小程序端 server：服务端渲染 sfc：单文件处理，将.vue文件的template、script、style拆分 shared：工具、常量二、compiler 运行时、编译时运行时：new Vue时产生一个对象在内存中维护，包含数据、方法、生命周期等，它们通过
2021-11-13 21:33:57
1705
原创 协议基础-HTTPS、HTTP2.0、HTTP3.0
一、密码学1.散列单向的转化为密文的，无法解密恢复的算法，不是严格意义上的加密。理论上的解密方式：彩虹表碰撞法，通过彩虹表映射原始数据，彩虹表是无数据的字符串对应关系。2.加密根据算法计算出一个值，然后可以通过数学方法把明文逆向计算出来的算法。对称加密：加密方法与解密方法是相同的。不安全。AES、EDS、恺撒加密。 非对称加密：解密方法与加密方法不同。加密方法可以公开，但解密方法不公开，所以安全。RSA。3.密钥交换算法确定2个非常大的素数，这两个数无需保密。 两端分别选择
2021-11-12 15:50:13
1609
原创 协议基础-HTTP协议
一、http请求模型简单的http请求模型，拥有2个端——客户端、服务端；拥有2个动作——请求、响应。谁发起请求，谁就是客户端。通常浏览器是客户端。如果浏览器和服务器中间有一层nodeJs中台，那么他既是客户端也是服务端。二、浏览器键入url后发生了什么？键入url。 检查网络通畅，可能通过一些硬件、软件网关设备。 dns解析。把字符串转为对应的ip地址，要从dns服务器查询，这个服务器相当于一个超大的数据库。然后浏览器才能知道要访问哪个服务器。 发送请求。 服务器收到请求，由服务器
2021-11-11 16:45:33
310
原创 javascript基础-多线程、携程
js任务分同步任务和异步任务。在异步任务中，分为宏任务和微任务。通常微任务的执行是在当前主线程宏任务执行完毕之前，当前没有可执行的微任务时，才会开启下一个宏任务。
2021-11-10 11:14:57
1596
原创 Ant-design-vue 2 升级3 的报错汇总
场景：这一块我无论用 dayjs 还是 momentjs 都报错，考虑到项目过于庞大，所以采用 momentjs 方式去更新组件；源码报错地方，是它根据 Array 组成了一个key，但这key在它组织的临时map里没有匹配上。很奇怪为什么找不到 momentjs，因为这是 ant-design-vue 内置的。笔者遇到了2个值得记录的问题，这些问题的报错信息会放到摘要里，方便检索。a-picker 等时间组件更新报错。我的解决办法非常单纯，用v-if判断。这里截取部分 webpack 配置。
2023-02-06 11:57:31
957
原创 typescript基础-tsconfig 配置项 target
当在解构 set 时候，遇到 "RangeError: Invalid array length" 这样的问题，可能的原因之一是，target 设置到 es5 及以下的版本了。所以应该配置到 es6+{ "compilerOptions": { "target": "es6", "strict": true, },}...
2022-02-16 15:40:35
1243
原创 webpack 中 loader 配置项 exclude、include 对打包的影响
这是在实际开发过程中遇到的问题。遇到这个问题的契机：我要开发一套底层框架，所有由此派生出的【一系列项目】可以直接引用这个项目，然后在此基础上添加业务。那么，ui 框架和 webpack 自然是不可或缺。于是，在配置这些 loader 的时候，因为为了让 webpack 更加高效，自然地使用了:exclude: /node_modules/,这样的配置。于是我将它作为底层依赖框架，新建了一个实际项目，然后通过 package.json 引入这个项目，从它里面导出 webpack.co
2022-01-25 14:56:54
3438
原创 javascript基础-微任务、宏任务、event loop
js任务分同步任务和异步任务。在异步任务中，分为宏任务 macro 和微任务 micro。通常微任务的执行是在当前主线程宏任务执行完毕之前，当前没有可执行的微任务时，才会开启下一个宏任务。一、微任务微任务包含 async、Promise.then、MutationObserver、webworker。微任务不按照代码执行顺序执行，但他是在当前宏任务执行结束前都会执行完；可以获取回调。nodeJs中的process.nextTick，也是微任务。二、宏任务宏任务包含 setTi
2021-11-28 10:42:20
556
原创 javascript基础-promise
promise实现了哪些功能？只有实现一个promise才能算真正的了解。。。首先要理解一些概念。异步执行promise 的异步执行，具体哪些部分异步执行了？resolve（作为一个回调函数）肯定是异步执行的，但是给 promise 直接传递的函数并没有异步执行。then 的回调函数也异步执行，那是因为 resovle 异步执行了，而 then 函数本身是同步执行的。const p = new Promise(resolve => { // 这个函数体同步执行
2021-11-26 22:39:59
414
原创 react-react ssr
reactssr的方法有很多，但在思路上基本都是可以互通的。本文提供一种reactssr的方法。一、要达到什么功能？既然是服务端渲染，那么本事就得是达到服务端渲染解决的一些固有问题，比如seo、直接输出已经被渲染成html文档片段 页面切换时，使用客户端渲染的路由；页面刷新时，使用服务端路由返回当前页面二、分析功能一、使用的技术栈开发依赖：wepback、webpack-cli等脚手架相关、babel、preset-react等编译相关、nodemon、npm-run-all等命令行工具
2021-11-26 17:52:06
1991
3
原创 webpack-webpack4源码分析
一、webpack4核心架构webpack本质是一个静态模块打包器。webapck 配置中最重要的有：入口 出口 各种解析loader 优化 插件二、优化webpack 默认进行 production 模式一些简单的、基本的处理，webpack默认 production 模式就已经处理了，比如箭头函数，专门为 development 处理是没有意义的。但 production 模式不是所有的优化都做了，这就需要手动优化。一、tree-shaking引用函数不纯，需要指定纯.
2021-11-21 22:07:34
771
原创 react-react17源码分析
一、历史版本 react 的简单分析1.v15.x.pre：拥有2个重要的功能 reconciler、render，对后续版本react影响巨大，基本奠定此后react框架大方向。 有优化批量更新。 缺点是业务大时，数据更新还是会卡顿，用户体验差。2.v16（fiber架构）：解决（优化）15版本前的卡顿问题，每隔一段时间响应一次用户操作 处理方案：给每个不同的更新设置优先级： 生命周期更新、用户操作——同步更新，优先级最高 交互的事件——优先级高 数据请求等——优先级低
2021-11-17 16:07:22
362
原创 编程模式-观察者模式
观察者模式涉及3个对象，发布者、观察者、主题对象。它们是一（发布者）（主体对象）对多（观察者）的关系。它的作用是，不需要总是事实访问数据，而是将主题数据提交给一个数据管理中心（发布者），然后将订阅者统一管理。当我在任何时候需要需要通知订阅者时，可以统一地、一次性地将数据发送给所有订阅者。它解决的实际问题，就是将业务重心转移，不需要繁琐地、实时地访问数据，而只需要关心数据产生变化（通常是这样）时负责的业务。// 观察者模式构造器class Publisher { // 订阅者的 m
2021-11-15 21:08:38
411
原创 编程模式-面向切面编程
一、概念面向切面编程（AOP）针对函数执行的某个阶段进行编程。比如执行这个函数之前，进行某个业务判断，相当于这个函数的拦截器。优势：将函数内的业务 与 一些公共业务分离（防止点击抖动）；可插拔效果，降低代码耦合。二、代码// 是否点击过let isClick = false;// 函数执行前function beforeFn(){ if (isClick) { // 没有释放点击 return true; } //
2021-11-13 18:26:06
620
原创 协议基础-HTTP与反向代理
一、代理与反向代理代理：一组机器访问网络时，通过一台代理机器，转发到服务器。服务器将数据返回时也通过这台机器。那么这台机器所做的工作就是代理，这台机器就是代理机器。反向代理：若机房只有一个出口（只有一个ip），但是部署有好多服务器。当外界的访问请求服务时，通过一台机器处理、转发这些请求，判断此请求应该访问哪台服务器。这台机器所做的工作就是反向代理，这台机器就是反向代理服务器。1.反向代理的用途：负载均衡：保证某一台服务器的压力不过大 缓存静态内容 服务器做分工：降低一台服务器的压力，使服
2021-11-12 17:46:46
336
原创 协议基础-缓存
主要探讨浏览器缓存。一、缓存的作用主要用户保存访问量高的数据的副本。1.优点降低带宽压力，减少服务器负荷。获取资源速度快。2.缺点造成页面没有及时更新。二、缓存的机制浏览器判断有没有缓存。 如果没有缓存，向web服务器请求。 服务器接收到请求，进行缓存协商。 再次请求资源时，会将浏览器缓存的资源的标记提交给服务器，服务器判断资源是否发生改变缓存协商，设计到2种策略etag策略：给资源打一个md5指纹，当资源变化时，md5也会变化。 last-modif
2021-11-11 21:31:10
1070
原创 协议基础-cookie、session
一、cookie保存在客户端二、session保存在服务端，通过sessionId区分每一个用户 可以看成一个数据库，安全级别与普通数据库相同三、使用cookie和session一般配合使用。客户端最好不要操作cookie。1.用户验证用户登录后在服务端产生一个sessionId，并作为cookie存到客户端。之后每次请求都带着这个cookie，也就在服务端识别用户了。2.单点登录对于客户端：用户登录后，服务端返回sessionId，并将它设置到顶级域名下，顶级域名及所
2021-11-11 20:47:38
105
原创 协议基础-TCP、UDP协议
tcp和udp都是传输层协议。一、TCP协议tcp提供一个稳定的链路。 tcp就像打电话一样，拨号和接听点对点传输，所以它要有三次握手四次挥手这样的操作。二、UDP协议用户数据报协议，数据报来自网络层。 udp是无连接的，不如tcp稳定。 udp就像广播，广播员播报但是是否有人接收信息与它无关。...
2021-11-11 17:30:39
1006
原创 javascript基础-eval与window.eval
eval === window.eval。但是，当在某个函数内部调用eval时，与调用window.eval是不同的。var a = 0;function f(){ // 2、如果有这行代码，那么"a = 2"修改的是局部变量a(===1)；????所在log不变 // 3、如果没有这行代码，那么"a = 2"修改的是全局变量a(===0)；????所在log为2 let a = 1; // 1、eval在当前位置执行，相当于"a = 2"的执行环境是当前
2021-11-11 15:26:32
1190
原创 javascript基础-严格模式
1.抛出异常：不能使用with语句。 不能省略声明过程，不能直接访问或对一个未声明的标识符赋值（try中这样做会被catch捕获；依然可以用typeof）。 违背propertyDescriptor的描述的操作。 同名函数参数（普通模式下只会覆盖）。 未来关键字作为标识符。 八进制数。2.隐式转换、默认操作this在函数内为null或undefined时，不会将this指向全局变量（this的最弱隐式绑定）。 3.其他：理论上对对象字面量分配相同的属性会抛出异常（未实现）。..
2021-11-11 15:13:21
100
原创 javascript基础-new操作符
一、执行new操作符的细节创建一个实例对象，并把这个对象绑定在当前构造函数的原型对象上。 改变this的指向到这个实例上，此时的this指向是最强的效果。 如果显式 return 且 return 的值为引用数据类型，则返回这个值；否则返回实例。二、模拟new操作符function myNewCall(fn){ // 稍微判断一下 if (Object.prototype.toString.call(fn) !== '[object Function]') {
2021-11-10 22:57:45
108
原创 编程模式-元编程
元编程就是对编程语言进行编程。对于一个对象，当他需要被隐式转换的时候，可以进行元编程拦截。const s = { [Symbol.toPrimitive](type) { console.log(`%ctype ${type}`, 'color:red'); switch (type) { case "number": // 转为number return 1;
2021-11-09 10:51:33
778
原创 javascript基础-闭包
一、什么是闭包当创建一个 function 的时候，引擎内部做的，将创建这个 function 所在的作用域内的 新创建的变量保存在了这个函数内部，这就是闭包，可以认为这是一种内部表达式。对于开发者而言，闭包是一种现象。可以访问函数外部的变量。二、闭包产生的原因理论上创建一个 function 的时候就会产生闭包，只不过网络上大部分两个函数嵌套的闭包的代码，类似于早期的模块化开发的代码，都是为了更加直观体现闭包这种现象的代码。我们知道，标识符的查询是根据作用域链一层一层向上查询。当我们访
2021-11-08 18:18:11
131
原创 编程模式-函数式编程
一、概念用代码表达数学函数的概念，不存在 if else 这样的分支代码概念。区别于方法，方法是操作对象的function。函数式编程没有绑定this。。。。二、三、拓展react里函数组建构成的高阶组建，类似于普通函数构成的高阶函数。比我为一个组建本身获取不到某个数据，我有一个公共的组建，专门用于获取这个数据。当我把我的组建传入高阶组建后，高阶组建会将数据包裹给我的组建，然后返回一个新的组建。...
2021-11-07 11:04:26
87
原创 javascript基础-拷贝
克隆正则 /** * 克隆正则 * @param {RegExp} target * @param {boolean} isDeep * @return {RegExp} * */ function cloneReg(target, isDeep){ const { source, flags, lastIndex } = target;
2021-11-06 23:34:38
99
原创 javascript基础-继承
最好的继承方式： // 父类 function P(){} // 子类 function C(){} // 创建一个对象，直接以 P.prototype 为原型 const proto = Object.create(P.prototype); // 这个对象没有 constructor 属性，从原型上找，P.prototype.constructor 是 P，这就不对了，所以手动修改
2021-11-06 22:45:44
57
原创 javascript基础-声明提升
与其说函数声明优先级高，不如说函数声明覆盖能力强更为直观。function a(){}var a = 1;console.log(a); // 1
2021-11-06 20:20:22
197
原创 javascript基础-函数相关
根据以下代码，a是标识符，b只是函数的一个name，它是给解释器看的，可以追踪函数调用栈。const a = function b(){ // true console.log(a === b); // 函数本身 console.log(arguments.callee); // 函数被哪一个函数调用 default:null console.log(a
2021-11-06 20:15:43
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人