Live Note

Remain optimistic

computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
},
computed: {
// 使用计算属性不需要()
// 只要此function中使用的任何数据发生变化,就会重新计算值
fullName: function () {
return this.firstName + "-" + this.lastName
},
},
})
</script>
Read more »

filter

1
2
3
4
5
6
7
8
9
10
Vue.filter("msgFormat", function (msg, arg) {
return msg.replace(/test/g, arg)
})
Vue.filter("test", function (msg) {
return msg + "===="
})
var vm = new Vue({
el: "#app",
data: { msg: "test1 test2 test3" },
})
Read more »

:class 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<h1 :class="['italic', 'red', {'active': flag}]">Test H1 Message</h1>
<h1 :class="classObj">Test H1 Message</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
classObj: { red: true, thin: true, italic: true, active: false },
},
})
</script>
Read more »

项目文件目录

1
2
3
4
5
6
7
8
9
10
11
12
-Demo
|--build
|--dist
|--css
|--js
|--view
|--node_modules
|--src
|--
|--package.json
|--webpack.config.js
|--webpack.production.config.js
  • src:代码开发目录
  • build:开发环境 webpack 输出目录
  • dist:生产环境 webpack 输出目录
  • package.json:项目配置
  • webpack.config.js:开发环境配置
  • webpack.production.config.js:生产环境配置

webpack 配置文件

需命名为 webpack.config.js

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
const path = require("path") // 模块

module.exports = {
mode: "development",
entry: path.join(__dirname, "./src/main.js"), // 入口文件
output: {
path: path.join(__dirname, "./dist"), // 输出文件
filename: "bundle.js",
},
plugins: [
// 插件
],
module: {
rules: [
// 路由规则
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif|bmp|jpeg)$/,
use: "url-loader?limit=1111&name=[hash:8]-[name].[ext]",
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use: "url-loader",
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
}

webpack-dev-server

  • 通过 npm 安装:npm i webpack-dev-server
  • 运行命令:webpack-dev-server –devtool eval –port 9876 –progress –colors – compress –hot –inline –content-base ./build
    可以在 package.json 中的 script 加一个启动项。
  • –devtool eval:在报错时精确到文件的行号
  • –progress:显示编译的输出内容进度
  • –compress:启用 gzip 压缩
  • –hot:热更新,无需刷新浏览器
  • –colors:显示编译的输出内容颜色
  • –inline:自动刷新模式。默认为 iframe。
  • –content-base:设置输出目录。

写题时遇见的一个东西

1
2
3
char* s = "hello world";
printf("%15.2s", s);
//result: he

找到如下用法:

  • *%ms:输出的字符串占 m 列,如字符串本身长度大于 m,则突破获 m 的限制,将字符串全部输出。若串长小于 m,则左补空格。
  • *%-ms:如果串长小于 m,则在 m 列范围内,字符串向左靠,右补空格。
  • *%m.ns:输出占 m 列,但只取字符串中左端 n 个字符。这 n 个字符输出在 m 列的右侧,左补空格,注意:如果 n 未指定,默认为 0.
  • *%-m.ns:其中 m、n 含义同上,n 个字符输出在 m 列范围的左侧,右补空格。如果 n>m,则自动取 n 值,即保证 n 个字符正常输出,注意:如果 n 未指定,默认为 0.

如果是 sprintf(desc, “%m.ns”, sour);

  • 如果 desc 空间够的话,会在%m.ns 串 的结尾自动补 null 字符,不同于 strncpy.例如 :sprintf(desc, “%.3s”, “123456”);
  • desc 如果空间>=4 字节的话,第 4 个字节将是 null 字符。

一个简单的处理 XML 的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function parseXml(xml) {
//跨浏览器处理 XML
var xmldom = null

if (typeof DOMParser != "undefined") {
xmldom = new DOMParser().parseFromString(xml, "text/xml")
var errors = xmldom.getElementsByTagName("parsererror")
if (errors.length) {
throw new Error("XML parsing error:" + errors[0].textContent)
}
} else if (typeof ActiveXObject != "undefined") {
xmldom = createDocument()
xmldom.loadXML(xml)
if (xmldom.parseError != 0) {
throw new Error("XML parsing error:" + xmldom.parseError.reason)
}
} else {
throw new Error("No XML parser available.")
}
return xmldom
}

序列化 XML 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
//序列化 xmldom 文档
function serializeXML(xmldom) {
if (typeof XMLSerializer != "undefined") {
//兼容 ie9+ safari Chrome opera
var serializer = new XMLSerializer()
return serializer.serializeToString(xmldom)
} else if (typeof xmldom.xml != undefined) {
//兼容 ie9.0 以下
return xmldom.xml
} else {
throw new Error("serialize XML Dom failed!")
}
}

EventUtil

为了在不同的浏览器中处理相同的事件,需要编写一段可以兼容大部分浏览器的代码。

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var EventUtil = {
addHandler: function (element, type, handler) {
//添加事件
if (element.addEventListener) {
element.addEventListener(type, handler, false) //使用DOM2级方法添加事件
} else if (element.attachEvent) {
//使用IE方法添加事件
element.attachEvent("on" + type, handler)
} else {
element["on" + type] = handler //使用DOM0级方法添加事件
}
},

removeHandler: function (element, type, handler) {
//取消事件
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler)
} else {
element["on" + type] = null
}
},

