发表于

MDN 对 BFC 的描述：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

image
往下接着看看：

阅读全文 »

发表于

到底什么是JSONP？它和JSON到底有什么关系？这是我碰到JSONP时脑海里的浮现的第一个问题。先看看维基百科上是怎么解释的：

JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。

并不知道在说什么，JSON with Padding？也太抽象了。。。既然说“可以让网页从别的网域要数据”，那就是说JSONP的使用场景是需要跨域的，先试着码一码吧。

假设我有一个账户，每当我点击付款按钮，就会从账户中扣款1元。

发送请求有两种方案：

  1. 通过<img>标签造get请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    button.addEventListener('click', (e)=>{
        let image = document.createElement('img')
        image.src = '/pay'
        image.onload = function(){ // 状态码是 200~299 则表示成功
            alert('成功')
        }
        image.onload = function(){ // 状态码大于等于 400 则表示失败
            alert('失败')
        }
    })

  2. 通过 <script>标签造get请求

1
2
3
4
5
6
7
8
9
10
11
button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    script.src = '/pay'
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
    }
    script.onload = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
    }
})

显然，<script>标签更具有可行性，毕竟你得需要有一张真的图片来骗过浏览器，仅仅用来发送请求也太不合算了。
先写一个服务器来模拟一下所需环境，当然我还需要一个数据库，在当前目录下创建。（这个数据库先用来模拟第三方网址）

1
touch db

后端代码长这样：

1
2
3
4
5
6
7
8
9
10
...
  if(path === '/pay'){ //如果用户点击付款会向这个路径发送请求
    let amount = fs.readFileSync('/db', 'utf8')
    amount -= 1
    fs.writeFileSync('/db', amount)
    response.setHeader('Content-Type', 'application/javascript')
    response.write('amount.innerText = ' + amount)
    response.end()
  }
...

上面代码，当我点击付款按钮，会将我数据库中记录的余额减1，然后再将当前余额显示在页面。
这种技术叫做 SRJ - Server Rendered JavaScript
所以，利用<script>标签没有跨域限制的“漏洞”，可以与第三方网址进行通信。也就是维基百科所说的“让网页从别的网域要数据”。
等等，通信刚刚实现了，“要数据”怎么实现？接着码。。。
既然<script>标签没有跨域限制，那么我只需指定src到任何我想要请求数据的路径就可以了。
第三个方案：JSONP
先设定一个场景：

1
2
3
4
5
6
7
8
9
请求方：aaa.com 的前端程序员（浏览器）
响应方：bbb.com 的后端程序员（服务器）
  1. 请求创建 script，src 指向响应方，同时传一个查询参数?callbackName=yyy
  2. 响应方根据查询参数callbackName，构造形如
    i. yyy.call(undefied,'你要的数据')
    ii. yyy('你要的数据')
    这样的响应
  3. 浏览器接收到响应，就会执行yyy.call(undefined,'你要的数据')
  4. 那么请求方就知道了他要的数据

这样应该就可以拿到我想要的数据了。
那么前端代码长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    let functionName = 'yyy'+ parseInt(Math.random()*10000000 ,10)
    window[functionName] = function(){  // 每次请求之前搞出一个随机的函数
        amount.innerText = amount.innerText - 0 - 1
    }
    script.src = '/pay?callback=' + functionName
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
    script.onload = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
})

后端代码长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
...
if (path === '/pay'){
    let amount = fs.readFileSync('/db', 'utf8')
    amount -= 1
    fs.writeFileSync('/db', amount)
    let callbackName = query.callback
    response.setHeader('Content-Type', 'application/javascript')
    response.write(`
        ${callbackName}.call(undefined, 'success')
    `)
    response.end()
}
...

程序员们约定这样写：

1
callbackName -> callback

（文中为了方便理解用了callbackName代替）

这样的话就真正达到双方的通讯目的了，后端根据前端提供的callback参数构造一个函数调用，把数据返回给第一个参数，.call就拿到数据了。
看来给<script>标签的src属性加callback参数就是JSONP啦。
如果使用jQuery，JSONP的请求方式就更简单啦：

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
 url: "http://bbb.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

 $.jsonp()

吐槽一下：和ajax又有个鬼的关系。。。

另外，JSONP是通过动态创建<script>标签实现的，动态创建的<script> 标签只能用get，不能用post。

所以说，通过动态创建<script>标签，并利用其src属性提供一个callback参数构造回调函数来接收数据，从而达到与第三方网址建立通信的目的，这就是JSONP啦。

发表于

JS这门语言有多神经质想必大家都已经心照不宣了，要说jQuery，那必须得从像老太婆又臭又长裹脚布一样的DOM原生API开始说起啊。
想要获取页面上的一个节点，对它做一些为所欲为的事情我需要：

1
var 这个节点 = document.getElementById('这个节点的id')

先别说对它做什么了，仅仅是一个变量声明，我得敲一会。。。接下来，要是我想点击它，让他藏起来我需要：

