- 博客(48)
- 收藏
- 关注
RSS订阅原创 移动端适配方案2
html{ font-size:10px}iphone6 375px屏宽js动态设置fontsizevar html = document.documentElementvar rootSize = html.clientWidth / 375 * 10html.style.fontSize = rootSize + "px"
2022-05-29 12:57:22
171
原创 vue发布订阅模式,发布订阅模型，手写一个发布订阅者模型,vue响应式基本流程 ,简单手写vue的响应式原理
1.什么是发布订阅模式 (又叫做观察者模式)他定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知。JS天生对发布订阅模式就有支持// JS天生对发布订阅模式就有支持// 例子：// document.addEventListener("click",()=>{// console.log("document click")// })2.发布订阅模型a.发布者会给订阅者提供一个方法以便于订阅某些事件发生时要做的事情b.
2022-05-21 21:19:16
1624
原创 vue不使用脚手架，基础写法。
说起来也搞笑，一直都是用脚手架，实际有个h5老项目，不用脚手架，一下子写不来了，所以记录下。<body> <div id="app"> 内容 </div></body><script src="../../resources/lib/vue.min.js"></script> //引入vue文件<script> var vm= new Vue({ el:"#
2022-05-15 05:37:03
1375
原创 项目配置接口函数以及使用
1.创建axios示例，新建一个js文件。import axios from 'axios'const service = axios.create({ baseURL:"/", timeout:100000, headers:{ "content-type":"application/json" }})//请求拦截器service.interceptors.request.use( config=>{ if(con
2022-05-15 05:14:36
1036
原创 配置proxy跨域
module.exports={ runtimeCompiler:true, publicPath:"/", //基本路径 devServer:{ host:"localhost", port:8080, open:true, https:false, //设置开发接口代理 proxy:{ "/api":{ target:"http.
2022-05-15 05:09:27
596
转载 bind、call、apply的区别
bind、call、apply的区别与实现原理_Chengbo_X的博客-CSDN博客_apply bind call区别1、简单说一下bind、call、apply的区别三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。var obj = {};function test() { cons...
2022-05-15 05:07:51
188
原创 mustache模版引擎 -- 底层tokens思想
//mustache模版引擎 -- 底层tokens思想 //思路：模版字符串 编译成 tokens 结合 data 解析成DOM字符串 tokens是一个JS的嵌套数组，说白了，就是模版字符串的JS表示 它是“抽象语法数”、“虚拟节点”等等的开山鼻祖 模版字符串：<h1>我买了一个{{thing}},好{{mood}}啊</h1> tokens: [ ["tex...
2022-05-11 09:52:39
190
原创 mustache模版引擎 -- 正则表达式思路
//mustache模版引擎 -- 正则表达式思路//最简单的模版引擎的实现机理，利用的是正则表达式中的replace()方法。//replace()的第二个参数可以是一个函数，这个函数提供捕获的东西的参数，就是第二个形参//结合data对象，即可进行智能的替换//但当HTML页面结构情况复杂时，正则表达式的思路肯定就不行了。 var templateStr = "<h1>我买了一个{{thing}},好{{mood}}</h1>" var .
2022-05-11 09:51:08
184
原创 模板引擎
<body> <div> <ul id="list"> <li> <div class="hd">小明的基本信息</div> <div> <p>姓名：小明</p> <p>年龄：12</p>.
2022-05-09 11:03:20
92
原创 vue绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty() (生成Observer)来劫持各个属性的setter(界面改变触发),getter(data中改变触发)，在数据变动时发布消息给订阅者(watcher)，触发相应的监听回调。入口函数，传过来一些数据，我们通过object.defineProperty()劫持并监听所有属性，一旦数据发生变化，通知订阅器，找到对应的订阅者，然后更新视图。Dep订阅器的作用：1.通知订阅者更新视图...
2022-05-05 15:27:54
536
原创 关于promise面试题
1. promise的几个APIpromise.resolve(1)promise.reject(1)promise.all([promise1,promise2,promise3])promise.race([promise1,promise2,promise3])2. promise的三个状态pending，表示进行中fulfilled也是resolved，表示成功rejected，表示失败3.promise的状态变化只能从pending->resolved或者
2022-05-05 10:26:14
4523
原创 斐波那契数列 js实现
1.递归function fb1(n){ if(n <= 2){ return 1; }else{ return fb1(n-1) + fb1(n-2); }} 2.迭代function fb3(n){ var res1 = 1; var res2 = 1; var sum = res2; for(var i = 2;i < n;i ++){ sum = res1
2022-05-05 10:14:25
241
原创 Session、Cookie、Token总结
1. 引入：HTTP是无状态协议，无法记得上一次连接的信息，比如记不得用户是否已经登陆等信息。而Session、Cookie、Token便是对HTTP无状态的一种补充；2.Cookie:Cookie是浏览器对于一些信息的键值对形式保存，当浏览器关闭，Cookie也就删除了;3. Session:Session是服务器中保存的对象（Tomcat保存在ConcurrentHashMap<Session>中），生成之后在返回Http response时，会发送sesionId给
2022-05-05 10:11:10
315
原创 关于http的面试题
1.Http协议实现的原理机制(1).整个流程步骤:(2)域名解析过程:(3).三次握手过程(4).发起Http请求(5).响应Http请求并得到HTML代码(6).浏览器解析HTML代码(7).浏览器对页面进行渲染呈现给用户2.get与post请求的区别?区别一:get重点在从服务器上获取资源,post重点在想服务器发送数据;区别二:get传输数据是通过URL请求,以filed(字段)=value的形式,置于URL后,并用"?"连接,多个请求数据
2022-05-05 10:05:13
158
原创 node.js express框架 后端搭建
App.jsvar createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var homeRouter = require('./routes/home');// 引入购物车模块var shopping
2022-05-05 09:49:35
348
原创 Vue2中无法检测到数组变动的原因及解决
官方文档中对于这点简要的概括为“由于JavaScript的限制”无法实现，而Object.defineProperty是实现检测数据改变的方案，那这个限制是指Object.defineProperty吗？其实原因并不是因为Object.defineProperty()存在漏洞，而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key 。通过索引访问或设置对应元素的值时，可以触发 getter 和 setter
2022-04-30 15:10:38
2724
原创 游览器渲染原理
1.游览器在接收到服务器返回的html页面之后 2.游览器开始构建DOM树，遇到CSS样式会构建CSS规则树 3.遇到js会通过DOM API和CSS DOM API 来操作DOM数和CSS规则树 4.解析完成后，游览器引擎会通过DOM数和CSS规则树来构造渲染树 5.渲染树构建完成之后，进行布局处理，换一种说法就是确定每个节点在屏幕上的确切得显示位置 6.最后开始绘制，遍历渲染树，并用UI后端层，绘制出每一个UI节点...
2022-04-28 19:51:25
193
原创 vue 绑定原理
1.vue会遍历此data中对象所有得属性2.并使用Object.defineProperty把这些属性全部转为getter/setter3.而每个组件实例都有watcher对象4.它会在组件渲染的过程中把属性记录为依赖5.之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新...
2022-04-28 19:42:33
123
原创 this指向
this 4种绑定规则1.默认绑定函数内默认this指向windowfunction girl(){ console.log(this)}girl(); //window2.隐式绑定var girl={ name="小红"; height:160, weight:180, detail:function(){ console.log("姓名"+this.name) console.log("...
2022-04-28 19:32:26
71
原创 图片懒加载
方法一：getBoundingClientRect.top 与window.innerHeight<body> <img data-src="1.gif" alt=""> <img data-src="2.gif" alt=""> <img data-src="3.gif" alt=""> <!-- 使用自定义属性 data-xxx 来表示，游览器碰到这个属性的时候是不会像默认属性那样进行属性处理的 -->.
2022-04-28 14:55:01
99
原创 rem布局 动态设定rem
<style>/*100vw 375px*/ //iphone6 宽度为375px/*a 100px*/ //a = 26.6667vwhtml{ font-size:26.66667vw;}//这样的作用： 1rem = 100px//如果要得到16px的文字大小，如下：div{ font-size:0.16rem}</style>
2022-04-23 16:34:44
268
原创 前端权限管理 - 左侧菜单栏 token 按钮权限
//菜单的控制1.查看登录之后获取到的数据token,用于前段用户的状态保持rights,该用户具备的权限数据，一级权限就对应一级菜单，二级权限就对应二级菜单2.根据rights中的数据,动态渲染左侧菜单栏，数据在Login.vue得到，但是在Home.vue中使用，所以数据可以用UVEX进行维护Uvex中的代码：state:{ rightList:[]}mutations:{ serRightList(state,data){ state.rightList = data }.
2022-04-23 16:20:58
2283
原创 判断2个数组里面的对象是否有一样。
先把2个数组排序转为字符转 arr = arr.map(obj => JSON.stringify(obj)).sort()然后用forEach,再用some去判断最后用JSON.parse（）转换回来
2022-03-24 13:49:11
447
转载 前端token保存使用教程
vue前端利用localStorage存储token值并放到请求头headers实例_bentou_的博客-CSDN博客_localstorage存储tokenvue前端利用localStorage存储token值并放到请求头headers实例之前在关于登录接口的一篇博客里，我有提到过token，在这篇博客里我会介绍token在前端如何存取，同时把它放在请求头里获取数据。1、关于token为什么要用Token：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户
2022-02-23 14:48:26
2672
原创 13位时间戳 转换为 YYYY-MM-DD
//将时间戳转换成时间格式var d = 1539083829787let date = new Date(d);console.log(date)let year = date.getFullYear();let month = date.getMonth()+1;let day = date.getDate();month = month < 10 ? "0"+month:month;day = day < 10 ? "0"+day:day;let...
2022-02-22 16:47:22
863
转载 Vue elementUI 多级导航菜单
今天遇到动态显示多级导航菜单问题，参考了人家的方法，实测可行。vue elementui navmenu 多级导航菜单(水平、垂直)_潇蓝诺依的博客-CSDN博客_navmenuvue elementui navmenu 多级菜单效果图组件&amp;amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;
2022-02-22 16:46:25
886
转载 前端验证码
vue前端生成图片验证码包含验证_jdBug-CSDN博客_vue 前端图片验证1:创建组件的文件（简单粗暴上代码，方便复制）<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template>&...https://blog.csdn.ne
2022-01-21 14:37:54
83
原创 for循环优化
for (let k = arr.length-1;k>0;k--){ //循环体}因为循环结束的判断是和常量0进行比较，不存在对数组长度属性值的查找或局部变量的读取，其比较得运算速度会更快！
2022-01-21 14:36:31
275
原创 js 策略类写法 参考用
计算奖金普通写法：function calculate(salary,level){ if(level == "S"){ return salary * 4; }else if(level == "A"){ return salary * 3; }else if(level == "B"){ return salary * 2; }}上面这个写法，能用，但是条件多了，就复杂起来了。下面这个写法建议：const.
2022-01-17 00:01:19
282
原创 Proxy代理对对象的处理
llet obj = { name:'kane', age:30}let objProxy = new Proxy(obj,{ set(target,key,value){ if(key=='age' && typeof value!='number'){ throw new Error (`该键${key}的值${value}类型不正确`); } return target[key]
2022-01-16 23:44:19
1082
原创 async和await配合使用
let getGiftAsync=()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(Math.random()<0.2){ let gift="小白妞"; resolve(gift); }else{ let gift="小黑妞"; .
2022-01-16 23:33:44
346
原创 element UI dialog 强制设置高度
<button @click="add"> 点击 <button><el-dialog ref="elDialog" title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer">.
2022-01-12 15:40:51
4718
原创 element-ui popover滚动条样式修改
弹出层的div不在vue页面之中。所以在<style scoped>中改样式无效。正确：再另外加个<style>标签，在全局修改样式。
2021-11-26 17:02:33
416
原创 A页面跳转到A页面，同一页面跳转，mounted无效
在a页面出发跳转到a页面，url上携带新参数，希望mounted出发，获取数据，渲染到页面。this.$router.replace({path: '/case-detail',query: {caseId: this.detailInfo.parentId}})this.search() //mounted中的方法，手动触发或者this.$router.replace("url")this.search() //mounted中的方法，手...
2021-11-25 18:33:14
407
转载 css设置超出宽度文本显示...
单行超出：width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;超出两行（多行）显示…overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原文链接：https://blog.csdn.net/qq_43639075/art
2021-11-24 16:39:53
381
原创 TEXTAREA标签 判断字节数
<!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" /> <tit.
2021-11-24 16:15:16
478
原创 视频播放以及控制器，用户填写弹幕，不规则加载在视频上
切记，请先下载moment.js!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>player_video.html</title> <style>
2021-11-22 11:06:18
122
原创 播放视频以及控制器，用户写弹幕，弹幕同时不规则加载在视频上
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>player_video.html</title> <style> .container { w.
2021-11-22 11:03:47
282
原创 js 日期计算 如：2021-10-01，需要在此日期上加减天数，得到新日期
//beginDate 需要参加计算的日期，days是要减去的天数，返回新的日期，日期格式：YYYY-MM-DDfunction getDay(beginDate, days) { var beginDate = beginDate.split("-"); var nDate = new Date(beginDate[1] + '-' + beginDate[2] + '-' + beginDate[0]); //转换为MM-DD-YYYY格式 var millSeconds.
2021-11-22 11:00:13
1730
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人