getEvent: function (event) {
//使用这个方法跨浏览器取得event对象
return event ? event : window.event
},

getTarget: function (event) {
//返回事件的实际目标
return event.target || event.srcElement
},

preventDefault: function (event) {
//阻止事件的默认行为
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
},

stopPropagation: function (event) {
//立即停止事件在DOM中的传播
//避免触发注册在document.body上面的事件处理程序
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true
}
},

getRelatedTarget: function (event) {
//获取mouseover和mouseout相关元素
if (event.relatedTarget) {
return event.relatedTarget
} else if (event.toElement) {
//兼容IE8-
return event.toElement
} else if (event.formElement) {
return event.formElement
} else {
return null
}
},

getButton: function (event) {
//获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button
} else {
switch (
event.button //将IE模型下的button属性映射为DOM模型下的button属性
) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0 //按下的是鼠标主按钮
case 2:
case 6:
return 2 //按下的是中间的鼠标按钮
case 4:
return 1 //鼠标次按钮
}
}
},

getWheelDelta: function (event) {
//获取表示鼠标滚轮滚动方向的数值
if (event.wheelDelta) {
return event.wheelDelta
} else {
return -event.detail * 40
}
},

getCharCode: function (event) {
//以跨浏览器取得相同的字符编码,需在keypress事件中使用
if (typeof event.charCode == "number") {
return event.charCode
} else {
return event.keyCode
}
},
}

开始新一轮的学习

大晴天,白天上课,晚上班会。在傍晚时发现了有一丝的腰疼。晚上回到寝室突然又有点心绞痛的迹象···。
年纪轻轻应该不会有大碍,应该吧···毕竟也没有去检查过身体。
今天开始应该会把兼职辞了,开始新的学习吧。驾照什么的···就留着寒暑假有空再说吧。

date: 22:35 2018/10/30

基本用法

1
2
3
4
5
6
7
8
9
10
function* testGenerator() {
yield "hello"
yield "world"
return "done"
}
let test = testGenerator()
test.next() // { value : 'hello', done : false }
test.next() // { value : 'world', done : false }
test.next() // { value : 'done', done : true }
test.next() // { value : undefined, done : true }
Read more »

Iterator 概念

Iterator 是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构,只要部署 Iterator 接口,就可以完成遍历操作。
Iterator 的主要作用:为数据结构提供统一的、简便的访问接口;使得数据结构的成员能够按照某种次序排列;供 for…of 消费。
遍历过程如下:

  1. 创建一个指针对象,指向当前数据结构的起始位置。
  2. 第一次调用指针对象的 next 方法,将指针指向数据结构的第一个成员。
  3. 第二次调用 next 方法,指向第二个成员。
  4. 不断调用 next 方法,直到指针指向数据结构的结束位置。

每次调用 next 方法都会返回数据结构当前成员的信息,返回一个包含 value 的 done 两个属性的对象。value 属性是当前成员的值,done 属性是一个布尔值,表示遍历是否结束。
模拟 next 方法返回值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var it = makeIterator(['a', 'b'])
it.next() // { value : 'a', done : false }
it.next() // { value : 'b', done : false }
it.next() // { value : undefined, done : true }
function makeIterator(array) {
var nextIndex = 0
return {
next: function () {
return nextIndex < array.length
? { value: array[nextIndex++], done: false }
: { value: undefined, done: true }
},
}
}

遍历器与所遍历的数据结构实际上是分开的,完全可以写出没有对应数据结构的遍历器对象,或者用遍历器对象模拟出数据结构。无限运行的遍历器对象的例子:

1
2
3
4
5
6
7
8
9
10
11
12
var it = idMaker()
it.next().value // 0
it.next().value // 1
//...
function idMaker() {
var index = 0
return {
next: function () {
return { value: index++, done: false }
},
}
}
Read more »