Posted on

类型转换

任意类型转字符串

  1. Sting(x) String(x).jpg
  2. x.toString() toSting.jpg
  3. x + ‘’ x+''.jpg

任意类型转数字

  • Number(x)
  • parseInt(x, 10) MDN
  • parseFloat(x) MDN
  • x - 0
  • +x

任意类型转布尔

  1. Boolean(x)
  2. !!x

内存图

数据区分为 Stack（栈内存） 和 Heap（堆内存） 简单类型的数据直接存在 Stack 里 复杂类型的数据是把 Heap 地址存在 Stack 里

stackHeap.png

1
2
3
4
var a = 1
var b = a
b = 2
// a = 1
1
2
3
4
var a = {name: 'a'}
var b = a
b = {name: 'b'}
// a.name = 'a'
1
2
3
4
var a = {name: 'a'}
var b = a
b.name = 'b'
// a.name = 'b'
1
2
3
4
var a = {name: 'a'}
var b = a
b = null
// a = 'a'

浏览器是先从左到右分析变量，再从右往左计算。所以a.x和a在stack里的地址不同。 

1
2
3
4
5
6
var a = {n:1};
var b = a;
var a.x = a = {n:2};

alert(a.x); // undefined
alert(b.x); // [object object]

stackHeapTest.png

垃圾回收

清理没有被stack区引用的heap区对象,释放内存空间,供其他对象使用。

深拷贝

对于简单类型的数据来说，赋值就是深拷贝。 对于复杂类型的数据（对象）来说，才要区分浅拷贝和深拷贝。

1
2
3
4
5
var a = 1
var b = a
b = 2 //这个时候改变 b
a 完全不受 b 的影响
那么我们就说这是一个深拷贝
1
2
3
4
5
6
var a = {name: 'frank'}
var b = a
b.name = 'b'
a.name === 'b' // true
我们对 b 操作后，a 也变了
那么我们就说这是一个浅拷贝

Posted on

七种数据类型

number, string, boolean, symbol, null, undefined, object。

number

整数和浮点数

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。 这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。 

1
2
3
4
5
1 === 1.0 // true

0.1 + 0.2 === 0.3 // false

0.3 / 0.1 // 2.9999999999999996

数值精度

JavaScript 对15位的十进制数都可以精确处理。

数值范围

JavaScript 能够表示的数值范围为21024到2-1023（开区间）。 

1
2
3
4
5
6
7
8
9
10
11
Math.pow(2, 1024) // Infinity
Math.pow(2, -1075) // 0

var x = 0.5;
for(var i = 0; i < 25; i++) {
  x = x * x;
}
x // 0

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

数值的表示法

0开头八进制需特别注意，容易出bug。

  • 整数和小数：1 1.1 .1
  • 科学记数法：1.23e2
  • 二进制：0b11
  • 八进制：011（后来 ES5 添加了 0o11 语法）
  • 十六进制：0x11
  • NaN： 5 - 'x' // NaN

string

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。 需要用反斜杠转义的特殊字符，主要有下面这些。

  • \0 ：null（\u0000）
  • \b ：后退键（\u0008）
  • \f ：换页符（\u000C）
  • \n ：换行符（\u000A）
  • \r ：回车键（\u000D）
  • \t ：制表符（\u0009）
  • \v ：垂直制表符（\u000B）
  • \' ：单引号（\u0027）
  • \" ：双引号（\u0022）
  • \\ ：反斜杠（\u005C）

字符集与base64转码

JavaScript 使用 Unicode 字符集。 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。 要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。 

1
2
3
4
5
6
7
8
9
10
function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

多行字符串

换行时用''+''可读性更好更不易出错。 

1
2
3
4
5
var s = '12345' +
            '67890' // 无回车符号
 
var s = `12345
67890` // 含回车符号

boolean

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。 除了下面六个值被转为false，其他值都视为true。

  • undefined
  • null
  • false
  • 0
  • NaN
  • “”或’’（空字符串）

symbol

Symbol 可以创建一个独一无二的值（但并不是字符串）。 Symbol 生成一个全局唯一的值。 

1
2
3
var a1 = Symbol('a')
var a2 = Symbol('a')
a1 !== a2 // true

null和undefined

