码迷,mamicode.com
首页 > 编程语言 > 详细

《Javascript高级程序设计第3版》精华总结

时间:2016-12-02 21:26:36      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:wmi   随机数   加载   beetl   esx   cgo   jms   位置   转化   

一、JavaScript简介

     1.1 javascript简史

     1.2 javascript实现

        + javascript是一种专为网页交互而设计的一种脚本语言,javascript由三大部分组成:

          ECMAScript,提供核心语言功能;

          DOM,提供访问和操作网页页面的方法和接口;

          BOM,提供与浏览器交互的方法和接口。

      1.3 javascript的版本

 

二、在HTML中使用JavaScript

     2.1 <script>元素

         + 使用<script>元素向html页面中插入javascript

         + <script>元素中定义的6个属性:

            async,表示立即下载脚本,但不妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本;

            defer,表示脚本可以延迟到文档完全被解析和显示之后再执行;

            charset,表示通过src属性指定的代码的字符集(大多数浏览器会忽略这个值,所以很少用);

            src,表示包含要执行代码的外部文件;

            type,表示编写代码使用的脚本语言的内容类型(或称为MIME类型);

            language,已废弃,原来表示编写代码使用的脚本语言。

       + 延迟脚本加载的方式汇总:

           * 动态生成script元素,插入dom中, 然后callback()       

 1 function loadScript(url, callback){
 2 var script = document.createElement_x("script")
 3 script.type = "text/javascript";
 4 if (script.readyState){ //IE
 5 script.onreadystatechange = function(){
 6 if (script.readyState == "loaded" ||
 7 script.readyState == "complete"){
 8 script.onreadystatechange = null;
 9 callback();
10 }
11 };
12 } else { //Others: Firefox, Safari, Chrome, and Opera
13 script.onload = function(){
14 callback();
15 };
16 }
17 script.src = url;
18 document.body.appendChild(script);
19 }

 

              * 为<script>标签定义defer属性(HTML4.01定义的该属性),脚本会等页面解析完毕之后再运行,HTML5规定defer

                只适合外部脚本文件,IE4~IE7还支持对嵌入脚本的defer属性,支持HTML5的浏览器会忽略给嵌入脚本设置的defer。

               (定义了defer的脚本,不一定会按顺序执行,所以最好只包含一个延迟脚本)

         + 异步加载脚本:

              为<script>标签定义async属性(HTML5定义的该属性),脚本会立即下载,不会阻塞页面加载,也就是在加载脚本的时候

              会异步加载页面的其他内容(标记了async的脚本同样也不保证按照指定它们的先后顺序执行)

         + HTML和XHTML的区别:

            XHTML是将HTML作为XML的应用而重新定义的一个标准,XHTML比HTML的书写要求更严格。

            补充:XHTML的要求,标签不能重叠,可以嵌套;标签和属性名必须小写;标签都要有始有终;每个属性都要有属性值,

                    并且属性值要在双引号中;标签中不用name,用id。

     2.2 嵌入代码与外部文件

         + 外部文件的好处: 可维护性、可缓存、适应未来

     2.3 文档模型

         + 标准(严格)模式和混杂模式:  严格模式的排版和js运作模式是以浏览器支持的最高标准运行,在混杂模式中,

            页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。当页面中DOCTYPE不存在或格

            式错误会导致页面以混杂模式呈现。

     2.4 <noscript>元素

        + 在不支持脚本的浏览器中显示的替换内容

 

三、基本概念

      3.1 语法

          3.1.1 区分大小写

          3.1.2 标识符

          3.1.3 注释

          3.1.4 严格模式

                  ECMAScript 5添加的第二种运行模式,严格模式的目的:

                   + 消除javascript中的不合理、不严谨之处,减少怪异行为;

                   + 消除javascript中的不安全之处;

                   + 提高编译效率;

                   + 为未来新版本的javascript做好铺垫。

          3.1.5 语句

     3.2 关键字和保留字

     3.3 变量

     3.4 数据类型

          + 基本数据类型: null、undefined、string、number、boolean、symbol(ES6);

          + 复杂数据类型: object 。

          + undefined,声明了变量但是未初始化;null,表示空对象指针,声明了变量,变量的值为空;

          +  undefined派生自null,所以null == undefined 为true。

          + NaN与任何值都不相等包括其自身,通过isNaN()函数判断一个值是否为数值;

              isNaN在接收一个参数之后,会尝试先将这个值转化为数字,不是数字的值会先直接转化为数值,不能转化为数字的值,

             函数最后返回true,反之返回为false。

          + 把非数值转化成数值的方式:Number()、parseInt()、parseFloat(),Number()可以用于任何数据类型,

             后面两种只能将字符串转  化为数值;

         + Number("")//0,Number("hello")//NaN,Number(null)//0,Number(undefined)//NaN,

            Number("0001")//1,Number("123")//123。

         + parseInt(value,[进制参数]),不能转化字符串中为非数字的字符。可以将8、16进制的数转化为10进制的数。

            使用parseInt()方法时最好指定第二个参数,多数情况下要解析的是十进制数,所以一般将10作为第二个参数。

           parseInt("hello")//NaN

           parseInt("")//NaN

           parseInt("1234hello")//1234

           parseInt("123.12")//123

       + parseFloat(value),只解析十进制数,所以没有用第二个参数指定基数的用法。

          转化十六进制,结果始终为0;

           parseFloat("0xA")//0

           parseFloat("123blue")//123

           parseFloat("22")//22

           parseFloat("22.5")//22.5

           parseFloat("22.45.5")//22.45

           parseFloat("0909.5")//909.5

         + 字符串可以由单引号和双引号表示;

         + 任何字符串的长度可以由length属性取值;

         + 将一个值转化成字符串: 1、通过toString()方法将一个值转化为字符串,每个字符串都有toString()方法,null和undefined

                                                 没有toString()方法;

                                             2、通过转型函数String()(例如:String(100)),如果值有toString()方法,则调用该方法返回结果;

                                                  如果为值为null则返回"null",如果值为undefined,则返回结果"undefined";

                                             3、最快捷的方式,用加号操作符将要转化的值与一个空字符串("")加在一起。

        + object的每个实例都具有的方法:

           constructor,保存着用于创建当前对象的函数;

           hasOwnProperty(propertyName),判断给定属性在当前对象实例中是否存在;

           isPrototypeOf(object),判断传入的对象是否是当前对象的原型;

           propertyIsEnumerable(propertyName),判断给定的属性是否能够使用for-in语句枚举;

           toLocalString(),返回对象字符串,字符串与执行环境的地区对应;

           toString(),返回对象字符串;

           valueOf(),返回对象字符串、数值、布尔值,通常与toString()方法返回值相同。

   3.5 操作符

   3.6 语句

   3.7 函数

       +  函数会执行完函数中的return语句之后停止并立即退出;

       +  为了方便代码调试,函数要没有都有return,要么都没有return;  

       + 可以通过arguments对象访问参数数组,非严格模式下,arguments的值永远与对应命名参数的值保持同步;

       + 没有传递值的命名参数会自动被赋值为undefined,  为arguments的元素设置的值不会反映到命名参数中;

       + javascript中所有参数传递的都是值,不可能通过引用传递参数。

 

四、变量、作用域和内存问题

    javascript中的作用域:http://www.cnblogs.com/yy95/p/5933090.html

   4.1 基本类型和引用类型的值

       4.1.1 动态的属性

       4.1.2 复制变量值

       4.1.3 传递参数

       4.1.4 检测类型

   4.2 执行环境及作用域

       4.2.1 延长作用域链

       4.2.2 没有块级作用域

  4.3 垃圾收集

      4.3.1 标记清除

      4.3.2 引用计数

      4.3.3 性能问题

      4.3.4 管理内存

 

五、引用类型

   5.1 Object类型

   5.2 Array类型

      数组-常用几种总结

    + 添加元素到数组末尾-push()

    + 删除数组末尾元素-pop()

    + 添加元素到数组的最前面-unshift(value)

    + 删除数组最前面元素-shift()(返回取得的值)

     注:通过push()和pop()操作数组,数组表现形式如同栈一样,是先进后出的形式;通过unshift()和shift()操作数组,

           表现形式如同队 列一样,是先进先出的形式。

    + indexOf(value)(不存在返回-1)—查找某个元素的索引

    + slice()— 复制或裁剪一个数组。可以为slice设置参数指定从哪里开始裁剪数组,参数个数0个、1个或2个(数间隔的方式裁剪,

       或含头不含尾来记忆)

       如果slice()方法中有一个参数为负数,则用数组长度加上该数来确定相应的位置;如果结束位置小于起始位置,则返回空数组。

    + splice()— 删除/替换数组中的(指定位置)任意数量的项,给指定位置插入任意数量的项。参数至少2个,第一个参数代表元素下标,

       第二个代表元素个数,后面的参数代表要插入的值,可以插入1个或多个;当第二个参数不为0时代表要删除元素,个数代表要删除的元

       素个数。

    + join(连接的方式)-连接一个数组并转化成一个字符串

   5.3 Date类型

         + Date类型对象上的方法

       技术分享

             技术分享

           补充: javascript的时间用毫秒计时,故计算两个时间的差值,可以直接将两个日期对象相减,最后得到的是毫秒数,

                     然后再将毫秒数转化成日期。

   5.4 RegExp类型

   5.5 Function类型

       + 函数内部的两个特殊的对象:arguments和this,arguments对象上的callee属性指向拥有这个arguments对象的函数;

       + 每个函数都包含非继承而来的方法: apply(对象,数组或arguments对象)和call(对象,value,value...),用于在特定的作

                                                         用域中调用函数(即改变函数作用域)。好处:对象与方法解耦。

             window.color = ‘red‘;

             var o = { color: "blue" };

             function sayColor() {

               alert(this.color);

              }

             sayColor();//red

             sayColor.call(this);//red

             sayColor.call(window);//red

             sayColor.call(o);//blue

   5.6 基本包装类型

       * 每当读取一个基本类型值时,后台都会创建一个对应的基本包装类型的对象。所以尽管基本数据类型不是对象,

         它们仍然也有自己的方法。

      * 引用类型与基本包装类型的主要区别:对象的生命周期不同。使用new操作符创建的引用类型的实例,在执行流离

         开当前作用域之前都一直保存在内存中;而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然

         后立即被销毁。       

      5.6.1 Boolean类型

         * 布尔表达式中的所有对象都会被转换为true,所以 new Boolean(false) && true 等于true,new出来的都是对象。

      5.6.2 Number类型

         * 使用new调用基本包装类型的对象和直接调用同名的转型函数的区别:

           var value = "16";

           var number = Number(value);//转型函数

           alert(typeof number);//"number"

           var obj = new Number(value);//构造函数

           alert(typeof obj);//"object"

        * toFixed() 方法按照指定的小数位返回数值的字符串

              var num = 10;

              alert( num.toFixed(2) );//"10.00"

              var num2 = "10.005";

              alert( num.toFixed(2) );//"10.01"

           toExponential() 方法返回指数表示法

           toPrecision() 方法可能返回固定(fixed)大小格式,也可能返回指数(exponential)格式

               var num = 99;

               alert(num.toPrecision(1))//"1e+2"

               alert(num.toPrecision(2))//"99"

               alert(num.toPrecision(3))//"99.0"

      5.6.3 String类型

         常用方法总结:

         * 获取字符串的某个位置的元素/字符编码-chatAt()/chatCodeAt();

         * 拼接字符串-concat(value,value...),可以接受多个字符串参数;

         * 创建新字符串(裁剪字符串,含头不含尾)-slice()、substr()、substring():

                -三者只有一个参数时,裁剪字符串表现一样;

                -两个参数时,substr()的第二个参数代表裁下来的字符总个数,不是和其他两个一样代表结束字符的位置;

                -参数为负数的情况,slice()将传入的负值与字符串的长度相加(同数组中的slice());substr()将第一个参数上的负数

                  与字符串的长  度相加,第二个负的参数转化成0;substring将所有的负参数转化成0。

         * 获取字符串中某个字符的下标-indexOf(value,[下标])从前往后搜索/lastIndexOf(value,[下标])从后往前搜索;

           有第二个参数(可省略)时代表从指定下标位置开始搜索value(字符),indexOf仍然是从后搜索,lastIndex仍然向前搜索;

         * 除去字符串中首尾空格-trim();

         * 字符串大小写转换方法-toLocaleUpperCase()/toUpperCase()   toLocalLowerCase()/toLowerCase();

         * 字符串的模式匹配方法-字符串.match(pattern)返回数组;

                                         -字符串.search(pattern)返回字符串中第一个匹配项的索引;

                                         -字符串.replace(字符串或正则,"参数"),替换第一个匹配的字符串(第一个参数为字符串时)

                                           或所有匹配的  字符串(第一个参数为正则时)(replace的第二个参数还可以是一个函数)。

        * 比较两个字符串再字母表中排列的顺序-字符串1.localeCompare(字符串2),字符串1在字符串2之前返回小于0的数,

          之后就返回大于0的数,等同就返回0。 

   5.7 单体类型

      5.7.1 Globle对象

           所有全局作用域中定义的属性和函数,都是Global对象的属性,Globle不属于任何其他对象的属性和方法。

      5.7.2 Math对象

       + 常用的几种方法:

        Math.ceil() 向上舍入

        Math.floor() 向下舍入

        Math.round() 四舍五入

         例子:Math.ceil(25.9)//26         Math.floor(25.9)//25     Math.round(25.9)//26

                 Math.ceil(25.5)//26         Math.floor(25.5)//25      Math.round(25.5)//26   

                 Math.ceil(25.1)//26         Math.floor(25.1)//25      Math.round(25.1)//25

        Math.max(value,value2,...) 求最大值

        Math.min(value,value2...)求最小值

        Math.random() 生成随机数

     

 六、面向对象的程序设计

       理解javascript中的原型模式:http://www.cnblogs.com/yy95/p/5751136.html

        JavaScript中的继承(原型链)

        JavaScript中的继承模式总结:http://www.cnblogs.com/yy95/p/5784211.html

 

 七、函数表达式

       javascript中的闭包:http://www.cnblogs.com/yy95/p/5950953.html

 

 八、BOM

      js之浏览器对象模型(BOM):www.cnblogs.com/yy95/p/5645250.html

 

 九、客户端检测

 十、DOM

    + 节点类型

       Node类型、Document类型、Element类型、Text类型、Comment类型、CDATASection类型、

       DocumentType类型、 DocumentFragment类型、Attr类型。所有的节点类型都继承Node类型。

    + DOM的结构

      节点与节点之间的关系:节点通过parentNode属性访问父节点,childNodes属性访问所有的子节点,nextSibling/previousSibling访问

                                      同一列表的其他节点,父节点可以通过firstChild、lastChild分别访问它第一个子节点和最后一个子节点。

    + 对DOM的添加、删除、插入、创建、查找

       创建:

               document.createDocumentFragment() 文本片段

               document.createElement() 元素

               document.createTextNode() 文本节点

       添加、删除、插入:

               appendChild(node)

               replaceChild(newnode,node) //用newnode替换文档中存在的node

               removeChild(node)//移除文档中的node

               insertBefore(newnode,node)//没有第二个参数时作用和appendchild一样,有第二个参数时就是将newnode插到node前面。

       查找:

            getElementById()

            getElementsByTagName()

            getElementsByName()

   十一、DOM扩展

   十二、DOM2和DOM3

   十三、 事件

           再次理解javascript中的事件

          技术分享

                    技术分享

                    技术分享

   十四、表单脚本

   十五、使用Canvas绘图

   十六、HTML5脚本编程

   十七、错误处理与调试

   十八、Javascript与XML

   十九、E4X

   二十、JSON

       json是一种轻量级的数据格式;

       使用json的原因: 数据格式简单,易于读写,格式都是压缩的,占用带宽小;

                              易于解析,客户端javascript可以直接通过eval()进行json数据的读取;

                              json格式数据能直接为服务器端代码所用,易于维护。

 

   二十一、Ajax与Comet

      + ajax全称是异步javascript和xml,它是一种无需刷新页面就可以从服务器获取数据的技术;它的核心是XMLHttpRequest对象,

         即异步请求对象。

      + ajax的请求过程: 1.创建XHR对象;2.调用open方法连接服务器;3.调用send发送请求;4.获取响应的数据。

      + readystatechange事件监听响应状态变化,readyState变化都会触发readystatechange事件,

         readyState检测响应是否已经接受完成,状态取值如下:

          0:未初始化,尚未调用open();

          1: 启动,已经调用open(),尚未调用send();

          2: 发送, 已经调用send(),尚未接受到响应;

          3: 接受,已经接受到部分数据;

          4: 完成,已经接受全部响应数据,可以在客户端使用了。

         status检测服务器是否已经成功处理请求,属性值(或称http状态码)如下:    

          1xx: 信息性状态码,表示服务器接收到请求正在处理;
          2xx: 成功状态码,表示服务器正确处理完请求;
          3xx: 重定向状态码,表示请求的资源位置发生改变,需要重新请求,301永久重定向,302临时重定向;
          4xx: 客户端错误状态码,服务器无法处理该请求。 404 not found,400 bad request;
          5xx: 服务器错误状态码,服务器处理请求出错。500 Internal Server;
 
      + 同步和异步
         简单的说同步就是需要你等待返回结果之后再继续,而异步不需要等待。
 
      + 跨域和同源
           同源策略,即协议、域名、端口都相同,它是一种安全协议,XHR对象只能访问与包含它的页面位于同一个域中的资源;
           使用同源策略的目的是,防止某一文档或脚本在多个不同源装载,预防恶意行为。
 
           跨域的方法总结(http://blog.csdn.net/as645788/article/details/51285688):
               1、JSONP
                   JSONP的原理:通过动态创建的<script>标签来请求跨域的URL,这个URL中包含一个callback参数,
                   服务器端返回数据的时候就将接收到的这个callback参数作为函数名来包裹住json数据,客户端接收到服务器端
                   返回的数据就可以随意处理了。
                   优点:兼容性好,在很古老的浏览器中也可以用,支持浏览器与服务器双向通信;
                   缺点:只支持get请求,且支持跨域http请求,不支持https请求。
                   (更多关于jsonp:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html)
 
               2、CORS
                     就是直接给服务器端的响应头中的Access-Controll-Allow-Origin指定可获取的域名;
                     原理:在通过XHR发送请求时,如果浏览器发现请求不符合同源策略,会给请求添加一个请求头:
                             origin(包含的就是请求页面的源信息),服务器根据这个头部信息来决定是否给予响应,
                             服务器如果接受这个请求就会返回一个包含了相同源信息的Access-Controll-Allow-Origin头部,
                             而浏览器又会通过判断服务器的响应头中是否包含了orgin的值,来决定是否处理响应,如果存在
                             浏览器就会处理请求,如果不存在,或是与源信息不匹配,浏览器就会驳回请求。
                          
               3、window.name,不同框架间想要共享的信息放在window.name里面(iframe之间共享window.name),
                   只能在iframe之间进行跨域
 
               4、document.domain,相同主域名不同子域名下面设置document.domain,让其同域,只能在iframe之间进行跨域
 
               5、HTML5中的window.postMessage()
             
      + ajax的优缺点
          优点:无需刷新页面即可向服务器传输数据和从服务器获取数据;
 
      + web Sockets
           web Sockets是一种与服务器进行全双工、双向通信的通道,web Sockets不使用HTTP协议,web Sockets只有在支持
           Web Socket协议的专门服务器上才能工作。
            new WebSocket() 创建一个socket对象;
            socket.send() 向服务器发送数据;
            socket.onmessage = function (event) {
               event.date;//获取服务器返回的数据
            }
       
      + 前端安全(http://www.freebuf.com/articles/web/55965.html)
          XSS(跨站点脚本)和 CSRF(跨站点请求伪造):
          *  XSS攻击分为两种:一种是基于DOM的XSS攻击或称本地XSS攻击,第二种是存储式XSS攻击(杀伤力更大)。
             XSS攻击指的是攻击者往web页面插入恶意html标签或javascript代码,从而来破坏页面结构或盗取用户信息;
             例如,攻击者在论坛中放一个看似安全的链接,骗取用户点击,从而窃取用户的cookie中的用户的私密信息。     
             XSS防御:永远不要相信用户输入;对用户输入进行处理(例如用ecodeURIComponent
                           或ecodeURI对用户输入的字符串进行编码等),只允许输入合法的值,其他值一概过滤掉。
         * CSRF攻击指的是攻击者通过伪造连接请求,让用户在不知情的情况下,以自己的身份完成攻击者想要达到的一些目的。
            完成CSRF的两个步骤:登入受信任的网站A,在本地生成Cookie;
                                          在不登出A的情况下,或Cookie不过期的情况下,访问危险网站B。
            CSRF防御:每次请求都要附带经过相应算法得到的验证码;以SSL(一种安全协议)连接来访问可以通过XHR请求的资源。
 
      补充:
              + XHR请求时,会发送的头部信息有:
                 Cookie,当前页面设置的任何Cookie;
                 Host,发出请求的页面所在的域;
                 Referer,发出请求的页面的URL;
                 Accept,浏览器能够处理的内容类型;
                 Accept-Charset,浏览器能够显示的字符集;
                 Accept-Encoding,浏览器能够处理的压缩编码;
                 Accept-Language,浏览器当前设置的语言;
                 Connection,浏览器与服务器之间连接的类型。
 
             + 页面加载的过程:
                简洁版: 浏览器将请求的url交给DNS域名解析,找到真实ip之后,向服务器发送请求;
                            服务器交给后台完成后返回数据,浏览器接收文件(HTML、css、js、图片等);
                            浏览器对接收到的文件进行语法解析,建立相应的DOM树;
                            载入解析到的资源文件,然后渲染页面,完成。
 
二十二、高级技巧
二十三、 离线应用与客户端存储
二十四、 最佳实践
     24.1 可维护性
     24.2 性能
     24.3 部署

 to be continued

 

 

 

 

       

        

    

 

  

  

      

《Javascript高级程序设计第3版》精华总结

标签:wmi   随机数   加载   beetl   esx   cgo   jms   位置   转化   

原文地址:http://www.cnblogs.com/yy95/p/6055683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!