- 博客(33)
- 收藏
- 关注
RSS订阅原创 mac安装node切换工具nvm
nvm是node版本管理工具nvm github文档地址安装步骤-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bashexport NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR
2022-04-12 11:21:34
731
1
原创 页面路由切换时，路由钩子函数，生命周期函数执行顺序
情况1, 两个页面不存在keepAlivepageA 切换到 pageB 路由钩子和生命钩子函数的执行顺序pageA -->pageA beforeRouteLeave -->全局 beforeEach -->pageB beforeEnter -->pageB beforeRouteEnter --> 全局 beforeResolve -->全局 afterEach -->pageB beforeCreate -->pageB created --
2021-08-30 00:20:27
2139
原创 sticky的基本使用
position: stickyposition: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失
2021-06-20 23:24:34
1279
原创 Promise 原理总结
手写一个符合 promise/A+规范的 Promise首先我们知道实现异步的方法 有 Promise，async、await ,回调,generator+co 库,这次我们主要讲的是 Promise根据 promise/A+规范 我们可以了解到解决（fulfill）：指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。拒绝（reject）：指一个 promise 失
2021-06-20 12:08:36
247
原创 drag Api 拖拽用法示例
drag看了已到面试题才了解到有drag这么一个api, 今天简单的做了个示例<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont
2021-06-04 23:56:15
251
原创 vue中使用 animate.css
下载 animate.cssnpm i animate.css -S在main.js 引入import animated from "animate.css";Vue.use(animated);使用方法 <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" > <div class="banner-l
2021-03-28 23:55:12
135
原创 webpack基本用法
webpack5 中文官网 "webpack": "^5.28.0", "webpack-cli": "^4.5.0"webpack 其实就是一个打包构建工具,静态模块打包器确定一个入口文件将引入的模块 chunk 进行编译生成 bundle 俗称 打包废话不多讲了，开始吧webpack 五个核心概念entry指定入口文件output输出文件,位置，文件名loader 翻译官处理非 js 文件，webpack 自身只能打包 js 或 json如：
2021-03-28 21:08:26
363
原创 node express koa 热更新插件
npm install node-dev -D// package.json 里的script中，配置"dev": "node-dev ./bin/www"// 启动项目npm run dev
2021-03-24 17:41:19
175
原创 koa基本用法
koa 用法前言Koa 基于最新的 Es6 Es7 语法运行速度相比 Express 更快，Koa 中用了 Es7 中的 Async 和 Await 完美的解决了异步开发中的回调问题。 建议 node 版本 8.0 以上npm i koa -S了解 ES7 语法 async awaitlet p1:Promise = async function getdata() { return 1;}getdata.then(data=>{ console.log(data)})
2021-03-24 17:38:51
504
原创 js事件执行时间间隔
console.time('start');let str = ''for (var i = 0; i < 1000000; i++) { str += i}console.timeEnd('start');// start: 178.38720703125 ms
2021-03-24 11:20:17
406
原创 防Vue系列-12 数据代理Proxy函数
上一节：防Vue系列-11 为防Vue系列-07添加响应式代码在vue中可以通过this.age来获取age的值接下我们将创建一个proxy函数作用数据代理 /** *@params target:any (当前vue实例对象) *@params data:String *@params key:any */ // 中间代理proxy 将某个对象属性映射到另一个对象的属性上 function proxy(target, data,
2021-03-22 16:33:58
273
原创 防Vue系列-11 为防Vue系列-07添加响应式代码
// ==========================响应式函数deepProperty=================================== // 要拦截的数组方法 let arrs = [ "push", "pop", "shift", "unshift", "reserve", "splice", "sort", ]; ...
2021-03-21 23:06:58
109
原创 深拷贝的两种方式
深拷贝的两种方式方式一 let arr = { name: "11", fun() { console.log(111); }, }; let arr1 = { age: "18", ...arr }; arr.name = "c1"; //arr.name 发生变换是不会影响到arr1 arr1.fun();方式二 let arr = { name: "11", fun() { cons
2021-03-21 22:28:54
110
原创 防Vue系列-10 扩展deepProperty函数,拦截数组的方法
创建拦截数组的一个代理方法 // 要拦截的数组方法 let arrs = [ "push", "pop", "shift", "unshift", "reserve", "splice", "sort", ]; // 获取数组对象 let arrays = Object.create(Array.prototype); // 在原型数组中添加拦截器 arrs.forEach((elem
2021-03-21 21:24:20
120
原创 防Vue系列-09 deepProperty封装Object.defineProperty
再次思考怎么将 obj 变成响应式 var obj = { title: "英雄联盟", heros: [ { name: "金克斯", arms: "枪炮" }, { name: "蛮王", arms: "大刀"}, ], map: { title: "小地图", }, };将上篇文章的Object.defineProperty函数封装处理/***@params target:
2021-03-21 19:38:34
146
原创 防Vue系列-08 初步了解响应式原理Object.defineProperty
vue中怎么做到当数据发生变化的时候,页面中的数据也跟着响应发生了变化？请看以下代码这里运用了原生的Object.defineProperty这个api,vue中上帝的钥匙/***@params obj:Object 要响应的对象*@params key:String obj中的响应的key值*@params config:Object 配置 enumerable是否可以被枚举*/let obj = { name: "小陈", age: 18, sex:"男" }Ob
2021-03-21 19:01:43
106
原创 防Vue系列-07 将前几篇的代码知识点进行整合
本篇主要讲之前的代码的知识点,进行整合这里我们用combine替换之前的compilercombine用来合并数据与带有{{}}虚拟的Domcompiler用来合并数据与带有{{}}真实的Dom<div id="root"> <p>{{ name.firstName }}</p></div>// ==========================combine函数 合并数据与带有{{}}虚拟的Domdom===================
2021-03-21 17:57:16
116
原创 防Vue系列-06 了解函数柯里化
这里来个小插曲,学习一下函数柯里化(高阶函数),下列函数的作用是缓存obj,减少不必要的重复加载冗余的代码 let tagStr = "div,h1,h2,span,a,strong,p"; //目标字符串 function isAttrMap() { let arr = tagStr.split(","); let obj = {}; arr.forEach((el) => { obj[el] = true;
2021-03-21 16:42:52
144
原创 防Vue系列-05 怎么将VNode转换成真正的Dom
接着上篇文章初步了解 virtual DOM创建createElement函数 作用:将VNode转换成真正的Dom /* *@params tag:String 'div||span||h1' *@params data:Object '{id:'root,class:'theme'...}' *@params value:String 'nodeValue || undefined' *@params type:Number 'nodeType=1 || 2 ||3 ' *@par.
2021-03-21 13:32:57
985
原创 防Vue系列-04 初步了解 virtual DOM
virtual DOM(虚拟dom,VNode）为什么要用VNode,主要是考虑性能问题,频繁的操作dom会有点性能问题,主要是我们只修改一部分的数据，却要重新渲染整个dom。接下来让我们来初步了解一下VNode思考怎么将一下的dom 标签转换成,VNode对象形式<div id="root" class="theme"> <h2 class="a" title="hello">hello1</h2> <div>hello2&l
2021-03-21 12:45:11
128
原创 防Vue系列-03 添加解析data.xxx.xxx函数
怎么将解析data.xxx.xxx <div id="root"> <p>{{ name.firstName }}</p> </div>如何解析{{name.firstName }}//解析data.xxx.xx/***@params obj:Object data:{nama:{firstName:'小'，lastName:'陈'}}*@params path:String 'xxx.xxx'/ funct
2021-03-21 11:12:14
115
原创 防Vue系列-02 将上篇的代码改成Vue的形式
改成Vue的形式//正则,用来匹配{{}} let r = /\{\{(.+?)\}\}/g;/***@params template:DOM*@params data:Object*/function compiler(template, data) { let childNodes = template.childNodes; //取出root下的子节点 // 遍历子节点 for (let index = 0; index < childNodes.length;
2021-03-20 22:16:40
130
原创 防Vue系列-01 怎么将带{{}}真实dom的数据转成带数据dom
怎么将带{{}}真实dom的数据转成带数据dom//步骤拆解 // 1.拿到模板 let templateTest = document.querySelector("#root"); // 2.拿到data let data = { name: "张三", msg: "信号", age: 18, }; //正则 let r = /\{\{(.+?)\}\}/
2021-03-20 21:01:26
118
原创 原生js 操作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .addClass{ display: inline-block; margin: 0 auto; background-color: #0f0; } #test { wid
2020-07-04 00:26:23
150
原创 css初始化样式
//腾讯body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px,"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{col
2020-06-20 21:20:38
164
原创 JQuery
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0
2020-06-17 23:49:17
101
原创 原生ajax请求，$.ajax请求，原生封装方法
下面展示一些 内联代码片。 // -------------------$.ajax restful get风格的选择------------------------ $("#restfulget").on('click',function () { $.ajax({ url:'http://localhost/user', success:function (data) { console.log(data); } }) }) // -----
2020-06-14 16:11:01
266
原创 git操作步骤
初始化配置配置用户名和邮箱地址Git config --global user.name ‘自定义’Git config --global user.email ‘自定义’Git config --list 查看信息创建新项目git remote rm origin 删除相同旧别名//第一步git 初始化git仓库git init//可以查看暂存区中的文件状态git stat...
2020-06-07 22:37:29
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人