都表示没有值。

  1. （规范）如果一个变量没有被赋值，那么这个变量的值就是 undefiend
  2. （习俗）如果你想表示一个还没赋值的对象，就用 null。如果你想表示一个还没赋值的字符串/数字/布尔/symbol，就用 undefined

大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

object

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

  • object 就是上面几种基本类型（无序地）组合在一起
  • object 里面可以有 object
  • object 的 key 一律是字符串，不存在其他类型的 key
  • object[''] 是合法的
  • object['key'] 可以写作 object.key
  • object.key 与 object[key] 不同
  • delete object['key']
  • 'key' in object
xxx 的类型 string number boolean symbol undefined null object function
typeof xxx ‘string’ ‘number’ ‘boolean’ ‘symbol’ ‘undefined’ ‘object’ ‘object’ ‘function’

注意 function 并不是一个类型

Posted on

左右布局

两列布局一般是一边定宽一边自适应，下面采用左定宽右自适应举例。

div块级元素本身是上下垂直方向放置，通过float让块级div脱离文档流，向左浮动。但浮动后仍会占据文档流空间，需要让右边的div向右移动左div的宽度避免重叠。

1
2
3
4
5
6
7
.left{
    width:300px;
    float:left;
}
.right{
    marigin-left:300px;
}

根据BFC原理，将右DIV设置overflow不为visible，让左右DIV形成一个BFC区域，BFC区域内元素不与float box重叠。 

1
2
3
4
5
6
7
.left{
    width:300px;
    float:left;
}
.right{
    overflow:hidden;
}

BFC即：Block Formatting Context 布局规则：

  • 内部的盒子会在垂直方向，一个个地放置；
  • 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
  • BFC的区域不会与float重叠；
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
  • 计算BFC的高度时，浮动元素也参与计算。

BFC特性：

  • 阻止垂直外边距折叠
  • 不会重叠浮动元素
  • 可以包含浮动

产生BFC的元素：

  • 根元素；
  • float的属性不为none；
  • position为absolute或fixed；
  • display为inline-block，table-cell，table-caption，flex；
  • overflow不为visible

左中右布局

左中右布局一般是指的双飞翼布局。

给主内容外套一层wrapper,再给两侧留白。 实现nav在左，article在中间自适应宽度，aside在右。

1
2
3
4
5
6
7
<div>
    <div class="wrapper">
        <article>main</ariticle>
    </div>
    <nav>left</nav>
    <aside>right</aside>
</div>

左浮动后，由于wrapper宽100%，nav和aside会显示在wrapper下方，这时通过负边距来给nav和aside提供位置。将nav左移100%屏幕距离，nav就会出现在屏幕最左，将aside左移aside自身宽度，aside就会出现在屏幕最右。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper{
    width:100%;
    float:left;
}
.main{
    margin: 0 100px;
    height:300px
}
.nav{
    width:100px;
    hight:300px;
    float:left;
    margin-left:-100%;
}
.aside{
    width:100px;
    hight:300px;
    float:left;
    margin-left:-100px;
}

居中

最简单基础的方法，缺点是要有宽高。

1
margin: auto;

绝对定位于父容器,子元素离父元素距50%,然后将子元素移动本身宽高的一半。

1
2
3
4
5
positon:absolute;
left:50%
margin-left:-0.5*width;
top:50%;
margin-top:-0.5*height;

利用relative相对定位实现居中。 

1
2
3
4
5
6
7
8
9
div,ul,li{
    float-left;posi-relative;
}
ul{
    left:50%;
}
li{
    right:50%;
}

center.png

给div包裹一个wrapper，让wrapper内容居中。将块级元素div变为内联块元素,即对照变为和内容相同的内联元素就可以居中了,参考了IFC原理 

1
2
.wrapper{text-align:center}
div{display:inline-block}

利用table-cell或者flex居中 

1
2
3
4
5
6
7
8
.father{
    display：table；
}
.child{
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}

1
2
3
display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中

其他常用技巧

SEO优化

用h1包裹logo，优化SEO,用text-indent：-9999px隐藏文字。 

1
2
3
<h1>
<a href=http://www.seo100.net/>SEO优化</a>
</h1>

