- 博客(66)
- 资源 (9)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
转载 js基础常考部分
1.关于闭包什么是闭包?闭包是有权限访问其它函数作用域内的变量的一个函数。在js中,变量分为全局变量和局部变量,局部变量的作用域属于函数作用域,在函数执行完以后作用域就会被销毁,内存也会被回收,但是由于闭包是建立在函数内部的子函数,由于其可访问上级作用域的原因,即使上级函数执行完,作用域也不会被销毁,此时的子函数——也就是闭包,便拥有了访问上级作用域中变量的权限,即使上级函数执行完以后作用域内的值也不会被销毁。闭包解决了什么?本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。由于闭包可
2020-05-29 18:08:07
370
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
转载 vue框架——详解vue的diff算法原理
我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM,当...
2020-05-29 17:27:06
1136
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
转载 前端监控和前端埋点方案概述
前端埋点主要是为了服务运营人员采集用户行为数据,进行后续的数据分析工作。前端监控和埋点能做什么数据监控(用户行为) pv,uv 记录操作系统 用户在每一个页面的停留时间(离开页面,进入页面) 用户进入的入口 用户在相应页面的触发行为,点击按钮 性能监控 (js中的performance) 用户的首屏加载 http请求响应时间 页面渲染时间 页面交互动画完成时间 关键代码 let timing = performance.timing, ..
2020-05-21 15:48:14
295
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue基础知识(十)——fetch、axios、async/await
一. fetch概述1.基本特性更加简单的数据获取方式,功能更强大、更灵活,可以看做是xhr的升级版 基于Promise实现2.语法结构fetch(url).then(fn2) .then(fn3) ... .catch(fn)3.fetch的基本用法通过调用fetch的API——data.text()来...
2020-04-10 11:50:50
830
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue项目——双向数据绑定原理/Object.defineProperty()函数
1.Object.defineProperty()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue双向数据绑定原理</title></head><body> <i...
2019-11-27 18:52:32
113
1
原创 nuxt.js之初步了解
Nuxt.js 通用 vue.js,主要采用SSRSSR:服务器端 把vue组件渲染成html 然后返回给浏览器SEO: vue的SPA(单页面应用)及其不利于搜索引擎搜索 而SSR可以使搜索引擎快速搜索SPA:快速需要搜索引擎爬虫抓取的网站很多,如新闻网站、博客网站、电影网站... ...以前的php J2EE也属于SSR服务端渲染1.第一步要全局安装vue-cli :npm install vue-cli -g敲命令"vue -V"看有没有安装成功...
2020-06-05 14:45:45
394
原创 周周复习标记的面试题
1、js的闭包和this指向(面向对象编程)问题2、原型链3、解释window.onload和onDocumentReady?4、为什么不建议在JavaScript中使用innerHTML?innerHTML内容每次刷新,因此很慢。在innerHTML中没有验证的余地,因此,更容易在文档中插入错误代码,从而使网页不稳定。5、emrempxvwvh6、background-attachment:scroll|fixed7、浮动(清除浮动)定位8、伪类(chil...
2020-06-05 10:27:34
291
原创 H5移动多终端适配全解 - 从原理到方案
前端在构建页面时与PC端和移动端都要打交道,在PC端开发的时候关注的问题主要是兼容性问题,宽度高度之类的问题很自然的以浏览器宽度做为标准,开发没啥障碍。但这一套在PC端展示的网页放到移动端的浏览器上看就会发现并不是预期的那样,比如有的可能浏览器自动缩放网页让整个内容能够在可视区域展示,但内容会缩小;有的可能会出现横向滚动条。这些都不是理想的浏览状态,理想的网页展示应该是用户进入页面不需要手动缩放就能够看清页面的内容也没有横向滚动条。要如何去实现移动端网页展示达到理想效果涉及到很多因素,但主要包括三个方面:.
2020-06-04 18:46:58
2139
转载 js之事件绑定,事件委托,dom流事件总结
Js中的事件:Onsubmit:用于表单提交之前,验证所有表单。Onload和onunload用户进入或离开时触发,可用于处理cookieOnload主要用于Body标签:页面一加载就触发Onmouseenter ,onmouseover,onmouseleave等为鼠标事件表单事件:表单元素事件,在表单元素中才有效onchange 框内容改变时onsubmit 点击提交按钮时onreset 重...
2020-06-01 10:18:53
199
转载 微信小程序(一)基础知识
什么是小程序 ? 如何全面具体的学习? 注册与新建小程序 认识开发工具 目录结构与代码构成 JSON 配置文件 WXML 模版文件 WXSS 样式文件 JS 脚本文件 小程序的执行流程 小程序知识体系导图 小程序开发的重要说明 WXSS 模版语法 自定义模版 数据绑定 事件处理 自定义组件 行为 - Behaviors 生命周期函数 作用域 多页面数据共享 版本库兼容性 用户权限 WXS 开源项目参考 下一步计.
2020-05-27 16:29:03
1068
转载 jwt鉴权
什么是JWT(Json web token): JWT是目前最流行的跨域认证解决方案。基于json的开放标准(RFC7用于519),以token的方式代替传统的session-cookie模式,用于服务器,客户端传递信息签名验证。传统的cookie-session鉴权:1.客户端使用用户名和密码登录 2.服务器端验证账号密码通过后,在session里保存一些数据(比如说用户UID,登录时间等等) 3.服务器向用户返回一个se...
2020-05-22 18:15:53
428
转载 什么是闭包?闭包的优缺点?
闭包可谓是js里面的重难点,今天就让我们学习起来吧~1、什么是闭包?闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)function outer() {var a = '变量1'var inner = function () {console.info(a)}return inner // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域}很多人会搞不懂匿名函数与闭包的关系,实际上,闭包是站在作用域的角度.
2020-05-22 17:45:17
188
转载 使用WebAudio实现音频音波可视化
之前在做验收数据平台的时候,有使用过Wavesurfer.js这个插件来实现音频变为可视化音波的形式,对这种转换突然比较感兴趣,所以去看了看有没有相应的实现方案~第一种:没有audio标签,利用AudioContext生成。AudioContext是Web Audio API的核心对象1.创建audiocontex,canvas (第一种和第二种都需要创建这些东东)const myCanvas = document.getElementById('myCanvas');const canv.
2020-05-22 15:03:18
2324
转载 计算机网络基础知识总结
1. 网络层次划分 2. OSI七层网络模型 3. IP地址 4. 子网掩码及网络划分 5. ARP/RARP协议 6. 路由选择协议 7. TCP/IP协议 8. UDP协议 9. DNS协议 10. NAT协议 11. DHCP协议 12. HTTP协议 13. 一个举例计算机网络学习的核心内容就是网络协议的学习。网络协议是为计算机网络中进行数据交换而建立的规则、标准或者说是约定的集合。因为不同用户的数据终端可能采取的字符集是不同的,两者需要进行通信,必须要在一定的标准上进行
2020-05-21 10:26:14
193
转载 CORS跨域实现思路及相关解决方案
浏览器的跨域,你知道得方式有哪些呢?是jsonp?vue中的反向代理?还是其他?接下来介绍cors跨域技术! 本篇包括以下内容:CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CORSFilter Nginx 配置支持Ajax跨域 支持多域名配置的CORS Filter keyword:cors,跨域,ajax,403,fi...
2020-05-21 09:16:40
414
转载 TCP / IP
正文相信大家都知道 TCP 是一个可靠传输的协议,那它是如何保证可靠的呢?为了实现可靠性传输,需要考虑很多事情,例如数据的破坏、丢包、重复以及分片顺序混乱等问题。如不能解决这些问题,也就无从谈起可靠传输。那么,TCP 是通过序列号、确认应答、重发控制、连接管理以及窗口控制等机制实现可靠性传输的。今天,将重点介绍 TCP 的重传机制、滑动窗口、流量控制、拥塞控制。重传机制TCP 实现可靠传输的方式之一,是通过序列号与确认应答。在 TCP 中,当发送端的数据到达接收主机时,接收端
2020-05-20 17:58:26
168
转载 HTTP协议
HTTP协议简介HTTP(超文本传输协议)是应用层上的一种客户端/服务端模型的通信协议,它由请求和响应构成,且是无状态的。(暂不介绍HTTP2) 协议 协议规定了通信双方必须遵循的数据传输格式,这样通信双方按照约定的格式才能准确的通信。 无状态 无状态是指两次连接通信之间是没有任何关系的,每次都是一个新的连接,服务端不会记录前后的请求信息。 客户端/服务端模型 五层网络模型URL构成用了这么久,你注意过吗?协议内容请求(Request)客
2020-05-20 17:02:24
83
转载 面试题汇总
HTMLhtml5有哪些新特性?移除了哪些元素?Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>?简述一下你对HTML语义化的理解?行内元素有哪些,块级元素有哪些,空(void)元素有哪些?行内元素和块级元素有哪些区别和联系?px,em和rem的区别?如何使用rem?cookie、session、localstorage和sessionstorage的区别及使用场景?websocket 跟 socket 的区别?什么是SVG?SVG的优
2020-05-18 19:01:58
224
转载 js获取DOM元素的方法(8种)
JS获取DOM元素的方法(8种)通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElement是专门获取h
2020-05-14 14:26:15
1923
转载 html标签的checked属性详解
注意:当元素中有checked属性时,其值无论是什么,都是被选中状态,那怎么才能让其不被选中呢,就是用jquery或js代码实现1、html中的checked属性。仔细研究下会发现一个很怪异的现象。 你知道上面这四个复选框到底那些被选中了?那些没被选中吗?其实乍一看我也不知道结果,运行完后也想不通为什么,查看资料才发现确实是那样的。结果是:其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。2、利用jav
2020-05-14 11:11:04
16661
1
转载 js之深拷贝与浅拷贝的区别
一.引言如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);嗯?明明b复制了a,为啥修改数组a,数
2020-05-14 10:27:59
584
原创 vue实战精华(五)——【Element-UI】中将中文切换成英文
想不到我也会有今天,在和一个法国人对接的时候,那边的需求是网页字体全英文+法文,就是不能出现中文呗~但是呢,Element-UI中的组件有些默认就是中文的,不能像改样式那样只能切换中英文了。像这个表格中下面的两个词,要改成这样子 ——>网上解决办法千奇百怪,说一个我觉得相对来说比较容易地好了;我用的是vue-cli3的脚手架,在main.js中配置好Elenemt-UI好之...
2020-05-07 12:26:37
2475
原创 vue实战精华(四)——ElenemtUI中菜单的双重for循环渲染
1.需求后台管理系统左侧部分的菜单,从后台获取数据再渲染到页面结构上。2.代码这个写法有两种,第一种写法是: <el-menu> <el-submenu :index="item.id + '' " v-for="(item,index) in menuList" :key="index"> <!--这个index属性只接收字符串...
2020-04-15 15:15:51
1081
原创 vue基础知识(十三)——ES6模块化的基本语法
ES6模块化的基本语法1. 默认导出 与 默认导入默认导出语法 export default 默认导出的成员默认导入语法 import 接收名称 from ‘模块标识符’// 当前文件模块为 m1.js// 定义私有成员 a 和 clet a = 10let c = 20// 外界访问不到变量 d ,因为它没有被暴露出去let d = 30function show(...
2020-04-13 17:01:45
304
原创 vue基础知识(十二)——前端工程化
1.模块化相关规范1.1 模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护1.2 浏览器端模块化规范1. AMDRequire.js(http://www....
2020-04-13 16:43:21
212
原创 vue基础知识(十五)——Vue脚手架
1.Vue脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/基于图形化界面方式创建vue项目会比交互式命令行方式更简便。新建时,其他选项都默认即可,在 Git 部分写上初始提交信息:点击"下一步"之后,会显示询问是否进行一些相关的配置,这里我们可以选择"手动配置",也可以选择"默认配置",如果之前已经设置...
2020-04-13 15:57:07
206
原创 vue基础知识(十四)——webpack
1.当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级Javascript特性兼容程度较低ets…2.webpack 概述webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到...
2020-04-13 14:55:18
233
原创 vue基础知识(九)——前后端交互的URL地址格式
1.URL地址格式传统形式的URL格式:schema://host:port/path?query#fragment (1) schema:协议。例如http、https、ftp等 (2) host:域名或者IP地址 (3) port:端口,http默认端口80,可以省略 (4) path:路径,例如 /abc/a/b/c (5...
2020-04-07 16:41:35
1719
原创 vue实战精华(二)——模版字符串 / 音频路径预加载
1.提出问题最近有一个新需求,第一,播放音频前先把它的音频路径src预加载;第二,点击播放按钮时实现连续播放,一首播完接着第二首播放。2.解决思路第一个需求里面有两种方法,一是在页面结构上写六个audio标签(它的id不同),然后让他们的路径循环,再逐个播放;二是写一个audio标签,让它渲染出六个audio并带上不同的src路径(这里考虑到如果是id的话,每个audio应是不同的!),通过...
2020-04-07 12:47:19
1001
原创 vue实战精华(一)——事件绑定的函数名delete无效
1.发现问题今天在敲小demo的时候,用sublime编译器中写vue,其中有一个功能是实现页面数据的删除操作。于是乎,我就@click='delete',把这个方法名随手写成delete了,在我根据要求写完,却发现没有实现删除啊,点击它不起作用。我就仔细检查了一下我的代码,重点是不执行它控制台也不报错啊,这可愁死我了。然后我在这个函数内业务逻辑的最前面和最后面都打印了console.log(...
2020-04-02 18:40:06
1241
2
原创 vue基础知识(八)——过滤器
过滤器过滤器的作用是什么?格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等自定义过滤器Vue.filter('过滤器名称',function(value){ // 过滤器的业务使用})过滤器的使用<div>{{ msg | upper }}</div><div>{{ msg | upper ...
2020-04-01 19:07:15
90
原创 vue基础知识(七)——侦听器
一.侦听器侦听器的应用场景数据变化时执行异步或开销较大的操作侦听器的用法侦听器watch和计算属性computed有点像,在下述中使用侦听器,当改变input框中的值时,div里面显示的值才会发生相应变化。注意:watch中方法名称要和data中属性名称一致!template中: <input type="text" v-model='firstNa...
2020-04-01 16:27:04
328
原创 vue基础知识(六)——表单
1. input文本框input中只需要直接使用v-model就可以了<input type="text" v-model="word">data中: word:'哈哈,是我丫'2. textareatextarea中使用和input类似,用v-model,不过文字内容不可以直接写在中间(vue中不被允许这样做!)<textarea v-model=...
2020-04-01 12:08:55
189
原创 vue基础知识(二)——事件修饰符
事件修饰符1.vue中提供了一些事件修饰符,其中比较典型的是.stop和.prevent修饰符.stop阻止冒泡(防止里面的类似点击事件同时触发了外面包裹的标签的点击事件)<a @click.stop="handle"></a>.prevent阻止默认行为(防止类似于a链接上在进行如点击事件时又执行默认跳转行为)<a @click.prevent=...
2020-04-01 10:37:03
175
原创 vue基础知识(一)——事件函数参数传递
事件绑定1.事件函数的调用方式直接绑定函数名称<button @click='say'></button>调用函数<button @click='say()'></button>2.事件函数参数传递如果我们绑定的事件函数需要传参的话,通常使用的是直接调用的say()方式。普通参数和事件对象<button @click='sa...
2020-04-01 10:09:01
3322
1
转载 JavaScript算法系列之——链表反转(JS实现)
题目:输入一个链表,按链表值从尾到头的顺序返回一个ArrayList。之前一直对JS实现链表理解不了,被算法大牛指点了一下豁然开朗。 functionListNode(x){ this.val = x; this.next =null; }在JS中,this.val代表当前节点的值,this.next指向下一个节点,若this.next...
2020-03-23 18:43:12
530
1
recorder.js网页录音功能
2019-11-08
Recorder.js 纯HTML5+JS网页录音
2019-11-08
html5网页在线录音mp3音频代码.zip
2019-11-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人