- 博客(58)
- 收藏
- 关注
RSS订阅原创 http1.0 http1.1 http2.0特性及区别
http1.0特性无状态：服务器不跟踪不记录请求过的状态无连接：浏览器每次请求都需要建立tcp连接无状态对于无状态的特性可以借助cookie/session机制来做身份认证和状态记录无连接无连接导致的性能缺陷有两种：1. 无法复用连接每次发送请求，都需要进行一次tcp连接（即3次握手4次挥手），使得网络的利用率非常低2. 队头阻塞http1.0规定在前一个请求响应到达之后下...
2019-06-19 11:51:18
948
原创 使用canvas一步步实现图片打码功能
使用canvas一步步实现图片打码功能原文地址https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md预览地址https://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html准备工...
2019-06-17 19:45:18
1456
原创 vue项目中实现图片裁剪功能
原文地址https://github.com/MY729/picture-crop-demo在vue项目中实现图片裁剪功能演示地址https://my729.github.io/picture-crop-demo/dist/#/前言vue版本：3.6.3 https://cli.vuejs.org/zh/cropperjs: 1.5.1 https://github.com/f...
2019-06-10 10:25:34
6808
3
原创 推荐好用的前端工具
原文地址：推荐好用的前端工具都是自己在用的，后续发现会继续补充chrome插件(需要翻墙访问安装)掘金为程序员、设计师、产品经理每日发现优质内容, 在新标签页展示聚合内容Vue.js devtools用于调试Chrome和Firefox上的vue项目的工具Octotree树形展示 Github 项目代码, 使你在github查看项目时可以清晰明了的看到项目的结构以及具体...
2019-04-24 12:02:02
789
转载 npm install -save 和 --save-dev区分
使用npm install 安装模块，有以下几种形式：npm install <模块名>npm install -g <模块名>npm install -save <模块名>npm install --save-dev <模块名>在区分上面四个命令前 , 我们先了解 package文件的 dependencies 节点 和 devDepe...
2019-04-11 11:06:27
2190
1
原创 读书笔记：《图解HTTP》第四章 HTTP状态码
原文地址博客积累地址HTTP状态码HTTP状态码被分为五大类:1xx: 信息性状态码，表示接收到请求并且继续处理2xx: 成功状态码，表示动作被成功接收、理解和接受3xx: 重定向状态码，为了完成指定的动作，必须接受进一步处理4xx: 客户端错误状态码，请求包含错误语法或不能正确执行5xx: 服务器错误状态码，服务器不能正确执行一个正确的请求常用状态码状态码短语描...
2019-03-28 19:24:48
217
原创 读书笔记：《图解HTTP》第三章 HTTP报文
原文地址博客积累地址HTTP报文的作用HTTP报文时是HTTP进行请求和响应时用来交换信息的，可以理解它为搬东西的包裹，来搬运交换的信息报文流HTTP报文在HTTP应用程序（客户端、服务器、代理）之间发送数据块，这些数据块以文本形式描述了报文的内容和含义。这些报文在客户端、服务器、代理之间流动，称之报文流，用流入、流出、上游和下游这些术语描述报文流动的方向报文如何流动报文是...
2019-03-28 19:23:10
423
原创 读书笔记：《图解HTTP》第二章 HTTP协议
原文地址博客积累地址HTTP协议用途HTTP协议用于客户端和服务器端之间的通信客户端：请求访问文本或图像等资源的一端服务器端： 提供资源响应的一端在两台计算机之间，必有一端担任客户端角色，另一端担任服务器端角色，有时角色可能会互换，HTTP协议能够明确区分哪端是客户端，哪端是服务器端通过请求和响应的交换达成通信由客户端发出请求报文，服务器端回复响应报文请求报文请求报文的构成...
2019-03-28 19:21:57
274
原创 读书笔记：《图解HTTP》第一章 网络基础
原文地址博客积累地址HTTP的诞生及发展HTTP是为了知识共享而诞生，最初的设计理念是让远隔两地的研究者们共享知识，借助多文档之间相互关联形成的超文本，连成可相互参阅的 WWW（World Wide Web，万维网）3项WWW 构建技术作为页面的文本标记语言 HTML(超文本标记语言)作为文档传递协议的 HTTP指定文档所在地址的 URL(统一资源定位符)现在我们都知道在网页浏...
2019-03-28 19:20:59
186
原创 JavaScript-浅拷贝vs深拷贝
原文地址博客积累地址概念深拷贝和浅拷贝都是针对的引用类型浅拷贝：拷贝的是地址，最终两个变量指向同一份数据，修改其中一个变量会改变另一个深拷贝：两个变量是独立的，互不影响我们先看一个浅拷贝的例子var a = { name: '小明'}var b = // {name: "小明"}b.name = '木木'a // {name: "木木"}只拷贝一层假设拷贝一份...
2019-03-06 18:55:52
182
原创 easy-mock使用
原文地址（排版更好些）：https://my729.github.io/blog/article/EasyMock使用.htmlEasyMock使用我们知道mockJs可以模拟数据,让前端独立于后端开发，还有许多其他特点，详情可以戳 这里 了解EasyMock是一个构建模拟数据的平台，也可以说是一个在线mockJs平台EasyMock优势省去配置、安装mockJs步骤，解决多人协作M...
2018-12-20 19:55:37
7307
2
原创 vue数组/对象的更新检测
原本地址：https://my729.github.io/blog/interview/vue相关.html#vue数组-对象的更新检测::: danger 重要Vue不能检测到对象的添加或者删除。Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它:::vue检测数据（数组）变动靠的是setter和getter这两个属性...
2018-12-13 10:42:42
1266
原创 前端发送表单到后端的报文结构
原文地址： https://my729.github.io/blog/interview/网络相关.html#前端发送表单到后端的报文结构HTTP请求报文结构一个HTTP请求报文由四个部分组成：请求行： 由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，用空格分隔。比如 GET /data/info.html HTTP/1.1请求头： 指明请求类型(一般是GET或者 POST...
2018-12-13 10:32:28
1691
转载 解析URL参数为对象
function urlSearch(href) { let name, value; let str = href; //取得整个地址栏 let num = str.indexOf("?"); str = str.substr(num + 1); //取得所有参数 let arr = str.split("&"); //各个参数放到数组里 let json = {};
2017-10-25 23:54:55
2355
转载 原生js实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <style> #box{ width:500px; height: 400px; bac
2017-10-25 22:02:12
960
原创 前端性能优化
减少HTTP的请求 使用浏览器缓存 压缩文档代码 CSS CSS雪碧图 CSS选择符优化(谨记:CSS从右往左匹配) LazyLoad图片懒加载 CSS放页面顶部、JavaScript放页面底部 减少cookie存放的数据，尽量使用本地存储 JavaScript 异步加载 JavaScript中缓存DOM，减少DOM操作 避免使用new Function 减少作用域链的查找
2017-10-25 20:44:03
283
转载 ES6 特性
一、增加了const和let关键字1、使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象； 2、使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升； 3、使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。const声明常量不会变，若声明对象，值改变不会报错二、解构赋值什么是解构？ ES6允许我们队数组和对象中提取值，对变量进行赋值，这被叫
2017-10-24 23:48:45
286
转载 JavaScript作用域、作用域链、闭包详解
一、作用域和作用域链js中作用域有全局作用域和局部（函数）作用域两种，没有块级作用域的概念全局作用域：1、最外层函数和在最外层函数外面定义的变量拥有全局作用域var outColor="blue";function sayColor( ){ var inColor="red"; function innerSayColor( ){ console.log(inCol
2017-10-24 21:02:13
930
转载 this指向详解及改变它的指向的方法
一、this指向详解this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话不那么严谨，作为一般情况下是可以的）再加下面的补充，就完美啦：情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里
2017-10-22 17:54:56
22753
2
原创 defer和async定义及区别
定义： script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。区别： <script async src="script.js"></script> // 有async，加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行（异步）。 <script defer src="myscript.js"></script> //有defer，加载
2017-10-22 15:46:43
401
原创 js如何判断数据类型和数组类型整理
一、typeof可以判断部分数据类型在 JavaScript 里使用 typeof 来判断数据类型，只能区分基本类型，即“number”，”string”，”undefined”，”boolean”，”object” 五种。对于数组、函数、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。var str="abc";console.log(typeof(str)
2017-10-22 15:22:55
1278
原创 js获取一定范围内n个随机整数
function getRandomNumber(start,end,n){ var arr=[]; for(var i=0;i<n;i++){ var number=Math.floor(Math.random()*(end-start+1)+start); if(arr.indexOf(number)<0){ arr.pus
2017-10-22 14:17:49
2705
原创 原生的js选择器
document.getElementById document.getElementsByName document.getElementsByTagNamedocument.getElementsByClassName //html5的类选择器，不兼容IE8 document.querySelector //兼容IE8
2017-09-25 20:23:30
2297
转载 queyHTML和HTML5的区别？
一、文档声明上HTML5更简单，容易记忆 二、结构语义上，HTML5 三、新增元素 绘图功能：canvas和svg 1.Canvas标签 Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景
2017-09-25 20:18:01
243
转载 js数组去重
方法一：对数组进行先排序，排完序之后在让元素与前一个元素做对比，相同的就去掉，该方法用到的是sort()方法和slice()var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j'];//对数组先进行排序arr.sort(); fo
2017-09-20 23:37:09
277
转载 常用Linux命令
常用指令ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录，包括隐藏的a(all)mkdir 创建目录 -p 创建目录，若无父目录，则创建p(parent)cd 切换目录touch 创建空文件echo
2017-09-20 23:24:39
182
原创 58面试整理
一、左固定右自适应布局常见布局技巧二、清除浮动的方式清除浮动的几种方式三、js继承1、简单原型链——拿父类的实例充当子类的原型对象具体实现：function Super(){ this.val = 1; this.arr = [1];}function Sub(){ // ...}Sub.prototype = new Super(); // 核心var sub
2017-09-20 23:15:33
806
转载 cookie、session、sessionStorage和localStorage的区别
请描述一下cookie、sessionStorage和localStorage的区别 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右
2017-09-01 22:02:01
369
转载 HTML5的特性与优缺点
一：HTML5有以下一些优点：01、提高可用性和改进用户的友好体验；02、有几个新标签，有助于开发人员定义重要内容；03、可给站点带来更多多媒体元素(视频和音频)；04、可很好的替代FLASH和Silverlight；05、当涉及网站抓取和索引时，SEO很友好；06、可大量应用于移动应用程序和游戏；07、可移植性好。二：缺点： 该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一
2017-09-01 20:47:12
7123
原创 HTML+CSS多种布局技巧
一、水平居中水平居中多用于标题以及内容区域的组织形式，以下是五种实现水平居中的方法：方法一： 使用inline-block和text-align实现<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（1）</title> <style> .parent{ text-align
2017-08-17 21:33:21
768
转载 ajax创建过程
1.创建XMLHttpRequest对象,也就是创建一个异步调用对象. 2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 3.设置响应HTTP请求状态变化的函数. 4.发送HTTP请求. 5.获取异步调用返回的数据. 6.使用JavaScript和DOM实现局部刷新.<!DOCTYPE html><html><head><meta ch
2017-08-10 16:38:00
1033
翻译 XML和json的区别？
1、数据体积方面json相对于XML来讲，数据的体积小，传递的速度更快些。2、数据交互方面json与JavaScript的交互更加方便，更容易解析处理，更好的数据交互3、数据描述方面json对数据的描述性比XML比较差4、传输速度方面json的速度要远远快于XML
2017-08-07 20:52:33
431
原创 JavaScript写一个能遍历对象和数组的通用forEach函数
//遍历对象可以用for...in...，遍历数组可以用forEachfunction forEach(obj){ var key; if(obj instanceof Array){ obj.forEach(function(item){ console.log(item) }) }else{ fo
2017-08-07 20:37:39
6946
转载 JavaScript常用的数组API和对象API
面试常用的数组API:1、forEach 遍历所有元素var arr=[1,3,4,5,7,8,9];arr.forEach(function(item,index){ //遍历所有数组元素 console.log(index,item)})运行结果：2、every 判断所有元素是否都符合条件var arr=[1,2,3];var result=arr.every(functi
2017-08-07 20:33:44
454
原创 JavaScript获取随机数，要求是长度已知的字符串格式
//整数var random=Math.random( );random=Math.floor(random*10) //获取一位整数的随机数//random=Math.floor(random*100) //获取两位整数的随机数console.log(random); var random=Math.random( );random=random+'00000'random=rando
2017-08-07 18:14:23
826
原创 JS获取2017-06-10格式的日期
知识点：var dt=new Date() //会得到创建当前时间对象的时间console.log(dt)dt.getFullYear( )//年份dt.getMonth( ) //0-11,月份需加一dt.getDate( ) //日dt.getHours( ) //时dt.getMinutes( ) //分钟dt.getSeconds( ) //秒答案：function form
2017-08-07 18:01:55
634
转载 DOM操作和BOM操作
DOM操作（文档对象模型）知识点：1、DOM本质什么？ 浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可操作的一个模型而已 2、DOM节点操作//获取DOM节点： var div=document.getElementById('div1')//元素 var divList=document.getElementsByTagName('div')//元素集合
2017-08-07 17:21:26
1327
转载 页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而link是XHTML标签，无兼容问题
2017-08-07 09:06:29
480
转载 为一个DOM元素添加事件有几种方式，分别是什么？
第一种，直接在html代码上设置标签的事件处理，代码示例：<!DOCTYPE html> <html> <head> </head> <body> <p id="p">点击按钮就执行displayDate()函数</p> <button id="id" onclick="displayDate()">点击</button>//在此处onclic
2017-07-31 22:30:45
5548
转载 document.write和innerHTML的区别
1. ducument.write使用举例html文档：<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <script type="text/javascript" src="js.js"></
2017-07-31 17:55:14
648
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人