- 博客(95)
- 收藏
- 关注
RSS订阅原创 babel 学习笔记
《Babel 插件通关秘籍》学习笔记核心概念babel 的编译流程parsertraverse（不含path）traverse（包含path）课程链接：《Babel 插件通关秘籍》核心概念babel: js 编译工具（对js代码编程）ast 在线工具作用分析和转换代码：linter、type checker、压缩混淆应用： eslint、typescript、terser模块遍历器：打包工具js 解释器babel macrosbabel 微内核架构核心包（内核，支
2022-03-16 19:52:10
1552
原创 架构型设计模式
技巧型设计模式（二）同步模块模式（SyncModuleDefine(SMD)）模块管理器实现异步模块模式（AMD）实现执行顺序Widget 模式模版引擎实现封装成AMD模块提供一些子系统，指定其职责并组合代码：https://github.com/baixc1/csdn/tree/master/DesignPatterns/Skill同步模块模式（SyncModuleDefine(SMD)）定义：将复杂的系统，分解成高内聚、低耦合的模块（模块系统），使系统开发变得可控，可维护，可拓展模块管
2021-04-25 18:00:10
200
原创 技巧型设计模式（二）
技巧型设计模式（二）简单模版模式（SimpleTemplate）核心示例一：展示模版惰性模式（Layier）核心示例一：点击事件的封装参与者模式（Participator）核心示例一：函数原型bind方法实现示例二：函数柯里化示例三：事件绑定示例四：反柯里化函数等待者模式（Waiter）核心示例一：模拟并发请求，集中处理其结果通过一定技巧，解决某方面问题代码：https://github.com/baixc1/csdn/tree/master/DesignPatterns/Skill应用：大型框架（
2021-04-22 11:00:40
145
原创 技巧型设计模式
技巧型设计模式链模式（OperateOfResponsibility）核心示例一：jQuery 获取元素功能示例二：jQuery 方法拓展示例三：jQuery 操作 DOM 方法委托模式（Entrust）核心示例一：事件委托数据访问对象模式（DataAccessObject-DAO）核心示例一：html5 的 localStorage 访问封装节流模式（Throttler）核心示例一：返回顶部示例二：浮层优化示例三：图片延时加载示例四：批量上传统计数据通过一定技巧，解决某方面问题代码：https://
2021-04-19 12:08:55
191
原创 行为型设计模式（二）
行为型设计模式（二）命令模式（Command）核心示例一：自由化创建视图示例二：绘图命令访问者模式（Visitor）核心示例一：IE 兼容示例二：操作类数组对象中介者（Mediator）核心示例一：导航设置功能备忘录模式（Memento）核心示例一：网络请求数据的缓存迭代器模式（Iterator）核心示例一：简化循环遍历示例二：数组/对象迭代器示例三：同步变量迭代器示例四：分支循环嵌套问题解释器模式（Iterpreter）核心示例一：统计元素路径用于不同 对象间 职责划分或算法抽象命令模式（Comm
2021-04-09 18:09:18
6830
原创 行为型设计模式
行为型设计模式模版方法模式核心应用一：提示框应用二：多类导航观察者模式观察者对象实现示例：新闻评论功能对象间解耦状态模式核心示例一：投票活动示例二：超级玛丽策略模式核心示例一：商品促销示例二：表单验证职责链模式核心示例用于不同 对象间 职责划分或算法抽象模版方法模式核心定义：父类定义一组算法骨架，子类在复用父类的同时，扩展功能应用：公共组件的封装，基础类组件封装（定制化组件，提供多个类型组件的统一修改入口）重点：子类型，共享父类型组件的样式及功能，利于功能统一，代码维护和扩展。（方法重用、
2021-03-30 20:31:57
136
原创 结构型设计模式
结构型设计模式外观模式核心实现适配器模式核心适配同类框架适配异类框架参数适配器服务器端数据适配代理模式核心应用一：站长统计应用二：JSONP应用三：代理模版装饰者模式核心实现桥接模式核心应用一：为不同的元素，添加相同的事件交互应用二：多元化对象组合模式核心应用一：新闻模块应用二：表单享元模式核心应用一：分页功能应用二：享元动作代码结构型设计模式，关注于如何将类或对象，组合成更大、更复杂的结构外观模式核心目的：为复杂的子系统的访问，提供统一的、简便的接口应用：API的兼容性封装，代码库的功能封
2021-03-22 19:27:35
105
原创 创建型设计模式
创建型设计模式简单工厂模式核心构造函数生成对象普通对象封装工厂方法模式简单工厂模式的局限核心抽象工厂模式抽象类的概念使用寄生式继承实现子类继承父类建造者模式核心原型模式单例模式特点：创建对象（考虑可用性，复杂度）简单工厂模式又叫静态工厂方法。由工厂对象 创建 产品对象类 的实例。核心方式一：使用 构造函数 + 原型，生成实例方式二：使用对象（非构造函数实例化）构造函数生成对象封装工厂函数的细节，暴露名称（简化使用）基于类和原型的方式，可使用原型链的继承// index.js
2021-03-14 11:23:31
98
2
原创 学习笔记（同构应用之router, redux）
学习链接從零開始實作 SSR — Redux 篇從零開始實作 SSR — React-router 篇需求：在 webpack实现ssr打包 的基础上，实现路由功能，状态管理Router功能根据不同的 请求URL，后端生成不同的页面字符串返回首次渲染后，以 SPA 应用的方式管理路由实现使用 react-router-dom ，服务端使用 StaticRouter 渲染 对应路由 的页面。前端在首次渲染后，再次渲染时使用 BrowserRouter同构应用的路由组件// sr
2021-03-10 18:03:07
117
原创 webpack实现ssr打包
服务端渲染express 服务器// server/index.jsconst express = require("express");const path = require("path");const fs = require("fs");const app = express();app.use(express.static("dist"));app.use((req, res) => { const ret = fs.readFileSync(path.join(
2021-03-09 19:35:43
516
原创 JavaScript 面向对象编程 (封装、继承、多态)
JavaScript 面向对象编程（封装、继承、多态）学习书籍：《JavaScript 设计模式》封装属性概念属性概念的模拟实现 - 类类创建对象的安全模式继承类式继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承相关问题多继承多态代码学习书籍：《JavaScript 设计模式》封装属性概念私有成员（属性/方法）公有成员静态成员实例成员保护方法属性概念的模拟实现 - 类Book类的实现（构造函数 ）静态属性：原型属性或闭包实现的局部变量（只用赋值一次）实例属性：构造函数
2021-02-28 21:26:12
240
2
原创 webpack之output.libraryTarget测试
学习链接【webpack系列】webpack打包组件和基础库核心library的值被如何使用，会根据libraryTarget的取值不同而不同。libraryTarget配置的作用是控制 webpack 打包的内容是如何暴露的配置
2021-02-17 12:01:34
891
原创 动态import及其源码分析
vscode去除源码注释正则/\*+///.*$/\*.*\*/格式化文档^\n测试代码// index.jsimport('./a').then(v => console.log(v))// a.jsconsole.log('a.js')export const count = 1export default 2// webpack.config.jsmodule.exports = { mode: 'none',}函数调用过程webpack_requ
2021-01-31 21:23:27
342
2
原创 前端路由简单实现
目录核心hash 路由history 路由相关api实现详细实现参考代码核心改变 url 且不让浏览器像服务器发送请求可以监听到 url 的变化hash 路由原理：监听 url 中 hash 值部分的变化，响应不同的事件（）api：hashchange<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co
2021-01-26 22:24:11
112
原创 css实现带尖括号的横线
目录效果图原理代码参考链接效果图原理css伪元素 + 两个三角形重叠（border）代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
2021-01-26 09:20:50
465
原创 webpack之scope hoisting
目录不使用 scope hoisting 情况使用 scope hoistingPrevent and Rootrequire 示例import() 函数示例scope hoisting：作用域提升不使用 scope hoisting 情况代码// webpack.config.jsmodule.exports = { mode: 'none',}// index.jsimport { count } from './b.js'console.log(count);// b.
2021-01-18 17:03:05
140
1
原创 webpack5打包生成文件分析（commonjs和es6模块系统）
目录相关配置生成文件分析es6模块和commonjs模块输出值es6模块和commonjs模块动态加载es6模块和commonjs模块循环引用参考链接demo相关配置webpack5// webpack.config.jsmodule.exports = { mode: 'none'}// index.jsimport str from "./main.js";console.log(str);// main.jsexport default "hello leo~";生成
2021-01-16 21:50:01
1665
原创 webpack之Tree Shaking
目录Tree ShakingTree Shaking定义Tree Shaking原理Dead Code 特征不同模式测试1. development 模式2. production 模式sideEffects副作用使 Tree Shaking 失效副作用导致的问题sideEffects 作用sideEffects 注意事项参考链接测试代码Tree ShakingTree Shaking定义树抖动（Tree Shaking），是JavaScript上下文中常用于消除死代码的术语通俗：通过工具"摇"J
2021-01-03 19:20:42
661
1
原创 webpack之SplitChunksPlugin
使用 SplitChunksPlugin 提取 chunks 中的公共代码，生成新的 chunkchunk 的三种情况项目入口 entry通过import()动态引入的代码通过 splitChunks 拆分出来的代码splitChunks 默认配置（部分）module.exports = { //... optimization: { splitChunks: { chunks: 'async', // chunk 类别， async 查动态导入模块（
2021-01-01 20:04:09
156
原创 学习笔记13（webpack进阶1）
webpack进阶自动清理构建目录自动清理构建目录文件指纹策略：https://juejin.cn/post/6844903935812059144使用 clean-webpack-plugin 插件// webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin');const path = require('path');module.exports = { mode: "produc
2020-12-21 22:07:18
260
原创 学习笔记12（webpack入门）
目录目录结构workspace目录结构backend 后端服务内容business 业务配置中心，模拟云函数架构存储函数内容的地方server 服务端运行逻辑workspace 模拟开发者工作空间workspace
2020-11-30 18:49:59
542
原创 学习笔记11（vue3响应式实现）
目录Vue3 如何追踪变化？es6 Proxy参考链接Vue3 如何追踪变化？es6 Proxy定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）使用 new Proxy(target, handler) 劫持对象访问可以劫持任何属性的访问，Object.defineProperty 只能固定属性// chrome 控制台测试const dinner = { meal: 'tacos'}const handler = { get(target, prop) {
2020-11-19 15:42:57
360
原创 学习笔记10（eslint）
目录1. 使用chainWebpack配置插件2. 配置eslint1. 使用chainWebpack配置插件webpack插件页：https://webpack.js.org/plugins/ProvidePlugin使用模块（无需导入）作为全局变量DefinePlugin编译时创建可配置的全局变量根据不同的环境，实现不同功能字符串格式（序列化JSON.stringify）vue.config.js 配置module.exports = { chainWebpac
2020-11-17 17:17:43
499
原创 学习笔记9（nodejs之rpc封装）
目录0. 链接1. 公共模块2 client 客户端 rpc类3 serve 服务端 rpc类4. 使用0. 链接参考：https://github.com/geektime-geekbang/geek-nodejs/tree/master/chapter3代码：https://github.com/baixc1/csdn/tree/master/note/note9/npmjs-module-test/rpc/demo/demo61. 公共模块封装公共方法的父类constructor
2020-10-29 19:48:50
254
原创 学习笔记8（nodejs之RPC、buffer、net）
express源码1. express初始化参考链接express和koa的区别1. express初始化express.js继承EventEmitter.prototypeexports = module.exports = createApplication;function createApplication() { var app = function(req, res, next) { app.handle(req, res, next); };
2020-10-15 10:52:40
267
原创 学习笔记7（Nodejs之express中间件）
目录1. Node.js可以用来做什么？1.1 提供Web服务1.2 构建工作流1.3 开发工具1.4 可扩展性较强大的沙盒游戏1.5 客户端应用2. 异步编程方案2.1 并行和并发2.2 事件循环和任务队列学习链接：Node.js实战-技术预研异步编程方案的演进一文搞懂并发和并行JavaScript 异步、栈、事件循环、任务队列1. Node.js可以用来做什么？1.1 提供Web服务搜索引擎优化 + 首屏速度优化 = 服务端渲染服务端渲染 + 前后端同构 = Node.js1
2020-09-27 19:22:27
445
原创 学习笔记6（vue响应式实现和渲染函数）
目录1. vue 响应式实现1.1 data 响应式1.2 computed1. vue 响应式实现学习链接：https://juejin.im/post/6844903981957791757核心概念Watcher：初始化组件实例及更新组件reactive：初始化数据模型data，劫持数据访问与修改dep：收集渲染函数及收到通知执行渲染函数（观察者模式）1.1 data 响应式使用const data = reactive({ msg: 'Hello World',}
2020-09-14 16:12:36
232
原创 学习笔记5（NODE_ENV，typescript 数据类型，接口，类）
这里写目录标题1. process.env.NODE_ENV1. process.env.NODE_ENVnode 原生对象 env使用 node 命令该文件可用// NODE_ENV=development node 1.jsconsole.log(process.env.NODE_ENV)// developmentwebpack 中使用项目中可用值中必须包含引号// webpack.config.jsconst path = require('path')
2020-09-05 20:04:35
520
原创 学习笔记4（vue响应式，html解析）
目录1. data2. 响应式1. data原始数据对象：vm.$datavm 代理了 data的 propvm.a = vm.$data.a2. 响应式状态管理：修改数据模型，更新视图实现原理（vue2.x）Object.defineProperty, 把 prop 转化为 getter/settervue 不能 检测到 对象的变化（内存地址不变）import Vue from 'vue'const data = { a: 1 }var vm = new
2020-08-31 16:50:41
313
原创 Vue学习笔记3（vscode插件, slot插槽）
笔记1. vscode配置（自动保存并格式化代码）2. vue插槽2.1 插槽内容2.2 具名插槽2.3 作用域插槽2.4 其它示例3. v-slot 和 slot 属性 区别4. 代码1. vscode配置（自动保存并格式化代码）.vscode 文件夹只针对当前项目settings.json：工作空间设置、代码格式化配置、插件配置vscode配置：https://juejin.im/post/6844903826063884296vscode 官网：https://code.vis
2020-08-20 18:56:58
1023
原创 vue学习笔记2（iview对话框组件封装）
问题：子组件修改父组件值时，报错弹窗封装为组件Modal组件点击右上角关闭按钮，或者点击遮罩层关闭弹窗时报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders代码<template> <Modal v-model="value" title="弹窗"> xxx <But.
2020-08-19 16:44:12
636
2
原创 Vue学习笔记1（webpack配置）
webpack 和 webpack-dev-server开发依赖：–save-dev / -Dwebpack.config.js： 配置文件运行问题： Error: getaddrinfo ENOTFOUND localhost，switchhost加上localhost的映射自动打开页面，跟路径指向当前目录（localhost:8080）热更新"dev": "webpack-dev-server --open --config webpack.config.js"输入：ent.
2020-07-24 18:26:30
198
原创 vue学习笔记
目录0. 链接1. vue-cli环境搭建2. 简单小demo（vue）3. vue-router4. vuex0. 链接参考链接：https://cn.vuejs.org/v2/api/demo：1. vue-cli环境搭建官方文档：https://cli.vuejs.org/zh/guide/快速搭建项目sudo npm install -g @vue/cli @vue/...
2020-05-05 23:16:59
101
原创 redux学习笔记（中间件）
目录参考文档一. 使用中间件二. 中间件源码(thunk)三. applyMiddleware函数参考文档https://blog.youkuaiyun.com/Donspeng/article/details/83032832一. 使用中间件dispatch 一个 action，到达reducer之前，定制额外功能（dispatch功能增强）组合多个 中间件 模块（洋葱卷模型）middle...
2020-05-03 18:32:57
113
原创 redux学习笔记（入门）
标题0. 参考链接1. 基本概念2. 入口文件3. Action4. Reducer5. 展示组件6. 容器组件7. 常用 api0. 参考链接https://www.redux.org.cn/demo1. 基本概念Action修改 store状态 的事件store.dispatchReducerAction 的具体实现纯函数，根据当前 state、action ...
2020-05-02 19:02:55
136
原创 GIF批量生成（js）
生成图片数组（GIF帧）//GIF生成图片数组,url：base64.//返回图片数组async function gifToFrames(url) { return new Promise(async resolve => { const div = document.createElement("div"); const img = do...
2020-04-24 18:40:39
370
原创 WebSocket学习笔记（一）
目录1. 概述2. WebSocket 协议3. 使用参考链接1. 概述本质：HTML5新增协议目的：在浏览器和服务器间，建立一个不受限的双向通信通道传统HTTP协议：请求 - 响应协议（服务器无法主动发送消息）应用：实时聊天，多人游戏（数据实时同步）HTTP轮询（Comet）问题：实时性不够，请求频繁2. WebSocket 协议浏览器请求GET ws://localh...
2020-04-16 11:39:43
164
原创 react小功能 - 文字移动
需求：模拟在图片上拖动文字功能，计算文字的坐标思路：通过鼠标事件（点击、移动、抬起）计算鼠标的移动距离，累加到文字的坐标上github：https://github.com/baixc1/csdn/tree/master/react/canvas-text-moveimport React from 'react';import './index.scss'let isDown = ...
2020-04-14 15:12:13
262
原创 gif图片解析与生成（GIF+文字动效）
生成 gif 图（平移+旋转+缩放）解析 GIF 图片 （生成每帧图片的base64）libgif.js 插件生成 GIF 实例解析每一帧需要在服务器端运行（node server.js），然后访问根目录 var rub = new SuperGif({ gif: img }) rub.load(() => { const imgs = [] ...
2020-04-13 18:23:28
1540
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人