![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
nysheng
这个作者很懒,什么都没留下…
展开
-
移动端元素移动导致的页面滚动问题(滚动穿透)
引需求要做个功能,页面上的一个小图标从固定变成可移动。一把梭哈后,在PC上显示没有问题,移动的可欢快了,但是到了手机里以后出现了“联动问题”。所以,当元素移动的时候,页面也会出现上下的滚动,这样的体验是超级差的。解决方案document.addEventListener('touchstart', function(e){ console.log('开始移动'); const scrollTop = document.body.scrollTop || document.原创 2020-07-21 15:36:27 · 976 阅读 · 0 评论 -
koa-session使用ioredis存储session
一、引在写koa的项目,当用到session的时候需要放到redis存储。百度了一圈,几十个人的博客几乎就是几篇文章的复制黏贴,我人晕了。官方github也看了一眼,md里好像没有对应的使用方法。也懒得找了,就自己解决一下吧。二、解决方案本文的解决方案是 koa-session + ioredis + ts// .configimport * as Ioredis from 'ioredis';......// 定义的sessionstore的接口export interface Ses原创 2020-06-16 16:51:45 · 625 阅读 · 0 评论 -
在现有Vue项目中加入TS支持
一、引现在的前端项目,js遍地而是,但是TS也开始攻城略地,很多都转向了更加严谨和拥有类型检查的 typescript,所以我也打算改造下自己的项目,打算用 TS 重构。二、安装依赖 "vue-class-component": "^7.2.3", "vue-property-decorator": "^8.4.2", "babel-plugin-transform-decorators-legacy": "^1.3.5", "ts-loader": "^3.5.0",原创 2020-06-10 14:34:47 · 5095 阅读 · 4 评论 -
前端知识点(css,html,js,http)自己整理
行内元素a ,b ,button ,i ,span ,img ,input ,textarea ,select…块级元素article ,dic ,form ,h1-h6 ,header ,hr ,ul ,li ,p ,table…postion 值relative, static, absolute, stickyJS 数据类型number, boolean, string, u...原创 2020-03-24 19:58:19 · 337 阅读 · 0 评论 -
回流和重绘
一、引再总结(复制)个面试知识点二、浏览器渲染过程看过这张图的人应该不少吧…这张图是介绍了下浏览器是如果从一段数据转成一个页面的:解析 HTML 和 CSS 分别生成 Dom Tree 和 Css Tree。然后就是俩颗树的结合,生成了可以被渲染的 render Tree。回流,通过 render Tree 进行回流,得到各个可见节点的位置大小等信息。重绘,就是把对应地方的节点绘...原创 2020-03-20 11:22:09 · 125 阅读 · 0 评论 -
动手写写Vue的数据劫持
一、引周末开写, IG NB!二、介绍这里学习的是 Vue 2.x 下双向绑定的方法,是 数据劫持 + 订阅发布者模式。用 Object.defineProperty(obj,prop,descriptor) 方法去绑定 data 中的值,然后在发现值变化的时候触发更新函数,去更新视图。2.1介绍下函数Object.defineProperty(obj,key,descriptor)...原创 2020-03-15 17:32:01 · 226 阅读 · 0 评论 -
二叉树及其遍历的JavaScript实现
一、引上次写了堆,这次写个二叉树的,直接写代码吧。二、代码// node 节点类function node(val){ let self = this self.left = null; self.right = null; self.val = val; // 插入(更新)节点 self.insert = function(kind, nod...原创 2020-03-13 20:25:30 · 465 阅读 · 0 评论 -
简单看看前端缓存
一、引就是学,为了面试,所有见过的面试题“姿势”都要学。二、介绍前端的缓存大家都知道是有俩种:强缓存和协商缓存,下面就稍微分开介绍一下。2.1强缓存从名字上就可以看出来,强(制)缓存,意思就是在前端请求服务端的时候先去请求本地缓存,如果存在则强制性返回本地缓存的内容,而无需请求服务端。这样的话好处就达到了,在过期时间内,服务端的请求压力就被减小了,但是问题也显而易见,就是如果在过期时间内...原创 2020-03-13 14:35:40 · 178 阅读 · 0 评论 -
Web Socket的学习
一、引写了一篇了已经,那再来一篇。这次看看面试中命中概率很大的 Web Socket,开始学习。二、 Web Socket2.1 介绍WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一...原创 2020-03-10 19:55:28 · 140 阅读 · 0 评论 -
一些前端算法
1 封装请求function ajax(url, methods, params, header) { return new Promise((resolve, reject)=>{ let xhr = new XMLHttpRequest(); xhr.open(methods, url); Object.keys(header)....原创 2020-03-10 16:02:23 · 77 阅读 · 0 评论 -
JWT的理解和深入
一、引前端知识的第二篇了,我也不知道能写几篇,上一篇写了点 web worker,这篇就写点 JWT,把自己学习的稍微记录一下。二、JWT的介绍JWT(Json web token)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准,该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身...原创 2020-03-10 10:28:49 · 302 阅读 · 0 评论 -
Web Worker的学习
一、引最近打算弄点面试778,所以开始系统的学习下js的一些知识,把一些还没好好认真看看的知识,都梳理一下吧,有幸能看到这篇文章的问,希望你也可以学的更好,我只是在前端路上一路埋头走下去不准备回头的小菜鸟,让我们开始吧二、介绍知道JS的都知道,JS是由于历史的原因导致它是单线程的语言,但是在越来越多的开发中发现,多线程也是有必要的,所以在HTML5的规范中,把多线程的解决方案Web Work...原创 2020-03-07 23:33:50 · 147 阅读 · 0 评论 -
浅谈前端性能优化
引优化那肯定是为了让性能更好,让体验更好。在前端的优化来说,大概分俩类,1、页面优化,2、代码优化。废话不多,直接介绍。一、页面优化每次请求,说白点都是互联网的大动作,时间成本和资源成本很高,一个完整的HTTP请求是经过很多步骤的,所以减少请求是十分重要的。接下来讲下几个方法:设置缓存,http 缓存是前端性能优化中非常重要手段,把一些常用资源在首次加载时缓存到浏览器本地,再次需要时可...原创 2019-11-28 20:33:55 · 156 阅读 · 0 评论 -
手动实现简单Promise
function MyPromise(exector){ let self = this self.status = 'pedding' self.value = null self.error = null self.resolveCallbacks = [] self.rejectCallbacks = [] function reso...原创 2019-11-06 20:14:01 · 126 阅读 · 0 评论 -
什么是深拷贝(循环引用)和浅拷贝
一、概念1.1 浅拷贝浅拷贝就是对原位的拷贝,理解为复制更为准确,对原对象的一个精确复制,如果拷贝的对象中存在引用,则会复制引用的地址。简单的来说,浅拷贝是对原对象的复制,复制了一个变量指向了原变量的地址,原对象的改变,拷贝对象也会发生变化。更简单来说就是,给一个人(原对象)加了个别名(拷贝对象)。2.2 深拷贝既然叫深拷贝了,就肯定比浅拷贝稍微厉害点。不像浅拷贝的“只是多个名字”,深拷...原创 2019-10-22 15:59:56 · 470 阅读 · 0 评论 -
Vue在刷新后引用的样式无效
引在写自己博客的时候,在文章页面需要用到页面样式的引入渲染,使用了 showdown 和 highlight.js 当第一次打开页面的时候样式一切正常,如果刷新页面所有引用的样式会被取消,再跳转其他页面,样式同样失效。但是只是在其他页面,引用的 font-awasome 的样式却没问题,问题可能出在单纯的js引用后导致全部文件的失效。项目使用的vue-router 是 history 模式下...原创 2019-09-03 21:43:59 · 2875 阅读 · 0 评论 -
html中的dataset属性
一、引在写微信小程序的时候,注意到一个写法.wxss<view wx:for='{{list}}' data-index='key' @bindtap='click'>.jsclick: function(e){ index = e.target.dataset.index}在标签中 data-* 属性都会被几种存储在DOM的 dataset 属性中,然后取值就是 ...原创 2019-08-27 09:18:20 · 3969 阅读 · 0 评论 -
虚拟DOM
闭包闭包是个 js 中比较重要的一个概念了,面试前端或者 Node.js 方面的工作几乎95%以上的面试官都会问这方面的问题。但是对初学者来说,闭包是个特别抽象的概念,特别是 ECMAScript 给出的定义:闭包是函数和声明该函数的词法环境的组合如果你只是个小白没有实战经验,这句话你懂几个字?先来看个函数function init() { var name = "nys";...原创 2019-07-24 19:37:03 · 111 阅读 · 0 评论 -
Javascript原型及原型链
在 Javascript 中原型和原型链是比较神奇也是比较让人难以理解的知识点,但是一旦弄懂了这部分的知识,也就正式迈入了进阶的门槛了。现在我就大概的把我所理解的写一下。等以后理解深入了,再修稿。一、对象在 Javascript 中,万物皆可对象,但是不同的对象也是分三六九等的。首先,Object 是顶级公民,从名字上看也懂,这是JS的’亲儿子’,一等公民就是 Function。其他剩下的 S...原创 2019-07-24 19:39:16 · 219 阅读 · 0 评论 -
Javascript执行上下文
一、引在看面试题的时候,看到这个东西,所以学习下到底是什么东西。二、啥是执行上下文当 JavaScript 代码运行的时候,确定它运行所在的环境是非常重要的。运行环境由下面三种不同的代码类型确定1.全局代码(Global Code):代码首次执行时候的默认环境2.函数代码(Function Code):每当执行流程进入到一个函数体内部的时候3.Eval代码(Eval Code):当ev...原创 2019-07-24 19:39:43 · 65 阅读 · 0 评论 -
JavaScript中的事件循环是什么
一、引JavaScript 最大特点,同时也是最大的缺点就是 单线程 ,这就导致了,同一个时间它只能做一件事。那么,为什么 JavaScript 不能有多个线程呢?这样能提高效率啊?其实我一开始也是很迷惑的。但是原因很简单:JavaScript 的设计为单线程很大原因就是它是要对浏览器进行操作。作为浏览器脚本语言, JavaScript 的主要用途是与用户互动,以及操作DOM。这决定了它只能是...原创 2019-07-24 19:40:15 · 369 阅读 · 0 评论 -
Javascript中的防抖和节流
一、引在前端开发中,会有很多事件是会被多次触发的,onmousemove 、 scroll 、resize 。就对于 scroll 来说,每个像素的滚动都会触发事件,这样滚轮的单次滚动就会触发几十次。经过千度一下发现有防抖函数和节流俩个方法能解决,这样也来学习和总结一下。简单的写个效果<script> let num = 1; window.addEventLis...原创 2019-07-24 19:40:52 · 108 阅读 · 0 评论 -
this的用法
一、引this的指向是个很经典同时也很无脑的问题,参加面试的话,前端或者后端NodeJs都会被问到相关的题目和知识,如今正好有空余时间,正好详细的整理和学习下this的不同用法和使用情况。要想理解this的问题,最主要的就是要确定this的指向,因为this关键字只有在被调用或者说被使用的时候才可以取到它,而且都只会在此this的活动区域内去搜索this的指向。二、不同形式1.最简单的v...原创 2019-07-24 19:41:54 · 131 阅读 · 0 评论 -
Vue路由参数更新但是页面不刷新
是我在写本博客的遇到的问题当前路由显示时,跳转同路由的不同参数,会出现参数变化,页面不刷新。例如:当前路由:http://localhost:8080/#/essay?id=1目标路由:http://localhost:8080/#/essay?id=2可以看到地址栏id变化,但是页面未刷新以下为解决办法:监听路由变化,若参数不相同,则重新加载数据,更新视图:watch: {...原创 2019-07-24 19:42:36 · 3530 阅读 · 0 评论 -
闭包
闭包闭包是个 js 中比较重要的一个概念了,面试前端或者 Node.js 方面的工作几乎95%以上的面试官都会问这方面的问题。但是对初学者来说,闭包是个特别抽象的概念,特别是 ECMAScript 给出的定义:闭包是函数和声明该函数的词法环境的组合如果你只是个小白没有实战经验,这句话你懂几个字?先来看个函数function init() { var name = "nys";...原创 2019-07-25 09:45:24 · 213 阅读 · 0 评论 -
Vue.js打包后出现的图片路径问题
一、引在写自己博客的时候出现的,在自己写的组件内没出现问题,但是在APP.VUE 内的背景图片都出现问题,没有被引用到。百度了下方法,解决了。//build/utils.jsif (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-...原创 2019-07-30 13:38:47 · 639 阅读 · 0 评论 -
JavaScript变量提升
一、引一直看到这个问题,但是也一直觉得不是什么大问题,所以一直没写。看到这个问题面试会问,那就把他学习一下。大概的就是当我们 var tag = 2 这样的去定义一个变量的时候,变量会被提升到作用域的顶部,就算在代码最后一行定义的变量,也会被提升到最前面。先看俩个错误Uncaught ReferenceError: a is not defined//a 没有被定义undefined/...原创 2019-07-25 13:12:56 · 84 阅读 · 0 评论 -
ES6瞎学(一):let和const
一、引准备认认真真的学习下 ES6 之前都是马马虎虎的就看一俩眼,这就准备把学习的都记录下来,所有的资料都参考于 ECMAScript 6 入门 ,一来学习一下,二来养成下写博客的习惯。那就直接开始把。二、let在 ES6 之前,...原创 2019-07-25 16:31:51 · 98 阅读 · 0 评论 -
JavaScript中的Call(),apply(),bind()的使用及实现
一、引是该学习下了!!!二、call()直接看例子function test(c){ console.log(this.a + this.b + c);}var obj = { a:1, b:2}test.call(obj,3); // 6大家都说这是 call() 是改变 this 的指向,那到底是什么意思呢?var obj = { a:1, b:2...原创 2019-07-25 19:16:02 · 160 阅读 · 0 评论 -
JavaScript中的New关键字
一、引属实需要弄点原理的东西学习学习!二、new 都干啥了1.创建一个空对象2.链接到原型3.绑定this值4.返回新对象这四条,哪都能看到那就一条条来写我们的 mynew2.1 创建一个空对象let obj = new Object();let obj = {};//喜欢怎么来就怎么来2.2 链接到原型let Constructor = [].shift.cal...原创 2019-07-25 20:16:51 · 505 阅读 · 0 评论 -
前端渲染、服务器端渲染、同构渲染
一、引很久前,几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染,但是前几年 jQuery、Angular、React、Vue 等 JS 框架的大行其道,大家转向了前端渲染。从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但转眼间三年过去了,好像还是前端渲染的天下。同构到底是不是未来?自己的项目该如何选型?我想不应该只停留在追求热门和拘泥于固定模式上,忽略了...原创 2019-08-22 10:42:07 · 2276 阅读 · 0 评论 -
ES6瞎学(二):解构赋值
一、数组的解构赋值1.1 用法以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;ES6 允许写成下面这样。let [a, b] = [1, 2];a // 1b // 2只要等号左右俩边的格式一样,变量会对应被赋值,就是解构成功了。let [a, [b]] = [1, [2]];a // 1b // 2let [, c] = ...转载 2019-07-29 15:21:02 · 88 阅读 · 0 评论