Javascript高级程序设计-笔记
来源:互联网 发布:php网站解决方案优点 编辑:程序博客网 时间:2024/06/15 16:07
Javascript高级程序设计
3.基本概念
- === 全等符号,要求类型和值均想等
- switch判断时使用的是全等符号
- 参数
- arguments
- arguments.callee(严格模式禁用)
- arguments.caller(严格模式禁用)
- arguments为类数组对象(Array-like object),结构类似于 {0:’Z’, 1:’a’, 2:’b’, 3:’c’}
- 类数组对象拥有类似数组的结构,所以它可以使用大多数数组的方法
- 对类数组对象使用Array.isArray()返回false
- 通过Array.prototype.slice.call(arguments)来将其转化为真正的数组
- arguments
- 声明提前
- 注意
- 如果是多次使用function funcName(){}的语法声明函数则以最后为准
- 但是如果是使用var funcName = function(){}语法则funcName在随时改变
- 注意体会这两种方法的区别
- 注意
4.变量、作用域和内存问题
- ECMAScript中所有函数的参数都是按值传递的
- 对于基本类型,修改参数并不会对参数本身造成影响
- 对于Object类型,传参过程中传递的实际上是引用值(可想象为传递的是地址),这个地址就是这个参数的值,所以对对的属性进行操作会作用到源对象;但是如果为参数赋予新对象,则不会对源对象产生任何影响,因为对参数赋值为新对象只是更新参数的地址,而并未更新源对象的地址
- var声明的变量是函数级的,let声明的变量是块级的,不使用保留字声明的变量是全局的(一般是附属到window对象)
- javascript中的GC
- 标记清除法
- 引用计数
5.引用类型
- 数组
- 数组的length是可写的,所以可以通过直接设置length的值来移除数组末尾的项或者添加项(直接添加到指定位置)
- join()方法 使用指定分隔符连接字符串
- sort()方法 接受比较函数对数组元素排序,若无比较函数则按从小到大排序
- splice()方法 splice(起始位置,要删除的项数,插入元素1,插入元素2,…)
- RegExp 正则表达式
- function
- 函数是对象,函数名是指针
- call(object, arguments[0], arguments[1], …)
- apply(object, arguments)
6.面向对象的程序设计
- 对象属性
- 数据属性
- 特性
- [[Configurable]] 表示能否通过delete删除属性 默认为true
- [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
- [[Writable]] 表示能否修改属性的值 默认为true
- [[Value]] 包含这个属性的数据值,即数据的写入位置 默认为undefined
- 可以直接定义也可以使用Object.defineProperty()定义,defineProperty的使用见下面访问器属性的实例,只要替换相关特性即可
- 特性
- 访问器属性
- 包含getter/setter
- 再读取访问器属性时调用getter,在写入访问器属性时调用setter
- 特性
- [[Configurable]] 表示能否通过delete删除属性 默认为true
- [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
- [[Get]] 在读取属性时调用的函数,默认值为undefined
- [[Set]] 在写入属性时调用的函数,默认值为undefined
- Vue.js通过访问器属性实现了双向数据绑定,所以IE8及以下浏览器均不支持
- 访问器属性不能直接定义,必须使用Object.defineProperty()来定义,示例如下
- 包含getter/setter
- 数据属性
function Person() { var name = 'default'; this.age = 23; Object.defineProperty(this, "name", { get: function() { return name; }, set: function(newName) { console.log(y); name = newName; }, enumerable: true, configurable: true, //这两项见Javascript高级程序语言读书笔记Blog }); }//访问var p = new Person();console.log(p.name); //'default'
- 继承过程
function subType(){ superType.call(this); /*balabala...*/}subType.prototype = new superType();subType.prototype.*** = function(){ /*balabala...*/}
7.函数表达式
- 闭包是指有权访问另一个函数作用域中的变量的函数
8.BOM(浏览器对象模型)
- 队列只保证在指定时间将任务添加到队列中而不能保证运行,如果当前队列中有任务在运行,则新添加的任务需要等之前任务全部运行完再开始运行
9.客户端检测
- 要尽量使用typeof进行能力检测
10.DOM
- DOM1级定义了一个Node接口,该接口由DOM中的所有节点类型实现。这个Node接口在Javascript中是作为Node类型实现的;除了IE之外,在其他所有浏览器中都可以访问到这个类型
- 每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。这个对象是根据DOM结构动态执行查询的结果
- 每个节点都有parentNode属性,只想文档树中的父节点
- 访问邻居节点使用previousSibling和nextSibling属性
- 如下五个方法不会返回元素间空格导致的文本节点(例如 之间的空格会被当做一个文本节点)
- childElementCount
- firstElementChild
- lastElementChild
- previousElementChild
- nextElementChild
13.事件
- 事件捕获阶段->目标截断->事件冒泡阶段 DOM2级(IE8及以前不支持)
- DOM0级事件处理 btn.onclick = function(){};
- DOM2级事件处理 btn.addEventListener(‘click’, function(){}, false);
- 最后一个false代表是否在捕获阶段执行。此处为false,代表在冒泡阶段执行,否则为捕获阶段
- 此方法在IE/Opera中为attachEvent和detachEvent,默认在冒泡阶段执行,因为IE8以及之前的浏览器不支持事件捕获
- event.stopPropagation()用于取消事件进一步冒泡
- document.implementation.hasFeature(‘MouseEvent’, ‘2.0’)用于检测是否有相应的事件存在
- 事件委托
21.Ajax
- XHR
- 新建对象方法
- IE - ActiveXObject
- Others - XMLHttpRequest
- 接收到响应之前可以使用xhr.abort()来取消异步请求
- 不建议重用xhr对象,有内存泄漏风险
- XHR用法
- 新建对象方法
xhr = new XMLHttpRequest();xhr.onreadystatechane = function(){ /* if判断当xhr.readyState==4(即接收完成)时,则执行某些操作 */ };xhr.open('get', url, false); //最后一个参数代表是否采用同步方式执行xhr.send(null);
- HTTP
- Request头部信息
- Accept 浏览器能够处理的内容类型
- Accept-Charset 字符集
- Accept-Encoding 压缩编码
- Accept-Language 浏览器当前设置的语言
- Cache-control
- Connection 浏览器与服务器之间的连接类型 (keep-alive)
- Cookie
- Host 发出请求的页面所在的域
- Referer 发出请求的页面的URI
- User-Agent
- Response头部信息
- Cache-control
- Content-length
- Content-type
- Date
- Last-modified
- Request头部信息
- CORS(Corss-Origin Resource Sharing, 跨域资源共享)
- 微软IE8引入XDomainRequest,其他浏览器的XHR已经对CORS原生支持
- 不能发送接受cookie
- 不能使用setRequestHeader()设置自定义头部
- 以此保证跨域安全
- Preflighted Request
- JSONP
- 本地自定义函数,服务器根据指定的函数名返回相应的函数调用,示例如下
- 微软IE8引入XDomainRequest,其他浏览器的XHR已经对CORS原生支持
function handleCallback(res) { console.log(res);}var script = document.createElement('script');script.src = 'http://freegeoip.net/json/?callback=handleCallback';document.body.insertBefore(script, document.body.firstChild);
其中JSONP接口返回的内容如下,即作为插入到代码中执行的部分,API接口内容作为参数传入
handleCallback({ ip: "219.239.227.229", country_code: "CN", country_name: "China", region_code: "11", region_name: "Beijing", city: "Beijing", zip_code: "", time_zone: "Asia/Shanghai", latitude: 39.9289, longitude: 116.3883, metro_code: 0}) //即调用了我们设置的函数handleCallback
- Comet
- 基于长轮询的服务器’推’技术
- 客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求
- HTML5 - Web Socket
- WebSocket不支持DOM2级事件监听器,因此必须使用DOM0级语法
- 使用方法
var socket = new WebSocket('ws://api.com/api/get/id') //此处ws开头为指定的websocket协议socket.onmessage = function(event){var data = event.data};socket.onopen = function(){};socket.onerror = function(){};socket.onclose = function(){};
- CSRF
22.高级技巧
- 函数的惰性载入
- curry化函数
- 防篡改对象
- Object.preventExtensions(o) 不能再为对象添加新属性和新方法
- Object.seal(o) 不能添加和删除属性/方法,但是属性值是可以修改的
- Object.freeze(o) 冻结对象的数据属性[[Writable]]特性会被设置为false;如果定义了访问器属性[[Set]],访问器属性则仍是可写的
- 以上三个防篡改级别的强度依次递增
- Javascript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行
- 大量数据采用数组分块处理-防止循环占用大量时间导致浏览器无响应
setTimeout(function(){ //var item = array.shift(); process(item); if (array.length > 0){ setTimeout(arguments.callee, 100); }}, 100);
- 函数节流
- 思想
- 某些代码不可以在没有时间间断的情况连续重复执行
- 代码结构如下
- 思想
var processor = { timeoutId: null, performProcessing: function(){ //实际执行代码 }, process: function(){ clearTimeout(timeoutId); this.timeoutId = setTimeout(() => { this.performProcessing() }, 100); }}processor.process();
- 使用concat克隆数组
- 不传入参数即可
var cloneArr = arr.concat()
- 自定义事件
- 观察者模式
0 0
- 《JavaScript高级程序设计》笔记
- 《javascript 高级程序设计》笔记
- JavaScript高级程序设计笔记
- Javascript高级程序设计-笔记
- JavaScript高级程序设计笔记
- 《JavaScript 高级程序设计》笔记
- javaScript 高级程序设计 笔记
- javascript 高级程序设计 笔记
- javascript高级程序设计笔记(一)
- javascript高级程序设计笔记(二)
- javascript高级程序设计笔记(三)
- javascript高级程序设计笔记(四)
- javascript高级程序设计学习笔记
- JavaScript高级程序设计 学习笔记
- javascript高级程序设计学习笔记
- JavaScript高级程序设计--学习笔记
- JavaScript高级程序设计学习笔记
- javascript高级程序设计---事件笔记
- 局部内部类引用外部类中的局部变量必须是final属性的!
- ACM输入输出挂模板
- php中compact,extract,list函数的使用
- Oracle中dual表的用途介绍
- PaginationJS改造支持实时更新分页信息
- Javascript高级程序设计-笔记
- LightOJ 1421 Wavio Sequence 最大上升子序列变形 双dp
- 绿色版MySql 5.7 出现:服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。
- JavaSE 基础笔记 day03
- leetcode小白解题记录——第四题
- vector 容器
- 在读研中的一些困惑,怎样才能写出好的论文。
- 使用 Docker 安装Node-Red Container开发App 藉由IBM Weather Company Data 服务取得世界各地气象资料
- 半年了。