English

Lesson 6 Percy Buttons

I have just moved to a house in Bridge Street. Yesterday a beggar knocked at my door. He asked me for a meal and a glass of beer. In return for this, the beggar stood on his head and sang songs. I gave him a meal. He ate the food and drank the beer. Then he put a piece of cheese in his pocket and went away. Later a neighbour told me about him. Everybody knows him. His name is Percy Buttons. He calls at every house in the street once a month and always asks for a meal and a glass of beer.

English

Lesson 5 No wrong numbers

Mr.James Scott has a garage in Silbury and now he has just bought another garage in Pinhurst. Pinhurst is only five miles from Silbury, but Mr.Scott cannot get a telephone for his new garage, so he has just bought twelve pigeons. Yesterday, a pigeon carried the first message from Pinhurst to Silbury. The bird covered the distance in three minutes.
Up to now, Mr.Scott has sent a great many requests for spare parts and other urgent messages from one garage to the other. In this way, he has begun his own private ‘telephone’ service.

English

Lesson 4 An exciting trip

I have just received a letter from my brother, Tim. He is in Australia. He has been there for six months. Tim is an engineer.
He is working for a big firm and he has already visited a great number of different places in Australia. He has just bought an Australian car and has gone to Alice springs, a small town in the centre of Australia. He will soon visit Darwin. From there, he will fly to Perth. My brother has never been abroad before, so he is finding this trip very exciting.

English

Lesson 3 Please send me a card

Postcard always spoil my holidays. Last summer, I went to Italy. I visited museums and sat in public gardens. A friendly waiter taught me a few words of Italian. Then he lent me a book. I read a few lines, but I did not understand a word. Every day I thought about postcards. My holidays passed quickly, but I did not send cards to my friends. On the last day I made a big decision. I got up early and bought thirty-seven cards. I spent the whole day in my room, but I did not write a single card!

English

Lesson 2 Breakfast or lunch?

It was Sunday. I never get up early on Sundays. I sometimes stay in bed until lunchtime. Last Sunday I got up very late. I looked out of the window. It was dark outside. ‘What a day!’ I thought. ‘It’s raining again.’ Just then, the telephone rang. It was my aunt Lucy. ‘I’ve just arrived by train,’ she said. ‘I’m coming to see you.’
‘But I’m still having breakfast,’ I said.
‘What are you doing?’ she asked.
‘I’m having breakfast,’ I repeated.
‘Dear me,’ she said. ‘Do you always get up so late? It’s one o’clock!’

English

Lesson 1 A private conversation

Last week I went to the theatre. I had a very good seat. The play was very interesting. I did not enjoy it. A young man and a young woman were sitting behind me. They were talking loudly. I got very angry. I could not hear the actors. I turned round. I looked at the man and the woman angrily. They did not pay any attention. In the end, I could not bear it. I turned round again. ‘I can’t hear a word!’ I said angrily.
‘It’s none of your business,’ the young man said rudely. ‘This is a private conversation!’

Javascript

在使用 Vue 和 React 两大流行框架时的部分对比总结

木偶组件

  • 作用: 类似传统的模版引擎(Handlebars, underscore: _template)
  • React 中使用灵活的 jsx 语法实现
  • Vue 中借助 filter,computed 类似 Handlebars 的 helper 实现功能

父子通讯

  • Vue: 单向数据流的思想，props 父 => 子，$emit 子 => 父
  • React: props 父 => 子, 子 => 父 直接触发 父组件传递过来的方法，同样是数据同样是单向的, 父组件调用子组件的方法，是通过 父组件传递给自组件方法，子组件触发父组件传递过来的方法时，把需要 父组件执行的 子组件的方法 传递到 父组件回调中。

models

  • props 不可变
  • state 可变 (vue data)
MongoDB

MongoDB 笔记

#####当前库
db

#####翻页
it

#####操作库
use [‘db’]

#####删除库
db.dropDatabase()

#####查询库
show dbs

