《JavaScript面向对象编程指南（第2版）》读书笔记（二）

时间：2021-06-24 07:31:05

目录



一、基本类型

	1.1 字符串

	1.2 对象

	1.3 原型

	1.4 常用数学方法

二、DOM操作

	2.1 节点编号、名称以及值

	2.2 父节点、子节点和相邻节点

	2.3 添加和删除节点

	2.4 属性相关

	2.5 DOM合集

	2.6 DOM遍历

三、其他

	3.1 事件

	3.2 浏览器检测

	3.3 三种弹窗方式

	3.4 根据浏览器历史控制前进后退

	3.5 重载页面的六种方式

	3.6 修改当前页面URL但是不刷新页面

	3.7 URI编码

	3.8 窗口相关

一、基本类型

1.1 字符串

判断是否包含某个字符串

indexOf方法中，找到相关字符串会返回第一次出现的下标。没有找到就会返回-1，利用这个特性可以判断字符串是否存在。



console.log('Fine'.indexOf('in') !== -1)  // true

把字符串按照一定规则分离成数组

下面是以空格为分割标志。



console.log('I seek you'.split(' '))  // ["I", "seek", "you"]

复制指定位置的字符串

传入的两个参数分别是开始的位置和结束的标记。看清楚，第二个参数本身的小标所表示的内容不会被复制，第二个参数是用来标记，这里是结束位置。



console.log('I seek you'.slice(2,6))  // seek

console.log('I seek you'.substring(2,6))  // seek

拼接字符串



console.log('I seek you'.concat(' too.'))  // I seek you too.

查看字符串中的字符



console.log('I seek you'[0])  // I

console.log('I seek you'.charAt(0))  // I

1.2 对象

判断属性是自己的还是继承来的

使用in不能判断属性是自己的还是继承来的，使用hasOwnProperty可以。



var xiaoming = {

  name: 'xiaoming'

}

使用in不能判断属性是自己的还是继承来的

---------------------------------

'name' in xiaoming  // true

'toString' in xiaoming  // true

---------------------------------

xiaoming.hasOwnProperty('name')  // true

xiaoming.hasOwnProperty('toString')  // false

判断对象是否可枚举



xiaoming.propertyIsEnumerable()  // false

判断对象是另一个对象的原型



var People = function (name) {

	this.name = name

}

var xiaoming = new People('xiaoming')

Human.prototype = monkey

monkey.isPrototypeOf(man)

1.3 原型

  • __proto__是实例对象的属性
  • prototype是构造函数的属性
  • constructor指向构造函数

IE中不存在__proto__，推荐使用ES5的Object.getPropertyOf()访问。



typeof [].__proto__  // "object"

Object.getPrototypeOf([])  // [constructor: function, toString: function, toLocaleString: function, join: function, pop: function…]

[].constructor.prototype

原型继承



var People = function (name,age) {

  this.name = name

  this.age = age

}

xiaoming = People.prototype

xiaoming.constructor = xiaoming

1.4 常用数学方法



Math.PI  // 3.141592653589793

Math.SQRT2  // 1.4142135623730951

Math.sqrt(2)  // 1.4142135623730951

Math.E  // 2.718281828459045

Math.pow(2,3)  // 8

Math.random() * (10-2)+2  // 7.564475903879611 | 2-8之间的平均数

Math.LN2  // 0.6931471805599453

Math.floor(2.6)  // 2 | 指定值的最小整数

Math.ceil(2.6)  // 3 | 指定值最大整数

Math.round(2.6)  // 3 | 去最靠近指定值的整数

Math.max()  // 3

Math.min()  // 2

Math.sin(90)  // 0.8939966636005579

Math.cos(90)  // -0.4480736161291702

二、DOM操作

2.1 节点编号、名称以及值

nodeType有12种，具体请见MDN



<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

you.nodeType  // 1

you.nodeName  // BIV

you.nodeValue  // null

you.textContent  // HELLO YOU

you.innerText  // "HELLO YOU"

2.2 父节点、子节点和相邻节点

检查是否具有某个子节点



document.documentElement.hasChildNodes('body')  // true

查看所有子节点



