摘要：專題安全攻防專題跨站腳本攻擊，原理利用系統漏洞，將具有惡意攻擊行為的可執行腳本植入系統，且會自動執行。

專題

/*

* web安全攻防專題
* ------------------------------------------------------------------------
* xss:跨站腳本攻擊（XSS，Cross-site scripting）
*
*
*   1、原理：利用系統漏洞，將具有惡意攻擊行為的可執行腳本植入系統，且會自動
*      執行。從而達到破壞的目的
*
*   2、類型：反射型、持久型、DOM型
*
*   關于預防xss攻擊，請記住一個神論：永遠不要相信前端用戶輸入的任何信息
*
*
* csrf:跨站請求偽造（CSRF，Cross-site request forgery）
*    攻擊者通過各種方法偽造一個請求，模擬用戶在系統內的行為活動，從而達到修改用戶數據或其他目的
*
*    關于防御：1、盡可能使用POST提交請求； 2、對請求進行身份認證
*
*
*
* */

/*

* 跨域專題
* ------------------------------------------------------------------------
* 1、什么情況下產生跨域？
*    http://www.a.com:8000/
*    當協議、主機、端口三者有任一一個不同，視為跨域
*
* 2、跨域出現的原因？
*    根本原因是安全問題，即“同源策略”，禁止非同域下的請求產生
*    同源策略涉限制主要有：
*    a、ajax
*    b、dom操作
*    c、本地存儲
*    以上這三種操作均有跨域限制
*
* 3、跨域解決方案
*    a、jsonp
*       原理：
*    b、服務端設置響應頭，即白名單
*       access-control-allow-origin:"*" //任意域
*       access-control-allow-origin:"http://www.a.com" //只允許www.a.com域
*    c、nginx 反向代理
*
*
*
*
*
*
* */

/*

* 深淺拷貝專題（深淺只針對引用類型數據展開探討）
* ------------------------------------------------------------------------
* 淺拷貝-只會拷貝對象的引用地址（內存地址），新舊對象共享同一內存地址，只有一個對象
* 深拷貝-拷貝的是對象自身，而不是內存地址，是一個全新的獨立的對象
*
*
*
*
* */
function deepClone(source) {
    var target = {}, toString = Object.prototype.toString
    for (var prop in source) {
        if (source.hasOwnProperty(prop)) {
            if (toString.call(source[prop]) === "[object Object]") {
                // 引用類型-執行深拷貝
                target[prop] = deepClone(source[prop])
            } else {
                //淺拷貝
                target[prop] = source[prop]
            }
        }
    }
    return target
}