#####查询表
show collections || tables

#####销毁表
db[collections].drop()

#####find
db[collections].find()

#####find condition
db[collections].find({name: ‘robinson.cheng’})

#####gt gte lt lte
db[collections].find({ rate: { $lt: 9.2, $gte: 9 } })

#####in
db[collections].find({ summary: { $in: [null] } })
{ “_id” : ObjectId(“544db3565d92133398a80daa”), “a” : 1, “summary” :null}
{ “_id” : ObjectId(“5448ac1d735969c5f8386958”), “a” : 4 }

#####exists
db[collections].find({name:{$in:[null],$exists:true}})
{ “_id” : ObjectId(“544db3565d92133398a80daa”), “a” : 1, “summary” :null}

#####not null
db[collections].find({summary:{$ne:null}})
{ “_id” : ObjectId(“544db3b45d92133398a80dab”), “a” : 1, “summary” : “zzz” }

#####select fields
db[collections].find({}, { key: 1, video: 1 })

#####update()
db.users.update({phoneNumber: ‘17612179125’}, {$set:{password: ‘920Ace125’}})

#####param3 bool (upsert default false) param4 bool (批量 default false)
db.users.update({}, {$set:{password: ‘920Ace125’}}, true, true)

#####remove()
db.users.remove({nickname:null})

#####getIndexes
db[‘articles’].getIndexes()
#####db[‘articles’].createIndex({‘$**’:’text’})
#####db[‘articles’].find({$text:{$search:’aa’}})

db['articles'].find({$text:{ $search:'aa bb'}}, {score:{$meta:'textScore'}}).sort({score:{$meta:'textScore'}})






db.articles.insert({ "title" : "aa bb cc", "author" : "白小明", "article" : "这是白小明的一篇文章，标题《aa bb cc》" })
db.articles.insert({ "title" : "abc def", "author" : "白小明", "article" : "这是白小明的一篇文章，标题《aa bb cc》" })
db.articles.insert({ "title" : "aa bb", "author" : "白小明", "article" : "这是白小明的一篇文章，标题《aa bb cc》" })


var persons = [{name:"robinson.cheng",age:25,email:"robinson.cheng@qq.com",score:{c:89,m:96,e:87},country:"USA",books:["JS","C++","EXTJS","MONGODB"]},{name:"tom.tong",age:25,email:"tom.tong@qq.com",score:{c:75,m:66,e:97},country:"USA",books:["PHP","JAVA","EXTJS","C++"]},{name:"jerry.liu",age:26,email:"jerry.liu@qq.com",score:{c:75,m:63,e:97},country:"USA",books:["JS","JAVA","C#","MONGODB"]},{name:"henry.ye",age:27,email:"henry.ye@qq.com",score:{c:89,m:86,e:67},country:"China",books:["JS","JAVA","EXTJS","MONGODB"]},{name:"lisi",age:26,email:"lisi@qq.com",score:{c:53,m:96,e:83},country:"China",books:["JS","C#","PHP","MONGODB"]},{name:"fred.shu",age:27,email:"fred.shu@qq.com",score:{c:45,m:65,e:99},country:"China",books:["JS","JAVA","C++","MONGODB"]},{name:"jason.wu",age:27,email:"jason.wu@qq.com",score:{c:99,m:96,e:97},country:"China",books:["JS","JAVA","EXTJS","PHP"]},{name:"david.xiao",age:26,email:"david.xiao@dbsupport.cn",score:{c:39,m:54,e:53},country:"Korea",books:["JS","C#","EXTJS","MONGODB"]},{name:"frank.hu",age:27,email:"frank.hu@dbsupport.cn",score:{c:35,m:56,e:47},country:"Korea",books:["JS","JAVA","EXTJS","MONGODB"]},{name:"joe.zhou",age:21,email:"joe.zhou@dbsupport.cn",score:{c:36,m:86,e:32},country:"Korea",books:["JS","JAVA","PHP","MONGODB"]},{name:"steve.tang",age:22,email:"steve.tang@dbsupport.cn",score:{c:45,m:63,e:77},country:"Korea",books:["JS","JAVA","C#","MONGODB"]}]
for(var i = 0;i<persons.length;i++){
    db.persons.insert(persons[i])
}
Javascript

Immutable 感悟

javascript 引用类型

指向对象的指针而不是对象本身，赋值的时候，只是创建了一个新的指针指向对象。保存在堆内存中。
优点:省内存

为什么要实践 “不可变数据”

在复杂的业务场景下，由于对象是被引用的，导致数据变的“不可预见”，如何理解数据 “可预见”，个人的理解是对数据变化的监控度，由于多处引用，造成数据难以还原，甚至有需求是还原到某一次操作后的数据，这时候数据的变化难以追溯，也就是我理解的 “不可预见”

为什么使用Immutable

由于引用类型的优点，如果都使用深拷贝的方式创建对象，无疑会增大内存的开销。
  • Immutable 三大特性
    • Persistent data structure （持久化数据结构）
    • structural sharing （结构共享）
    • support lazy operation （惰性操作）
  • 个人理解

比如 原始数据 

      var person = { name: "阿策", age: 25 }

变化的目标数据是 

      { name: "阿策", age: 25, parent: { father: "Gang", mother: "Ying" } }

那么 Immutable 会存一个 

      var personParent = {parent: { father: "Gang", mother: "Ying" } }

返回的结果

      _.merge(person, personParent)
Javascript

React 积累

如何优雅地在React中处理事件响应

  • 将事件写在元素中，缺点：可读性差，耦合严重，元素重新渲染，会导致方法重新创建

1
2
3
4
5
6
7
render() {
	return (
		<button onClick={()=>{console.log('button clicked');}}>
			Click
		</button>
	);
}
  • 事先定义方法，将方法与元素抽离，缺点：点击事件会重新被创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class MyComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {number: 0};
	}

	handleClick() {
		this.setState({
			number: ++this.state.number
		});
	}

	render() {
		return (
			<div>
				<div>{this.state.number}</div>
				<button onClick={()=>{this.handleClick();}}>
					Click
				</button>
			</div>
		);
	}
}
  • 点击事件引用定义好的方法，缺点：如果需要用到当前Component对象，需要手动 bind(this)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MyComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {number: 0};
		this.handleClick = this.handleClick.bind(this);
	}

	handleClick() {
		this.setState({
			number: ++this.state.number
		});
	}

	render() {
		return (
			<div>
				<div>{this.state.number}</div>
				<button onClick={this.handleClick}>
					Click
				</button>
			</div>
		);
	}
}
或者使用尖头函数
1
2
3
4
5
6
7
8
9
export default class CartItem extends React.Component {
	constructor(props) {
		super(props);
		this._increaseQty = () => this.increaseQty();
	}
	render() {
		<button onClick={_this.increaseQty} className="button success">+</button>
	}
}
  • 使用 ES7 property initializers
1
2
3
4
5
6
export default class CartItem extends React.Component {
	increaseQty = () => this.increaseQty();
	render() {
			<button onClick={this.increaseQty} className="button success">+</button>
	}
}
  • 使用 :: 很帅的写法，不过个人认为可读性不好，(如果不是 => 可以bind(this), 个人并不太喜欢，不习惯，容易看错)
1
2
3
4
5
6
7
8
9
export default class CartItem extends React.Component {
	constructor(props) {
		super(props)
		this.increaseQty = ::this.increaseQty;
	}
	render() {
		<button onClick={this.increaseQty} className="button success">+</button>
	}
}
或者更帅的写法
1
2
3
4
5
export default class CartItem extends React.Component {
	render() {
		<button onClick={::this.increaseQty} className="button success">+</button>
	}
}

如何优雅地在React中处理事件响应

React and ES6 - Part 3, Binding to methods of React class (ES7 included)