- 博客(85)
- 收藏
- 关注
RSS订阅原创 关于音乐播放器项目详细解析
项目码云地址：https://gitee.com/Snow28/MyMusic（如果觉得可以，麻烦给我鼓励一个star）技术栈vue vue-router vuex axios jsonp audio flex better-scroll good-storage主要功能：歌曲播放（从搜索历史添加到播放列表，展示最近播放） 切换歌曲（上一首，下一首，随机，单曲，循...
2020-02-20 20:18:56
3489
原创 ECMAScript编写异步任务
一、基本的异步任务JavaScript中编写异步任务使用的就是回调函数，如下面的例子：setTimeout(() => { callback()}, 1000);这个例子是最简单的一个异步任务的例子：在1秒钟后执行回调函数但是这种编写异步任务会有一个问题，就是容易产生回调地狱，因此提出使用下面的一些方式解决。二、使用Promise编写异步任务以及Promise的A...
2020-02-19 21:50:02
357
原创 函数柯里化
函数柯里化是指：把一个多参数的函数，转化为单参数函数// 非柯里化function add(x, y) { return x + y;}add(1, 2) === 3; // true// 柯里化function addX(y) { return function(x) { return x + y; };}addX(2)(1...
2020-02-19 21:45:26
394
原创 前端面试算法题总结
1.回文判断： var str = 'resiviser'; function reserve(str) { return str === str.split('').reverse().join(''); } 2.数组去重 function unique(arr) { const container = {}; c...
2020-01-13 20:45:24
710
原创 JS的对象篇
（1）BOMwindow对象全局对象不能通过delete操作符删除，直接在window上定义的属性可以删除location对象属性： hash：地址栏#后面的内容 host：主机及端口号 hostname：主机名 pathname：文件路径——————相对路径 port：端口号 protocol：协议 search：...
2020-01-13 14:42:22
232
原创 js中的元素事件篇
元素的事件绑定：三种元素创建 document.write('标签及内容') 对象.innerHTML='标签及内容' document。createElement（） 如果是在页面加载完毕后，用document.write()创建元素，会导致原页面所有内容都被撤销掉了1.addEventListener（"事件类型（on）",function,false）==...
2020-01-12 20:07:32
1616
原创 关于js中构造函数和原型对象的东西
实例对象与构造函数之间的关系：1.实例对象通过构造函数来创建2.如何判断对象是不是某个数据类型： 实例对象.构造器==构造函数的名字 对象 instanceof 构造函数的名字 3.重点 构造函数可以实例化对象 构造函数有一个prototype，是构造-函数的原型对象 构造函数的原型对象（prototype）中有一个constructor构造器...
2020-01-12 20:04:28
189
原创 前端需要注意哪些SEO
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理...
2019-12-17 10:40:25
224
原创 编写高能的js
常见编码规范将 js 脚本放在页面底部，加快渲染页面 将 js 脚本将脚本成组打包，减少请求 使用非阻塞方式下载 js 脚本 尽量使用局部变量来保存全局变量 遵循严格模式："use strict"; 尽量减少使用闭包 减少对象成员嵌套 缓存DOM节点访问 避免使用eval()和Function()构造器 尽量使用直接量取创建对象和数组 最小化重绘(repaint)和回流(r...
2019-12-17 10:38:38
181
原创 浏览器的渲染过程，DOM 树和渲染树的区别？
HTML 经过解析生成 DOM树； CSS经过解析生成 Style Rules。 二者一结合生成了Render Tree。 通过layout计算出DOM要显示的宽高、位置、颜色。 最后渲染在界面上，用户就看到了浏览器的渲染过程：解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM ...
2019-12-17 10:37:24
3498
原创 webpack优化
有哪些方式可以减少 Webpack 的打包时间 有哪些方式可以让 Webpack 打出来的包更小一、减小打包后文件体积按需加载如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。...
2019-12-17 10:34:17
294
原创 CDN 的缓存与回源机制解析
CDN （Content Delivery Network，即内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。 CDN 提供快速服务，较少受高流量影响。一、CDN的核心功能CDN 的核心点有两个，一个是缓存，一个是回源。“缓存”就是说我们把资源 copy 一份到 CDN 服务器上这个过程 “回源...
2019-12-17 10:28:41
1082
原创 Vue的动态路由
我对vue中Router的解释，可以到https://blog.csdn.net/Gbing1228/article/details/103556607了解一、什么是动态路由？例如：点击不同的歌手进入到不同的歌手详情页虽然每个请求的id不同，但是都会导航到同一个组件中，在配置路由的时候就不能写死。在vue-router中，动态路由由“：”开头。 <router-link t...
2019-12-16 16:06:02
505
原创 Vue中关于router的使用
我对vue中动态路由的解释，可以到https://blog.csdn.net/Gbing1228/article/details/103557064了解一、解释什么是路由：路由就是指向的意思例如：点击home按钮，压面中就显示home内容；点击about按钮，页面中就显示about内容；home按钮==》home内容，about==》about内容；这也可以说是一种映射三个...
2019-12-16 09:29:00
310
原创 关于操作系统——进程与线程
1. 进程进程是资源分配的基本单位，用来管理资源（例如：内存，文件，网络等资源）进程控制块 (Process Control Block, PCB) 描述进程的基本信息和运行状态，所谓的创建进程和撤销进程，都是指对 PCB 的操作。（PCB是描述进程的数据结构）2. 线程线程是独立调度的基本单位。一个进程中可以有多个线程，它们共享进程资源。QQ 和浏览器是两个进程，浏览器进...
2019-12-15 22:04:14
162
原创 JS中的this是如何工作的
代码示例： var fullname="A" var obj= { fullname:'B', prop:{ fullname:'C', getFullName:function () { return this.fullname } ...
2019-11-30 19:01:45
566
原创 在函数里存在的全局变量
(function(){ var a=b=5; })(); console.log(b); // 5 console.log(a); // a is not defined 分析：var a=b=5 这句代码可以拆分为 b=5，var a=b 这两句；b=5 是全局变量，在立即执行函数里赋值为5；在这里可以理解为window.b=5var...
2019-11-30 18:37:08
626
原创 实现一个对页面中某个节点的拖拽
今天看到一道面试题：实现一个对页面中某个节点的拖拽虽然以前写过这样的代码，但是今天再次思考的时候，发现任然值得去重新code一遍；要点：mousedown，mouseover，mouseup 在mousedown之后，事件开始触发； 执行mouseover时，需要通过event.clientX和event.clientY来获取获取拖拽位置的坐标（需要考虑边界情况） mouseup...
2019-11-26 12:58:40
2850
原创 Flex弹性盒模型打破传统css布局方式——轴篇
Flex的核心是容器和轴，容器指父级容器和子容器，轴指主轴和交轴。轴：主轴：justify-content；flex-direction 决定主轴的方向flex-direction: row 向右flex-direction: column向下flex-direction: row-reverse向左flex-direction: column-reverse向上...
2019-10-07 20:57:23
198
原创 Flex弹性盒模型打破传统css布局方式——容器篇
Flex的核心是容器和轴，容器指父级容器和子容器，轴指主轴和交轴。容器：父级容器可以统一设置子容器的排列方式， 子容器可以单独设置自己的排列方式， 如果两者都设置了，以子容器为准父容器：justify-content：设置子容器沿着主轴排列位置排列：flex-start 起始端对齐flex-end 末端对齐center 居中对齐分布排列：space-bet...
2019-10-07 20:39:40
231
原创 关于Vue的“：src”绑定静态图片的问题
今天遇到一个问题，是关于在Vue的img标签中，使用：src绑定本地静态资源图片的操作我开始在data（）中这样写的，并没有把图片加载出来：imgUrl: ('../../../assets/Ima-swiper/swiper4.jpg')效果如图：随后，代码改为：imgUrl: require('../../../assets/Ima-swiper/swiper4.j...
2019-09-29 16:28:15
2155
原创 单页面应用与多页面应用之间的比较
单页面应用： 是用js渲染，每次页面间的跳转都是都通js把之前的页面内容删掉后，加上新的内容，这样避免了每次跳转去发送http请求，整个过程就只发送了一个http请求，页面制作局部刷新或者更改，这样切换页面速度更快，缺点就是相对于多页面应用来说，SEO效果更差，首屏时间更长。Vue会提供服务器渲染方面的技术，进行优化，这对前端开发来说就是很好的一个选择。（这样需要开发成本较高）u...
2019-09-25 20:59:53
213
原创 对Vue基础的掌握
一.初步认识MVVM模式：MVVM设计模式： M:数据层，对应Vue中data内容， V:视图层，对应Vue中的html标签内容 VM:是Vue提供的功能，对应Vue中methods里的内容 Vue更多的是通过去写数据层代码来实现功能传统的MVC模式：更多的代码时去写C控制层的代码改变DOM的结果来实现功能二、Vue实例中的应用 Vue能做到响应...
2019-09-24 20:18:31
189
原创 移动端
在移动开发中的思想：宽度不用固定的，需要用百分比（流式布局：非固定像素，百分比布局，内容向两边填充） 需解决适配问题（对移动端viewport视口进行设置，是一个虚拟区域，用DOM检查不到，承载网页的，浏览器承载viewport，viewport再去承载网页） 主流适配方案：网页宽度必须和浏览器保持一致，默认显示的缩放的比列与PC端保持一致，不允许用户自行缩放网页设置视图窗口：&l...
2019-09-13 12:59:23
333
原创 初步对canvas的学习
什么是Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度(画布是白色的，默认是300*150，可以设置画布大小) ： &l...
2019-09-12 21:16:04
234
原创 关于webpack的学习
我很想表达一下，对于我这个小白学习webpack是真的让我感到头大，因为webpack目前已经更新到4+的版本了，他的版本对文件配置有影响，webpack版本必须与webpack-dev-server版本相匹配才能正常使用，而我在最开始学习的时候，没有这个认知，明明做法是对的，可是demo就是运行不起来，苦逼了很多天，最后发现了这个问题。然而发现了也会在中途遇到很多问题，版本不够稳定，会出现很多奇...
2019-07-26 09:27:35
172
转载 对前端自动化构建——gulp的初步了解
这篇写得不错：https://blog.csdn.net/damon316/article/details/51964740
2019-07-22 10:31:19
157
原创 lodash一个js的库
目录什么是lodash lodash可以做什么如何使用lodash什么是lodashlodash是一个javascript库，也是Node JS的常用模块，可以用 npm install -g lodash 命令安装。 它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数， 可以模块化，可以更高效 使用lodash提供的接口，可以在形式上表现一致。...
2019-07-21 11:57:48
352
原创 Vue自定义指令
自定义指令的写法：将组件写法中的component改为directive；自定义指令选项是有几个钩子组成的，每个都是可选的。bind：只调用一次，指令第一次绑定到元素时调用，用的这个钩子函数可以定义在一个绑定时执行的初始化动作； inserted:被绑定元素插入父节点是调用（父节点存在即可调用，不必存在于document中） update：被绑定元素所在的模板更新时调用，而不论绑定值是...
2019-06-08 20:54:07
174
原创 组件高级用法
递归组件需要给组件设置name选项：<div id="app"> <child-component :count="1"></child-component></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...
2019-06-05 10:45:00
223
原创 slot
Vue的3个API：props传数据，events触发事件，slot内容分发；需要让组件组合使用，混合父组件的内容和子组件的模板是，就需要slot，称为内容分发；单个slot用法：在子组件内使用slot可以开启一个卡槽，在父组件模板里，插入在子组件标签内的所有内容将替代子组件slot标签以及他的内容:<div id="app"> <child-compo...
2019-06-05 08:41:13
563
原创 非父子组件之间的通信
方法：1.使用中央事件总线（bus），也就是一个中介来完成。<div id="app"> {{message}} <component-a></component-a></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...
2019-06-01 12:24:11
1002
原创 props接收父级元素的属性
props的值可以是两种，一种是字符串数组，一种是对象； props中声明的数据是来自父级，而data中的数据是组件本身的数据，作用域是组件本身，这两种数据都可以在模板template以及计算属性的方法中使用。 要使用来自父级的动态数据时，需要使用v-bind来动态绑定props。 <div id="app" > <input type="t...
2019-06-01 11:15:05
1199
原创 Vue的内置指令
1，基本指令：v-cloak：不需要表达式，会在vue实例结束编译时从绑定的HTML元素上移除，经常和CSS中的display：none连用； 解决初始化慢，导致的页面闪动；v-once：不需要表达式，定义他的元素或者组件只渲染一次；首次渲染后，不在随数据变化而重新渲染；2，条件渲染指令：v-if，v-else-if, v-else:表达式为真时，渲...
2019-05-28 18:40:49
369
原创 Vue计算属性
关于计算属性介绍：1.所有的计算属性都以函数形式写在Vue实例内的computed选项内，最终return返回计算后的结果。2.每个计算属性都会有一个getter和setter函数，手动修改计算属性时就会触发setter函数，getter方法用来读取计算属性；3.计算属性可以依赖其他计算属性4.计算属性不仅可以依赖当前Vue实例的数据，还可以一阿里其他实例的数据。<sc...
2019-05-28 10:04:46
1167
原创 Vue的数据绑定与生命周期
数据绑定：v-model的指令的值对应创建Vue实例中的data选项中的元素字段，在data选项中可以声明应用内需要双向绑定的数据。只要建立双向绑定，修改其中任何一个，另一个也会一起变化。var MyData={ a:1}var app=new Vue({ el；APP， data:MyData})console.log(a)//1//修改属性...
2019-05-27 20:34:35
3004
原创 ES6中的解构赋值
分类：数值解构赋值 对象解构赋值 字符串解构赋值 布尔解构赋值 函数参数解构赋值 数值解构赋值数组解构赋值：左边一个数组，右边一个数组，按照对应位置，对变量赋值；{ let a,b,rest; [a,b]=[1,2]; console.log(a,b);}对象解构赋值：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而...
2019-04-17 20:01:14
170
原创 ES6的let与const命令
1.块级作用域：一个大括号{}所包起来的内容就是一个块级作用域；let和const就是块级作用域，2.严格模式：“use strict”；3.如果在同一个块级作用域中，let一个变量不能重复使用，每一个变量名只能被let一次，const也是这样的。4.const定义的是一个常量，这个常量不能被修改，但是如果const一个对象，对象的成员属性值可以修改，而这个对象那个最后返回的地址指...
2019-04-17 16:45:27
230
原创 express中的中间件
一、中间件结构1、app.use（[path]，function）path：是路由的url，默认参数‘/'，意义是路由到这个路径时使用这个中间件function：中间件函数这个中间件函数可以理解为就是function(request,response,next)这里安装是指涉及到第三方中间件的使用时，需要先安装好，然后在使用。二、中间件分类1、内置中间件expre...
2019-04-15 16:35:05
495
原创 API-promise的学习笔记
回调地狱：通过回调嵌套的方式来实现请求多个文件的先后顺序，因对多个异步API无法保证顺序。在EcmaScript中新增了一个API,可以实现回调地狱promise的封装：promise的链式封装：...
2019-04-10 21:15:22
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人