最近终于搭好了这个以hexo-Chic为主题的博客,新人慢慢地摸索,踩了不少坑,自我感觉不难就是费时间

下面是测试:

1
hexo s

1. replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

  • 只是替换一个
  • replace
    • 字符串模式
      • 简单,但是不支持全局和忽略大小写问题
    • 正则表达式模式
      • 强大,支持全局和忽略大小写
1
2
3
4
5
6
"abcaade".replace('a',"")
"bcaade"

//使用正则
"abcaade".replace(/a/g,'')
"bcde"

2.使用Node操作Mysql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var mysql = require('mysql');

//创建数据库
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123456',
//先在mysql新建数据库
database: 'users'
});

// 连接数据库
connection.connect();

// 执行数据操作
// connection.query('INSERT INTO users VALUES(NULL,"admin","123456")', function (error, results, fields) {
// if (error) throw error;
// // console.log('The solution is: ', results[0].solution);
// console.log(results);
// });

connection.query('SELECT * from `users`', function (error, results, fields) {
if (error) throw error;
// console.log('The solution is: ', results[0].solution);
console.log(results);
});

// 关闭数据库
connection.end();

3.抛出异常

1
2
3
4
// 抛出异常
// 1. 阻止程序的执行
// 2. 把错误消息打印到控制台
throw error

4. callback-hell

  • readFile ( ) 异步方法,无法保证执行顺序
    • 解决:嵌套方式
    • 缺点:嵌套过深,难维护
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var fs = require('fs')

//readFile()异步方法,无法保证执行顺序
// 解决:嵌套方式

fs.readFile('./data/a.txt', 'utf8', function (err, data) {
if (err) {
// return console.log('读取失败')
// 抛出异常
// 1. 阻止程序的执行
// 2. 把错误消息打印到控制台
throw err
}
console.log(data)
fs.readFile('./data/b.txt', 'utf8', function (err, data) {
if (err) {
// return console.log('读取失败')
// 抛出异常
// 1. 阻止程序的执行
// 2. 把错误消息打印到控制台
throw err
}
console.log(data)
fs.readFile('./data/c.txt', 'utf8', function (err, data) {
if (err) {
// return console.log('读取失败')
// 抛出异常
// 1. 阻止程序的执行
// 2. 把错误消息打印到控制台
throw err
}
console.log(data)
})
})
})

