javascript
文章平均质量分 56
一个抱抱一首歌
加油鸭
展开
-
Rollup(4): Rollup-plugin-vue 编写我们的按钮组件
Rollup 开发 vue2 组件原创 2022-09-12 20:48:03 · 818 阅读 · 0 评论 -
Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用
rollup的组件开发原创 2022-08-27 15:14:29 · 2312 阅读 · 0 评论 -
Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用
rollup-plugin-commonjs 和 rollup-plugin-node-resolve原创 2022-08-25 20:24:30 · 2410 阅读 · 0 评论 -
Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
Rollup是一个JavaScript模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的ES6版本中,而不是以前的特殊解决方案,如CommonJS和AMD。ES6模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现,但当前Rollup可以使你提前体验。原创 2022-08-24 20:29:46 · 805 阅读 · 0 评论 -
eggjs 搭配 vue+axios 实现登录和获取用户信息
egg.js 实现 vue+axios 实现登录和获取用户信息原创 2022-06-18 14:53:48 · 1040 阅读 · 0 评论 -
React 高阶组件(Hoc)实现权限控制以及Context的应用
React高阶组件原创 2022-06-07 20:57:04 · 514 阅读 · 0 评论 -
webpack5中的 tree-shaking
tree-shaking简介通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。配置前置在这之前我们安装下,分析插件,可以更好配合我们看到效果执行 npm install webpack-bundle-analyzer打开 webpack.config.js , 配置 webpack-bundl原创 2022-05-25 10:15:25 · 1528 阅读 · 1 评论 -
eggjs 实现增删改查
本章节是在于如何实现一个增删改查前置工作新建 app -> utils -> utils.js , 该方法是为了处理返回结果function responseFormat(status, data) { if (status) { return { code: 200, msg: '请求成功', data, success: true, }; } return { code: 500, msg.原创 2022-04-09 15:56:20 · 2030 阅读 · 0 评论 -
eggjs+mysql实现图片上传
eggjs 实现图片上传实现思路将图片上传到服务器某个文件夹,并且将数据存放数据库数据库建表,表结构为打开 config -> config.defalut.js ,先引入 const path = require('path'); , 再加入//文件存放路径和文件白名单 config.uploadDir = 'app/public/img'; config.multipart = { mode: 'file', fileSize: 1048576000,.原创 2022-04-09 15:12:30 · 2402 阅读 · 10 评论 -
egg.js 配置 mysql 以及简单登录实现
eggjs 的部署以及安装eggjs 添加 mysqlnpm install egg-mysql安装以后,打开 conifg -> plugin.js , 加入mysql: { enable: true, package: 'egg-mysql', },打开 config -> config.default.js,加入 config.mysql = { // 单数据库信息配置 client: { // host host.原创 2022-03-26 15:24:37 · 2875 阅读 · 2 评论 -
egg.js 配合 jwt 进行鉴权
eggjs 的部署以及安装egg + jwt 大概流程:1. 前端登录的时候,后端在返回用户信息的时候返回token给前端2. 前端拿到后放在 本地缓存 等方式3. 前端在请求除了登录接口的其他接口将token放在请求头返回给后端 安装 和配置 JWT控制台执行命令安装 jwtnpm install egg-jwt打开项目下 config -> plugin.js,加入配置 jwt: { enable: true, package: 'egg-jwt', },.原创 2022-03-26 14:27:47 · 1019 阅读 · 0 评论 -
antd InputNumber 几种正则类型
只能输入正整数 <a-input-number v-model="form.quantity" :initialValue="0" :max="100000" :disabled="inputVisible" :min="0" :parser="value => value.replace(/[^0-9]/g, '')" type="number" step="1">&.原创 2022-02-24 11:39:55 · 781 阅读 · 0 评论 -
Vue2 父子组件挂载顺序
父子组件挂载顺序 父: beforeCreate => 父: created => 父: beforeMount => 子: beforeCreate => 子: created => 子:beforeMount => 子:mounted => 父: mounted更新过程(父组件自己)父:beforeUpdate => 父: updated更新过程(影响子组件)父:beforeUpdate => 子: beforeUpdate =&g.原创 2021-12-15 10:50:24 · 1848 阅读 · 1 评论 -
Vue2中Computed简单讲解以及实现
Computed 简单讲解上一回说了Vue的第二种watch也就是$Watch 接下来讲讲第三种 wachter也就是 computed(计算属性) 计算属性的特点 调用后执行依赖的数据改变会重新计算具有缓存性调用后执行,调用后执行,我们可以想想我们定义data的时候,一样是调用后执行,所以我们联想到老朋友Object.defineProperty(target, key, sharedPropertyDefinition)而且依赖的数据发生改变,我们可以想象到我们可以在每个依赖的数原创 2021-12-08 11:32:21 · 6345 阅读 · 0 评论 -
Vue2 的 Watcher解析以及简单实现
Watcher上回说到,有一个Watcher会一直去相应数据的notify。今天说说Vue的第二个Watcher也就是$watch这个watcher的回调函数不是updateComponent,不会去执行render等相关函数,只会执行自身定义的函数那问题来了,如果是我们设计。我们可以怎么设计这个函数能让在数据变化的时候执行他呢我们想到的就是,如果我也把他丢到数据的Dep的subs中,那么数据相应是Dep中的sub.notify不就可以一起执行updateComponent和$wa原创 2021-12-06 16:59:58 · 1165 阅读 · 0 评论 -
Vue2 中 Observer 一些探究
Observer 简单讲解源码目录 src\core\observer\index.jsexport class Observer { value: any; dep: Dep; vmCount: number; constructor (value: any) { this.value = value // 创建了一个dep实例 // 负责对象变更通知:新增属性或者删除属性,数组7个操作 this.dep = new Dep() this.原创 2021-12-04 17:25:50 · 1643 阅读 · 0 评论 -
Vue2数据发生变化到页面变化基本流程(附简单实现)
Vue的数据改变原理先将数据进行Obj.definedProperty() 进行绑定 , 如果数据为数组或者对象进行绑定当页面开始渲染会定义updateComponent方法,这个方法主要就是为了调用render方法进入render的时候会执行页面使用的值,这时候会触发该数据的get属性开始进行绑定依赖,大概如图示之后通过patch方法将节点进行更新替换或者新增如果数据发生改变,会执行数据的set方法,这时候数据的Dep.notify会调用Dep.notify 回去调用绑定的Wat原创 2021-12-02 14:11:16 · 1837 阅读 · 0 评论 -
Chrome +Nodejs 调试 JS代码
Nodejs+Chrome 调试JS在谷歌的地址栏打开 chrome://inspect,并点击黄色部分,弹出窗口Devtools新建 chunk.js 文件import pkg from 'lodash';const { _ } = pkg;console.log(_.chunk(['a', 'b', 'c', 'd'], 2))打开控制台 输入 node --inspect-brk chunk.js这时候控制台会自动弹出然后就可以像以前一样正常打断点调试了参考:Node调原创 2021-11-18 16:39:26 · 363 阅读 · 0 评论 -
vant-form 统一校验表单
vant 官网 点击进入vant 官网提供了submit按钮,但是submit按钮实在很不好用(防抖节流用不了,独立样式不好用)vant 官网提供的form的校验方法 :当我在输入: console.log(this.$refs.form)输出的是:发现了其中的validateAll,打断点进去,发现该方法用Promise.all去提交所有验证,如果发现errors.length大于1,返回reject,否则返回resolve validateAll: function va.原创 2021-11-08 11:19:39 · 7686 阅读 · 0 评论 -
深度优先遍历和广度优先遍历
最近看手写浅拷贝和深拷贝一直刷到用深度优先遍历和广度优先遍历,想起以前大学也学过东西,老是容易忘,特此记录下写法深度优先遍历var arrResult: Array<string> = []var testArr: Array<any> = [{ name: 'a', children: [{ name: 'a1', children: [{ name: 'a11' }, { .原创 2021-10-15 10:24:07 · 246 阅读 · 0 评论 -
antd a-form-model 动态表单 自定义校验柯里化
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-09-15 16:24:30 · 2555 阅读 · 0 评论 -
从输入url到页面输出的过程发生了什么以及优化方向
从输入url到页面输出的过程发生了什么浏览器渲染过程输入url 去浏览器等缓存中寻找资源(强缓存,协商缓存) 浏览器向DNS(Domain Name System)服务器请求解析该URL中的域名对应的IP地址 (cdn 分派) 解析后 将ip地址和默认端口80去服务器建立tcp链接 浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求,该请求报文作为TCP三次握手的第三个报文的数据发送给服务器 (三次握手) 服务器对浏览器请求做出响应,并把对应的html文本发送给浏览器原创 2021-08-23 15:57:20 · 191 阅读 · 0 评论 -
Pormise部分api(all,any,race,allSettled)
var p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('成功') },1000)});var p2 = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('失败') },2000)});var p3 = new Promise((resolve,reject)=&g原创 2021-07-24 14:43:38 · 480 阅读 · 0 评论 -
手写一个Vue-Router
krouter.jslet Vue;// 实现一个插件 挂载$routerclass VueRouter { constructor(options){ this.$options = options; Vue.util.defineReactive(this,'current','/') window.addEventListener('hashchange',this.onHashChange.bind(this)) win原创 2021-06-28 22:53:26 · 100 阅读 · 2 评论 -
thinkphp+vue 实现token验证(jwt)
环境thinkphp+jwtvuejs原理登录时候tp将生成的jwt通过userid生成的token传给前端前端通过localstorage进行保存前端在请求某些接口会带上token原创 2021-06-20 20:29:43 · 1098 阅读 · 0 评论 -
用svg写一个圆形进度条
<div class="foxconn-progress foxconn-progress-circle "> <div class="foxconn-progress-inner" style="width: 180px; height: 180px; font-size: 24px;"><svg viewBox="0 0 100 100"> <path class="foxconn-progress-ci原创 2021-04-24 16:35:54 · 125 阅读 · 0 评论