javascript - 学习笔记

javascript 中的数据类型：数字、字符串、布尔、数组、对象、null、undefined

js 获取元素：

• id - document.getElementById(‘id’)
• class - document.getElementsByClassName(‘class’)
• 标签名：document.getElementsByTagName(‘span’)

函数：是由事件驱动，或者当它被调用时可重复执行的代码块。

获取函数参数的所有参数：【arguments】，

• 参数数量：arguments.length
• arguments[n]表示指定位置的参数
• augrments 并不是一个数组，可通过 Array.propotype.[xxx].apply

事件：是一种异步编程的实现方式，是程序各个组成部分间的通信

web 浏览器常用事件
1，浏览器窗口事件

• load - 页面加载完成时触发
• beforeunload - 窗口关闭之前触发
• unload - 窗口关闭时触发
• focus - 窗口得到焦点时触发
• blur - 窗口失去焦点时触发
• error - 页面上有脚本错误时触发
• resize - 窗口大小改变时触发
• contextmenu - 弹出右键菜单时触发

2，鼠标事件

• mousedown - 在元素上按下鼠标时触发
• mouseup - 在元素上释放鼠标时触发
• mouseover - 当鼠标移动到元素上时触发
• mouseout - 鼠标移出元素时触发
• mousemove - 鼠标在元素上移动时触发
• mousewheel - 在元素上滚动鼠标滚轮时触发

3，键盘事件

• keydown - 按下键盘时触发
• keypress - 按下键盘时（晚于keydown）触发
• keyup - 释放键盘时触发

4，表单事件

• focus - 表单元素获得焦点时触发
• blur - 表单元素失去焦点时触发
• change - 表单元素的值被改变时触发
• input - 表单元素获得用户输入时触发
• select - 表单内容被选中时触发
• submit - 表单提交时触发

5，拖放事件

• drag - 当元素被拖放时触发
• dragstart - 拖动操作开始时触发
• dragover - 当元素在有效拖放目标上拖动时触发
• dragenter - 当元素已被拖动到目标区域时触发
• dragleave - 当目标离开有效元素时触发
• dragend - 拖动操所末端时触发
• drop - 当被拖元素放置在目标区域时触发

事件委托：将事件交给父元素或祖先元素的方式，就是事件委托

事件模型中的两种机制：事件捕获、事件冒泡

• 事件捕获 - 当事件发生后，从 window 发出，不断经过下级节点，直到目标节点。当事件到达目标节点之前的过程，就是事件捕获。所有经过的节点，都会触发其对应的事件。
• 事件冒泡 - 当事件到达目标节点后，会沿着捕获阶段的路线返回，这就是事件冒泡。通过冒泡这个机制，所有子节点的事件都会被其父节点所捕获。

移动端触摸事件

• touchstart - 手指触摸屏幕时触发
• touchmove - 手机在屏幕上滑动时触发
• touchend - 手指离开屏幕时触发
• touchcancel - 系统停止跟踪触摸时触发

实例演示触摸事件的例子

var touch0 = null;
document.body.addEventListenter('touchstart', function(ev) {
    touch0 = ev.touches[0]
    console.log('touchstart')
})
document.body.addEventListenter('touchmove', function(ev) {
    var touch = ev.touches[0]
    var moveX = touch.clientX - touch0.clientX
    var moveY = touch.clientY - touch0.clientY
    console.log('move:', moveX, moveY)
})

作用域：变量和函数【可访问的范围】，控制着变量和函数的【可见性】和【生命周期】。javascript 中的作用域只有俩个，【全局作用域】、【函数作用域】

闭包： javascript 是基于词法（静态）作用域的语言。词法作用域的含义是，当函数被定义时就确定了其作用域，而不是执行时。

闭包可以用来保存中间计算结果，类似于实现了计算结果的缓存。滥用闭包会导致内存泄露问题

function outer(){
    var scope = 10
    return function inner(){
        scope += 10
        console.log(scope)
    }
}
var fn = outer()
fn()  // 20
fn()  // 30
console.log(scope)  // error: scope is not defined

使用 call、apply、bind 改变 this

var name = 'tiger'
function animal () {
    var name = 'cat'
    console.log(this.name)
}
animal()  // tiger，因为 animal 函数在全局上下文中执行，所以 animal 内部的 this 指向的是全局对象
animal.call({name: 'lion'})  // 输出结果：lion
animal.apply({name: 'lion'})  // 同上
animal.bind({name: 'lion'})()  // 输出结果：lion

面向对象

原型链：在 javascript 中，每个对象都有一个指向其【原型对象】的【内部引用】，而这个原型对象又通过【引用】指向其【原型】，直到某个对象的原型为 null，这种一级一级的链结构就被称为【原型链】

实现异步编程的方式：

• 嵌套函数
• Promise 模式：将异步操作封装到 return new Promise()中，外部调用实现多层嵌套

ajax('/url1').then(function(data){
    // some code
    return ajax('/url2')  // 返回一个新的 Promise 对象
}).then(function(data){}).catch(function(err){})

• axync + await：实现多层嵌套

axync function es7(){
    var a = await ajax('/url1')
    var b = await ajax('/url2')
    return a + b
}
es7().then(function(data){
    console.log(data)
})

模块化：以功能块为单位进行程序设计，实现其求解算法的方法就叫模块化。
模块化的原则：高内聚，低耦合。【高内聚】尽量减少不同文件中函数的交叉使用。【低耦合】模块和模块之间要相互独立。
模块化的目的：降低程序的复杂度，使程序的设计、调试、维护等操作简单化

babel：可以把符合 es6 标准的代码完美的转换成 ES5 的标准的代码，并确保在所有主流浏览器上良好的运行。

匿名函数实现模块化：
（jquery 中大量使用这种方式）
优点：避免了命名冲突，又使得私有变量 _index 不能被外部访问和修改

var module_speical = (function(){
    var _index = 0
    var a1 = function(){
        // ...
    }
    var b2 = function(){
        // ...
    }
    return {
        a1: a1,
        b2: b2
    }
})();

// 调用
module_speical.a1()
module_speical.b2()