1
2
3
4
5
6
7
8
9
h1,a{
    height: *;
    width: *;
    text-indent: -9999px;
    background-image: url(images/logo.gif);
    background-repeat: no-repeat;
    display: block;
    position: relative;
}

用于让同行内多列div保持等高

1
2
3
4
5
6
7
.father{
    overflow:hidden;
}
.child{
    margin-bottom:-10000px;
    padding-bottom:10000px;
}

通用兼容各浏览器消除inline-block的4px间距方法，设置父元素

1
2
3
4
.father{
    font-size: 0;
    letter-spacing: -3px;
}

clearfix

父元素没高度的时候，子元素如果浮动脱离了文档流导致无法撑起父元素。 清除浮动方法：.clearfix类（参考bootstrap）

1
2
3
4
5
6
7
8
9
.cf:before,
.cf:after{
    content: " "; /* 让css伪元素能够显示 */
    display: block; /* 触发bfc的元素防止边距合并与穿透 */
    clear：both;
}
.cf{    
    *zoom: 1; /* 为旧IE准备的，触发haslayout */
}

其他clearfix类代码

1
2
3
4
5
6
7
clearfix::after
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden

消除默认边距，消除不同浏览器带来的影响

1
2
3
4
5
6
7
*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Posted on

head部分

<head> 元素包含了所有的头部标签元素,常用的有<meta>,<title>,<link>,<script>

title

<title> 标签定义了不同文档的标题。 <title> 在 HTML/XHTML 文档中是必须的。 <title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<link> 标签定义了文档与外部资源之间的关系。 <link>标签通常用于链接到样式表: 

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

除了链接到 css 文件之外，常用的还有 “shortcut icon”为网页标题加图标 和 DNS预获取 dns-prefetch 提升页面载入速度 

1
2
3
4
5
<link rel="shortcut icon" href="图片地址" />
<link rel="icon" href="图片地址" type="image/gif" />
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

meta

  • meta标签描述了一些基本的元数据。
  • <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
  • META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
  • 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta>标签可以做的事情非常多也非常复杂，例如SEO优化，移动设备响应式，浏览器内核控制等。 常用meta整理

script

<script>标签用于加载脚本文件，如： JavaScript。

body部分

body语义化

在CSS布局之前，写HTML的时候，首先会想到用到语义化标签对整体进行大致分割。

  • 语义元素：一个语义元素能够清楚的描述其意义给浏览器和开发者。
  • 语义化：其实简单说来就是让机器可以读懂内容。

如何理解语义化

常用的语义化标签有

  • <header>通常用于头部导航
  • <nav>用于定义页面的导航链接部分区域
  • <main>通常用于页面的主体内容
  • <section>定义文档中的节；部件
  • <article>定义独立的内容，文章
  • <aside>定义页面主区域内容之外的内容（比如侧边栏）。aside 标签的内容应与主区域的内容相关.
  • <figure>独立的流内容（图像、图表、照片、代码等等）。
  • <figcaption>标签定义 <figure>元素的标题.
  • <footer>页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

body常用标签

在语义化分割大致区域之后，除了<div>,<span>,<h1~h6>,<p>,<img>等标签之外，常用的标签有<iframe>,<a>,<form>,<input>/<button>,<table>等。

iframe标签

  • 内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
  • HTML<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

iframe标签原本的用法在现在看来是不合时宜的，但是它的其他功能却是不错的黑魔法。 iframe黑魔法

a标签

a标签常用属性：

  • download：此属性指示浏览器下载URL而不是导航到它。 （也可以用Content-Type:application / octet-stream来实现下载）
  • href：包含超链接指向的URL或URL片段。
    • href=”#top” 或者 href=”#” 链接返回到页面顶部。
    • href=””会刷新页面。
    • href=”//qq.com”这样的无协议链接，浏览器会根据当前协议，补全无协议链接的协议
      • 如果用 file:// 协议浏览页面，就会访问到 file://qq.com，这是一个不存在的路径
      • 应该尽量不使用 file:// 协议预览网页，以免无协议链接出错
    • href=”javascript:;”作为伪协议可以做到点击之后不会发生任何变化的a标签，也可以把;换成其他js代码执行。
  • target：该属性指定在何处显示链接的资源。
    • _self: 当前页面加载
    • _blank: 新窗口打开
    • _parent: 加载响应到当前框架的父框架
    • _top: 加载响应进入顶层浏览上下文
    • xxx: 连接到name=xxx的iframe标签

