Gather ye rosebuds while ye may

What I Learned Today

扫盲教育
…

怎样正确使用 vue-resource + vuex

vue-resource 是一个用于XMLHttpRequest以及JSON操作的插件，其实如果不是对inteceptor有需求，有jQuery就够了。

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
// actions.js
// 父组件调用这个action
export const getData = ({ dispatch }) => {
    Vue.http.get(url, { req: 'req body' }).then((res) => {
        // 正常返回, 别忘了处理错误
        dispatch(REFRESH_DATA, res.data)
    }, (err) => {
        alert(err.message)
    })
}
// ........
// store.js
const state = {
    data: null
}

const mutations = {
    [REFRESH_DATA] (state, data) {
        state.data = data
    }
}
// ......

// 各个需要更新数据的子控件.vue
// ....
export default {
    // ....
    vuex: {
        getters: {
            data: ({ data }) => data
        }
    },
    // .....
}
// ....

详情看这里

记得把 externals 写在 webpack.config.js 里面啊

傻乎乎的在index.html中单独引入了cdn的jquery，忘了往webpack里面配置。结果打包出来一百多kb，是说那么慢。

1
2
3
externals: {
	'jquery': 'jQuery'
}

再打包就只有三十多kb了，而且这里面还包括vue-touch的hammer.js，这个不知道怎么单独写出来了，等下去问问。

在android/ios中使用vue

aka 暴露全局变量给webview回调
改了几个版本，还有个shim挂载至全局的办法，我还没有看。

下面是直接暴露的方法
在exposed.vue中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
var ex
...
export default {
	methods: {
		setSth(tag, score) {
			this.list[tag] = score
		}
	},
	ready() {
		ex = this
	}
...
}
exoport { ex }
</script>

然后在顶层 main.js 中：// 注意这里并不是window，我在这里卡了一会儿还。

1
2
3
4
import exposed from 'path_to/exposed.vue' // 暴露ex
import default from 'path_to/exposed.vue' // 暴露setSth()
...
exposed = ex // 绑定至事先定义好的全局变量

全局下面，index.html:

1
2
3
4
5
6
7
8
<script>
    var exposed = {} // 在build.js之前定义一个全局变量
</script>
<script src="build.js"></script>
// 使用
<script>
    exposed.methods.setSth(0, 1)
</script>

使用vuex

没有vuex的时候使用$dispatch()和$broadcast()。
有vuex的时候dispatch：
action.vue

1
2
3
4
5
6
7
8
import store from 'store.js'
exports default {
	methods: {
		act(info) {
			store.dispatch('action', info)
		}
	}
}

store.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vuex from 'vuex'
const state = {
	a: 1
}
const mutations = {
	action(state, info) {
		state.a = 0
		console.log(info)
	}
}
export default new Vuex.Store({
	state,
	mutations
})

有vuex的时候broadcast：
action.vue

1
2
3
4
5
6
7
8
9
import store from 'store.js'
exports default {
	methods: {
		do() {console.log('done')}
	},
	watch: {
		'store.state.a': 'do'
	}
}

store.js:
1
2
3
4
5
6
7
8
9
import Vuex from 'vuex'
const state = {
	a: 1
}
const mutations = {}
export default new Vuex.Store({
	state,
	mutations
})

箭头函数

1
2
3
4
5
6
setTimeout(function() {
  animation.translate(30).step()
  this.setData({
    animationData:animation.export()
  })
}.bind(this), 1000)

在es5中就可以使用.bind(this)了

再也不用css:filter了

在安卓上就跟屎一样

proxychains-ng

proxychains 是给命令行使用代理的工具，支持 socks5.

$ brew install proxychains-ng

微信小程序

打开的时候不要开代理，不然有net::ERR_NAME_NOT_RESOLVED问题
wxml 要用 <image></image>标签而不是<img></img>
wxss 不支持transform，不支持animation的@keyframes，反而使用wx.createAnimation(OBJECT)，自己的api，这个好处在哪里？
（待确定）wxss background-size 的渲染有问题？

git push 每次都要输入密码？

git remote -v
看到fetch和push的开头都是https
没有走ssh，要先加上ssh-key，再换成ssh的方式
记得先在github的sshkey设置里面加上本机的sshkey

1
2
3
git remote rm origin
git remote add origin [email protected]:mugbya/arch_config.git
git push origin

伪元素和伪类

1
2
3
4
5
6
p:first-letter {
    color: red;
}
p > span {
    color: blue!important;
}
1
<p><span>第一个</span>字符看看会不会变红？</p>

第一个字符是红色，因为::first-letter伪元素是作为子元素存在的。

放假是用新东西的时候

新鞋子，新衣服

mac

command + option + esc

js小数点保留2位

num.toFixed(2)

数据异步更新的问题

1
2
3
4
$('html').css('font-size', '1.29em')
setTimeout(() => {
    $('html').css('font-size', '1.3em')
}, 0)

css性能

will-change: transform;
使用3d变换