lhh

42 posts
vue

vue-router导航解析流程

一、假设条件:A页面进入B页面 1. 导航被触发2. 离开A页面组件里的beforeRouteLeave守卫3. 调用全局的beforeEach守卫4. 如果存在复用组件,则调用beforeRouteUpdate守卫5. 调用路由配置的beforeEnter守卫6. 解析异步路由组件7. 被激活的B页面组件里的beforeRouteEnter守卫8. 调用全局的beforeResolve守卫9. 导航被确认10. 调用全局的afterEach钩子11. DOM更新12. 调用beforeRouteEnter守卫中传给next的回调函数 import Vue form 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Index = ()=> import('./index.vue'); const routes = [ { path: "/", name: "Index", component: Index, // 路由配置守卫 beforeEnter:

  • lhh
js

javascript递归和尾递归

一、递归 ,即一个函数内部不断循环调用自身函数,需要终止条件。 // 一个累加的递归函数 var s = new Date().getTime() function count(num){ if(num<=0){ return num } return num + count(num-1) } console.log( count(5) );//输出15 var e = new Date().getTime() console.log('执行时间', e-s)注意:此种递归方式会不断的把函数压入栈,如果num的数值越大,栈就会越大。二、尾递归,只存在一个函数在栈中。

  • lhh
js

javascript宽高

一、获取宽高 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth    (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; 网页被卷去的左: document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率的高: window.

  • lhh
js

javascript防抖和节流

概念防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。节流(throttle)与 防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。一、示例:监听scroll事件获取滚动条高度 //防抖函数 function debounce(fn, delay){ var timer = null;//存放定时器 return function(e){ clearTimeout(timer);//清除上一个定时器 //创建定时器任务,间隔内时间scroll事件连续触发,就不会执行fn函数 timer = setTimeout(()=>{ fn.

  • lhh
js

javascript-封装-103

完善一个类:利用闭包、自检测thisvar Book = (function(){ //静态私有变量 var _num = 0 //静态私有方法 function checkBook(){} //创建类 function _book (id, bookName){ //优化用户忘记使用new关键词实例化对象 //没有new关键词,this则指向Book函数执行所在的作用域(全局作用域window) if( !(this instanceof Book) ){ return new _book(id, bookName); } //私有变量 var name; //私有方法 function check(){} //特权方法 this.setName = function(){} this.getName = function(){} //对象公有属性

  • lhh
js

javascript-封装-101

函数的创建与管理一、减少污染全局变量 var checkName = function(){} var checkPassword = function(){} 1.1 用对象收编变量var CheckObject = { checkName: function(){}, checkPassword: function(){} } 1.2 用类的原型对象var CheckObject = function(){} CheckObject.prototype = { checkName: function(){ return this;//链式调用 }, checkPassword: function(){ return this; } };//注意:不可与CheckObject.prototype.xxx混用了 //实例化 var check = new CheckObject(); check.checkName().checkPassword(

  • lhh
九峰

九峰的来由

广东省乐昌市九峰镇群峰叠嶂,有五指峰、向日峰、青云峰、紫微峰、太乙峰、云祖峰、羊角峰、三星峰、马蹄峰九座山峰,因此而得名。明洪武二十一年,时任九峰司巡检潘志描绘九峰诗句:三星图就绘群峰,五指挥和向日中。羊角回旋风乍起,马蹄驰逐雪初融。紫微即步青云路,太乙人归白石宫。胜景何须银子买,巧将笔墨夺天工。      在中国古代,“九”为阳数之极数,即单数最大的数,于是多用九这一数字来附会帝王,帝王称“九五之尊”;此外,“九”还有着谐音“久”这一优势,通过数量上“九”的强调和重复,又有着“长久”、“长寿”的寓意,从而更受到古人的喜爱。“峰”在地理学中为山峰的意思,一般指尖状山顶并有一定高度,

  • lhh
css

设置CSS省略号

一、单行文本省略号 语法:text-overflow: clip|ellipsis|string; 默认值为clip参数:clip修剪文本 | ellipsis显示省略符号来代表被修剪的文本 | string使用给定的字符串来代表被修剪的文本.lhh-single-line{ overflow: hidden; //隐藏溢出文本 white-space: nowrap; //文本不会换行,直到遇到 <br> 标签为止。 text-overflow: ellipsis; //文本溢出显示省略符号... }二、多行文本省略号:兼容ie8及以上 该方法适用范围广,省略号需要结合js控制。将height设置为line-height的整数倍,防止超出的文本显示。给:after添加渐变背景优化显示效果。// html <div class="block lhh-multi-line">多行文本省略号<

  • lhh

重置Ghost忘记密码

如果账号被锁,且没有配置邮箱的话,就必须通过修改数据库的方式找回密码了。 步骤 - sqlite31、连接数据库(生产环境下数据库为'ghost.db',开发环境下数据库为'ghost-dev.db') sqlite3 ghsot.db2、查找账户并重置密码:重置临时密码为 newpassword select * from users; update users set password="$2a$06$mZCCJRjEKAHOQv1buZy55us5bdcpKJFLHNe1nux9mk3ZwzZOzI8Ji" where id=1;3、修改账户为激活状态 update users set status="active" where id=1;4、重新登录ghost

  • lhh