var f = function(data){
    alert(data.name)
}
var _script = document.createElement('script');
_script.type = 'text/javascript'
_script.src = 'http://localhost:8888/jsonp?callback=f'
document.head.appendCild(_script);
1.
2.
3.
4.
5.
6.
7.

//node处理
var query = _scr.query;
var params = qs.parse(query);
var f = '';
f = params.callback;
res.writeHead(200,{'Content-Type','text/javascript'})
res.write(f + "({name:'hello world'})")
res.end
1.
2.
3.
4.
5.
6.
7.
8.

//php处理(注意输出格式)
$data = array(
    'rand' => $_GET['random'],
    'msg' => 'Success'
);

echo $_GET['callback'].'('.json_encode($data).')';
1.
2.
3.
4.
5.
6.
7.

//node处理
if(req.headers.origin){
    res.wirteHead(200,{
        'Content-type':'text/html;charset=UTF-8',
        'Access-Control-Allow-Origin':'*', // *通配，或者安全考虑替换为指定域名
    });
    res.write('cors');
    res.end();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

//时间戳方式
function throttle(fn,delay){
    let pre = Date.now();
    return function(){
        let context = this;
        let args = arguments;
        let now = Date.now();
        if(now - pre > delay){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}
//定时器方式
function throttle(fn,delay){
    let timer = null;
    return function(){
        let context = this;
        let args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },delay)
        }
    }
}
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.

//定时器方式
function debounce(fn,delay){
    let timer = null;
    return function(){
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context,args);
        },delay)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

const name = 'Jack';
name = 'Tom'  //TypeError:Assignment to constant
1.
2.

const person = {
    name : 'Jack‘
}
person.name = 'Tom'
1.
2.
3.
4.

console.log(a) // undefined
var a = 1
function b(){
    console.log(a)
}
b() // 1
1.
2.
3.
4.
5.
6.

var a = undefined
console.log(a) // undefined
a = 1
function b(){
    console.log(a)
}
b() // 1
1.
2.
3.
4.
5.
6.
7.

// 改变原数组的方法：
pop()  // 删除数组中的最后一个元素，把数组长度减 1，并且返回它删除的元素的值
push() // 该方法可把它的参数顺序添加到数组的尾部。它直接修改数组，返回后修改数组的长度
reverse() // 将数组元素倒序，改变原数组
unshift() // 可以向数组开头增加一个或多个元素，并返回新的长度
shift() // 数组的第一个元素从其中删除，并返回第一个元素的值，减少数组的长度
sort() // 在原数组上进行排序，不生成副本
splice(start,删除的个数,插入的元素) //可删除从index处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素
// 不改变原数组：
concat() // 用于连接两个或多个数组，不改变原数组，返回一个新的数组
join() // 将数组中的所有元素都转化为字符串并拼接在一起，默认使用逗号，返回最终生成的字符串
map() // 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组，不改变原数组
indexof // 返回指定位置的元素值或字符串，通过搜索值与下标寻找
every() // 如果每一项都为true，则返回true
some() // 某一项返回true，则返回true
forEach() // 对数组的每一项运行给定函数，没有返回值
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

