jeffersondyj / myblogs Goto Github PK

const findPath = (root, targetValue) => {
    const queue = [{node: root, value: root.value, parent: -1}];
    let head = 0;
    let tail = 0;
    const stack = [];

    while (head <= tail && !stack.length) {
        const {node: currentNode, value: currentValue, parent} = queue[head];
        if (currentValue === targetValue) {
            stack.unshift(currentNode.value);
            let traceItem = queue[parent];
            while (traceItem) {
                stack.unshift(traceItem.node.value);
                traceItem = queue[traceItem.parent];
            }
        }
        if (currentNode.children && currentNode.children.length) {
            currentNode.children.forEach(child => {
                queue[++tail] = {node: child, value: currentValue + child.value, parent: head};
            });
        }
        ++head;
    }
    return stack.length ? stack.join('+') : 'No Solution';
}

class TreeNode {
    constructor(value, children) {
        this.value = value;
        this.children = children;
    }
}

const tree = new TreeNode(
    1,
    [
        new TreeNode(
            2,
            [
                new TreeNode(4),
                new TreeNode(7)
            ]
        ),
        new TreeNode(
            3,
            [
                new TreeNode(5),
                new TreeNode(
                    7,
                    [
                        new TreeNode(2)
                    ]
                )
            ]
        )
    ]
);

for (let i = 1; i < 15; ++i) {
    console.log(i + '=' + findPath(tree, i));
}

const findPath = (forest, targetValue) => {
    const arr = [].concat(forest);
    const stack = [];
    for (let i = 0; i < arr.length; ++i) {
        if (stack.length) {
            break;
        }
        let {value, sumValue, children, parent = -1} = arr[i];
        sumValue = sumValue || value;
        if (sumValue === targetValue) {
            stack.push(value);
            let traceItem = arr[parent];
            while (traceItem) {
                stack.unshift(traceItem.value);
                traceItem = arr[traceItem.parent];
            }
        }
        children && children.forEach(child => arr.push({
            ...child,
            sumValue: sumValue + child.value,
            parent: i
        }));
    }
    return stack.length ? stack.join('+') : 'No Solution';
}

const forest = [
    {
        value: 1, children: [
            {
                value: 2,
                children: [
                    {value: 4}
                ]
            },
            {
                value: 3,
                children: [
                    {value: 5},
                    {value: 7, children: [{value: 2}]}
                ]
            }
        ]
    }
];

for (let i = 1; i < 15; ++i) {
    console.log(i + '=' + findPath(forest, i));
}

const currying = fn => {
    const curry = (length, args) => {
        return length === 0 ? fn(...args) : x => curry(length - 1, args.concat(x));
    };
    return curry(fn.length, []);
};

const currying = fn => {
    const curry = (length, args) => {
        return length === 0 ? fn(...args) : (...inner) => curry(length - inner.length, args.concat(inner));
    };
    return curry(fn.length, []);
};

const currying = fn => {
    const curry = (args = []) => (...inner) => inner.length ? curry(args.concat(inner)) : fn(...args);
    return curry();
}
const sum = currying((...args) => args.reduce((a, b) => a + b, 0));

SomeClass.prototype._somePrivateMethod = function () {
    // TODO
};

function Car() {
    this._mile = 0;
}

Car.prototype.getMile = function () {
    return this._mile;
};

var Car = (function () {
    var privateStore = {};
    var uid = 0;
    
    function Car() {
        privateStore[this.id = uid++] = {};
        privateStore[this.id].mile = 0;
    }
    
    Car.prototype.getMile = function () {
        return privateStore[this.id].mile;
    };
}());

function isType(type) {
    return function (obj) {
        return Object.prototype.toString.call(obj) === "[object " + type + "]";
    };
}
var isFunction = isType('Function');

var PrivateParts = {
    create: function (methods) {
        var store = {};
        return function (obj) {
            for (var k in methods) {
                if (isFunction(methods[k]) && !store[k]) {
                    (function (_k) {
                        store[_k] = function () {
                            return methods[_k].apply(obj, arguments);
                        };
                    })(k);
                }
            }
            return store;
        };
    }
};

// 以下是sample
var A = function (opt) {
    this.getAttr = function () {
        return _(this).attr;
    };
    this.getPrivateMethod = function (key) {
        return _(this)[key];
    };
    
    var privateMethods = Object.create(A.prototype);
    privateMethods.invokePublic = function (str) {
        str = str || '1';
        return this.getNameAndAttr() + str;
    };
    privateMethods.invokePrivate = function (str) {
        str = str || '2';
        return _(this).invokePublic() + str;
    };
    privateMethods.getParams = function (str) {
        str = str || '3';
        return _(this).attr + this.name + str;
    };
    
    var _ = PrivateParts.create(privateMethods);
    opt = opt || {};
    this.name = opt.name || 'name';
    _(this).attr = opt.attr || 'attr';
};

A.prototype.getName = function () {
    return this.name;
};
A.prototype.getNameAndAttr = function () {
    return this.getName() + this.getAttr();
};

var a1 = new A();
function process(obj, str) {
    function printcall(method) {
        console.log(method ? method(str) : 'cannot access');
    }
    console.log(obj.name, obj.attr, obj.getAttr());
    printcall(obj.invokePublic);
    printcall(obj.getPrivateMethod('invokePublic'));
    printcall(obj.invokePrivate);
    printcall(obj.getPrivateMethod('invokePrivate'));
    printcall(obj.getParams);
    printcall(obj.getPrivateMethod('getParams'));
}
process(a1);

`
const initialConditions = {
    pageNo: 1,
    // 行内编辑相关
    isEditing: '', // LEVEL, AUTH_TYPE
    currentRowIndex: -1, // 鼠标hover着的rowIndex
    selectedRows: [] // 勾选上的rows，注意并非rowKey
};

const initialState = {
    ...initialConditions,
    loading: false, // true就要加一个loading的Spin
    list: [], // 数据
    total: 0,
    pageSize: 10
};
`

`
function* fetchListSaga() {
    yield put(update({loading: true}));
    const result = yield call(authApi.search, {
        pageNo: yield select(makeSelector('pageNo')),
        pageSize: yield select(makeSelector('pageSize'))
    });
    yield put(update({
        loading: false,
        list: result.result,
        total: result.totalCount
    }));
}

const [tableChange, waitTableChange] = createSaga(
    'tableChange',
    function* ({payload: {selectedRowKeys}}) {
        const param = {
            ...initialConditions,
            pageNo: selectedRowKeys.current,
            pageSize: selectedRowKeys.pageSize
        };
        yield put(update(param));
        yield call(fetchListSaga);
    }
);

const [currentRowIndexChange, waitCurrentRowIndexChange] = createSaga(
    'currentRowIndexChange',
    function* ({payload: currentRowIndex}) {
        const isEditing = yield select(makeSelector('isEditing'));
        const modalVisible = yield select(makeSelector('inlineModalVisible'));
        if (!isEditing && !modalVisible) { // 非编辑态时，才update
            yield put(update({currentRowIndex}));
        }
    }
);
`

`
class AuthList extends PureComponent {

    getRowKey = item => item.userId;

    onVisibleChange = key => visible => {
        visible && this.props.editingChange({isEditing: key});
    }

    onRowChange = (record, index) => {
        const currentRowIndexChange = this.props.currentRowIndexChange;
        return {
            onMouseEnter: () => currentRowIndexChange(index),
            onMouseLeave: () => currentRowIndexChange(-1)
        };
    }
}
`

`
<Table
    loading={loading}
    columns={columns}
    pagination={pagination}
    dataSource={list}
    rowKey={this.getRowKey}
    onChange={tableChange}
    onRow={this.onRowChange}
    rowSelection={{
        selectedRowKeys: selectedRows.map(({userId}) => userId),
        onChange(selectedRowKeys, selectedRows) {
             selectedRowsChange(selectedRows);
        }
    }}
/>
`

`
const entryProps = {isEditing, currentRowIndex, onVisibleChange: this.onVisibleChange};

const genEditEntry = ({rowIndex, currentRowIndex, overlay, isEditing, onVisibleChange, key}) => (
    <Fragment>
        {
            rowIndex === currentRowIndex && <Dropdown
                overlay={overlay}
                trigger={['click']}
                visible={isEditing === key}
                onVisibleChange={onVisibleChange(key)}
                placement="bottomCenter"
            >
                <Icon type="edit" />
            </Dropdown>
        }
    </Fragment>
);

return [
    {
        title: '授权级别',
        width: 120,
        dataIndex: 'level',
        key: 'level',
        render(text, {level}, rowIndex) {
            return (
                <div>
                    LEVEL文案
                    {
                        genEditEntry({
                            ...entryProps,
                            rowIndex,
                            key: 'LEVEL',
                            overlay: <Level />
                        })
                    }
                </div>
            );
        }
    },
    {
        title: '允许编辑',
        width: 120,
        dataIndex: 'authType',
        key: 'authType',
        render(text, {authType}, rowIndex) {
            return (
                <div>
                    authType文案
                    {
                        genEditEntry({
                            ...entryProps,
                            rowIndex,
                            key: 'AUTH_TYPE',
                            overlay: <AuthType />
                        })
                    }
                </div>
            );
        }
    }
];
`

:::javascript
Chrome://dns
Chrome://predictors

:::javascript
<link rel='dns-prefetch' href='example.com'>

:::javascript
<link rel="prefetch" href="checkout.html">