form标签

  • HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
  • HTML <table> 元素表示表格数据 — 即通过二维数据表表示的信息。

form标签常用属性：

  • action：指定请求路径,这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。
  • method: 指定请求动词,浏览器使用这种 HTTP 方式来提交 form
    • post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
    • get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI 再发送给服务器
  • target: 同iframe

from标签通常要结合input标签来使用。而且成功提交有如下必要条件：

  • form 标签里面有一个 input type=submit 的元素 || form 标签里面有一个 button 元素，button 的 type 属性为空
  • 如果 input 不加 name，那么在表单提交时，input 的值就不会出现在请求里

HTML <input>元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 input标签常用值和属性

table标签

HTML的 <table> 元素表示表格数据 — 即通过二维数据表表示的信息。

table元素常用子标签：

  • thead,tbody,tfoot DOM顺序不影响渲染顺序，始终是head>body>foot，如果不写浏览器会都默认为body
  • tr 即table row
  • td 即table data
  • colgroup 可以设置每列宽度

Posted on

空元素

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

在 HTML 中有以下这些空元素： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

可替换元素

CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。

典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

Posted on

HTTP请求

请求的格式

1
2
3
4
5
6
7
8
9
1 动词 路径 协议/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3 
4 要上传的数据
  1. 请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
  2. 第三部分永远都是一个回车（\n）
  3. 动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
  4. 这里的路径包括「查询参数」，但不包括「锚点」
  5. 如果你没有写路径，那么路径默认为 /
  6. 第 2 部分中的 Content-Type 标注了第 4 部分的格式

用Chrome开发者工具查看 HTTP 请求内容

  1. 打开 Network
  2. 地址栏输入网址
  3. 在 Network 点击，查看 request，点击「view source」
  4. 如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到

HTTP响应

响应的格式

1
2
3
4
5
6
7
1 协议/版本号 状态码 状态解释
2 Key1: value1
2 Key2: value2
2 Content-Length: 17931
2 Content-Type: text/html
3
4 要下载的内容
  • HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。
    • 1XX 不常用 代表请求已被接受，需要继续处理。
    • 2XX 成功 代表请求已成功被服务器接收、理解、并接受。
    • 3XX 重定向 这类状态码代表需要客户端采取进一步的操作才能完成请求。
    • 4XX 请求错误 这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
    • 5XX 服务器错误 这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
  • 状态解释仅辅助理解状态码，用处不大。
  • 第 2 部分中的 Content-Type 标注了第 4 部分的格式
  • 第 2 部分中的 Content-Type 遵循 MIME规范

用Chrome开发者工具查看 HTTP 响应内容

  1. 打开 Network
  2. 输入网址
  3. 选中第一个响应
  4. 查看 Response Headers，点击「view source」，点击「view source」，点击「view source」
  5. 你会看到响应的前两部分
  6. 查看 Response 或者 Preview，你会看到响应的第 4 部分

curl 命令

curl常用（tldr）

1
2
3
4
5
6
7
8
9
curl ：   Transfers data from or to a server.Supports most protocols, including HTTP, FTP, and POP3.

**下载网页** Download the contents of an URL to a file: curl http://example.com -o filename 

**下载文件** Download a file, saving the output under the filename indicated by the URL: curl -O http://example.com/filename 

**提交post内容** Send form-encoded data (POST request of type application/x-www-form-urlencoded): curl -d 'name=bob' http://example.com/form 

**提交额外header内容** Send a request with an extra header, using a custom HTTP method: curl -H 'X-My-Header: 123' -X PUT http://example.com

请求示例

1
curl -X POST -d "name=bob" -s -v -H "X-My-Header: 123" -- "https://www.baidu.com"

请求的内容为

1
2
3
4
5
6
7
8
9
POST / HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
X-My-Header: 123
Content-Length: 8
Content-Type: application/x-www-form-urlencoded

name=bob
  • -X POST 表示用post请求
  • -S 不用进度条或错误信息的silent模式
  • -V 显示请求和响应

Posted on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment