当前位置:   article > 正文

Javascript高级程序设计-笔记_javascript高级程序设计对于实际开发哪些内容比较重要

javascript高级程序设计对于实际开发哪些内容比较重要

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)来将其转化为真正的数组
  • 声明提前
    • 注意
      • 如果是多次使用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()来定义,示例如下
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'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 继承过程
function subType(){
    superType.call(this);
    /*balabala...*/
}
subType.prototype = new superType();
subType.prototype.*** = function(){
    /*balabala...*/
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 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
  • CORS(Corss-Origin Resource Sharing, 跨域资源共享)
    • 微软IE8引入XDomainRequest,其他浏览器的XHR已经对CORS原生支持
      • 不能发送接受cookie
      • 不能使用setRequestHeader()设置自定义头部
      • 以此保证跨域安全
    • Preflighted Request
    • JSONP
      • 本地自定义函数,服务器根据指定的函数名返回相应的函数调用,示例如下
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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
    其中JSONP接口返回的内容如下,即作为插入到代码中执行的部分,API接口内容作为参数传入
  • 1
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 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(){};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 函数节流
    • 思想
      • 某些代码不可以在没有时间间断的情况连续重复执行
    • 代码结构如下
var processor = {
    timeoutId: null,
    performProcessing: function(){
        //实际执行代码
    }, 
    process: function(){
        clearTimeout(timeoutId);
        this.timeoutId = setTimeout(() => {
            this.performProcessing()
        }, 100);
    }
}
processor.process();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 使用concat克隆数组
    • 不传入参数即可
    • var cloneArr = arr.concat()
  • 自定义事件
    • 观察者模式
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/871252
推荐阅读
相关标签
  

闽ICP备14008679号