:::javascript
<link rel="subresource" href="critical/app.js">

:::javascript
<link rel="prerender" href="checkout.html">

// bad 
export default React.createClass({
    displayName: 'ReservationCard' 
});

// good 
const ReservationCard = React.createClass({
});

export default ReservationCard;

// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />

// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />

// bad
<input type="text" value={this.state.newDinosaurName} onChange={this.inputHandler.bind(this, 'newDinosaurName')} />
// bad
<input type="text" value={this.state.newDinosaurName}
   onChange={this.inputHandler.bind(this, 'newDinosaurName')} />

// good
<input
    type="text"
    value={this.state.newDinosaurName}
    onChange={this.inputHandler.bind(this, 'newDinosaurName')}
/>

// React 组件中按照以下顺序组织代码
class extends React.Component {
    getDefaultProps() {
    }

    getInitialState() {
    }

    componentWillMount() {
    }

    componentDidMount() {
        // do something: add DOM event listener, etc.
    }

    componentWillReceiveProps() {
    }

    shouldComponentUpdate() {
    }

    componentWillUpdate() {
    }

    componentDidUpdate() {
    }

    componentWillUnmount() {
        // do something: remove DOM event listener. etc.
    }

    // getter methods for render like getSelectReason() or getFooterContent()

    // Optional render methods like renderNavigation() or renderProfilePicture()

    render() {
        // ...
    }
}

// bad
render() {
    if (this.state.a) {
        return <strong>222</strong>
    } else {
        return <div>222</div>
    }
}

// bad
<Foo
    ref="myRef"
/>

// ok
<Foo
    ref={(ref) => { this.myRef = ref; }}
/>

// bad
class extends React.Component {
    onClickDiv() {
    }

    render() {
        return <div onClick={this.onClickDiv.bind(this)} />;
    }
}

// good
class extends React.Component {
    constructor(props) {
        super(props);
        this.onClickDiv = this.onClickDiv.bind(this);
    }

    onClickDiv() {
    }

    render() {
        return <div onClick={this.onClickDiv} />;
    }
}

 *.baidu-int.com
 *.baidu.com

`
const fetchData = (data, timeout) => new Promise((resolve, reject) => {
    setTimeout(() => resolve({success: true, data}), timeout);
});

let result = null;
fetchData({t: 1}, 500).then(({data}) => result = data);
fetchData({t: 2}, 200).then(({data}) => result = data);
setTimeout(() => console.log(result), 1000); // {t: 1}
`

`
const fetchData = (data, timeout) => new Promise((resolve, reject) => {
    setTimeout(() => resolve({success: true, data}), timeout);
});
let counter = 0;
let result = null;

const callFetchWithCounter = (data, timeout) => {
    let flag = ++counter;
    fetchData(data, timeout).then(({data}) => {
        if (flag !== counter) {
            return;
        }
        result = data;
    });
};

callFetchWithCounter({t: 1}, 500);
callFetchWithCounter({t: 2}, 200);
setTimeout(() => console.log(result), 1000); // {t: 2}
`

`
let counter = 0;
const fetchData = (data, timeout) => {
    let flag = ++counter;
    return new Promise((resolve, reject) => {
        setTimeout(() => { // 用reject来mock“检测出后发先至时序”
            flag === counter ? resolve({success: true, data}) : reject({success: false, data});
        }, timeout);
    });
};

let result = null;
fetchData({t: 1}, 500).then(({data}) => result = data, console.log);
fetchData({t: 2}, 200).then(({data}) => result = data, console.log);
setTimeout(() => console.log(result), 1000);
// {sucess: false, data: {t: 1}}
// {t: 2}
`

const employee = {
    firstName: 'Jefferson',
    lastName: 'Deng'
};
const p = new Proxy(employee, {
    get(target, propKey) {        
        if (propKey === 'fullName') {
            return `${target.firstName} ${target.lastName}`;
        }
        return target[propKey];
    }
});
console.log(p.fullName); // Jefferson Deng

const target = new Date('2019-11-11');
const proxy = new Proxy(target, {});
proxy.getDate(); // uncaught TypeError
const handler = {
    get(target, propKey) {
        const result = Reflect.get(target, propKey);
        return typeof result === 'function' ? result.bind(target) : result;
    }
};
const proxy1 = new Proxy(target, handler);
proxy1.getDate(); // 11
proxy1.getDay(); // 1

{
    set(target, propKey, value) {
        if (propKey === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('Age must be an Integer');
            }
            if (value < 0) {
                throw new TypeError('Age cannot be negative');
            }
        }
        target[propKey] = value;
        return true; // 注意，严格模式下，set代理如果没有返回true，就会报错
    }
}

function createValidator(target, validator) {  
    return new Proxy(target, {
        _validator: validator,
        set(target, key, value, proxy) {
            if (target.hasOwnProperty(key)) {
                let validator = this._validator[key];
                if (!!validator(value)) {
                    return Reflect.set(target, key, value, proxy);
                } else {
                    throw Error(`Cannot set ${key} to ${value}. Invalid`);
                }
            } else {
                throw Error(`${key} is not a valid property`);
            }
        }
    });
}

// sample
const personValidators = {  
    name(val) {
        // 你可以让这个返回，在正确时是true，错误时是报错文案。然后稍微改改createValidator即可
        return typeof val === 'string';
    },
    age(val) {
        return typeof age === 'number' && age > 0;
    }
}
class Person {  
    constructor(name, age) {
        this.name = name;
        this.age = age;
        return createValidator(this, personValidators);
    }
}
const bill = new Person('Bill', 25);
// 以下操作都会报错
bill.name = 0;
bill.age = 'Bill'; 
bill.age = -1;

if (res.data.productSetList.length) {
    // your code
}
// 甚至还要判断得精细些，这就根本不能看了
if (res && res.data && res.data.productSetList && res.data.productSetList.length) {
}

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b
a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]
a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function// otherwise, evaluates to `a.b()`
a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function// invokes the function `a` otherwise

var object = {a: [{b: {c: 3}}]};
var result = _.get(object, 'a[0].b.c', 1);
console.log(result); // 3

const isNull = obj => obj === null || obj === undefined;
function pointer(obj, path = []) {
    return new Proxy(function () {}, { // 第一个参数必须弄一个空function，不然会报错
        get(target, propKey) {
            return pointer(obj, path.concat(propKey));
        },
        apply(target, self, args) {
            let val = obj;
            for (let i = 0; i < path.length; i++) {
                if (isNull(val)) {
                    break;
                }
                val = val[path[i]];
            }
            return isNull(val) ? args[0] : val; // 可以在最终调用时，手动设默认值
        }
    });
}
const c = {a: {b: [1, 2, 3]}};
pointer(c).a(); // {b: [1, 2, 3]}
pointer(c).a.b(); // [1, 2, 3]
pointer(c).a.b.d('defValue'); // defValue

const pipe = (() => value => {
    const funcStack = [];
    const proxy = new Proxy({} , {
        get(target, fnName) {
            if (fnName === 'get') {
                return funcStack.reduce((val, fn) => fn(val), value);
            }
            funcStack.push(window[fnName]);
            return proxy;
        }
    });
    return proxy;
})();

var double = n => n * 2;
var square = n => n * n;
console.log(pipe(4).square.double.get); // 32

{
    get(target, propKey){
        if (propKey.startsWith('_')) {
            console.log('私有变量不能被访问');
            return undefined;
        }
        return target[propKey];
    },
    set(target, propKey, value) {
        if (propKey.startsWith('_')) {
            console.log('私有变量不能被修改');
            return false;
        }
        target[propKey] = value;
        return true;
    }
} 

function isType(type) {
    return function (obj) {
        return Object.prototype.toString.call(obj) === "[object " + type + "]";
    };
}
var isFunction = isType('Function');

var PrivateParts = {
    create: function (methods) {
        var store = {};
        return function (obj) {
            for (var k in methods) {
                if (isFunction(methods[k]) && !store[k]) {
                    (function (_k) {
                        store[_k] = function () {
                            return methods[_k].apply(obj, arguments);
                        };
                    })(k);
                }
            }
            return store;
        };
    }
};

// 以下是sample
var A = function (opt) {
    this.getAttr = function () {
        return _(this).attr;
    };
    this.getPrivateMethod = function (key) {
        return _(this)[key];
    };
    
    var privateMethods = Object.create(A.prototype);
    privateMethods.invokePublic = function (str) {
        str = str || '1';
        return this.getNameAndAttr() + str;
    };
    privateMethods.invokePrivate = function (str) {
        str = str || '2';
        return _(this).invokePublic() + str;
    };
    privateMethods.getParams = function (str) {
        str = str || '3';
        return _(this).attr + this.name + str;
    };
    
    var _ = PrivateParts.create(privateMethods);
    opt = opt || {};
    this.name = opt.name || 'name';
    _(this).attr = opt.attr || 'attr';
};

A.prototype.getName = function () {
    return this.name;
};
A.prototype.getNameAndAttr = function () {
    return this.getName() + this.getAttr();
};

var a1 = new A();
function process(obj, str) {
    function printcall(method) {
        console.log(method ? method(str) : 'cannot access');
    }
    console.log(obj.name, obj.attr, obj.getAttr());
    printcall(obj.invokePublic);
    printcall(obj.getPrivateMethod('invokePublic'));
    printcall(obj.invokePrivate);
    printcall(obj.getPrivateMethod('invokePrivate'));
    printcall(obj.getParams);
    printcall(obj.getPrivateMethod('getParams'));
}
process(a1);

function bridge(map) {
    return obj => new Proxy(obj, {
        get(target, propKey) {
            if (Reflect.has(map, propKey)) {
                return Reflect.get(target, Reflect.get(map, propKey));
            }
            return Reflect.get(target, propKey);
        },
        set(target, propKey, value) {
            if (Reflect.has(map, propKey)) {
                Reflect.set(target, Reflect.get(map, propKey), value);
                return true;
            }
            Reflect.set(target, propKey, value);
            return true;
        }
    });
}
// 以下是sample
const print = ({id, text, children}) => console.log(id, text, children); // 标准格式：id, text, children
print(bridge({children: 'subModules'})({id: 1, text: 't1', subModules: []}));
print(bridge({id: 'value', text: 'name'})({value: 2, name: 'n2', children: ['c']}));

const dom = new Proxy({}, {
    get(target, property) {
        return (attrs = {}, ...children) => {
            const el = document.createElement(property);
            for (let prop of Object.keys(attrs)) {
                el.setAttribute(prop, attrs[prop]);
            }
            for (let child of children) {
                if (typeof child === 'string') {
                    child = document.createTextNode(child);
                }
                el.appendChild(child);
            }
            return el;
        };
    }
});

const el = dom.div(
    {},
    'Hello, my name is ',
    dom.a({href: '//example.com'}, 'Jefferson'),
    '. I like:',
    dom.ul(
        {},
        dom.li({}, 'The web'),
        dom.li({}, 'The food')
    )
);
document.body.appendChild(el);

var obj = {};
var _obj = {};
var proxy = new Proxy(_obj, {
    set: (target, prop, value) => {
         target[prop] = value;
    }
});
var printTimeConsumed = (target, repeatTimes) => {
    const t = new Date().getTime();
    for (var i = 0; i < repeatTimes; ++i) {
        target.a = 5;
    }
    console.log(new Date().getTime() - t);
};
printTimeConsumed(obj, 5e9); // 平均6s多
printTimeConsumed(proxy, 1e7); // 平均也是6s多

:::javascript
var array = [1, 2, 3];
array.forEach(v = > console.log(v));

:::javascript
{
    location: /\.es6|\.jsx\.js/, // babel 同时对付es6和react
    handler: [
        babel({
            sourceMaps: 'both'
        }, { // forceTransform 无论是否有`define`都强制转成UMD/AMD模块
            forceTransform: true
        })
    ]
}

:::javascript
npm uninstall -g edp-webserver
npm install -g edp-webserver

:::javascript
/**
 * 初始化配置
 */
PaBabelProcessor.prototype.name = 'PaBabelProcessor';
PaBabelProcessor.prototype.files = ['**/*.es6.js', '**/*.jsx.js'];
PaBabelProcessor.prototype.babel = require('babel-core');
PaBabelProcessor.prototype.compileOptions = {
    compact: false,
    ast: false,
    presets: ['es2015']
};

/**
 * 构建处理
 *
 * @param {FileInfo} file 文件信息对象
 * @param {ProcessContext} processContext 构建环境对象
 * @param {Function} callback 处理完成回调函数
 */
PaBabelProcessor.prototype.process = function (file, processContext, callback) {
    var options = {};
    for (var attr in this.compileOptions) {
        if (this.compileOptions.hasOwnProperty(attr)) {
            options[attr] = this.compileOptions[attr];
        }
    }
    options.filename = file.fullPath;
    file.setData(this.babel.transform(file.data, options).code);
    callback();
};

:::javascript
{
    location: /\.es6|\.jsx\.js/, // babel 同时对付es6和react
    handler: function (context) {
        var url = context.request.url;
        if (url.indexOf('\/output\/') >= 0) {
            file()(context);
            return;
        }
        var option = {sourceMaps: 'both'};
        url.indexOf('dsp') >= 0 || (option.modules = 'amd');
        babel(option, {
            // forceTransform 无论是否有`define`都强制转成UMD/AMD模块
            forceTransform: true
        })(context);
    }
}

:::javascript
"devDependencies": {
    "babel-core": "^6.18.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-check-es2015-constants": "^6.8.0",
    "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.8.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.10.1",
    "babel-plugin-transform-es2015-classes": "^6.9.0",
    "babel-plugin-transform-es2015-computed-properties": "^6.8.0",
    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
    "babel-plugin-transform-es2015-for-of": "^6.8.0",
    "babel-plugin-transform-es2015-function-name": "^6.9.0",
    "babel-plugin-transform-es2015-literals": "^6.8.0",
    "babel-plugin-transform-es2015-modules-amd": "^6.22.0",
    "babel-plugin-transform-es2015-object-super": "^6.8.0",
    "babel-plugin-transform-es2015-parameters": "^6.11.4",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.8.0",
    "babel-plugin-transform-es2015-spread": "^6.8.0",
    "babel-plugin-transform-es2015-sticky-regex": "^6.8.0",
    "babel-plugin-transform-es2015-template-literals": "^6.8.0",
    "babel-plugin-transform-es2015-typeof-symbol": "^6.8.0",
    "babel-plugin-transform-es2015-unicode-regex": "^6.11.0",
    "babel-plugin-transform-proto-to-assign": "^6.9.0",
    "babel-preset-es2015": "*"
}

:::javascript
else if (typeof SpecificAction['default'] === 'function') {
    // es6模块build时是babel6，而webServer下是babel5就ok
    SpecificAction = SpecificAction['default'];
}

:::javascript
function* fibo() {
    let [a, b] = [1, 1];
    yield a;
    yield b;
    while (true) {
        [a, b] = [b, a + b];
        yield b;
    }
}
let gen = fibo();
for (var i = 0; i < 7; ++i) {
    console.log(gen.next().value); // 1 1 2 3 5 8 13
}

:::javascript
function* getNumbers() {
    var v1 = yield 0;
    console.log(v1);
    var v2 = yield 1;
    console.log(v2);
    return 5;
}
var nums = getNumbers();
console.log(nums.next(2)); // {value: 0, done: false}，此时切出
console.log(nums.next(3)); // 先打印3，再{value: 1, done: false}
console.log(nums.next(4)); // 先打印4，再{value: 5, done: true}

:::javascript
function* aGen(i) {
    yield i + 1;
    yield i + 3;
}
function* bGen(i) {
    yield i;
    yield* aGen(i + 4);
    yield i + 10;
}
var gen = bGen(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 15
console.log(gen.next().value); // 17
console.log(gen.next().value); // 20

:::javascript
function sleep(cb) {
    setTimeout(cb, 1000);
}
function getAuthor(cb) {
    sleep(function () { // () => {
        cb('dyj');
    });
}
function getBlog(cb, author) {
    sleep(function () { // () => {
        cb('github.com/Jefferson' + author);
    });
}
getAuthor(function (author) { // author => {
    console.log(author);
    getBlog(function (blog) { // blog => {
        console.log(blog);
    }, author);
});

:::javascript
function co(gen) {
    const runner = gen(resume);
    function resume() {
        runner.next(...arguments);
    }
    runner.next();
}
co(function* (cb) {
    const author = yield getAuthor(cb);
    console.log(author);
    const blog = yield getBlog(cb, author);
    console.log(blog);
});

:::javascript
fs.readFile(fileName, callback); // 多参数
var readFileThunk = thunkify(fileName);
readFileThunk(callback); // 单参数
// 下面是这个特定case（读取文件）的thunkify简单实现
function thunkify(fileName) {
    return function (callback) {
        return fs.readFile(fileName, callback);
    }
}

:::javascript
function thunkify(fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return function (callback) {
            args.push(callback); // 如果callback是第一个参数，就得unshift
            return fn.apply(this, args);
        };
    };
}
var readFileThunk = thunkify(fs.readFile);
readFileThunk(fileName)(callback);

:::javascript
function co(gen) {
    const runner = gen(resume);
    function resume() {
        const thunkcall = runner.next(...arguments);
        if (!thunkcall.done) {
            thunkcall.value(resume);
        }
    }
    resume();
}
co(function* () {
    const author = yield thunkify(getAuthor)();
    console.log(author);
    const blog = yield thunkify(getBlog)(author);
    console.log(blog);
});

