Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

YuMeiJie Gyumeijie

🎯
Focusing
View GitHub Profile
View addQueryParameters
function addQueryParameters (url, parameters) {
const separator = /\?/.test(url) ? '&' : '?'
const names = Object.keys(parameters)
if (names.length === 0) {
return url
}
return url + separator + names
.map(name => {
@Gyumeijie
Gyumeijie / tmux.md
Created May 3, 2018 — forked from andreyvit/tmux.md
tmux cheatsheet
View tmux.md

tmux cheat sheet

(C-x means ctrl+x, M-x means alt+x)

Prefix key

The default prefix is C-b. If you (or your muscle memory) prefer C-a, you need to add this to ~/.tmux.conf:

# remap prefix to Control + a
View eventloop
1. 为什么JavaScript是单线程? ---为什么不是多线程呢
JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,
以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。
如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)
很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。
JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。
等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。
@Gyumeijie
Gyumeijie / redux middleware
Last active Mar 9, 2018
some beautiful design
View redux middleware
1. 中间件接口
{dispatch, getState} => next => action => your code
中间件串联在一起时,在需要的时候通过调用next来调用下一个中间件,因此需要建立各个中间件next参数之间的连接(类似数据结构中链表节点中next);
compose(...chain)(store.dispatch)语句相当于从后建立起了各个中间件next参数之间的连接关系,其中最后一个中间件的next的值为store.dispatch
使用compose函数合成多个函数的时候,内层函数的返回值称为外层函数的参数,外层函数可以通过这个参数引用内层函数的的返回值
@Gyumeijie
Gyumeijie / Array
Last active Mar 9, 2018
usage of some important javascript functions
View Array
1. Array.reduce
有初始值:
If an initialValue was provided in the call to reduce, then previousValue will be equal to initialValue
and currentValue will be equal to the first value in the array.
没有初始值:
If no initialValue was provided, then previousValue will be equal to the first value in the array
and currentValue will be equal to the second
一般数值的用法:
View arrow function
###Arrow functions do not have this, arguments or other special names bound at all###
when the object is being created the name this is found in the enclosing scope.
name="YMJ"
var person = {
name: "ymj",
shout: () => console.log("my name is ", this.name)
}
View JSX
Babel compiles JSX down to React.createElement() calls.
const element = ( const element = React.createElement(
<h1 className="greeting"> 'h1', -----> element
Hello, world! {className: 'greeting'}, -----> props of the element
</h1> 'Hello, world!' -----> children(include element and text node)
); );
也就是说在jsx文件中类似<li>{number}</li>的不要将其看成是html结构而是对React.createElement的调用
View action
action是一个对象,其中type属性是必须的,同时可以传入一些属性的数据。
action可以用actionCreactor进行创造,actionCreactor是一个函数,例如:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
dispatch就是把action对象发送出去, 结合Action Creator发送动作的代码可以这样写
View CSS statements
There are two kinds of statements:
1. Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
2. At-rules that start with an at sign, '@', followed by an identifier and then continuing up the end of the statement,
Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them.
But there is other information that a Web author wants to convey in the style sheet, like the character set,
other external style sheets to import, font face or list counter descriptions and many more.
View npm-run-srcipt
npm run-script <command> [--silent] [-- <args>...] alias: npm run
Given the following package.json snippet:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d dist",
"run": "node dist/main.js"
}
You can’t perform that action at this time.