- 博客(49)
- 收藏
- 关注
RSS订阅原创 安装vue-devtools 详细教程
第一步：去github将vue-devtools克隆（clone）到本地，附上网址https://github.com/vuejs/vue-devtools/tree/master第二步：在vue-devtools-master文件目下， 进行npm install 安装npm install //也可用cnmp,据网速而定第三步：找到shells/chrome/manifest.json 文件 将文件中的persistent:false修改 为true第四步：打包npm run build第
2020-11-13 10:28:55
5817
3
原创 Node.js中的express模块
前言在我们写一个node项目，搭建服务器时，用原生的方法写，最让人头疼的是静态私服，虽说差不多都一样但当你页面多时，cv也是一个费时的事情，而且代码量太多，看的眼花。这时候Express就该发挥他的优势了，提高开发效率，Express 是基于Node.js平台的一个快速的Web开发框架，虽说只有极简的内核，但能让你用各种中间件来扩展他的功能下载Expressnpm i express --save //如果嫌这个太慢，可以选择淘宝镜像//淘宝镜像 两者最好都加上--save保存配置项cnpm
2020-07-19 20:27:42
444
原创 Node.js中MongoDB数据库基本应用
简介MongoDB是一个基于分布式文件存储的数据库，介于关系型数据库和非关系型数据库之间的产品，是非关系型数据库当中功能最丰富，最像关系型数据库的。数据库开机打开cmd窗口输入此命令-mongod --dbpath 文件夹路径启动成功之后出现了 port 27017 则表示数据库启动成功，之后这个数据库启动的cmd命令窗口不能关闭。因为数据库也是服务，关闭之后就停止了。MongoDB文件夹存放的都是真实的物理数据，如果别人要用，直接拷贝走即可MongoDB的增删改查语句此时打开一个新的c
2020-07-19 15:55:00
195
原创 常用懒加载
懒加载及应用场景懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。实现的思路：给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-），监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，
2020-07-12 15:04:12
244
原创 跨域的部分常见方法
跨域原来请求的目标URL和所在网页的URL的协议、域名、端口有一个不同，就算是跨域跨域时，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了Access-Cotrol-Allow-Origin 这是典型的跨域报错<img src = xxx>、<link href = xxx >、<scripr src = xxx > 这三个标签 ，都允许跨域加载资源同源策源同源政策由 Netscape 公司引入浏览器，所有浏览器都实行这个政策同源政
2020-07-10 22:25:54
202
原创 面试题小试牛刀
考是否细心的题const res = [];for(var i = 0 ; i < 5; i++);{ res.push(i+1);}console.log(res); // 3解析：在上面代码中，for循环语句之后添加了一个分号，在js中，会判定这个语句已结束，因此可以知道for循环执行了四次空的语句，当退出循环时，此时的i值为5，然后执行{res.push(i+1);}，因此最终输出为6/*包含变量提升，this指向，运算符优先级，原型，继承，全局变量污染、对象属性、原型属性优先级
2020-07-05 20:04:37
182
原创 ES6之Set、Map、WeakMap、WeakSet集合
Set集合Set原本就是一个构造函数，Set集合主要用于存储不重复的数据，简单来说就是数据的去重const s = new Set([2, 4, 5, 2, 5, 3, 1]);console.log(s);// {2, 4, 5, 3, 1}//返回的是一个对象形式，可通过...运算符转为数组形式const s = [...new Set([2, 4, 5, 2, 5, 3, 1])];WeakMap集合 WeakSet集合使用weakset集合：map集合类似1.内部存储地址不会影响到
2020-07-05 17:36:33
187
原创 ES6之Generator生成器
什么是Generator生成器？生成器是通过构造函数Generator创建出的对象，生成器既是一个迭代器，又是一个可迭代的对象。ES6新增可解决异步编程的方案可允许一个函数返回的可遍历对象生成多个值Generator函数只需要把函数变成Generator函数生成器函数：生成器是通过function* 关键字定义，注意：async和* 不能同时加function *test(){ let info = yield 1; console.log(info) info = yield
2020-06-27 18:27:00
184
原创 ES6之Iterator迭代器
什么是迭代？要想学好迭代器，就得将迭代先了解搞懂从一个数据集合当中按一定的顺序，不断取出数据（不能确定数据的多少）的过程就称之为迭代迭代与遍历的区别迭代：强调是依次取出，不能确定取出的数据有多少，也不能去保证可以将数据全部的取出举个例子：就比如，你做一个产品时，也不知道产品最后呈现的样子，只能等做出来了，看客户有什么不满意的地方，再进行改进遍历：强调已知数据的多少，可循环出所有数据什么是迭代器？迭代器就是对迭代的过程进行了封装，通常为对象。迭代器和生成器主要用于react框架中是否为迭代
2020-06-26 23:24:08
238
原创 js常见简单的优化总结
前言一般在做项目时，要考虑js性能方面的问题，所以就来了解并掌握js编写代码的优化1. 巧用|| 和&&布尔运算符function eventHandler(e) { if(!e) { e = window.event }}//可优化替换为function eventHandler(e) { e = e || window.event;}2. 减少重绘和重排（回流）浏览器根据HTML结构生成DOM树，根据CSS生成CSSOM，再将DOM和CSSOM整合形成Ren
2020-06-21 18:16:41
479
原创 Object.defineProperty()方法的理解
跨域的产生跨域的问题其实浏览器的同源策略所导致的「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN...
2020-06-20 23:50:22
272
原创 js异步加载解决方案
异步加载js方案defer:只能IE9以下,等dom文档完全解析完之后执行defer 是在 HTML 解析完之后才会执行，如果为多个的话，按照加载的顺序依次执行defer脚本会在DOMContentLoaded和load事件之前执行<script src="indedx.js" defer ="defer "></script> async:加载完才执行，W3C标准方法async 是在脚本加载完之后立即执行，如果为多个的话，执行顺序和加载顺序无关async会在l
2020-06-15 01:17:20
201
原创 频繁使用的布局方式
圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
2020-06-08 12:40:54
159
原创 盘点常见面试题
js延迟加载的方式1、defer 只支持IE浏览器（IE9以下）2、async 加载完就执行 W3C标准方法3、创建script，插入到DOM，加载完毕后callback，按需加载<script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement('script'); script.type = 'text/javascrip
2020-06-07 20:52:32
188
原创 HTTP协议后续
像我们做前端的，肯定是会遇到网络方面的问题，所以就要了解一些基础方面及综合性的问题常见的HTTP状态码1xx：信息响应2xx：请求成功200 OK ⇒ 客户端请求成功，服务器提供了请求的网页重定向3xx：重定向，资源位置发生变化，需要重新发送请求301 Moved Permanently ⇒ 请求永久重定向302 Found ⇒ 请求临时重定304 Not Modified ⇒ 客户端发送一个带有条件的get请求，而且此请求已被允许，但文档没发生改变Client Re
2020-05-30 19:57:23
330
原创 fullpage初使用
fullpage介绍fullpage.js是一个基于jQuery的全屏滚动插件，它能够很方便&很轻松的制造出全屏网站fullpage的下载兼容性：jquery支持jquery 1.7+，浏览器支持IE8+，Chrome，Firefox，Opera，Safarigithub上的fullpage主页及下载地址https://github.com/alvarotrigo/fullPage.jsfullpage的引入顺序fullpage插件依赖jquery库，所以需要引入jquery库 //j
2020-05-29 14:19:02
428
原创 jQuery之事件委托
事件绑定.bind() 为所匹配元素的特定事件绑定事件处理函数语法：bind(type,[data],fn)有效率问题，等页面加载完成时，bind()方法才执行;常适用于页面元素的静态绑定，需注意，只能给已存在元素的绑定事件，不能给即将新添的元素绑定事件.live() 为被选元素添加一个或多个事件处理程序，需注意当这些事件发生时运行的函数语法：live(type,[data],fn)live()只能放在直接选择的元素后，层级深就不能绑定事件live()事件处理函数不会绑定在元
2020-05-24 12:45:17
1072
原创 jQuery之动画效果淡入淡出
JavaScript原生接口创建节点，在处理上是有些复杂，而jQuery简化了这个过程。常用DOM操作的方法append() 向匹配到的元素内部追加内容appendTo() 将所有匹配的元素追加到指定元素prepend() 向每个匹配的元素内部前置内容prependTo()insertBefore() / insertAfter() 将所有匹配的元素插入到指定元素的前面/后面remove()clone() 克隆匹配的DOM元素并且选中这些克隆的副本参数为true
2020-05-19 22:42:12
386
原创 jQuery的取值与赋值
wrap()添加方式：字符串式的参数Jquery对象式的参数函数式的参数 // 第一种添加方式：字符串式的参数 $('.demo').wrap('<div class="parent"></div>') // 第二种添加方式：jQuery对象式的参数 $('.demo').wrap($('<div class="parent"></div>')) // 第三种添加方式：函数式的参数 .
2020-05-18 00:36:57
659
原创 周知的jQuery基本操作
前言Jquery官网上最亮眼的有这么一句英文"write less,do more."，翻译就是“写的少，做的多”，通俗讲就是人狠话不多，这个点在它的使用上有很好的体现，像使用原生操作DOM的接口一般单词很长，不方便记忆，而jquery的DOM操作极大地简化。因为Jquery中有很多可复用函数，在不断的更新中，积累了很多插件库，极大地简化了JavaScript的开发下面来看看选择器核心全局函数$() === jQuery() ƒ ( selector, context ) 作用：传参
2020-05-17 22:41:04
180
原创 js中函数的防抖和节流
为什么要防抖和节流？在做项目过程中，我们会绑定持续触发的事件，像鼠标移动事件mousemove，滚动条scroll，还有移动端的触摸事件touchmove等等，这些事件得频繁触发，就会导致浏览器出现卡顿情况，严重的话会导致浏览器崩溃。因此，就出现了函数的防抖和节流来解决这个问题。函数防抖当某事件频繁被触发时，在延迟的一定时间段内，该事件没有再次被触发，就会执行事件处理函数，防抖就是将多次执行...
2020-04-20 19:12:31
200
原创 ES6中迭代器和生成器
什么是迭代迭代就是从一个数据集合中按照一定的顺序，不断的取出数据的过程。迭代器（Iterator）对迭代过程的封装，带有特殊接口的对象。具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，结果对象有两个属性，value 表示当前的值，done 表示遍历是否结束ES5中创建迭代器function createIterator(arr) { let i = 0;...
2020-04-18 20:00:42
139
原创 BFC概解
BFC定义BFC(block formatting contex)块级格式化上下文BFC的布局规则内部的Box会在垂直方向一个接着一个地放置。Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。 BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器...
2020-04-09 11:16:31
114
原创 ajax梳理
Ajax简介Ajax全称为Asynchronous JavaScript and XML，可以理解成就是异步的JavaScript和XML，利用浏览器内置的特殊对象（XMLHTTPRequest）异步，向服务器发送请求，用返回数据部分更新当前页面。其作用就是在页面不刷新的情况下可以更新用户数据，用来提高用户的体验。Ajax实现步骤ajax实现分为了四步：必须基于xhr对象，创建xhr对象...
2020-04-08 22:35:07
130
原创 ES6中新增数据类型Symbol
** Symbol**可以给对象新增私有属性，只能在对象内部进行访问特点没有字面量的写法新的数据类型，typeof返回的是symbol每次去调用Symbol函数得到的符号永远不会相等，不管符号描述是否相同符号可以作为对象的属性名使用，这种属性名叫符号属性可以通过设计，让外面无法访问到符号属性不能被枚举符号类型无法被隐式转换，数学运算，字符串拼接都是不行的，可以进行内部的显式转换...
2020-04-03 18:39:25
392
原创 ES6中class类的使用
class类的由来ES6中的class类中的大部分功能，其实在ES5中是可以实现的，而新增class类就是让对象原型的写法在原来基础上变清晰了，从逻辑上说更加合理，成为一个整体，同时，更像是面向对象的编程语法。所以可以将class类看作是一个语法糖。...
2020-04-03 14:40:19
752
原创 ES6中Promise对象理解
Promise定义Promise对象用来解决异步问题以前回调函数和事件处理来解决异步问题，ES6中几乎可以覆盖所有的异步场景。ES6中增强的功能，ES为了兼容以前的版本，以前旧的写法并没有抛弃，针对这些场景推出了新的API，这套API对异步的处理，变得更为简洁。Promise对象，可以获取异步操作的消息，提供统一的API，几乎所有的异步场景都可以用同样的方法进行处理。基本用法在ES6中...
2020-03-27 15:13:44
281
原创 ES6中箭头函数使用
箭头函数的定义ES6使用箭头函数（=>）来定义函数，箭头函数是一个函数表达式，理论上，任何使用函数表达式的地方都可以改成箭头函数首先来看箭头函数的基本语句//带一个参数的箭头函数let fn = a => a //箭头函数在参数和箭头之间不能换行，可以省略包裹参数的括号fn('大丫') // 大丫//带多个参数的箭头函数let fn = (a, b) => a ...
2020-03-25 17:07:20
220
原创 ES6基础常见知识点
ES6来源ES：ECMAScript的简写，ECMAScript是一个语言标准 ES6：是ECMAScript的第六个版本ECMAScript与JavaScript的关系ECMAScript是一个语言标准，JavaScript中的语法(如if、var…)只要符合这个标准，就可在JS中运行，就可以在浏览器中运行。JavaScript = ECMAScript + WebApi(DOM ...
2020-03-22 17:04:12
139
原创 Git初用小白看过来
Git是一个分布式的版本管理工具，不必服务器端软件支持。Git中常见命令pwd查看当前的目录cd切换目录ls列出当前目录中的内容ls-a显示隐藏的文件ls-l列出文件的详细信息mkdir创建目录，可以创建多个文件夹touch创建文件，可创建多个文件cat查看文件内容let查看文件rm删除文件，不能删除文件夹...
2020-03-21 20:47:00
146
原创 浅度克隆和深度克隆的总结
浅度克隆（浅拷贝）对于基本数据类型（undefined、null、number、boolean、string），就是修改其中的一个值，另一个也随之改变。对于对象和数组来说，拷贝的只是地址值，修改新拷贝的对象会影响原对象，通过引用指向的是同一个堆内存。//浅度克隆function clone(obj) { var res = {}; for (var prop in obj) {...
2020-03-15 18:06:04
247
原创 老生常谈的this指向问题
1.普通函数var name = 'yaya'function fn() { console.log(this.name);}fn();//yaya 此时this指向全局变量yaya未显示指定this,函数默认被全局变量调用严格模式下严格模式下没有明确指定this时，this为undefined,抑制了this"use strict";var name = 'yaya'...
2020-03-10 19:15:02
114
原创 css实现div居中的方法
1.position 定位 (元素已知宽高).box{ width: 200px; height:200px; background-color: darkgrey; position: relative;}.content{ width: 100px; height: 100px; background-color: plum; position: absolute; t...
2020-01-03 15:28:54
217
原创 js实现全国省市区三级联动
HTML代码 ：省：<select id="provice"> <option>--请选择--</option> </select> 市：<select id="city"> <option>--请选择--</option> </select> 区：<select i...
2020-01-03 12:58:30
607
原创 css关于伪类、伪元素实现checkbox，radio默认样式的修改
label{ display: inline-block; width: 14px; height: 14px; border: 1px solid #dcdee2; border-radius: 3px; font-size: 0; overflow: hidden;}label:hover{ border-color: #dc...
2019-12-28 19:29:41
463
原创 Web本地存储常见的知识点
文章目录cookie和session的区别WebStorage和cookie的区别sessionStorage和localStorage之间的异同点sessionStorage的使用方法localStorage的使用方法cookie和session的区别cookie数据存放在客户端，session数据放在服务器端cookies存储：大小限制在4kb,通过请求服务端返回一个cookieID存...
2019-12-28 11:06:09
399
原创 svg实现柱状图
通过这个小案例熟悉一下svg中的一些属性<svg id="svg"> <defs id = 'defs'></defs> <g stroke = 'plum' stroke-width = '2'> <!--x轴--> <line x1 = '50' y1 = '550' x2 = '750' y2 =...
2019-12-26 13:38:46
2404
原创 es5严格模式常见点
一、严格模式的介绍“严格模式”的设立是为了消除js语法的一些不合理，不严谨的地方，减少一些怪异行为的出现；不再去兼容es3中的一些不规则的语法，使用全新的es5规范，保护代码运行的安全一样的代码，“严格模式”中，一些在正常模式下可以运行的语句，在严格模式下将不能运行二、严格模式的调用es5严格模式启动："use strict";是一行字符串，不会对不兼容es5语法的浏览器产生影响全...
2019-12-23 20:04:24
278
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人