1
2
3
这个节点.onclick = function(){
    这个节点.style.display = 'none'
}

太费劲了，更别说更加复杂一点的操作了，比如我想看看这个节点有哪些兄弟元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getSiblings(node){
    var allChildren = node.parentNode.children

    //这只是一个哈希，伪数组
    var array = {
        length: 0
    }
    for(let i =0;i < allChildren.length;i++){
        if(allChildren[i] !== node){
            array[array.length] = allChildren[i]
            array.length +=1
        }
    }
    return array
}

或者想给这个节点添加多个Class

1
2
3
4
5
6
7
8
9
10
function addClass(node,classes){
    for(let key in classes){
        var value = classes[key]
        if(value){
            node.classList.add(key)
        }else{
            node.classList.remove(key)
        }
    }
}

阅读全文 »

发表于

用原生JS封装一些常用API

  1. 获取所有兄弟元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function getSiblings(node){
        var allChildren = node.parentNode.children

        //这只是一个哈希，伪数组
        var array = {
            length: 0
        }
        for(let i =0;i < allChildren.length;i++){
            if(allChildren[i] !== node){
                array[array.length] = allChildren[i]
                array.length +=1
            }
        }
        return array
    }

  2. 给一个节点添加多个Class

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function addClass(node,classes){
        for(let key in classes){
            var value = classes[key]
            if(value){
                node.classList.add(key)
            }else{
                node.classList.remove(key)
            }
        }
    }
阅读全文 »

发表于

ES 6 新特性列表

let 和 const

声明变量的4种方式

  1. a = 1
  2. var a = 1
  3. let a = 1
  4. const a = 1

很多人认为 a = 1 声明了一个全局变量，其实并不是这样，如果有两层函数，比如：

image

上面代码说明了，如果当前作用域有a， 会直接使用a，只有没有a这个变量的情况下才会声明全局变量a，所以不建议使用。

现在再来说说var a = 1 这种声明方式，看代码：
image

阅读全文 »

发表于

第一章 了解 Web 及网络基础

使用 HTTP 协议访问 Web

当我们在浏览器地址输入 URL 敲下回车，根据 Web 浏览器地址栏中指定的URL，Web 浏览器从 Web 服务器端获取文件资源（resource）等信息，从而显示出 Web 页面。
从客户端到服务器端等一系列运作流程，使用的就是HTTP协议。
Web 是建立在 HTTP 协议上通信的。

HTTP 的诞生

1989年3月，HTTP 诞生了。
CERN（欧洲核子研究组织）的蒂姆 • 伯纳斯 - 李（Tim BernersLee）- 李爵士
提出了3项 WWW 构建技术

  1. HTML
  2. HTTP
  3. URL

网络基础 TCP/IP

通常使用的网络（包括互联网）是在 TCP/IP 协议族的基础上运作的。而 HTTP 属于它内部的一个子集。
计算机与网络设备要相互通信，双方就必须基于同样的方法，遵守同样的规则，这个规则就叫做协议。
互联网相关联的协议集合起来总称为 TCP/IP。

阅读全文 »

发表于

浮动

float属性最初只是用于浮动图像内的文本块，但是现在它已成为在网页上创建多列布局的最常用工具之一。当元素设置浮动属性后，会脱离正常文档流，从而影响到其他元素在页面上的布局排列，先不要着急，总会有好的解决办法。本文将阐述它的有关知识。

浮动的起源

最初，引入float属性是为了能让web开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在他的左边或右边。通常在报纸上可以看到这样的布局。

但web开发人员很快意识到，它可以浮动任何东西，不仅仅是图像，所以浮动的使用范围扩大了。

现在，浮动通常用来创建整个网站的布局，其中包括浮动多列信息，因此他们彼此并排放置（默认行为是列彼此之间的排列顺序和它们在html源中）。浮动的兼容性很好，可以支持到IE4。

阅读全文 »

发表于

阅读阮一峰JavaScript标准参考教程的读书笔记，写下来，加深记忆。

语法

对象

生成对象

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

1
2
3
4
5
6
7
var obj = {
  foo: 'Hello',
  bar: 'World'
};
//第一个键值对是foo: 'Hello'，其中foo是“键名”（成员的名称），字符串Hello是“键值”（成员的值）
//键名与键值之间用冒号分隔
//两个键值对之间用逗号分隔

上面代码中，大括号定义了一个对象，被赋值给变量 obj，所以变量obj就指向一个对象。

键名

对象的所有键名都是字符串，所以加不加引号都可以。
日过键名是数值，会被自动转化为字符串。

1
2
3
4
5
6
var  obj = {
  1: 'A'，
  1e2: true
};
obj[1] //A
obj['1'] //A

上面代码中，对象obj的键名虽然看上去像数值，实际上被自动转成了字符串。
如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符） 且也不是数字，则必须加上引号，否则会报错

阅读全文 »