/ 接口数据映射
let arr = res.map(item=>{
    return {
        name:item.name,
        age:item.age,
        sex:item.sex === 1? '男':item.sex === 0?'女':'保密',
        avatar: item.img
    }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.

// 求一个字符串中每个字母出现的次数
let str = 'abcabdaac'
str.split('').reduce((res,cur)=>{
    res[cur] ? res[cur]++ : res[cur] = 1
    return res
},{})  
// {a: 4, b: 2, c: 2, d: 1}
1.
2.
3.
4.
5.
6.
7.

Array.prototype._map = fn => {
    let newArr = [];
    let me = this;
    for(let i = 0;i<me.length;i++){
        newArr.push(fn(me[i]));
    }
    return newArr;
}
1.
2.
3.
4.
5.
6.
7.
8.

Array.prototype._reduce = (callback, initialValue) => {
    let arr = this;
    let base = typeof initialValue == 'undefined' ? arr[0] : initialValue;
    let startPoint = typeof initialValue === 'undefined' ? 1 : 0;
    arr.slice(startPoint).forEach((val, index) => {
        base = callback(base, val, index + startPoint, arr)
    })
    return base
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

//Ajax原生简单实现
let xhr = XMLHttpRequest;
xhr.onreadystatechange = () => {
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }else{
            console.error(xhr.statusText);
        }
    }
}
xhr.onerror = e => {
    console.error(xhr.statusText);
}
xhr.open('GET','/EndPonint',true);
xhr.send(null);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

fetch('./api/demo.json')
    .then((response) => {
        response.json().then((data) => {
            ...
        });
    });
    .catch((err) => {...});
1.
2.
3.
4.
5.
6.
7.

// Promise的模拟实现
class _Promise {
    constructor(fn) {
        let _this = this;
        this._queue = [];
        this._success = null;
        this._error = null;
        this.status = '';
        fn((...arg) => {
            // resolve
            if (_this.status != 'error') {
                _this.status = 'success';
                _this._success = arg;
                _this._queue.forEach(json => {
                    json.fn1(...arg)
                })
            }
        }, (...arg) => {
            // reject
            if (_this.status != 'success') {
                _this.status = 'error';
                _this._error = arg;
                _this._queue.forEach(json => {
                    json.fn2(...arg)
                })
            }
        })
    }

    then(fn1, fn2) {
        let _this = this;
        return new _Promise((resolve, reject) => {
            if (_this.status == 'success') {
                resolve(fn1(..._this._success))
            } else if (_this.status == 'error') {
                fn2(..._this._error)
            } else {
                _this._queue.push({fn1,fn2});
            }
        })
    }
}
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.
36.
37.
38.
39.
40.
41.
42.

//Promise.all的模拟实现(race的实现类似)
Promise.prototype._all = interable => {
    let results = [];
    let promiseCount = 0;
    return new Promise(function (resolve, reject) {
        for (let val of iterable) {
            Promise.resolve(val).then(res => {
                promiseCount++;
                results[i] = res;
                if (promiseCount === interable.length) {
                    return resolve(results);
                }
            }, err => {
                return reject(err);
            })
        }
    })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

/经典案例：斐波那契数列 ：1, 1, 2, 3, 5, 8, 13, …
let count = 0;
const fib = (()=>{
    let arr = [1,1]
    return function(n){
        count++;
        let res = arr[n];
        if(res){
            return res;
        }else{
            arr[n] = fib(n-1) + fib(n-2);
            return arr[n]
        }
    }
})();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

//通过闭包特性，模拟私有变量
const book = (function () {
    var page = 100;
    return function () {
        this.auther = 'okaychen';
        this._page = function () {
            console.log(page);
        }
    }
})();

var a = new book();
a.auther  // "okaychen"
a._page() // 100
a.page    // undefined
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

for (var i=1; i<=5; i++) { 
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}
// 经典老问题，输出结果：6 6 6 6 6
// js执行的时候首先会先执行主线程,异步相关的(setTimeout)会存到异步队列里,
// 当主线程执行完毕开始执行异步队列,主线程执行完毕后,此时 i 的值为 6,
// 所以在执行异步队列的时候,打印出来的都是 6

// 利用闭包来取正确值
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        }
    })(i), i*1000 );
}

// 方案二：或者使用ES6的let，这里let本质也是形成了一个闭包
for (let i=1; i<=5; i++) { 
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}
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.

let obj = { }
1.

obj.proto = ClassA.prototype
1.

ClassA.call(obj); //{}.构造函数()
1.

// new构造函数的模拟实现
const _new = function(){
    let obj = new Object();
    let _constructor = [].shift.call(arguments);
    // 使用中间函数来维护原型关系
    const F = function(){};
    F.prototype = _constructor.prototype;
    obj = new F();

    let res = _constructor.apply(obj,arguments);
    return typeof res === 'object' ? res || obj : obj;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

let element = document.getElementById("some_element");
let myObj = new Object();
myObj.element = element;
element.someObject = myObj;
// 变量myObj有一个element属性执行element，而变量element有一个名为someObject属性指回myObj，因为循环引用，引用计数法将没办法回收该内存

// 我们需要手动切断它们的循环引用，防止内存泄露
myObj.element = null;
element.someObject =null;
1.
2.
3.
4.
5.
6.
7.
8.
9.

// 举个栗子：正则验证字符串
// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}
check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// 需要复用第一个reg参数，Currying后，将两个参数分开，可以直接调用hasNumber，hasLetter等函数
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}
let hasNumber = curryingCheck(/\d+/g)
let hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasLetter('21212')      // false
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

// 比如：解决原生方法在现代浏览器和IE之间的兼容问题
// 提前返回: 使用函数立即调用进行了一次兼容判断（部分求值），返回兼容的事件绑定方法
// 延迟执行：返回新函数，在新函数调用兼容的事件方法。等待addEvent新函数调用，延迟执行
const addEvent = (function() {
    if(window.addEventListener) {
        return function(ele, type, fn, isCapture) {
            ele.addEventListener(type, fn, isCapture)
        }
    } else if(window.attachEvent) {
        return function(ele, type, fn) {
             ele.attachEvent("on" + type, fn)
        }
    }
})()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

// js中bind实现机制正是Currying
Function.prototype.bind = function (context) {
    var _this = this
    var args = Array.prototype.slice.call(arguments, 1)

    return function() {
        return _this.apply(context, args)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.