- 博客(108)
- 收藏
- 关注
RSS订阅原创 基于vue3，prosemirror 和 tiptap开发的【可分页】富文本编辑器Cool Editor
vue prosemirror提供最基础的脚手架 tiptap二次api封装的富文本编辑器coolEditor，可进行分页。 可以有很大的想象空间 本项目主要用于 电子病历的预研**基础架构 prosemirror和tiptap。
2024-07-16 18:37:48
969
原创 面试题（温习一下）
*vue中的面试题*https://segmentfault.com/a/1190000016344599*输入url浏览器发生了什么 三次握手，四次挥手*client想结束的时候, server得先确保手中的数据发送完才能够结束https://blog.csdn.net/baiqiangdoudou/article/details/88548288*首屏优化*****https://zhuanlan.zhihu.com/p/88639980?utm_source=wechat_sessio
2021-09-22 23:51:00
3153
原创 深度理解call 手写 举一反三
面试官：手写call、apply、bind⭐⭐⭐⭐⭐答：call和apply实现思路主要是：判断是否是函数调用，若非函数调用抛异常通过新对象（context）来调用函数给context创建一个fn设置为需要调用的函数结束调用完之后删除fnbind实现思路判断是否是函数调用，若非函数调用抛异常返回函数判断函数的调用方式，是否是被new出来的new出来的话返回空对象，但是实例的__proto__指向_this的prototype完成函数柯里化Array.prototype.slice.
2021-09-22 11:04:00
156
原创 git: 分布式版本控制系统
git: 分布式版本控制系统1.版本控制系统开发中我们把每一次的修改都有效的进行记录（记录成一个版本），后期如果需要回退到原有的版本或者用当前的和某一个版本进行比较等，都可以有效的进行管理 常用的版本控制系统 svn(集中式)/git(分布式)2.分布式版本管理系统的特点s所谓分布式，就是每个开发者的本地客户端都是一个完整的仓库，都能记录历史版本信息，这样不需要联网，我们也能生成版本记录，也可以快速回退到某个版本Git是按照源数据（文件流）来实现文件的传输的，而svn是按照啊文件传输的
2021-09-14 18:57:35
158
原创 VUEX理解
Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vueX官方文档main.jsimport Vue from 'vue'import App from './App.vue'import store from './store'Vue.config.productionTip = falsenew Vue({ store, //一旦引用所有的组件都可以使用 store.
2021-09-09 01:04:38
117
原创 VUE生命周期函数理解
好好理解流程图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2021-09-09 00:48:09
91
原创 vue加入购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-09-06 02:39:41
116
原创 vue基础01
Mustache 语法0.变量1.运算2.三元运算符3.不能放js语句 定义变量 赋值 定义函数4.函数返回值（map可以）5.放对象时，左右两边需要空格vm.$el 获取挂载的根DOM元素vm.$mount("#app"); 挂载到内存上vm.set/vm.set/vm.set/vm.deletevm.$watch() 监视数据的变化，当数据发生变化就会触发vm.$nextTick() 获取DOM元素vm.$data()vm.$options 可以拿到所有的配置项###指令
2021-09-06 02:37:02
85
原创 83-84：几种常用的跨域解决方案
跨域问题的产生及其价值意义 JSONP跨域解决方案的底层原理 CORS跨域资源共享 基于http proxy实现跨域请求 基于post message实现跨域处理 基于iframe的跨域解决方案：window.name / document.domin / location.hash当前页面请求地址：http://127.0.0.1:5500/1.html (live server插件)axios.get(‘http://127.0.0.1:1001/test’).then(r
2021-08-20 18:52:37
142
原创 81：企业CRM客户系统：基于本地存储进行性能优化
为了减少服务器的请求压力，我们可以把从服务器获取的信息存储到客户端本地但是存储的信息是明文存储，这样会导致本地信息的泄露不安全此时我们更需要服务器的二次权限校验本地存储解决方案：[服务器存储]数据库Redis缓存session (和客户端的cookie有关联)【客户端本地存储】访问客户端本地存储的信息，受浏览器、源的限制（信息存储在客户端的本地，物理磁盘的某个位置，但是信息都是经过加密或者编码过的，非专业人士无法编码）ie浏览器中存储的一些信息，在谷歌浏览器中默认是无法
2021-08-18 18:18:07
129
原创 80：企业CRM客户系统：首页功能开发（AJAX串行并行）
ajax串行 上一个请求完成，才能执行下一个请求（上一个请求的结果会对下一个请求的有影响）promise.then(=>{}).then(=>{}).。。 awaitajax并行，多个请求是同时发送的，每一个请求成功后做的事情互不影响正常发布多个异步请求需要请求都成功在统一处理事情，基于 promise.all即可解决 let requestArr = [], results; //存储两个的结果 requestArr.push( axios.get('/user/inf
2021-08-18 18:09:58
88
原创 78：企业CRM客户系统：项目整体的框架
企业级CRM客户管理系统OA 企业办公管理系统ERP 企业战略资源管理系统CRM 客户管理系统CMS 内容管理系统TIM 及时通讯系统…技术栈服务器端：node + express + JSON 完成的支持跨域请求 CROS跨域资源共享数据存储采用 JSON 临时存储（真实项目中是基于数据库完成的：MD/MS）客户端：JQ + Axios + 自己封装的公共方法md5加密cookie的相关操作…1.跑通客户端和服务器端的环境1）把客户端先运行起来必须保
2021-08-15 00:00:57
293
原创 76：解读axios的基础语法
常用的AJAX库（调用起来更方便、操作起来更简单）：以JQ/ZEPTO为主的AJAX库（把AJAX四步操作进行封装、提供了JSONP跨域处理、对于一些常用操作[例如：GET/POST/表单序列化/参数处理等]进行封装处理）以AXIOS为主的AJAX库（不仅对AJAX进行封装，而且是基于PROMISE进行管理） [最常用的]ES6中新增的内置类Fetch来完成HTTP数据请求（记住：FETCH不是AJAX，他是新的通讯方案；而且默认基于PROMISE进行管理） [很多公司已经开始尝试使用]跨域请求方
2021-08-13 11:16:29
272
原创 75：实现电子商务平台中的倒计时抢购案例
有一个目标核定时间：2020/02/25 20:30:00获取当前的时间：2020/02/25 20:10:00获取当前客户端本地的时间（但是这个时间客户可以自己修改本地的时间）：真实项目中只能做一些参考的工作，不能做严谨的校验；严格校验的情况下，我们需要的时间是从服务器获取的；let time = new Date();如何从服务器获取时间，以及存在的问题1.可以基于ajax向服务器发送请求，服务器返回的信息中，响应头中包含了服务器时间（GMT 格林尼治时间 => 转换为北京时间 ne
2021-08-10 13:34:59
143
原创 74：AJAX基础知识大汇总(结合73)
AJAX基础知识1. 什么是AJAX？AJAX解决了网页异步刷新的问题+ 什么是同步刷新什么是异步刷新XML 和 JSON2.AJAX的基础操作核心四步创建XHR（ActiveXObject）打开URL监听状态和获取数据发送请求HTTP请求方式GET：GET、DELETE、HEAD、OPTIONSPOST：POST、PUTGET和POST系列的区别传递信息的方式POST相对安全GET容易产生缓存AJAX
2021-08-09 11:58:24
120
原创 73.AJAX基础介绍（全局和局部刷新）
AJAX基础知识AJAX：async javascript and xml 异步的JS和XMLXML（最早的时候，基于AJAX从服务器获取的数据一般都是XML格式数据，只不过现在基本上都是应用更小巧、更方便操作的JSON格式处理）HTML 超文本标记语言XHTML 严谨的HTMLXML 可扩展的标记语言（基于标签结构存储数据）异步的JS（基于AJAX实现局部刷新）服务器渲染（一般都是同步：全局刷新）客户端渲染（一般都是异步：局部刷新）服务器渲染时代(服务器压力大)
2021-08-08 04:30:19
204
原创 71-72：从地址栏输入网址到看到页面的完整步骤（前端性能优化点）
当用户在浏览器地址栏中输入网址，到看到页面，经历的步骤1.解析输入的URL地址（看上一篇70）2.DNS解析网站中，每发送一个TCP请求，都要进行DNS解析（一但当前域名解析过一次，浏览器一般会缓存解析记录，缓存时间一般在1分钟左右，后期发送的请求如果还是这个域名，则跳过解析步骤 =>这是一个性能优化点）真实项目中，一个大型网站，他要请求的资源是分散到不同的服务器上的（每一个服务器都有自己的一个域名解析）WEB服务器（处理静态资源文件，例如：html/css/js等 的请求）数据服
2021-08-05 19:00:04
603
原创 64：JS中的同步异步编程收尾案例(今日头条)
浏览器中的异步编程今日头条练习题错误点：await async2().then 首先想到微任务，等待Promise 结果变态题目易错点：await 右侧立即执行
2021-08-02 23:21:53
85
原创 63：PROMISE的基础语法2（Promise.all() ,async / await）
理解代码 //Promise返回resolve结果， Promise.resolve(10).then(result => { console.log(`成功：${result}`); return Promise.reject(result * 10); //将Promise的结果改为reject失败，后边就运行失败 }, reason => { console.log(`失败：${reason}`); }).then(result =&
2021-08-02 17:19:27
240
原创 62：PROMISE的基础语法1
项目中的尴尬情况,回调地狱举例子:向服务器发送请求/student?class=1 获取班级学员信息/score?stuId=[1,2,3] 返回学员的分数信息/jige?score=90 确定是否及格 …回调地狱：上一个回调函数中继续做事情，而且继续回调（在真实项目的AJAX请求中经常出现回调地狱）=>异步请求、不方便代码的维护 $.ajax({ url: '/student', method: 'get', data: { class: 1
2021-07-30 19:27:49
79
原创 60-61：JS中的事件队列和事件循环机制(宏任务和微任务)
JS本身是单线程的（浏览器只分配一个线程供JS代码自上而下运行）=>在JS中大部分操作都是同步编程：当前任务不完成，下一个任务是无法继续执行的，换句话说，任务是逐一执行的=>但是对于某些特殊的需求，也是需要按照异步编程的思维去处理的[浏览器端]定时器是异步编程JS中的事件绑定是异步编程Ajax/Fetch请求的发送（HTTP事务）Promise设计模式管控异步编程的（包括：async/await…）[Node端]progress.nextTicksetImmediate
2021-07-27 12:07:18
159
原创 58：数组和对象的深浅克隆
数组和对象的深浅克隆数组克隆1.展开运算符（浅克隆：只把第一级克隆一份过来，第二级及以后和原始对象公用相同的堆地址）let arr2 = […arr1];2.slice实现的也是浅克隆let arr2 = arr1.slice(0);…数组深度克隆1.基于JSON方法，先把原始对象转换为字符串，在把字符串重新定义为对象，此时实现了内容的深度克隆问题：如果对象中的某一项值是正则或者函数，基于JSON.stringify和JSON.parse处理后就不在是正则（变为空对象）或者函数（变为nul
2021-07-26 16:44:57
157
原创 57：ES6中常用的基础知识（大佬整理es6知识点）
温故而知新大佬整理知识点必看http://es6.ruanyifeng.com解构赋值主要是针对于数组和对象的：真实项目中，一般常用于把从服务器获取的JSON数据进行快速解构，赋值给对应的变量，帮助我们快速拿到对应的结果 let arr = [10, 20, 30, 40]; let [a, b, c, d] = arr; console.log(a, b, c, d); //10 20 30 40 let [a, , , b] = arr; console
2021-07-26 14:04:26
152
原创 56：详细解读移动端事件和事件库
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></t
2021-07-22 22:02:06
128
原创 47：事件委托和zTree树形结构菜单
事件委托：利用事件的冒泡传播机制完成的（当前元素的某个事件行为触发，那么其祖先元素的相关事件行为都会被触发）假设：一个大容器中有N个子元素，这N个子元素在点击的时候都要做点事情，此时我们可以这样处理方案一：给N个元素的点击行为都绑定方法，点击谁触发谁方案二：给容器的点击行为绑定方法，这样不管点击N个元素中的哪一个，容器的点击行为也一定会触发，此时我们在容器中根据事件源不同，处理不同的事情即可 =>事件委托方案 （性能好）常用树插件http://treejs.cn/zTree 是一个
2021-07-22 19:31:17
215
1
原创 46：实现电子商务网站放大镜的效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训-放大镜</title> <!-- IMPORT CSS --> <link rel="stylesheet" href="css/reset.min.css"> <style> .magnifier { box-sizing: border-box;.
2021-07-22 10:51:21
79
原创 41-45：事件对象和事件的传播机制
4.事件对象当前元素的某个事件行为被触发，不仅会把绑定的方法执行，还会给绑定的方法传递一个实参，这个实参就是事件对象；事件对象就是用来存储当前行为操作相关信息的对象；（MosueEvent/KeyboardEvent/Event/TouchEvent…）如果是鼠标操作，获取的是MouseEvent类的实例键盘事件对象除了以上：普通事件对象event手指事件对象（touchEvent）=>事件对象和在哪个方法中拿到的没关系，它记录的是当前操作的信息 鼠标事件对象 clientX/cli
2021-07-20 19:35:38
130
原创 40：事件和事件绑定的底层机制
1.什么是事件？浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要行为操作进行了，那么一定会触发相关的事件行为2.什么是事件绑定？ 给元素的某一个事件行为绑定方法，目的是行为触发会可以做点自己想做的事情3.事件绑定 DOM0事件绑定/DOM2事件绑定【DOM0事件绑定】元素.onxxx=function(){}元素.onxxx=null; (绑定事件的移除方法)原理：给DOM元素对象的某一个私有事件属性赋值函数值，当用户触发这个事件行为，JS引擎..
2021-07-20 13:55:41
92
原创 39：浏览器底层渲染机制3：DOM回流和重绘
DOM的重绘和回流重绘：元素样式的改变（但宽高、大小、位置等不变）如 outline, visibility, color、background-color等回流：元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染如添加或删除可见的DOM元素 ;元素的位置发生变化;元素的尺寸发生变化;内容发生变化（比如文本变化或图片被另一个不同尺寸的图片所替代）;页面一开始渲染的时候（这个无法避免）;因为回流是根据视口的大小来计算元素
2021-07-20 01:27:59
426
1
原创 37：浏览器底层渲染机制1：有关样式的处理
浏览器是多线程的页面渲染是单线程（JS是单线程进程：一个程序（一个进程中可能包含多个线程）比如：打开一个页面就是开了一个进程（一个程序）线程：程序中要做的事情（一个线程同时只能做一个事情）前端时单线程，因为浏览器只分了一个线程用来渲染页面浏览器渲染页面的机制和原理解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树(Render Tree)Layout(回流): 根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这.
2021-07-19 17:24:50
82
原创 35 综合专题之检测数据类型的四种方案2（剖析JQ源码，研究其数据检测的方法）
jQuery源码刨析var class2type = {}; var toString = class2type.toString; //=>Object.prototype.toString var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty var fnToString = hasOwn.toString; //=>Function.prototype.toString
2021-07-19 11:09:46
56
原创 33：综合专题之THIS的五种情况2（重写内置的CALL、APPLY、BIND）
THIS5：基于call/apply/bind可以改变函数中this的指向（强行改变）01.CALL/APPLY第一个参数就是改变的THIS指向，写谁就是谁（特殊：非严格模式下，传递null/undefined指向的也是window唯一区别：执行函数，传递的参数方式有区别，call是一个个的传递，apply是把需要传递的参数放到数组中整体传递func.call([context],10,20)func.apply([context],[10,20]) 02.BINDcall/apply都
2021-07-17 18:27:22
85
原创 32.综合专题之THIS的五种情况1
THIS1：给元素的某个事件行为绑定方法，事件触发，方法执行，此时方法中的THIS一般都是当前元素本身//=>DOM0btn.onclick = function anonymous() { console.log(this); //=>元素 };//=>DOM2btn.addEventListener('click', function anonymous() {console.log(this); //=>元素}, false);btn.attachEven
2021-07-16 11:09:28
88
原创 31.关于闭包堆栈的一道开胃题（有难度）
function fun(n, o) { console.log(o); return { fun: function (m) { return fun(m, n); } };}var c = fun(0).fun(1);c.fun(2);c.fun(3);扎实画图
2021-07-14 22:51:19
94
原创 30.JS高阶技巧之currying函数
1. 编写一个ADD函数满足如下需求add(1); //1add(1)(2); //3add(1)(2)(3); //6add(1)(2,3); //6add(1,2)(3); //6add(1,2,3); //6实现方案一 function add(...outerArgs) { add = function (...innerArgs) { outerArgs.push(...innerArgs); return add; }; add.toSt
2021-07-14 22:39:16
110
原创 29.面向对象的有趣玩法
题型1、 a等于什么值会让下面条件成立var a = ?;if (a == 1 && a == 2 && a == 3) {console.log(‘OK’);}解析：先理解运行机制== 相等VS === 绝对相等1.左右数据值类型不同，三个等号不能转换数据类型，直接返回false，但是两个等于号会默认先转换为一致的数据类型再进行比较NaN == NaN ：NaN和谁都不相等（包括自己）null == undefined：null和undefined
2021-07-14 14:02:57
112
原创 28.阿里函数多种角色和运算符优先级的面试题
function Foo() { getName = function () { console.log(1); }; return this;}Foo.getName = function () { console.log(2);};Foo.prototype.getName = function () { console.log(3);};var getName = function () { console.log(4);};function getName() {
2021-07-12 08:31:22
74
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人