Usage of Chai
Chains
to
be
been
is
that
which
and
has
have
with
at
of
same
not
negative any of assertions following in the Chains
1expect(foo).to.not.equal('bar')
deep
set the deep flag, later used by the equal and property assertions
1expect(foo).to.deep.equal({bar: 'bar'})
any
set the any flag, (opposite of the all flag), later used in the keys assertion
1expect(foo).to.have.any.keys('bar', 'foo')
all
set the all flag, (opposite of the any flag), late ...
用 Javascript 实现选中粘贴
为了对付单位愚蠢的每日工作总结的要求, 写了一个小脚本来导出任务管理器里的内容到剪贴板, 于是接触了一下纯 javascript 实现复制到剪贴板功能
代码先行贴出
123456789101112131415161718192021222324252627282930313233343536(function() { 'use strict'; if ('your_url'){ var issueList = document.querySelectorAll('.issue-list li'); var taskList = []; for(var i = 0, len = issueList.length; i < len; i++){ var key = issueList[i].getAttribute('data-key'); var title = issueLi ...
Baisc Usage of Redux-Observable
First of AllcreateEpicMiddleware(rootEpic)createEpicMiddleware is used to create an instance of the actual redux-observable middleware, and you should provide a single, root Epic
Arguments
rootEpic: Epic: The root Epic
[options: Object]: The optional configuration.
dependencies: If given, it will be injected as the 3rd argument to all Epics,
adapter: An adapter object which can transform the input/output streams provided to your epics, Usually used to adapt a stream library other than RxJS v5 ...
Functor 函子
class Functor {
constructor (val) {
this.__val = val
}
map (fn) {
return new Functor(fn(__this.value))
}
}
即将范畴 Functor@val 通过 fn 映射为范畴 Function@fn(val)
Functor 本身具有 map 方法, 通过各种函数作为运算符, 映射成新的 Functor
Throttle 函数
function throttle (fn, threshold, scope) {
threshold || threshold = 250
var last, timer
return function () {
var ctx = scope || this
var now = +new Date()
var args = arguments
if (last && now - last - threshold < 0) {
// hold on it
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(ctx, args)
}, threshold)
} else {
last = now
fn.apply(ctx, ...
Debounce 函数
function debounce (fn, delay) {
var timer = null
return function () {
var context = this, args = arguments
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
`</pre>
Example:
<pre>`Elm.addEventListener('click', debounce(function(event){
...
}, 250))
可以看出, 传入 debounce 的所有函数共享计时器 timer, 因此如果在 delay 时间内再次调用 debounce(fn), 即上一次 fn 为执行而新的 fn 传入时, 上一次的 fn 的 timer 会清空, 对新传入 ...
React-Router 中 Props 的传递
原本写
{children}
`</pre>
的地方改写为
<pre>`{children && React.cloneElement(children, {
prop, // 需要传入的 props
})}
即可
官方案例
Babel-Polyfill 入门
yarn add babel-polyfill
import 'babel-polyfill'
`</pre>
babel-polyfill 提供了全局访问 API, 如 Promise, Set 以及 Map, 但是 polyfill 提供的 api 可能会污染到全局作用域, 特别在你把代码导报为第三方库给其他人用时, 或者你无法控制代码运行环境时, 都可能存在问题
`babel` 提供了 `transform-runtime` 插件来解决此问题, `transform-runtime` 提供一个沙盒机制来组织全局变量的污染
> 需要注意, transform-runtime 依赖于 babel-runtime
<pre>`# transform-runtime 只应用于开发环境
yarn add --dev babel-plugin-transform-runtime
# 其依赖包 babel-runtime 需要打包到生产环境
yarn add babel-runtime
`</pre>
<pre> ...
解决 CommonsChunkPlugin 的 Hash 变化问题
原文:
Manifest FileBut, if we change application code and run webpack again, we see that the hash for the vendor file changes. Even though we achieved separate bundles for vendor and main bundles, we see that the vendor bundle changes when the application code changes. This means that we still don’t reap the benefits of browser caching because the hash for vendor file changes on every build and the browser will have to reload the file.
The issue here is that on every build, webpack generates some ...
Webpack 2 Config 文件入门
webpack 2 config 文件入门
webpack.config.js 的基本结构var path = require('path')
module.exports = {
entry: {
home: './home.js',
about: './about.js',
contact: './contact.js',
}, // 入口文件
// string | [string] | object {<key>: string | [string] }
// 一个页面搭配一个入口文件
output: {
// output 包含一系列关于打包后文件的配置
// output.chunkFilename: string, 这个参数确定了加载 chunk 的名称
// output.crossOriginLoading: boolean | string, 只 ...
Webpack 2 起步
虽然和 webpack1 一样, 还是过一遍
创建一个 bundlemkdir webpack-demo && webpack-demo
npm init -y
yarn add --dev webpack@beta
yarn add lodash
`</pre>
#### 创建 app/index.js
<pre>`// app/index.js
import _ from 'lodash'
function component () {
let element = document.createElement('div');
// use lodash
element.innerHtml = _.join(['Hello', 'webpack'], ' ')
return element
}
document.body.appendChild(component())
`</pre>
# ...
Stacking Context 成因及特性
会形成 Stacking Context 的元素
root 元素( html )
position 不是 static 且 z-index 不是 auto 的元素
flex item 且 z-index 不是 auto 的元素
opacity 小于 1 的元素
transform 不是 none 的元素
mix-blend-mode 不是 normal 的元素
filter 不是 none 的元素
isolation 为 isolate 的元素
mobile webkit 和 chrome 22+ 上的 fixed 元素
在 will-change 属性上指定值为上述任意属性的元素
指定 -webkit-overflow-scrolling 为 touch 的元素
Stacking Context 的特性
stacking context 可以嵌套
每个 Stacking context 相对于兄弟元素都是完全独立的, 其内部规则不会影响到外部
每个 stacking context 元素都会被父级 stacking context 视为一个 stackin ...
Web 坐标整理
坐标分类
文档坐标
窗口坐标
scrollElement.scrollTop: 设置或获得一个元素距离他容器顶部的像素距离, 当一个元素的容器没有产生垂直方向的滚动条, 则他的 scrollTop 的值默认为 0
获得滚动距离var intElementScrollTop = someElement.scrollTop;
scrollTop 可以被设置为任何整数, 但是一下情况会报错:1. 如果一个元素不能被滚动(没有溢出容器或本身不可滚动)的时候设置其 scrollTop 为 0;
设置 scrollTop 的值小于 0, scrollTop 被设为 0
如果设置了超出这个容器可以滚动的值, scrollTop 会被设为最大值
其实就是溢出距离
Element.scrollHeight: 计量元素内容高度的只读属性, 包括 overflow 样式属性导致的视图中不可见内容
没有垂直滚动条的情况下, scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同, 包括元素的 padding, 但不包括 margin
其实就是溢出元素 ...
Simple CheetSheet of Flex
FlexParent
display: flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <flex-direction> || <flex-wrap>
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | stretch | baseline (single row)
align-content: flex-start | flex-end | center | stretch | space-between | space-around (multi-row)
Children(flex-item)
order: <integer>
flex-grow: & ...
Usage of Redux-Action
UsagecreateAction(type, payloadCreator = Identity, ?metaCreator)
import { createAction } from 'redux-action'
`</pre>
Wraps an action creator so that its return value is the payload of a Flux Standard Action. If no payload creator is passed, or if it's not a function, the identity function is used.
### Example
<pre>`let increment = createAction('INCREMENT', amount => amount);
// same as
increment = createAction('INCREMENT');
expect(incr ...
Flux Standard Action
Example:
A basic Flux Standard Action
{type: ‘ADD_TODO’,payload: {text: ‘Do something’,}}`
An FSA that represents an error, analogous to a rejected Promise:
`{
type: 'ADD_TODO',
payload: new Error(),
error: true,
}
Notice:1. An action MUST
be a plain JavaScript Object
have a type property
An action MAY:
have a error property
have a payload property
have a meta property
An action MUST NOT include properties other than type, payload, error, meta
TypeThe type of an action identifie ...
Promise 基本点
Promise 基本用法创建 Promise
var promise = new Promise(function(resolve, reject){
// do something async
if(/* everything ok */){
resolve("OK"); // it will return Promise.resolve("OK"), and the downstream will get "OK" as params
} else {
reject(Error("Error")); // it will return Error("Error") and the downstream will get Error("Error") as params
}
})
`</pre>
Promise 构造器接受一个函数作为参数, 传入两个回调函数re ...
JavaScript 事件与性能
事件处理程序本质上是一种函数, 是一种对象, 存放在内存中, 设置大量的事件处理程序会使内存中的对象变多, Web 程序的性能会变得越来越差.
为了更好利用事件处理程序, 出现了事件委托, 用来提升性能
事件委托Event Delegate: 把若干个子节点上的相同事件的处理函数绑定到父节点, 从父节点统一处理子节点冒泡上来的事件, 这种技术叫做事件委托.
举例:
<ul id='parent-list'>
<li id='list-1'>List 1</li>
<li id='list-1'>List 1</li>
<li id='list-1'>List 1</li>
<li id='list-1'>List 1</li>
...
JavaScript 停止冒泡和阻止浏览器默认行为
事件兼容function myFn(e){
var evt = e ? e:window.event
}
`</pre>
### JS 停止冒泡
<pre>`function myFn(e){
window.event ? window.event.cancelBubble = true : e.stopPropagation();
}
`</pre>
### JS 阻止默认行为
<pre>`function myFn(e){
window.event ? window.event.returnValue = false : e.preventDefault();
}
补充event 表示事件的状态, 例如, event.target 是触发事件的对象
Koa-Router
Express 式路由使用app.get, app.put, app.post 等
Named URL parameters and regexp captures
String or regular expression route matching
Named Routes with URL generation
Responds to OPTIONS request with allowed methods
Support for 405 Method Not Allowed and 501 Not Implemented
Multiple route middleware
Multiple routers
安装npm install koa-router
`</pre>
### 使用
<pre>`var koa = require("koa"),
router = require("koa-router"),
app = koa();
app.use(router(app))
`</ ...