/*

* parseInt專題
* ------------------------------------------------------------------------
* 描述：是一個內置的函數，
* 作用：可以把一個字符串轉成整形，parseInt的返回值只有兩種情況，a、十進制整數 b、NaN
* 有兩個參數
*   a、第一個參數表示待轉換的字符串（必須是字符串，如果不是字符串，則會發生隱式類型轉換
*      然后對轉換后的字符串進行截取
*   ）
*
*   b、第二個參數表示待轉換的字符串的進制(默認是10進制)
*      該值的范圍介于[2,36]，如果進制不在此范圍內的，一律返回NaN
*
*      注意：基數如果不是數值，則發生隱式類型轉換，如果基數是NaN，則默認基數是10
*
*   特別注意，這里的默認進制10，是有條件的
*   條件1，必須沒有明確指定進制數
*   條件2，待轉換的字符串，不是以0或0x打頭的
*
*   在字符串以"0"為開始時舊的瀏覽器默認使用八進制基數。ECMAScript 5，默認的是十進制的基數。
*   如果沒有明確指定進度，對于"0”打頭的字符串在“ES5之前”認為是8進制
*                     對于"0”打頭的字符串在”ES5之后“認為是10進制
*
*   如果有明確指定數的進制，則以指定的進度為準
*
*   var n=parseInt("11",2) //表示字符串"11"是2進制的數
*   var n=parseInt("11",8) //表示字符串"11"是8進制的數
*   var n=parseInt("11") //表示字符串"11"是10進制的數
*
*   //注意了，radix是0、10均表示10進制的數，省略的時候進制可能是8、10、16
*   var n=parseInt("11",0) //表示字符串"11"是10進制的數
*   var n=parseInt("11",NaN) //表示字符串"11"是10進制的數
*   var n=parseInt("11",10) //表示字符串"11"是10進制的數
*
*
*   使用方法總結：
*   1、看參數1是否是字符串，如果不是則先轉成字符串（如果是非字符串類型，會發生隱式類型轉換）
*   2、先確定進制
*   3、根據進制截取最終的字符串，如果最終是空字符串，則返回NaN
*     （截取的規則是這樣的，從字符串的首位(如果是0的8進制數，則從0之后開始截取，有點特殊；如果是0x的16進制數，則從0x之后開始截取，有點特殊)
*     （如果是空格、+會忽略哦，如果是-則會輸出）開始，依次向后截取，直到“非數字”或者“非指定進制范圍內”的字符截止）
*   4、轉成10進制
*
*   var num = parseInt(321, 0) //321
*   var num = parseInt(321, NaN) //321
*   var num = parseInt(321, 2) //NaN
*   var num = parseInt("210", 3)//210
*   var num = parseInt("329", 6)//20
*   var num = parseInt("012", 0)//12
*   var num = parseInt("0x12")//18
*   var num = parseInt(parseInt,16)//15 這里為什么是15呢？因為parseInt是一個函數，其實這里的值是"function(){}"
*   var num = parseInt(alert,16)//15
*   var num = parseInt(console.log,16)//15
*   var num = parseInt(0.000005)//0，直接使用“字面量”表示
*   var num = parseInt(0.0000005)//5,這里返回5是因為，小數位后面長度長多6位時，采用科學基數法表示，即”5e-7“
*
*  =====================================================================
*  對于數值型而言，小數位前長度大于21或小數位后長度大于6時，均使用科學計數法表示
*  =====================================================================
*
*
*
*  執行過程分析：（第一個參數命名為參數1，第二個參數命名為參數2）
*  -----------------------------------------------------
*  1、查看參數1是否是字符串，如果不是，則會發生隱式類型轉換
*  2、確定基數（進制）
*       a、有明確指定基數，則以指定的基數為準
*       b、沒有明確指定基數，則以參數1進行判斷來確定基數，
*          首先，參數1字符串是以“0”打頭，則es5以前的版本中，基數為8，es5之后的版本中，基數為10
*          其次，參數1字符串是以“0x"打頭，則基數是16，
*          最后，其他情況，基數是10
*  3、以確定的基數來對參數1字符串進行有效性截取（非數字或基數范圍外的均視為非法字符）
*  4、如果截取的字符串是空字符串，“”則返回NaN
*     如果是非空有效的字符串，則按照進制規則轉換成10進制的數
*

*     0 1 2 3 4 5 6 7 8 9  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z
*     0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
*
* */

/*

* eval函數專題
* ------------------------------------------------------------------------
* eval是一個內置的函數
* 作用：當eval函數執行時，會把傳入的字符串（只能傳入原始字符串，不能是字符串包裝對象）
*      參數當做JS代碼執行
*
*
* eval("alert(100)") //100
*
*
*
* */

/*

* 事件模型專題
* ------------------------------------------------------------------------
* 什么是事件？事件就是一個約定好的動作，當將來做出了某個動作時，應該做什么事情。
*
* 在JS中事件模型分為三種：
*   1、DOM0（原始事件模型）
*   2、DOM2
*   3、IE事件模型
*
*   1、DOM0原始事件模型，有兩種觸發方式：
*     a、
ppppp
*     b、document.getElementById(".box").onclick=function(){}
*     優點：所有瀏覽器都支持
*     缺點：沒有事件流（沒有冒泡、捕獲），只能綁定一次，后面綁定的事件會覆蓋前面的
*
*   2、DOM2,是由w3c制定的標準規范，在這個事件模型中，一次事件包含三個階段
*      a、捕獲階段
*      b、目標階段
*      c、冒泡階段
*
*      oDiv.addEventListener("click",fn,false)//綁定事件
*      oDiv.removeEventListener("click,fn,false)//解綁事件
*
*
*   3、IE事件模型
*
*      oDiv.attachEvent("onclick",fn)
*      oDiv.detachEvent("onclick",fn)
*
*
*
*
* */

/*

* 函數防抖與函數節流專題
* ------------------------------------------------------------------------
* 無論函數防抖或函數節流，都是為了解決在一個事件內因高頻觸發動作而帶來的性能問題
*
*
*
* */
//函數防抖-代碼實現
function debounce(action,delay){
    var timer=null
    return function () {
        if(timer){ clearTimeout(timer) }
        var _this,args=arguments
        timer=setTimeout(function () {
            action.apply(_this,args)
        },delay)
    }
}

/*

* 自定義事件專題
* ------------------------------------------------------------------------
*
*
*
* */

/*

* 性能優化專題
* ------------------------------------------------------------------------
* 代碼層面
*   變量緩存（合理設置緩存）
*   多局部變量、少全局變量（減少作用域鏈或原型鏈查找的過程）
*   減少DOM操作(避免重繪與重排)
*   減少閉包
*   函數防抖節流
*   JS文件放在底部
* 資源層面
*   合并、壓縮、精靈圖、cdn加速
*
* */