document.documentElement.childNodes  // [head, text, body]

查看第一个子节点



document.documentElement.firstChild  // <head>...</head>

访问父节点



document.documentElement.childNodes[0].parentNode

访问相邻节点



document.documentElement.children[0].previousSibling  // null

document.documentElement.children[0].nextSibling  // #text

2.3 添加和删除节点



<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

新建节点



var pTag = document.createElement('p')

var pVal = document.createTextNode('HELLO YOU')

pTag.appendChild(pVal)  // <p>HELLO YOU</p>

添加节点



document.body.insertBefore(pTag,you)

document.body.replaceChild(you,pTag)

删除节点



document.body.removeChild(you)

克隆节点

true为深拷贝，会拷贝节点的内容。flase只拷贝空标签。



var newNodeFalse = document.body.cloneNode(true)

var newNodeFalse = document.body.cloneNode(false)

console.log(newNodeFalse)  // <body>...</body>

console.log(newNodeFalse)  // <body></body>

2.4 属性相关



<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

检查是否具有某个属性



you.hasAttributes('class')  // true

获取具体属性



you.getAttribute('class')  // "you"

you.attributes[0].nodeValue  // "you"

you.attributes['class'].nodeValue  // "you"

选择器

querySelector使用的是CSS选择器，返回单个节点。返回所有匹配的结果用querySelectorAll。



document.querySelector('.you')

document.querySelectorAll('.you')  // [div.you]

批量添加样式



you.style.cssText = "color:red;font-size:200px;"

2.5 DOM合集



document.images

document.applets

document.links

document.anchors

document.forms

document.cookie

document.title

document.referrer

document.domain

2.6 DOM遍历



function walkDOM(n){

  do {

    console.log(n)

    if(n.hasChildNodes()){

      walkDOM(n.firstChild)

    }

  }

  while (n=n.nextSibling)

}

walkDOM(document.body)

三、其他

3.1 事件

阻止冒泡



event.stopPropagation()

window.event.cancelBubble = true  //IE

阻止默认事件



event.preventDefault()

return false  // IE

拖动事件

MDN在线示例

触屏事件

这里有一个用canva实现的画图页面，触屏画图，实现过程可以直接看源码。。另外触屏事件的分析，请见伯乐在线。



touchstart

touchmove

touchend

touchleave

touchcancel

3.2 浏览器检测

用户代理可以被模拟，所以根据浏览器的不同特征来检测当前浏览器类型更加可靠。



if(window.addEventlistener) {

	// code...

}

else if(){

	// code...

}

3.3 三种弹窗方式

三种弹窗分别是提示框（alert），确认框（confirm）和交互框（prompt）。可以把确认和交互赋值给变量，变量会存储相应结果。



alert('Welcome To JS!')

var isLike = confirm('Do you like JS?')

var whyLike = prompt('Why do you like it.')

console.log(isLike)  // true

console.log(whyLike)  // Maybe...

3.4 根据浏览器历史控制前进后退

根据缓存的浏览器历史，可以控制前进、后退和跳转到指定历史记录。



window.history.forward()  // 前进

window.history.back()  // 后退

window.history.go(1)  // 跳转

3.5 重载页面的六种方式



location.reload()

location.assign('/')

location.replace('/')

window.location.href = '/'

location = location

window.location.reload()

3.6 修改当前页面URL但是不刷新页面



history.pushState({a:1},'','hello')

3.7 URI编码



function decodeURI(url,params){

  var url = url || 'http://www.cnblogs.com/bergwhite/'

  var params = params || {name: 'berg', age: 22}

  var query = []

  for (param in params) {

    query.push(param+'='+params[param])

  }

  return url+=query.join('&')

}

decodeURI() // "http://www.cnblogs.com/bergwhite/name=berg&age=22"

decodeURI('http://www.you.com/',{a:1,b:2})  //  "http://www.you.com/a=1&b=2"

3.8 窗口相关

新窗口打开内容



window.open('http://www.baidu.com','zzzzzzzzzzzz','width=800px,height=300px,resizable=yes')

判断是否是高分辨率屏幕



window.devicePixelRatio  // 1

感谢您的阅读。

相关文章