- 博客(50)
- 收藏
- 关注
RSS订阅原创 http报文
http报文http报文分为请求报文与响应报文请求报文请求报文由：请求行请求头请求体三部分组成请求行组成1.请求方式：上图中，请求方式为GET。GET和POST是最常见的请求方式，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE2.请求对应的URL地址，它和报文头的Host属性组成完整的请求URL3.协议名称及版本号，如上图的‘HTTP/1.1’...
2018-10-16 21:39:45
358
原创 客户端存储之storage
客户端存储之StorageStorage(或者更准确的说——Web Storage)介绍什么是StorageStorage是一种Web存储机制（实现客户端存储的一种方式）为什么会有StorageStorage的目的是克服由cookie存储所带来的限制——当数据需要被严格控制在客户端而无需持续的将数据发送回服务器。其主要实现两个目标：1.提供一种cookie之外的存储会话数据的途...
2018-10-16 17:25:42
831
原创 手写map
手写mapSelfMap.prototype.getHash = function (key) {//计算key的hash值 let hash = 0; if (typeof (key) === 'string') {//String类型hash值 const seed = 31; let len = key.length; for...
2018-10-13 22:28:17
497
原创 Map
Map与SetMap出现原因在Map之前，我们都用对象来存储键值对。而在对象中，键都会被转换为字符串(无论其之前是什么类型)。即在对象中，我们只能用字符串作为键。为了解决上述问题，Map出现了。在Map中，键与值可以是任意类型，且不会被类型转换Map的使用Map作为一个构造函数，我们首先需要通过它创建一个Map对象：let map = new Map();然后通过下列Map提供的...
2018-10-12 22:22:41
283
原创 水平垂直居中
水平垂直居中通过绝对定位.center{ width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top:-50px;}该种方式要求元素必须要有明确的宽高translate.center...
2018-10-12 20:23:28
655
原创 Ajax
Ajax(Asynchronous JavaScript and XML)这一技术能够异步向服务器请求额外的数据而不用刷新整个页面。即我们通过Ajax向服务器获取数据后，再使用DOM将数据放入页面。该技术的核心是——XMLHttpRequest（xhr）对象。Ajax的特点是：使用脚本操纵HTTP，实现服务器与浏览器间的数据交换。且不会导致整个页面重载创建XMLHttpRequest对象我...
2018-10-12 14:23:26
230
原创 迭代器
迭代器与生成器#迭代器###基本概念可迭代对象（Iterable）在MDN中有这样一句话：为了变成可迭代对象， 一个对象必须实现 @@iterator 方法, 意思是这个对象（或者它原型链上）必须有一个名字是 Symbol.iterator 的属性。该属性对应一个方法，该方法返回一个迭代器简单说来就是——凡是对象本身或其原型链上有Symbol.iterator方法，那么该对象就是一个可...
2018-10-11 23:19:50
171
原创 严格模式下
严格模式下‘use strict’是一种在代码运行时，自动执行更严格的代码解析和错误处理的方法严格模式的特点如下：不能使用：with、arguments.callee、function(函数引用).caller变量必须先声明再赋值call、apply、bind参数为undefined或null时，this指向就为undefined/nullarguments与形参的映射关系将不存在...
2018-10-11 16:34:27
161
原创 get与post的区别
get与post的区别基于RFC规范来说get与post语法完全相同，但是RFC给get与post规定了语义——get用来获取数据，post用来发送数据浏览器实现的RFCget的数据被追加到url中，并对所有人可见。而post的数据不追加到url中get对数据长度有限制，post无限制get历史参数会保留在浏览器历史记录中，而post不会。结合1，因此我们认为post较get更安全...
2018-10-11 16:21:48
164
原创 ES6中的字符串API.md
ES6中的字符串扩展与数组扩展#字符串扩展includes用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false语法：str.includes(searchString[, position])searchString——要在此字符串中搜索的字符串；position——可选。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0let str = 'to b...
2018-10-10 13:01:45
301
原创 js浮点数精度问题.md
JS浮点数精度问题var a = 0.1 + 0.2;var b = 0.3;console.log(a===b);//falseconsole.log(a);//0.30000000000000004这是因为浮点数有时并不能准确的转换为二进制数。因此，内部进行二进制运算时会有精度误差怎么解决呢？function almostEqual(num1, num2) { Number....
2018-10-04 20:57:06
182
原创 css中的常用单位.md
css中的常用单位许多CSS属性后面都会有单位。而且在实际中发现这一块存在问题，所以查找资料与文档，做些总结虽然种类很多，但仅说说几个常用的em1em定义为该元素的font-size值。比如，如果元素的font-size值为14px，那么在该元素中1em=14px如果元素的font-size值是一个相对值，那么会将其计算后在用于衡量emrem当使用 rem 单位，他们转化为像素大小取...
2018-10-04 20:53:32
1105
原创 document write.md
document.write我们都很熟悉，document.write用于向document.open打开的文档流中写入内容。但是document.write很可能会造成文档的重写我们先来补充一些理论知识：如果document.write向文档流中写入内容时，文档流没有打开。那么document.write会自动调用document.open打开文档流如果在文档加载完毕后调用docum...
2018-09-29 22:10:24
535
原创 !DOCTYPE html的作用.md
的作用DOCTYPE是Document Type的简写。用于声明文档的解析类型因为HTML 4.01是基于SGML（标准通用标记语言）的。因此，在HTML 4.01中，声明时还要引用DTD（文档类型定义）。DTD指定了标记语言的规则，文档可根据DTD语法规则验证格式是否符合此规则。确保浏览器能够正确渲染内容由于HTML 4.01需要引入DTD，因此，我们常会看到如下形式：<!D...
2018-09-29 21:51:37
191
原创 览器里输入url后发生的事情.md
浏览器输入URL后发生的事情这篇文章主要理一理浏览器从发送请求到接受到响应数据这个过程中，都发生了什么事！（标题的顺序即为整个过程中发生的事情的顺序）我们从域名解析阶段与请求和响应阶段来叙述从域名解析直至获取到资源的整个过程所发生的事域名解析阶段以www.baidu.com为例首先应该明白，域名是倒着解析的，即从顶级域名开始解析。浏览器需要的得到域名对应的IP才能访问到相关服务器，因此需...
2018-09-20 09:26:53
202
原创 同源策略(未完成).md
同源策略怎样才算同源？简单来说：协议相同、域名相同、端口相同则称为同源协议TCP协议是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。UDP协议它是一个“非连接”协议。就是在正式通信前不必与对方先建立连接，不管对方状态就直接发送，而且发送了之后不管对方是否接受到(即只管发送，发了不管)端口http协议的端口默认为80；https默认为443。...
2018-09-20 09:26:08
223
原创 cookie.md
客户端存储之cookie什么是cookie和为什么有cookie什么是cookiecookie是指web浏览器存储的少量数据（注意：这些数据是由服务器给浏览器的，然后由浏览器存储保管）。这些数据是与你访问的页面或站点相关的为什么会有cookie首先我们应该知道——HTTP协议是无状态的什么是协议的状态——协议的状态是指：下一次传输可以记住上一次传输的信息的能力。从传统WEB上看...
2018-09-20 09:25:03
180
原创 原型
原型原型的基本知识什么是原型？在js中，我们创建的每个函数都有一个prototype属性，该属性是一个指针，指向一个对象。而这个prototype属性就是原型（也可以叫原型对象，因为其本身是一个对象）原型的默认属性首先明白下列知识点：js中的对象都会有一个内置的属性——[[Prototype]]（在Chrome、Firefox等浏览器中，其被形象化为__pro...
2018-09-06 09:22:11
180
原创 json
JSON(JavaScript Object Notation)—JavaScript对象表示法关于JSON应该明白的几点：JSON是一种轻量级的数据格式，相对于以前的XML更加方便简洁JSON虽然是利用了JavaScript的语法模式来表示数据，但是其并不从属于JavaScript，其他语言一样拥有JSON诸多语言都有针对JSON的解析器与序列化器，JavaScript也不例外...
2018-09-04 09:53:56
106
原创 SVG之获取路径长度，创建获取SVG元素(6)
SVG之获取路径长度，创建获取SVG元素(6)说明：代码中，所有的namespace(命名空间)是固定的。需要记住，这是对SVG元素进行DOM操作所必需的获取SVG元素注意：是获取SVG元素哦！不是svg元素。意思就是获取所有SVG标签元素document.getElementsByTagNameNS(namespace, ‘SVG标签名’)上述方法用来获取SVG元素...
2018-07-26 20:51:37
8066
原创 SVG之viewport、viewBox、preserveAspectRatio(5)
SVG之viewport、viewBox、preserveAspectRatio(5)viewportviewport表示SVG可见区域大小（或者说SVG的画布大小）如：<svg width="500" height="500"></svg>这儿的viewport大小就是500 X 500viewBoxviewBox是svg标签中的一...
2018-07-25 12:03:29
395
原创 SVG渐变(4)
SVG渐变(4)径向渐变#svg{ width: 500px; height: 500px; border: 1px solid #ccc;}<svg id="svg"> <defs> <radialGradient id="gradient" cx="50%" cy="50%" r=&qu
2018-07-24 23:41:21
452
原创 SVG路径动画(3)
SVG路径动画(3)stroke-dasharray该css属性主要用于在SVG中创建各种虚线#line1{ stroke: black; stroke-width: 10px; stroke-dasharray: 15 7 5 5 5 7; /*表示：画15px长，空7px，画5px长，空5px，画5px，空7px，后面则循环此过程 所...
2018-07-24 23:40:21
1446
原创 path元素(2)
path元素(2)path元素用于确定一条路径，需要配合相应的指令才能使用M/m指令与L/l指令M/m相当于canvas中的moveTo，L/l指令相当于canvas中的lineToM/L是依照绝对坐标确定点，m/l是依照相对坐标确定点path{ stroke: black;}<svg id="svg"> <path d="M 1...
2018-07-24 23:37:36
654
原创 如何使用SVG和简单图形绘制(1)
如何使用SVG和简单图形绘制(1)SVG(Scalable Vector Graphics——可缩放矢量图)，SVG图在放大或缩小的情况下不会失真在SVG中全部使用标签来绘图，这些标签就相当于平时的html标签SVG的使用SVG的使用很简单，只需要添加一个svg标签即可#svg{ width: 500px; height: 500px; bord...
2018-07-24 23:34:57
8317
原创 属性描述符(已完结)
属性描述符属性描述符(或者说‘数据描述符’)用于描述对象中属性的一些特性——value(即指属性值，没错——属性值也属于属性描述符)、writable、enumerable、configurable（其实属性描述符不止这些，这儿仅说说常见的一些）当我们创建一个普通属性时，这三个属性描述符都会使用默认值——true设置属性描述符设置属性描述符——或者说给对象添加一个新属性或修改已...
2018-07-23 22:20:00
1123
1
原创 用Canvas绘制贝塞尔曲线（5）
用Canvas绘制贝塞尔曲线（5）Canvas仅提供了二/三次贝塞尔曲线quadraticCurveTo(x1, y1, x2, y2)用于绘制二次贝塞尔曲线由图可知，绘制二次贝塞尔曲线需要三个点(p0/1/2)在绘制时，画笔当前所在点、(x1,y1)、(x2,y2)即为确定二次贝塞尔曲线曲线所需的三个点ctx.moveTo(100, 100);ctx.quadr...
2018-07-23 22:17:23
1238
原创 用Canvas绘制圆弧与圆角（4）
用Canvas绘制圆弧与圆角（4）首先清楚一点角度 X (Math.PI/180) = 角度对应的弧度arc(x, y, r, startRad, endRad, 弧形方向)此方法用于绘制圆弧弧形方向——1为逆时针，0为顺时针ctx.arc(250, 250, 100, 0, Math.PI/2, 0);ctx.stroke();arcTo(x1, y1,...
2018-07-23 22:14:13
2468
原创 用Canvas绘制矩形（3）
用Canvas绘制矩形（3）ctx.rect(x, y, width, height)x,y用于确定矩形左上角在Canvas画布坐标系中的位置；width、height表示宽高ctx.rect(100, 100, 200, 100);ctx.stroke();// ctx.fill();注意：rect需要结合stroke或fill使用，因为同前面线段一样，rect只是绘...
2018-07-23 22:11:11
343
原创 用Canvas绘制线段（2）
用Canvas绘制线段（2）方法介绍ctx.moveTo(x,y)用于移动画笔到(x,y)坐标处，并以此为路径起点进行绘图ctx.lineTo(x,y)指定路径的下一个点的坐标，表示使用直线连接该点与上一个点ctx.stroke()绘制路径ctx.lineWidth=20;设置线段宽度，默认值为1px，较宽的线条在路径上居中，路径上下两边各有...
2018-07-23 22:08:26
652
原创 如何使用Canvas(1)
如何使用Canvas（1）Canvas是HTML5中的一个标签，其本身与其他标签并无差别，不要将其与其他标签分开看待Canvas的使用如下：向页面添加canvas标签#canvas{ border: 1px solid black;/*设置边框后里你便能够在页面中看见canvas元素了*/}<canvas id="canvas" width="500" ...
2018-07-23 22:04:46
267
原创 图案与渐变（6）
图案与渐变（6）前面我们使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了strokeStylefillStyle设置颜色之外，还可以设置渐变色或图案渐变createLinearGradient(x1, y1, x2, y2)——线型渐变...
2018-07-23 21:45:29
396
原创 数组与对象的判断
数组与对象的判断本文主要讲解如何判断一个‘typeof’返回值为object的对象是数组还是对象(当然，数组也是对象，但是在实际中往往需要更精确的判断)。其实，重点还是在于理解Object中的toString方法的工作原理下面是精确判断数组与对象的方法通过constructor判断 var arr = []; var obj = {}; consol...
2018-07-18 18:48:03
245
原创 复杂情况的this指向
复杂情况的this指向复杂情况的this指向——是指当函数同时满足‘this指向谁’中所述的多个调用情况时，this指向谁？其实，更确切的讲，这主要取决于这些调用情况的优先级。因此本文主要讨论这些调用情况的优先级开门见山吧！优先级构造器调用模式(new) &gt; call/apply调用模式 &gt; 方法调用模式 &gt; 函数调用模式示例 functio...
2018-07-16 23:03:43
152
转载 由jQuery中的attr与prop方法引起的疑惑
https://github.com/JChehe/blog/commit/259aab7bbf136e75a5c47271d7280d1b86142a08
2018-07-08 18:50:09
107
原创 delete操作符
delete操作符delete操作符的作用其用来删除对象属性或数组元素例如： var obj = { name: '德洛丽丝' } console.log(obj.name);//'德洛丽丝' delete obj.name; console.log(obj.name);//undefined var ar...
2018-07-03 19:11:48
745
原创 运算符与类型转换(已完结)
运算符与类型转换算术运算符的类型转换基本地算术运算符包括：+、-、*、/、%-、*、/、%1.在操作数不是number类型时，会调用Number将其隐式的转换为数字2.如果有一个操作数为NaN，则运算结果为NaN3.除数为0的运算结果为正无穷/负无穷大；0/0为NaN4.%运算符的符号同左操作数保持一致。-5%2=-1+1.如果有一个操作数是字符串，...
2018-07-01 21:11:54
303
原创 数字到字符串和字符串到数字(已完结)
数字到字符串和字符串到数字在计算机程序中数字的解析和格式化是非常普遍的工作，JS中提供了专门的函数和方法，用来做更加精确的数字到字符串和字符串到数字的转换下面是一些方法/函数：Number——请参看‘包装类、包装类对象、包装类的类型转换功能’toString(radix)除undefined与null外，其他类型都存在toString方法。这儿讲的是Number类中定义的t...
2018-06-30 22:20:16
1166
原创 包装类、包装类对象、包装类的类型转换功能(已完结)
包装类、包装(类)对象、包装类的类型转换功能本文案的主要目的就是区分：包装类、包装类对象、使用包装类进行类型转换，这三者在叙述前首先区分三者间的关系(因为在复习过程中，发现自己傻傻分不清)：1.包装类：JS提供了三个包装类——Boolean、String、Number这儿不是基本数据类型中的boolean、string、number。上述是包装类，是对象2.包装(类)对象：...
2018-06-30 12:59:08
1151
原创 浮动与清除浮动(已完结)
浮动与清除浮动浮动float属性的取值float : left | right | none | inherit默认值 : none适用于所有元素，没有继承性浮动框的范围浮动元素的外边距边界定义了浮动框的大小浮动元素的包含块是其最近的块级祖先元素，且包含块的大小为该块级祖先元素的内容区浮动元素的特点1.浮动元素会脱离标准文档流(这就是为什么浮动...
2018-06-29 16:47:17
400
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人