:::javascript
define(function (require) {
return function (sMessage) {
    function rotateLeft(lValue, iShiftBits) {
        return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
    }

    function addUnsigned(lX, lY) {
        var lX8 = (lX & 0x80000000);
        var lY8 = (lY & 0x80000000);
        var lX4 = (lX & 0x40000000);
        var lY4 = (lY & 0x40000000);
        var lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);

        if (lX4 & lY4) {
            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
        }
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
            } else {
                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
            }
        } else {
            return (lResult ^ lX8 ^ lY8);
        }
    }

    function f(x, y, z) {
        return (x & y) | ((~x) & z);
    }

    function g(x, y, z) {
        return (x & z) | (y & (~z));
    }

    function h(x, y, z) {
        return (x ^ y ^ z);
    }

    function i(x, y, z) {
        return (y ^ (x | (~z)));
    }

    function ff(a, b, c, d, y, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(f(b, c, d), y), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }

    function gg(a, b, c, d, y, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(g(b, c, d), y), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }

    function hh(a, b, c, d, y, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(h(b, c, d), y), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }

    function ii(a, b, c, d, y, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(i(b, c, d), y), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }

    function convertToWordArray(sMessage) {
        var lWordCount;
        var lMessageLength = sMessage.length;
        var lNumberOfWordsTemp1 = lMessageLength + 8;
        var lNumberOfWordsTemp2
            = (lNumberOfWordsTemp1 - (lNumberOfWordsTemp1 % 64)) / 64;
        var lNumberOfWords = (lNumberOfWordsTemp2 + 1) * 16;
        var lWordArray = new Array(lNumberOfWords - 1);
        var lBytePosition = 0;
        var lByteCount = 0;
        while (lByteCount < lMessageLength) {
            lWordCount = (lByteCount - (lByteCount % 4)) / 4;
            lBytePosition = (lByteCount % 4) * 8;
            lWordArray[lWordCount] = (lWordArray[lWordCount]
                | (sMessage.charCodeAt(lByteCount) << lBytePosition));
            lByteCount++;
        }
        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
        lBytePosition = (lByteCount % 4) * 8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
        lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
        lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
        return lWordArray;
    }

    function wordToHex(lValue) {
        var WordToHexValue = '';
        var WordToHexValueTemp = '';
        for (var lCount = 0; lCount <= 3; lCount++) {
            var lByte = (lValue >>> (lCount * 8)) & 255;
            WordToHexValueTemp = '0' + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValueTemp
                .substr(WordToHexValueTemp.length - 2, 2);
        }
        return WordToHexValue;
    }

    function uTF8Encode(string) {
        string = string.replace(/\x0d\x0a/g, '\x0a');
        var output = '';
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                output += String.fromCharCode(c);
            } else if ((c > 127) && (c < 2048)) {
                output += String.fromCharCode((c >> 6) | 192);
                output += String.fromCharCode((c & 63) | 128);
            } else {
                output += String.fromCharCode((c >> 12) | 224);
                output += String.fromCharCode(((c >> 6) & 63) | 128);
                output += String.fromCharCode((c & 63) | 128);
            }
        }
        return output;
    }

    var S11 = 7;
    var S12 = 12;
    var S13 = 17;
    var S14 = 22;
    var S21 = 5;
    var S22 = 9;
    var S23 = 14;
    var S24 = 20;
    var S31 = 4;
    var S32 = 11;
    var S33 = 16;
    var S34 = 23;
    var S41 = 6;
    var S42 = 10;
    var S43 = 15;
    var S44 = 21;
    // Steps 1 and 2. Append padding bits and length and convert to words
    sMessage = uTF8Encode(sMessage);
    var x = convertToWordArray(sMessage);
    // Step 3. Initialise
    var a = 0x67452301;
    var b = 0xEFCDAB89;
    var c = 0x98BADCFE;
    var d = 0x10325476;

    // Step 4. Process the message in 16-word blocks
    for (var k = 0; k < x.length; k += 16) {
        var AA = a;
        var BB = b;
        var CC = c;
        var DD = d;
        a = ff(a, b, c, d, x[k + 0], S11, 0xD76AA478);
        d = ff(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
        c = ff(c, d, a, b, x[k + 2], S13, 0x242070DB);
        b = ff(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
        a = ff(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
        d = ff(d, a, b, c, x[k + 5], S12, 0x4787C62A);
        c = ff(c, d, a, b, x[k + 6], S13, 0xA8304613);
        b = ff(b, c, d, a, x[k + 7], S14, 0xFD469501);
        a = ff(a, b, c, d, x[k + 8], S11, 0x698098D8);
        d = ff(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
        c = ff(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
        b = ff(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
        a = ff(a, b, c, d, x[k + 12], S11, 0x6B901122);
        d = ff(d, a, b, c, x[k + 13], S12, 0xFD987193);
        c = ff(c, d, a, b, x[k + 14], S13, 0xA679438E);
        b = ff(b, c, d, a, x[k + 15], S14, 0x49B40821);
        a = gg(a, b, c, d, x[k + 1], S21, 0xF61E2562);
        d = gg(d, a, b, c, x[k + 6], S22, 0xC040B340);
        c = gg(c, d, a, b, x[k + 11], S23, 0x265E5A51);
        b = gg(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
        a = gg(a, b, c, d, x[k + 5], S21, 0xD62F105D);
        d = gg(d, a, b, c, x[k + 10], S22, 0x2441453);
        c = gg(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
        b = gg(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
        a = gg(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
        d = gg(d, a, b, c, x[k + 14], S22, 0xC33707D6);
        c = gg(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
        b = gg(b, c, d, a, x[k + 8], S24, 0x455A14ED);
        a = gg(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
        d = gg(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
        c = gg(c, d, a, b, x[k + 7], S23, 0x676F02D9);
        b = gg(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
        a = hh(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
        d = hh(d, a, b, c, x[k + 8], S32, 0x8771F681);
        c = hh(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
        b = hh(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
        a = hh(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
        d = hh(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
        c = hh(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
        b = hh(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
        a = hh(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
        d = hh(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
        c = hh(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
        b = hh(b, c, d, a, x[k + 6], S34, 0x4881D05);
        a = hh(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
        d = hh(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
        c = hh(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
        b = hh(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
        a = ii(a, b, c, d, x[k + 0], S41, 0xF4292244);
        d = ii(d, a, b, c, x[k + 7], S42, 0x432AFF97);
        c = ii(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
        b = ii(b, c, d, a, x[k + 5], S44, 0xFC93A039);
        a = ii(a, b, c, d, x[k + 12], S41, 0x655B59C3);
        d = ii(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
        c = ii(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
        b = ii(b, c, d, a, x[k + 1], S44, 0x85845DD1);
        a = ii(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
        d = ii(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
        c = ii(c, d, a, b, x[k + 6], S43, 0xA3014314);
        b = ii(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
        a = ii(a, b, c, d, x[k + 4], S41, 0xF7537E82);
        d = ii(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
        c = ii(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
        b = ii(b, c, d, a, x[k + 9], S44, 0xEB86D391);
        a = addUnsigned(a, AA);
        b = addUnsigned(b, BB);
        c = addUnsigned(c, CC);
        d = addUnsigned(d, DD);
    }
    // Step 5. Output the 128 bit digest
    var temp = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
    return temp.toLowerCase();
};

:::javascript
// 连接，生成容器
define(function (require) {
    const app = require('app');
    const UI = require('./MyUI.ui');
    return app.connect(
        ({prop1}, {prop2}) => ({
            prop1Config: prop1.mapA[prop1.key],
            prop2Config: prop2.mapB[prop2.key]
        }),
        {
            onKeyChange({dispatch}, key) {
                dispatch({
                    type: 'foo/modKey',
                    payload: {key}
                });
            },
            onMapAppend({dispatch}, map) {
                dispatch({
                    type: 'foo/modMap',
                    payload: {map}
                });
            }
        }
    )(UI);
});

// MyUI.ui.js，生成UI
define(function (require) {
    const React = require('react');
    return props => {
        const {prop1Config, prop2Config} = props;
        return (
            // 你的组件是一段jsx，可能是由prop1 prop2计算出来，里面有事件onKeyChange，onMapAppend
        );
    };
});

:::javascript
// 全局Model，组合多个局部状态
define(function (require) {
    const prop1 = require('./prop1');
    const prop2 = require('./prop2');
    return [
        prop1,
        prop2
    ];
});

// prop1的Model，以及申明Reducers
define(function (require) {
    const initialState = {
        key: 'stateAA'
        mapA: {}
    };
    return {
        namespace: 'foo',
        state: initialState,
        reducers: {
            modKey(state, {payload: {key}}) {
                return {
                    ...state,
                    key
                };
            },
            modMap(state, {payload: {map}}) {
                return {
                    ...state,
                    mapA: map
                };
            }
        }
    };
});

/**
 * slider控件构造函数
 *
 * @param {Object} opt 参数
 * @param {number} opt.num 一共几张图片
 * @param {number} opt.per 每张图片的宽/高
 * @param {string} opt.outer 外容器query
 * @param {string} opt.inner 内容器query
 * @param {number=} opt.animInv 切换完成时间
 * @param {number=} opt.slideInv 切换间隔时间
 * @return {Object}
 */
window.slider = function (opt) {
    var hover = false;
    var per = opt.per;
    var container = $(opt.outer);
    var items = $(opt.inner);
    var animInv = opt.animInv || 500;
    var slideInv = opt.slideInv || 4000;
    var pid = 0;
    var imgNum = opt.num || 3;

    /**
     * 往左横移图片
     *
     * @param {boolean=} force 强制
     */
    function scrollToLeft(force) {
        if (force || !hover) {
            container.animate({
                scrollLeft: per
            }, animInv, 'linear', function () {
                items.append(items.children().first());
                container.scrollLeft(0);
            });
        }
    }

    /**
     * 往右横移图片
     *
     * @param {boolean=} force 强制
     */
    function scrollToRight(force) {
        if (force || !hover) {
            items.prepend(items.children().last());
            container.scrollLeft(per);
            container.animate({scrollLeft: 0}, animInv, 'linear');
        }
    }

    /**
     * 如果鼠标悬浮在某张图片上，则不再自动切换
     */
    function regMouse() {
        container.mouseover(function () {
            hover = true;
        }).mouseout(function () {
            hover = false;
        });
    }

    /**
     * 为容器自动加长宽属性css
     */
    function setCss() {
        container.css('overflow', 'hidden');
        container.css('width', per + 'px');
        items.css('width', (per * imgNum) + 'px');
        items.children().css('width', per + 'px');
    }

    /**
     * 注册控件事件
     */
    function regCtrls() {
        container.find('.prev').click(function () {
            scrollToRight(true);
        });
        container.find('.next').click(function () {
            scrollToLeft(true);
        });
    }

    /**
     * 渲染左右控件
     *
     * @param {string} style 样式
     */
    function renderCtrls(style) {
        container.css('position', 'relative');
        container.append([
            '<div class="ctrl">',
            '<span class="prev btn" style="' + style + '"></span>',
            '<span class="next btn" style="' + style + '"></span>',
            '</div>'
        ].join(''));
    }

    /**
     * 初始化
     *
     * @param {string} style 样式
     */
    function reg(style) {
        regMouse();
        setCss();
        renderCtrls(style);
        regCtrls();
    }

    return {
        start: function (style) {
            reg(style);
            if (items.width() > per) {
                pid = setInterval(scrollToLeft, slideInv);
            }
        },
        setPer: function (newPer) {
            per = newPer;
            setCss();
        },
        stop: function () {
            if (pid <= 0) {
                clearInterval(pid);
            }
        }
    };
};

`
const cache = {};
const fetchData = async (url, params) => {
    const key = url + JSON.stringify(params);
    cache[key] = cache[key] || (await fetch(url, params));
    return cache[key];
};
`

`
const cachedPromise = {};
const fetchData = (url, params) => {
    const key = url + JSON.stringify(params);
    cachedPromise[key] = cachedPromise[key] || new Promise((resolve, reject) => {
        console.log(`fetching ${key}`);
        setTimeout(() => { // 用你封装的ajax代替，我这里就用setTimeout模拟一段逻辑了
            console.log(`fetched ${key}`);
            resolve({success: true, result: Date.now()});
        }, 1500);
    });
    return cachedPromise[key];
};

for (let i = 0; i < 4; ++i) {
    setTimeout(() => fetchData('/data/a', {}).then(({result}) => console.log(result)), i * 1e3);
}
for (let i = 0; i < 4; ++i) {
    setTimeout(() => fetchData('/data/a', {t: 1}).then(({result}) => console.log(result)), i * 1e3);
}
`

<template>
<div>
    <div>Dom Count: {{ monitor.count }}</div>
    <div>Dom Depth: {{ monitor.depth }}</div>
</div>
</template>

<script>
import debounce from 'lodash/debounce';

const walk = (node, currentDepth) => {
    let count = 1;
    let depth = currentDepth;
    const children = [...node.children];
    children.forEach(subDom => {
        const result = walk(subDom, currentDepth + 1);
        count += result.count;
        depth = Math.max(depth, result.depth);
    });
    return {count, depth};
};

export default {
    name: 'dom-weight-monitor',
    data() {
        return {
            monitor: {count: 0, depth: 0}
        };
    },
    mounted() {
        this.__changeHandler = debounce(this.handleDomChange, 500);
        document.getElementById('app')?.addEventListener('DOMSubtreeModified', this.__changeHandler, false);
    },
    beforeDestroy() {
       document.getElementById('app')?.removeEventListener('DOMSubtreeModified', this.__changeHandler, false);
    },
    methods: {
        handleDomChange() {
            this.monitor = walk(document.getElementById('app'), 1);
        }
    }
};
</script>

import {useState, useEffect} from 'react';
import {useDebouncedCallback} from '@huse/debounce';

const walk = (node, currentDepth) => {
    let count = 1;
    let depth = currentDepth;
    const children = [...node.children];
    children.forEach(subDom => {
        const result = walk(subDom, currentDepth + 1);
        count += result.count;
        depth = Math.max(depth, result.depth);
    });
    return {count, depth};
};

export function useDomWeightMonitor({rootId = 'root', timer = 500} = {}) {
    const [depth, setDepth] = useState(0);
    const [count, setCount] = useState(0);
    const domChangedHandler = useDebouncedCallback(() => {
        const res = walk(document.getElementById(rootId), 1);
        setDepth(res.depth);
        setCount(res.count);
    }, timer);

    useEffect(() => {
        document.getElementById(rootId)?.addEventListener('DOMSubtreeModified', domChangedHandler, false);
        return () => {
            document.getElementById(rootId)?.removeEventListener('DOMSubtreeModified', domChangedHandler, false);
        };
    }, []);

    return {depth, count};
}

"dependencies": {
    "body-parser": "^1.5.2",
    "ejs": "^2.6.1",
    "errorhandler": "^1.1.1",
    "express": "^4.8.0",
    "express-session": "^1.7.2",
    "ftp-get": "*",
    "jade": "^1.5.0",
    "method-override": "^2.1.2",
    "moment": "*",
    "morgan": "^1.2.2",
    "multer": "^0.1.3",
    "promise": "*",
    "serve-favicon": "^2.0.1",
    "underscore": "*",
    "util": "*"
}

var express = require('express');
// var favicon = require('serve-favicon');
var logger = require('morgan');
var methodOverride = require('method-override');
// var session = require('express-session');
var bodyParser = require('body-parser');
var multer = require('multer');
var errorHandler = require('errorhandler');

var path = require('path');
var fs = require('fs');
var _ = require('underscore');
var app = express();
var PORT = 3000;

// all environments
app.set('port', process.env.PORT || PORT);
app.set('views', path.join(__dirname, '../frontend/views'));
var ejs = require('ejs');
app.engine('html', ejs.__express);
app.set('view engine', 'html');
app.use(logger('dev'));
app.use(methodOverride());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer());
app.use(express.static(path.join(__dirname, '../frontend')));

var currentEnv = app.get('env');
console.log('Environment: ' + currentEnv);
if (currentEnv === 'development') {
    app.use(errorHandler({
        dumpExceptions: true, showStack: true
    }));
} else if (currentEnv === 'production') {
    app.use(errorHandler());
}
process.on('uncaughtException', function (err) {
    console.log(err);
});

"scripts": {
    "dev": "export NODE_ENV=development && node app",
    "prod": "export NODE_ENV=production && node app"
}

// 注册控制中心
_.each(fs.readdirSync('./controllers/'), function (n) {
    if (String(n).indexOf('.') === 0) {
        return true;
    } else {
        require('./controllers/' + n)(app);
    }
});

// 注册路由
_.each(fs.readdirSync('./routers/'), function (n) {
    if (String(n).indexOf('.') === 0) {
        return true;
    } else {
        var routerPath = n.substring(0, n.lastIndexOf('.'));
        var router = require('./routers/' + n);
        app.use('/' + routerPath, router);
    }
});

// 开始监听端口
app.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

var YourController = function (app) {
    app.get('/data/模块1/list', function (req, res) {
        util.log(req.method + ' request to url : ' + req.route.path);
        res.json({/* 你的json数据 */});
    });
};
module.exports = YourController;

var express = require('express');
var router = express.Router();

/* /sample */
router.get('/', function (req, res) {
    res.render('sample', {param1: '参数1'}); 
});

/* /sample/about */
router.get('/about', function (req, res) {
    res.render('about', {param2: '参数2'});
});

module.exports = router;

var routerPath = n.substring(0, n.lastIndexOf('.'));
var router = require('./routers/' + n);
app.use('/' + routerPath, router);

function final(status, value) {
    const promise = this;
    let fn;
    if (promise._status !== 'PENDING') {
        return;
    }
    
    setTimeout(() => {
        promise._status = status;
        const st = promise._status === 'FULFILLED';
        const queue = promise[st ? '_resolves' : '_rejects'];
        while (fn = queue.shift()) {
            value = fn.call(promise, value) || value;
        }
        promise[st ? '_value' : '_reason'] = value;
        promise['_resolves'] = promise['_rejects'] = undefined;
    });
}

export default function Promise(resolver) {
    if (!(typeof resolver === 'function')) {
        throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
    }
    // 如果不是promise实例，就new一个
    if (!(this instanceof Promise)) {
        return new Promise(resolver);
    }

    const promise = this;
    promise._status = 'PENDING';
    promise._resolves = [];
    promise._rejects = [];

    function resolve(value) {
        final.apply(promise, ['FULFILLED'].concat([value])); // value可能是数组
    }
    function reject(reason) {
        final.apply(promise, ['REJECTED'].concat([reason]));
    }
    resolver(resolve, reject);
}

Promise.prototype.then = function (onFulfilled, onRejected) {
    const promise = this;
    return new Promise((resolve, reject) => {
        function handle(value) {
            var ret = typeof onFulfilled === 'function' && onFulfilled(value) || value;
            if (ret && typeof ret['then'] === 'function') {
                ret.then(resolve, reject);
            } else {
                resolve(ret);
            }
        }

        function callback(reason) {
            reason = typeof onRejected === 'function' && onRejected(reason) || reason;
            reject(reason);
        }

        if (promise._status === 'PENDING') {
            promise._resolves.push(handle);
            promise._rejects.push(callback);
        } else if (promise._status === 'FULFILLED') { // 状态改变后的then操作，立刻执行
            handle(promise._value);
        } else if (promise._status === 'REJECTED') {
            callback(promise._reason);
        }
    });
};

Promise.resolve = function (...args) {
    return Promise(resolve => {
        resolve(...args);
    });
};

Promise.reject = function (...args) {
    return Promise((resolve, reject) => {
        reject(...args);
    });
};

Promise.all = function (promises) {
    if (!Array.isArray(promises)) {
        throw new TypeError('You must pass an array to Promise.all');
    }
    return Promise((resolve, reject) => {
        const result = [];
        let count = promises.length;

        // 这里与race中的函数相比，多了一层嵌套，要传入index
        function resolver(index) {
            return function (value) {
                resolveAll(index, value);
            };
        }
        function resolveAll(index, value) {
            result[index] = value;
            if (--count === 0) {
                resolve(result);
            }
        }

        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(resolver(i), reject);
        }
    });
};

Promise.race = function (promises) {
    if (!Array.isArray(promises)) {
        throw new TypeError('You must pass an array to Promise.race');
    }
    return Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(resolve, reject);
        }
    });
};

::javascript
var size = 0;
for (var key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
        size += localStorage.getItem(key).length;
    }
}
return size;

 ::javascript
 function setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify({
        data: value, time: new Date().getTime()
    }));
}

function getLocalStorage(key, exp) {
    exp = exp || 1000 * 86400; // 默认一天过期
    var data = localStorage.getItem(key);
    if (data) {
        var obj = JSON.parse(data);
        if (new Date().getTime() - obj.time < exp) {
            return obj.data;
        }
        localStorage.removeItem(key);
    }
    return null;
}

::javascript
function setLocalStorage(key, value) {
    try {
        localStorage.setItem(key, JSON.stringify({
            data: value, time: new Date().getTime()
        }));
    } catch (exception) {
        if (exception.name == 'QuotaExceededError') {
            localStorage.clear();
            setLocalStorage(key, value);
        }
    }
}

::javascript
function setLocalStorage(key, value) {
    var event = new Event('setItemEvent');
    event.newValue = value;
    window.dispatchEvent(event);
    localStorage.setItem(key, value);
};

window.addEventListener('setItemEvent', function (e) {
    console.log('修改后的值：' + e.newValue);
});

:::javascript
render() {
    const {users} = this.props;
    return (
        <div>
            <Info key={users} />
        </div>
    );
}

:::javascript
// 转换前
const element = (
    <div>
        <h3>example</h3>
        {[<p key={1}>hello</p>, <p key={2}>world</p>]}
    </div>
);

// 转换后
"use strict";
var element = React.createElement(
    "div",
    null,
    React.createElement("h3",null,"example"),
    [
        React.createElement("p",{key:1},"hello"), 
        React.createElement("p",{key:2},"world")
    ]
);

const semver = require('semver/preload');

function getNextVersion(version, level, preid) {
  if (!preid) {
    return semver.inc(version, level);
  }
  if (version.includes('-')) {
    return semver.inc(version, 'prerelease', preid);
  }
  return semver.inc(version, `pre${level}`, preid);
}

it('getNextVersion', () => {
    expect(getNextVersion('0.1.0', 'patch')).toBe('0.1.1');
    expect(getNextVersion('0.1.1', 'minor')).toBe('0.2.0');
    expect(getNextVersion('0.2.1', 'major')).toBe('1.0.0');

    expect(getNextVersion('0.1.0-alpha.0', 'patch')).toBe('0.1.0');
    expect(getNextVersion('0.1.0-alpha.0', 'minor')).toBe('0.1.0');
    expect(getNextVersion('0.1.0-alpha.0', 'major')).toBe('1.0.0');

    expect(getNextVersion('0.1.0-alpha.0', 'patch', 'beta')).toBe('0.1.0-beta.0');
    expect(getNextVersion('0.1.0-beta.0', 'patch', 'beta')).toBe('0.1.0-beta.1');
    expect(getNextVersion('0.1.0-beta.0', 'minor', 'beta')).toBe('0.1.0-beta.1');

    expect(getNextVersion('0.8.2', 'major', 'beta')).toBe('1.0.0-beta.0');
    expect(getNextVersion('0.8.2', 'patch', 'beta')).toBe('0.8.3-beta.0');
});

function validatePackageName(packageName) {
    return packageName && /^(@\w+\/)?[\w-]+$/.test(packageName);
}

function getNpmLatestVersion(packageName, {preid, limitid}) {
  if (!validatePackageName(packageName)) {
    throw new Error('Illegal package name');
  }

  let stdout = execSync(`npm show ${packageName} versions --json`);
  let versions = JSON.parse(stdout.toString('utf8'));
  if (limitid) {
    versions = versions.filter(item => item < limitid);
  }
  versions = versions.reverse();
  if (preid) {
    return versions.find(item => item.includes(preid));
  }
  return versions[0];
}

fse.writeJSONSync(package.json路径，具体json)

:::javascript
app.directive('slide', ['$rootScope', function ($rootScope) {
return {
    restrict: 'AE',
    templateUrl: './views/slide-tpl.html',
    replace: false,
    scope: {
        list: '=',
        index: '='
    },
    link: function ($scope, elem, attr) {
        $scope.prev = function () {
            if ($scope.index <= 0) {
                $scope.index = $scope.list.length - 1;
            } else {
                $scope.index--;
            }
        };

        $scope.next = function () {
            if ($scope.index >= ($scope.list.length - 1)) {
                $scope.index = 0;
            } else {
                $scope.index++;
            }
        };

        $scope.moveTo = function (index) {
            $scope.index = index;
        };

        var slide = {
            timer: null,
            box: elem[0],
            init: function () {
                this.addTimer();
                this.addEvent();
            },
            addTimer: function () {
                this.timer = setInterval(function () {
                    $scope.next();
                    $scope.$digest();
                }, 4000);
            },
            removeTimer: function () {
                clearInterval(this.timer);
                this.timer = null;
            },
            addEvent: function () {
                elem.on('mouseenter', function () {
                    slide.removeTimer();
                });
                elem.on('mouseleave', function () {
                    slide.addTimer();
                });
            }
        };
        slide.init();

        $rootScope.$on('$locationChangeStart', function () {
            slide.removeTimer();
        });
    }
};
}]);

:::javascript
<div class="banner animate-show" ng-repeat="item in list">
    <img class="animate-show" ng-src="{{item}}">
</div>
<div class="ctrl">
    <span class="prev btn" ng-click="prev()"></span>
    <span class="next btn" ng-click="next()"></span>
</div>
<div class="dot">
    <span ng-repeat="item in list" ng-class="{true: 'active', false: ''}[$index==index]"
        ng-click="moveTo($index)"></span>
</div>

`
const {onClick, value} = this.props;
return (
    <Comp onClick={() => onClick(value)} />
);
`

`
onClick = () => {
     const {onClick, value} = this.props;
     onClick(value);
}

render() {
    return (
         <Comp onClick={this.onClick} />
    );
}
`

`
const {onClick, value} = this.props;
const onClickMemo = useCallback(() => onClick(value), [onClick, value]);
return (
    <Comp onClick={onClickMemo} />
);

const computedVal = useMemo(() => 
    props.a + props.b,
    [props.a, props.b]
);
return <div>{computedVal}</div>;
`

function newWindow(url) { 
    var a = document.createElement('a'); 
    a.setAttribute('href', url); 
    a.setAttribute('target', '_blank');
    document.body.appendChild(a);
    a.click(); 
}

var tempWindow = window.open('', '_blank', '');
tempWindow.location.href = 'http://www.baidu.com';

var win = window.open('');
win.document.write('文件下载中，请耐心等待...');
ajax.request(params).then(res => {
    win.location.href = res.fileName;
}, () => {
    win.close();
    // 母页面报错TODO
});

function download(url) {
    var divId = '__DownloadContainer__';
    var iframeId = '__DownloadIframe__';
    var div = document.getElementById(divId);
    if (!div) {
        div = document.createElement('div');
        div.id = divId;
        div.innerHTML = '<iframe id="' + iframeId
            + '" name="' + iframeId + '"></iframe>';
        div.style.display = 'none';
        document.body.appendChild(div);
    }
    div.getElementsByTagName('iframe')[0].src = url;
}

ajax.request(params).then(res => {
    download(res.fileName);
}, () => {
    // 母页面报错TODO
});

`
import {compose, keys, pick} from 'ramda';
import {withFormik} from 'formik';
import * as yup from 'yup';
import * as validators from './validator';

const selectors = {
    contactList: contactSelector,
    name: makeMcSelector('name')
};
const formikOption = {
    mapPropsToValues: pick(keys(selectors)),
    validationSchema: yup.object().shape(validators),
    handleSubmit({name, contactList}, meta) {
        meta.props.save({name, contactList, meta});
    },
    enableReinitialize: true
};

const enhance = compose(
    connect(mapState, mapDispatch),
    withFormik(formikOption)
);
export default enhance(你的顶级组件);
`

`
import * as yup from 'yup';

export const name = yup
    .string()
    .max(40, '商品中心名称最多 40 个字符')
    .required('商品中心名称必填');

const contactName = yup
    .string()
    .matches(/^(?!.*;).*$/, '联系人名中不得带有“;”号')
    .required('联系人必填');

const email = yup
    .string()
    .email('必须输入正确的 Email 格式')
    .required('Email 地址必填');

export const contactList = yup.array().of(
    yup.object().shape({name: contactName, email})
);
`

`
validate({radio, inputA, inputB}) {
    const errors = {};
    if (radio === 'A' && inputA === '') {
        errors.inputA = 'inputA不能为空';
    }
    if (radio === 'B' && inputB === '') {
        errors.inputB = 'inputB不能为空';
    }
    return errors;
}
`

`
<Form>
    <FieldMcName name="name" />
    <FieldContact name="contactList" />
    <SubmitButtons />
</Form>
`

`
const withFastField = Control => props => (
    <FastField {...props}>
        {fieldProps => <Control {...props} {...fieldProps} />}
    </FastField>
);
const withFieldArray = Control => props => (
    <FieldArray {...props}>
        {fieldProps => <Control {...props} {...fieldProps} />}
    </FieldArray>
);
`

`
const FieldMcName = ({field, form}) => {
    return (
       .... 其它代码
       <Input
            name={field.name}
            value={field.value}
            onChange={field.onChange}
            onBlur={field.onBlur}
            placeholder="40 个字符以内"
        />
    );
};
export default withFastField(FieldMcName);

export default withFastArray(FieldContact); // 不再赘述
`

`
const setFieldValue = form.setFieldValue;
const name = field.name;
const handleChange = useCallback(checked => setFieldValue(name, checked), [setFieldValue, name]);
`

`
export default connect(({handleCancel, formik: {errors, isSubmitting, handleSubmit, validateForm}}) => {
    useEffect(() => validateForm(), [validateForm]);
    const disabled = useMemo(() => isNotEmpty(errors), [errors]);
    return (
        <Fragment>
             <Button skin="important" disabled={disabled} onClick={handleSubmit} loading={isSubmitting}>
                确定
            </Button>
            <Button onClick={handleCancel} style={{marginLeft: '10px'}}>取消</Button>
        </Fragment>
    );
});
`

window.AudioContext = window.AudioContext || window.webkitAudioContext;

(function () {
var timerId = -1;
var MUSIC_KEYS = [
    196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23,
    392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46,
    783.99, 880.00, 987.77, 1046.50
];

window.stopAudio = function () {
    if (timerId >= 0) {
        clearInterval(timerId);
        timerId = -1;
    }
};

function getMusic() {
    var arr = [
        '12315 66865 668 565 653531231  ', // 我去上学校
        '5353531 24325  5353531 24321  2244315 24325  5353531 24321  ', // 粉刷匠
        '3 1 331 33565  6665444 23212  3 1 3 1 33566  8 556 3 21235  8 556 3 21231  ', // 数鸭子
        '123 45432  32345  123 45432  34321 ', // 一朵玫瑰花
        '1 3 531 5321265 3 5 8a985565888 3 21235586532111 ', // 小母鸡
        '334554321123322 334554321123211', // 欢乐颂
        '5854321 112331345  5854352 43265 231', // 我爱北京***
        '89a58aa 989cccc 8788888 7878765 5566666 5353598 5aaabc88a9', // 学猫叫
        'a8966 acaca 67865  5 aca68 9998a 8 6' // 芒种
    ];
    return arr[Math.floor(Math.random() * arr.length)];
}

window.playAudio = function (options) {
    if (!window.AudioContext) {
        console.log('当前浏览器不支持Web Audio API');
        return;
    }
    options = options || {};

    var arrFrequency = [];
    var music = getMusic().split('');
    var offset = 6;
    for (var i = 0; i < music.length; ++i) {
        music[i] = parseInt(music[i], 16);
        music[i] > 11 && (offset = -1); // 音域太高，必须降一个key
    }
    for (var i = 0; i < music.length; ++i) {
        arrFrequency.push(isNaN(music[i]) ? ' ' : MUSIC_KEYS[music[i] + offset]);
    }

    // 创建新的音频上下文接口
    var audioCtx = new AudioContext();
    var start = 0;
    stopAudio();
    timerId = setInterval(function () {
        var frequency = arrFrequency[start]; // 当前频率
        if (!frequency) { // 播放结束
            if (!options.isCircle) { // 非循环播放就停止
                stopAudio();
                return;
            }
            start = 0; // 否则轮播
            frequency = arrFrequency[start];
        }
        start++;
        if (frequency === ' ') { // 空格表示节奏停顿
            return;
        }

        // 创建一个OscillatorNode，它表示一个周期性波形（振荡），基本上来说创造了一个音调
        var oscillator = audioCtx.createOscillator();
        // 创建一个GainNode，它可以控制音频的总音量
        var gainNode = audioCtx.createGain();
        // 把音量，音调和终节点进行关联
        oscillator.connect(gainNode);
        // audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
        gainNode.connect(audioCtx.destination);
        // 指定音调的类型，single|square|triangle|sawtooth
        oscillator.type = options.playType || 'triangle';
        // 设置当前播放声音的频率，也就是最终播放声音的调调
        oscillator.frequency.value = frequency;
        // 当前时间设置音量为0
        gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
        // 0.01秒后音量为1
        gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
        // 音调从当前时间开始播放
        oscillator.start(audioCtx.currentTime);
        // 1秒内声音慢慢降低，是个不错的停止声音的方法
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
        // 1秒后完全停止声音
        oscillator.stop(audioCtx.currentTime + 1);
    }, options.interval || 250);
};
})();

// 调用
window.playAudio();
window.playAudio({isCircle: true}); // 循环播放
window.playAudio({interval: 167}); // 六分之一节拍

/**
 * 重试机制
 *
 * @param {Function} fn 该函数返回 Promise
 * @param {number=} retries 重试次数
 * @param {string=} errMsg 错误文案
 * @return {Promise}
 */
const retry = (fn, {retries = 2, errMsg = '操作失败'} = {}) => {
    return fn().catch(e => {
        if (--retries) {
            return retry(fn, {retries, errMsg});
        }
        return Promise.reject(`${errMsg}，${e}`);
    });
};

test('retry', async () => {
    const promises = [Promise.resolve('OK'), Promise.reject(), Promise.reject()];
    let len = promises.length;
    const result = await util.retry(() => promises[--len], {retries: 3});
    expect(result).toEqual('OK');
});

const pause = duration => new Promise(res => setTimeout(res, duration));
const retryWithDelay = (fn, {retries = 2, errMsg = '操作失败', delay = 100} = {}) => {
    return fn().catch(e => {
        if (--retries) {
            return pause(delay).then(() => retryWithDelay(fn, {retries, errMsg, delay}));
        }
        return Promise.reject(`${errMsg}，${e}`);
    });
};

function fibonacci(n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}

[fibonacci(5)]
[fibonacci(4) + fibonacci(3)]
[(fibonacci(3) + fibonacci(2)) + (fibonacci(2) + fibonacci(1))]
[((fibonacci(2) + fibonacci(1)) + (fibonacci(1) + fibonacci(0))) + ((fibonacci(1) + fibonacci(0)) + fibonacci(1))]
[fibonacci(1) + fibonacci(0) + fibonacci(1) + fibonacci(1) + fibonacci(0) + fibonacci(1) + fibonacci(0) + fibonacci(1)]

function fibonacci2(n, a = 0, b = 1) {
    if (n === 0) {
        return a;
    }
    return fibonacci2(n - 1, b, a + b);
}

fibonacci2(5)
fibonacci2(5, 0, 1)  
fibonacci2(4, 1, 1)  
fibonacci2(3, 1, 2)  
fibonacci2(2, 2, 3)  
fibonacci2(1, 3, 5)  
fibonacci2(0, 5, 8)

function main() {
    foo();
    bar();
}

function fact(n, r) { // TODO这里把 n, r 作为迭代变量提出来
    if (n <= 0) {
        return r;
    } else {
        return fact(n - 1, r * n); // TODO用迭代函数替代 fact
    }
}

function fact(_n, _r) { // _n, _r 用作初始化变量
    var n = _n;
    var r = _r; // 将原来的 n, r 变量提出来，成为迭代变量
    function _fact(_n, _r) { // 迭代函数非常简单，就是更新迭代变量而已
        n = _n;
        r = _r;
    }
    _fact_loop: while (true) { // 生成一个迭代循环
        if (n <= 0) {
            return r;
        } else {
            _fact(n - 1, r * n);
            continue _fact_loop; // 执行迭代函数，并且进入下一次迭代
        }
    }
}

function partition(arr, low, high) {
    let i = low;
    let j = high + 1;
    let k = arr[low]; // 尽量不要固定基准；如果基本有序，则随机基准；如果不确定也可以选择三数取中
    while (i < j) {
        while (arr[++i] < k && i < j);
        while (arr[--j] > k);
        if (i < j) {
            let temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
    }
    arr[low] = arr[j];
    arr[j] = k;
    return j;
}

function qsort(arr, low, high) {
    if (arguments.length === 1) {
        low = 0;
        high = arr.length - 1;
    }
    if (low < high) {
        const index = partition(arr, low, high);
        qsort(arr, low, index - 1);
        qsort(arr, index + 1, high);
    }
}

function qsort1(arr, low, high) {
    if (arguments.length === 1) {
        low = 0;
        high = arr.length - 1;
    }
    while (low < high) { // TODO如果high和low比较接近时，用插入排序
        const index = partition(arr, low, high);
        qsort1(arr, low, index - 1);
        low = index + 1; // 尾递归
    }
}

while (true) {
    console.log(1);
}

function do() {
    console.log(1);
    do();
}

function forEach(arr) {
    for (var i = 0; i < arr.length ; ++i) {
        console.log(arr[i]);
    }
}

function forEach(arr) {
    var i = 0; // 循环变量丢外面
    function go() {
        console.log(arr[i]);
        if (++i < arr.length) {
            go();
        }
    }
    go();
}

function forEach(arr, i = 0) { // 循环变量传值
    console.log(arr[i]);
    if (++i < arr.length) {
        forEach(arr, i);
    }
}

// bad
declare type Foo = number[];
declare interface Global {
    foo: Foo;
}
// Good
import Foo from 'xxxx';
export interface Global {
    foo: Foo;
}

// Bad，实在不行尽量unknown，unknown不会具有传染特性，在使用前必须通过as类型断言成具体的类型
export function clone(data: any): any
// Good，泛型让返回类型得到正确的推导
export function clone<T>(data: T): T

// Bad
class LRUCache {
    add(key: string, value: any) {}
    get(key: string): any {}
}
// Good，容器类，工具类，尽可能考虑用泛型
class LRUCache<T> {
    add(key: string, value: T) {}
    get(key: string): T {}
}

// bad
type ENV = {
    type: 'logic' | 'view',
    platform: 'swan' | 'web' | 'talos',
    aa: string | undefined
}
// Good
interface ENV {
    type: 'logic' | 'view';
    platform?: 'swan' | 'web' | 'talos';
    aa?: string;
}
// 注意 interface 中，尽量用;而非, 
// 也尽量使用 ? 而非 |undefined 声明可缺省值

// bad
const eventData = <EventData>JSON.parse(message);
// Good
const eventData = JSON.parse(message) as EventData;

// bad
const arr: Array<number> = [1, 2, 3];
type loader = Array<Promise> => Array<unknown>;

// Good
const arr: number[] = [1, 2, 3];
type loader = Promise[] => unknown[];

// 当遇到复杂类型时，建议为数组子项类型定义别名，增加可读性
type EventListener = (string, unknown) => void;
type EventListeners = EventListener[];
// 相比于 type EventListeners = ((string, unknown) => void)[]; 更加清晰

// bad
type request = (url: String) => Boolean;
// Good
type request = (url: string) => boolean;

// bad
const os: string = 'android';
let length: number = 10;
// Good
const os = 'android';
let length = 10;

// 注意，此规则仅针对基础类型（primary type），如果变量是非基础类型，则需要根据实际情况选择
type OS = 'android' | 'ios';
let os: OS = 'android'; // 可变的 union type，需要申明
const os = 'android'; // 不可变的话，使用 const 就没必要申明

type RelativeApiPath = `/data/${string}`;
type AbsoluteApiUrl = `https://xx.com/data/${string}`;

function replaceApiUrl(path: RelativeApiPath): AbsoluteApiUrl {
  // 省略
}

// Bad
const fill: string = 'red';
const stroke: string = 'black';
// Good
type Color = string;
const fill: Color = 'red';
const stroke: Color = 'black';

// 在未来如果想要对类型进行修改，比如颜色支持[r, g, b, a]这样的数组，我们可以非常方便的进行重构
type Color = string | number[];
// 你如果之前偷了懒，那后面就得面对几百个 : string 头大

// bad
function add(a:number,b:number){
  return a+b;
}
function sub(a:number,b:number){
  return a-b;
}
function mult(a:number,b:number){
  return a*b;
}
function div(a:number,b:number){
  return a/b;
}

// Good，提取出公共的函数类型，可简化如下
type Binary = (a:number,b:number) =>number;
const add: Binary = (a,b) => a+b;
const sub: Binary = (a,b) => a-b;
const mult: Binary = (a,b) => a*b;
const div: Binary= (a,b) => a/b;

/**
 * 有一个函数：setMessage
 * 第一个参数值只能取init或update，如果是init，则第二个参数必须是{initData: 字符串}，反之{updateData: 字符串}，举个例子：
 * setMessage('init', {initData: 'aa'});
 * setMessage('update', {updateData: 'bb'});
 */
interface InitMessageParams {
    initData?: string;
}
interface UpdateMessageParams {
    updateData?: string;
}
export function setMessage(type: 'update', message: UpdateMessageParams): void
export function setMessage(type: 'init', message: InitMessageParams): void

interface MessageParamsMap {
    init: InitMessageParams;
    update: UpdateMessageParams;
}
type MessageType = keyof MessageParamsMap;
export function setMessage<T extends MessageType>(type: T, message: MessageParamsMap[T]): void

// Good
interface ArrayLike<T> {
    readonly length: number;
    // 可以数字下标访问
    readonly [n: number]: T;
}
export function cloneArray<T>(arr: ArrayLike<T>): Array<T>
// 这个例子就同时体现了入参宽松，出参严格，入参可以接受普通的数组，也可以是Float32Array这样的静态类型数组，亦或者伪数组
// 因此入参类型定义成了拥有length属性，而且可以数字下标访问的对象。而出参因为都转成数组了，所以类型为Array<T>。

// ok
declare const foo: number | string;
const bar = foo.toFixed(2); // 报错，因为 foo 有可能为字符串，不存在 toFixed 方法
if (typeof foo === 'number') {
    const bar = foo.toFixed(2);
}

// Bad
interface Point {
    type: 'string' | 'number';
    x: string | number;
    y: string | number;
}
// Good, 有利于收窄
interface StringPoint {
    type: 'string';
    x: string;
    y: string
}
interface NumberPoint {
    type: 'number';
    x: number;
    y: number;
}
type Point = StringPoint | NumberPoint;
function print(point: Point) {
    if (point.type === 'number') {
        console.log(point.x.toFixed(2)); // point 已被推为 NumberPoint，所以 toFixed 没问题
    }
}

// bad
interface StatusMap {
    loaded: boolean;
    created: boolean;
    attached: boolean;
}
function getStatus(name: 'loaded' | 'created' | 'attached'): boolean {
    return statusMap[name];
}
// Good，使用 keyof
type Status = keyof StatusMap;
function getStatus(name: Status): boolean {
    return statusMap[name];
}

// bad
type Lifecycle = 'launch' | 'show' | 'hide';
interface LifecycleEventMap {
  launch: {
    foo: string;
    bar: () => unknown;
  },
  show: {
    foo: string;
    bar: () => unknown;
  },
  hide: {
    foo: string;
    bar: () => unknown;
  }
}
// Good，使用映射类型（Mapped Type）定义新类型
interface LifecycleEventMap<Lifecycle> {
    [key in Lifecycle]: {
        foo: string;
        bar: () => unknown;
    };
}
// ps，补充于2021-11-24，上面疑似不太行，要下面这样子
type LifecycleEventMap = Record<Lifecycle, {
    foo: string;
    bar: () => unknown;
}>;

// Good，使用 Partial、Readonly、Pick、Omit 等定义新类型
interface PageInfo {
  pageConfig: PageConfig;
  type: PageType;
  pagePath: string;
  packagePath: string;
  routePath: string;
}
type PagePathInfo = Pick<PageInfo, 'pagePath' | 'packagePath' | 'routePath'>;

interface Map<T> {
  [index: string]: T;
}
let keys = keyof Map<string>; // string | number
// why？可以看：https://stackoverflow.com/questions/51808160/keyof-inferring-string-number-when-key-is-only-a-string/51808262#51808262
// 我想强行转成 string，咋整？
type Extract<T, U> = T extends U ? T : never;
let keys: Extract<keyof Map<string>, string>; // string
// 嵌套索引签名，尽量不要把字符串索引签名与有效变量混合使用
// Good
interface NestedCSS {
  color?: string;
  nest?: { // 另外开一个属性
    [selector: string]: NestedCSS;
  };
}
// bad
interface NestedCSS {
  color?: string;
  [selector: string]: string | NestedCSS;
}
const failsSilently: NestedCSS = {
  colour: 'red' // 'colour' 不会被捕捉到错误
};

output: {
    path: paths.dllPath,
    filename: '[name]_[hash].js', // 原来是[name].js
    library: '[name]_[hash]' 
}

const AssetsPlugin = require('assets-webpack-plugin');

plugins: [
    new AssetsPlugin({
        useCompilerPath: true,
        filename: 'webpack-dll-assets.js',
        processOutput: assets => {
            return 'window.WEBPACK_DLL_ASSETS=' + JSON.stringify(assets);
        }
    })
]

<script>
    document.write('<script type="text/javascript" src="/store/dll/webpack-dll-assets.js"><\/script>');    
</script>
<script>
    document.write('<script src="/store/dll/' + window.WEBPACK_DLL_ASSETS.lib.js + '"><\/script>');    
</script>

`
console.log(1);

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => {
        console.log(3);
    });
});

new Promise((resolve, reject) => {
    console.log(4);
    resolve(5);
}).then(data => {
    console.log(data);
    Promise.resolve().then(() => {
        console.log(6);
    }).then(() => {
        console.log(7);
        setTimeout(() => {
            console.log(8);
        }, 0);
    });
});

setTimeout(() => {
    console.log(9);
}, 0);
console.log(10);
`

`
console.log('start');

setTimeout(() => {
    console.log(111);
    setTimeout(() => {
        console.log(222);
    }, 0);
    setImmediate(() => {
        console.log(333);
    });
    process.nextTick(() => {
        console.log(444);  
    });
}, 0);

setImmediate(() => {
    console.log(555);
    process.nextTick(() => {
        console.log(666);  
    });
});

setTimeout(() => {
    console.log(777);
    process.nextTick(() => {
        console.log(888);   
    });
}, 0);

process.nextTick(() => {
    console.log(999);  
});
console.log('end');
`

`
console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    });
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5');
    });
}, 0);

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8');
});
process.nextTick(function() {
    console.log('6');
});

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    });
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12');
    });
}, 0);
`