5. ES6-Promise

  • *名称:*
    译为“承诺”,这也就表达了将来会执行的操作,代表异步操作;
  • *状态:*
    一共有三种状态,分别为pending(进行中)、fulfilled(已成功)和rejected(已失败)。
  • *特点:*
    (1)只有异步操作可以决定当前处于的状态,并且任何其他操作无法改变这个状态;
    (2)一旦状态改变,就不会在变。状态改变的过程只可能是:从pending变为fulfilled和从pending变为rejected。如果状态发生上述变化后,此时状态就不会在改变了,这时就称为resolved(已定型)
  • 基本用法: Promise 对象是由关键字 new 及其构造函数来创建的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var p1 = new Promise(function (resolve, reject) {
    fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
    //rejected
    reject(err)
    } else {
    //fulfilled
    resolve(data)
    }
    })
    })

    var p2 = new Promise(function (resolve, reject) {
    fs.readFile('./data/b.txt', 'utf8', function (err, data) {
    if (err) {
    reject(err)
    } else {
    resolve(data)
    }
    })
    })

    var p3 = new Promise(function (resolve, reject) {
    fs.readFile('./data/c.txt', 'utf8', function (err, data) {
    if (err) {
    reject(err)
    } else {
    resolve(data)
    }
    })
    })
  • then方法可以接收两个回调函数作为参数,第一个回调函数就是fulfilled状态时调用;第二个回调函数就是rejected时调用,第二个参数是可选的

    1
    2
    3
    4
    5
    6
    7
    p1
    .then(function (data) {
    console.log(data)//hello aaa
    return p2
    }, function (err) {
    console.log('读取文件失败了', err)
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    p1
    .then(function (data) {
    console.log(data)//hello aaa
    // 当 p1 读取成功的时候
    // 当前函数中 return 的结果就可以在后面的 then 中 function 接收到
    // 当你 return 123 后面就接收到 123
    // return 'hello' 后面就接收到 'hello'
    // 没有 return 后面收到的就是 undefined
    // 上面那些 return 的数据没什么卵用
    // 真正有用的是:我们可以 return 一个 Promise 对象
    // 当 return 一个 Promise 对象的时候,后续的 then 中的 方法的第一个参数会作为 p2 的 resolve

    return p2
    }, function (err) {
    console.log('读取文件失败了', err)
    })
    .then(function (data) {
    console.log(data)//hello bbb
    return p3
    })
    .then(function (data) {
    console.log(data)//hello ccc
    console.log('end')
    })

    //输出:
    hello aaa
    hello bbb
    hello ccc
    end
  • 封装promise

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    var fs = require('fs')

    function pReadFile(filePath) {
    return new Promise(function (resolve, reject) {
    fs.readFile(filePath, 'utf8', function (err, data) {
    if (err) {
    reject(err)
    } else {
    resolve(data)
    }
    })
    })
    }

    pReadFile('./data/a.txt')
    .then(function (data) {
    console.log(data)
    return pReadFile('./data/b.txt')
    })
    .then(function (data) {
    console.log(data)
    return pReadFile('./data/c.txt')
    })
    .then(function (data) {
    console.log(data)
    })

6. json-server 服务

1
2
3
安装JSON服务器

npm install -g json-server
  • 启动JSON服务器
1
json-server --watch db.json
1
2
3
4
5
6
7
8
9
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
  • 现在,如果您转到(http://localhost:3000/posts/1),您将获得
1
{ “ id ” :1 ,“ title ” :“ json-server ”,“ author ” :“ typicode ” }

7. jQuery deferred.then() 方法

1
2
3
4
$.get("test.php").then(
function(){ alert("$.get 成功"); },
function(){ alert("$.get 失败!"); }
);

定义和用法

  • deferred.then() 函数当Deferred(延迟)对象被解决,拒绝或仍在进行中时,调用添加处理程序。

注意:

  • 参数可以为 null 。或者使用.done(),.fail()或者 .progress()只设置一种未经过滤的状态或值的回调类型。

  • 从jQuery 1.8开始, 方法返回一个新的 promise ,可以通过一个函数过滤 deferred(延迟)对象的状态和值,用来替换现在过时的deferred.pipe() 方法。

  • 回调是依照他们被添加时的顺序执行的,由于 deferred.then 返回 Promise 对象,可以链接其它的 Promise 对象,包括附加的 .then() 方法。

8. promise应用场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//js原生渲染:
get('http://127.0.0.1:3000/users/1', function (userData) {
get('http://127.0.0.1:3000/jobs', function (jobsData) {
// console.log(JSON.parse(userData),JSON.parse(jobsData))

var htmlStr = template('tpl', {
user: JSON.parse(userData),
jobs: JSON.parse(jobsData)
})
// console.log(htmlStr)
document.querySelector('#user_form').innerHTML = htmlStr
})
})

// jquery方法:
var data = {}
$.get('http://127.0.0.1:3000/users/1')
.then(function (user) {
data.user = user
return $.get('http://127.0.0.1:3000/jobs')
})
.then(function (jobs) {
data.jobs = jobs
var htmlStr = template('tpl', data)
document.querySelector('#user_form').innerHTML = htmlStr
})

// 这个 get 是 callback 方式的 API
// 可以使用 Promise 来解决这个问题
function get(url, callback) {
var oReq = new XMLHttpRequest()
// 当请求加载成功之后要调用指定的函数
oReq.onload = function () {
// 我现在需要得到这里的 oReq.responseText
callback(oReq.responseText)
}
oReq.open("get", url, true)
oReq.send()
}


//promise版ajax方法:
var data = {}
pGet('http://127.0.0.1:3000/users/4')
.then(function (user) {
data.user = user
return pGet('http://127.0.0.1:3000/jobs')
})
.then(function (jobs) {
data.jobs = jobs
var htmlStr = template('tpl', data)
document.querySelector('#user_form').innerHTML = htmlStr
})

pGet('http://127.0.0.1:3000/users/4', function (data) {
console.log(data)
})
// 也可以下面这样写
pGet('http://127.0.0.1:3000/users/4')
.then(function (data) {
console.log(data)
})

function pGet(url, callback) {
return new Promise(function (resolve, reject) {
var oReq = new XMLHttpRequest()
// 当请求加载成功之后要调用指定的函数
oReq.onload = function () {
// 我现在需要得到这里的 oReq.responseText
callback && callback(JSON.parse(oReq.responseText))
resolve(JSON.parse(oReq.responseText))
}
oReq.onerror = function (err) {
reject(err)
}
oReq.open("get", url, true)
oReq.send()
})
}