JavaScript核心编程(一点点补充)

2018年8月15日18:11:22

Promise 异步同步 闭包 对象 This 回调 BulaBulaBula🙄🙄🙄
一个一个一个一个搞 这些个东西搞懂了 然后去搞Nodejs 别人图快 我就图慢 慢慢来

• this本质就是个隐式参数
  bind=>就是显式的确定this是什么
  bind window 给foo

function foo(){console.log(this)}
var obj = foo.bind(document)
console.dir(obj)
obj() // document

• this,new实例化与this

function foo(){console.log(this)}
new foo()  //{}

new foo()调用时js内部会创建临时空对象 temp = {}
然后把foo()的this 绑定到空对象上去 binded = foo.bind(temp) binded()foo的this 就是空对象

• 原型链 __proto__
  对象有此属性 js一切皆对象

__proto__.__proto__.__proto__ 这就是原型链

var obj = {}  ====> var obj = new Object()
function foo(){}  ====> var foo = new Function()

实例化时 做的事情其实就是
obj.__proto__指向 Object.prototype

对象的原型 与 类的原型

var date = new Date()
date.__proto__ === Date.prototype //true
Date.prototype.name = 'aili'
date.name   // aili

function AA(n,c){
    this.name =n
    this.color=c
    this.log=()=> console.log("color:"+this.color+"name:"+this.name)
}

var a = new AA("aili","blue")
console.log(a.name)
console.log(a.constructor === AA) //true
console.log(a.__proto__ === AA.prototype)

所以看到这里就很明白了
date.prototype 是没有的 只有类才有prtotype属性 对象只有proto属性而没有prototype

• 函数式编程
  1.first-class function 作为参数传入函数

2.higher-order-function 返回函数的函数

loadash.js underscorejs升级而来的 这个库很多很多很多人推荐看源码

• closure - 域
  
  很明显 返回的匿名函数 a1 与 a2 变量存储在了 Closure里 才能访问到这两个变量

• IIFE 立即执行函数表达式 ------ 模块化
  immediately invoked function expression
  var foo = function(){}
  function foo(){}
  IIFE就是基于函数表达式而产生的

(function(){}()) 会返回本身 并立即执行

;()()    ;是为了防止错误

最常用的模块实现方式 ----- es6之前 没有模块的概念 es5实现模块的方式就是靠IIFE
例子 购物车

var Cart = (function(){
    var product_list =[]

    return {
        addProduct:function(p){
            product_list.push(p)
        },
        getProducts:function(){
            return product_list
        },
        getToltal:function(){
            return product_list.reduce((total,p)=>{
                return total+=parseInt(p.price)
            },0)
        }
    }
}())

这个例子我看的好舒服 代码要是这么写 那该多舒服啊

• 回调函数 管理方法
  有异步执行 肯定要用到回调
  提取是一个程序员的基本技能
  回调函数比较多的时候 做成模块

var handlerMoudle = (function(){
    
    // do something 

    
    return {
        h1:function(){},
        h2:function(){}
    }
}())

//主代码可以比较清晰的用回调函数
document.addEventListener('click',handlerMoudle.h1)

更高级的promise aysnc await 等等 有一定的代价 有一定的场景下才能用高级方法

实际开发的时候 多层回调 这里就牵扯到封装能力和提取能力 这不是一天两天能练成的 多看多写 就okay

document.addEventListener('click',()=>{
    //
    //
    $.get(...,function(){
        //二次回调
    })
})

现在有了export import 就更方便

• promise 状态容器

function foo(){
    return new Promise(function(fullfill,reject){
        setTimeout(function(){
            fullfill(1)
        },1000)
    })
}

foo()
.then(function(input){console.log(input); return ++input})
.then(function(input){
    console.log(input)
})

• 模块间的通信与解耦 PUB/SUB

var Cart = (function(pubsub){
    var product_list =[]

    return {
        addProduct:function(p){
            product_list.push(p)
            pubsub.publish('new-product',this.getToltal)
            pubsub.publish('promotion-check',p)
        },
        getProducts:function(){
            return product_list
        },
        getToltal:function(){
            return product_list.reduce((total,p)=>{
                return total+=parseInt(p.price)
            },0)
        }
    }
}(pubsub))

var pubsub = (function(){
    var events = {}

    return {
        subscribe:function(event,listner){
            events[event] = events[event] || []
            events[event].push(listner)-1
        },
        publish:function(event,info){
            events[event].forEach(item => {
                item(info !=undefined ? info : {})
            });
        }
    }
})()

var cartUI = (function(pubsub){
    pubsub.subscribe('new-product',function(total){
        console.log('total',total);
    })
}(pubsub))

这三个模块 只会和pubsub打交道 不会相互引用 说实话 这样的模块写多了 我就疯了 hold不住

• 同步异步
  这里要用到一个工具Loupe Loupe 可以清晰的查看浏览器执行的栈和队列

一些例子我还写 测试了一下
核心就是把事件的优先级 排好 这是程序员最该做的事情 因为栈是先进后出
执行顺序大概就是同步先进站 异步写入内存 然后进队列先进先出 等待 然后进栈 执行
说的有点笼统 其实就是这么个道理 所以 要 搞清楚 "事件流"的概念
2018年8月16日17:06:43
先写这么多 后来在补充吧
核心的东西其实还有很多很多
毕竟一口吃不下大胖子~ 慢慢来 我会一点点补充的
争取把这篇Blog写的充实一点 干货多一点 也方便自己日后查看 大家加油