摘要：專題安全攻防專題跨站腳本攻擊，原理利用系統(tǒng)漏洞，將具有惡意攻擊行為的可執(zhí)行腳本植入系統(tǒng)，且會(huì)自動(dòng)執(zhí)行。

專題

/*

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

/*

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

/*

* 深淺拷貝專題（深淺只針對(duì)引用類型數(shù)據(jù)展開探討）
* ------------------------------------------------------------------------
* 淺拷貝-只會(huì)拷貝對(duì)象的引用地址（內(nèi)存地址），新舊對(duì)象共享同一內(nèi)存地址，只有一個(gè)對(duì)象
* 深拷貝-拷貝的是對(duì)象自身，而不是內(nèi)存地址，是一個(gè)全新的獨(dú)立的對(duì)象
*
*
*
*
* */
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]") {
                // 引用類型-執(zhí)行深拷貝
                target[prop] = deepClone(source[prop])
            } else {
                //淺拷貝
                target[prop] = source[prop]
            }
        }
    }
    return target
}

/*

* parseInt專題
* ------------------------------------------------------------------------
* 描述：是一個(gè)內(nèi)置的函數(shù)，
* 作用：可以把一個(gè)字符串轉(zhuǎn)成整形，parseInt的返回值只有兩種情況，a、十進(jìn)制整數(shù) b、NaN
* 有兩個(gè)參數(shù)
*   a、第一個(gè)參數(shù)表示待轉(zhuǎn)換的字符串（必須是字符串，如果不是字符串，則會(huì)發(fā)生隱式類型轉(zhuǎn)換
*      然后對(duì)轉(zhuǎn)換后的字符串進(jìn)行截取
*   ）
*
*   b、第二個(gè)參數(shù)表示待轉(zhuǎn)換的字符串的進(jìn)制(默認(rèn)是10進(jìn)制)
*      該值的范圍介于[2,36]，如果進(jìn)制不在此范圍內(nèi)的，一律返回NaN
*
*      注意：基數(shù)如果不是數(shù)值，則發(fā)生隱式類型轉(zhuǎn)換，如果基數(shù)是NaN，則默認(rèn)基數(shù)是10
*
*   特別注意，這里的默認(rèn)進(jìn)制10，是有條件的
*   條件1，必須沒(méi)有明確指定進(jìn)制數(shù)
*   條件2，待轉(zhuǎn)換的字符串，不是以0或0x打頭的
*
*   在字符串以"0"為開始時(shí)舊的瀏覽器默認(rèn)使用八進(jìn)制基數(shù)。ECMAScript 5，默認(rèn)的是十進(jìn)制的基數(shù)。
*   如果沒(méi)有明確指定進(jìn)度，對(duì)于"0”打頭的字符串在“ES5之前”認(rèn)為是8進(jìn)制
*                     對(duì)于"0”打頭的字符串在”ES5之后“認(rèn)為是10進(jìn)制
*
*   如果有明確指定數(shù)的進(jìn)制，則以指定的進(jìn)度為準(zhǔn)
*
*   var n=parseInt("11",2) //表示字符串"11"是2進(jìn)制的數(shù)
*   var n=parseInt("11",8) //表示字符串"11"是8進(jìn)制的數(shù)
*   var n=parseInt("11") //表示字符串"11"是10進(jìn)制的數(shù)
*
*   //注意了，radix是0、10均表示10進(jìn)制的數(shù)，省略的時(shí)候進(jìn)制可能是8、10、16
*   var n=parseInt("11",0) //表示字符串"11"是10進(jìn)制的數(shù)
*   var n=parseInt("11",NaN) //表示字符串"11"是10進(jìn)制的數(shù)
*   var n=parseInt("11",10) //表示字符串"11"是10進(jìn)制的數(shù)
*
*
*   使用方法總結(jié)：
*   1、看參數(shù)1是否是字符串，如果不是則先轉(zhuǎn)成字符串（如果是非字符串類型，會(huì)發(fā)生隱式類型轉(zhuǎn)換）
*   2、先確定進(jìn)制
*   3、根據(jù)進(jìn)制截取最終的字符串，如果最終是空字符串，則返回NaN
*     （截取的規(guī)則是這樣的，從字符串的首位(如果是0的8進(jìn)制數(shù)，則從0之后開始截取，有點(diǎn)特殊；如果是0x的16進(jìn)制數(shù)，則從0x之后開始截取，有點(diǎn)特殊)
*     （如果是空格、+會(huì)忽略哦，如果是-則會(huì)輸出）開始，依次向后截取，直到“非數(shù)字”或者“非指定進(jìn)制范圍內(nèi)”的字符截止）
*   4、轉(zhuǎn)成10進(jìn)制
*
*   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呢？因?yàn)閜arseInt是一個(gè)函數(shù)，其實(shí)這里的值是"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是因?yàn)椋?shù)位后面長(zhǎng)度長(zhǎng)多6位時(shí)，采用科學(xué)基數(shù)法表示，即”5e-7“
*
*  =====================================================================
*  對(duì)于數(shù)值型而言，小數(shù)位前長(zhǎng)度大于21或小數(shù)位后長(zhǎng)度大于6時(shí)，均使用科學(xué)計(jì)數(shù)法表示
*  =====================================================================
*
*
*
*  執(zhí)行過(guò)程分析：（第一個(gè)參數(shù)命名為參數(shù)1，第二個(gè)參數(shù)命名為參數(shù)2）
*  -----------------------------------------------------
*  1、查看參數(shù)1是否是字符串，如果不是，則會(huì)發(fā)生隱式類型轉(zhuǎn)換
*  2、確定基數(shù)（進(jìn)制）
*       a、有明確指定基數(shù)，則以指定的基數(shù)為準(zhǔn)
*       b、沒(méi)有明確指定基數(shù)，則以參數(shù)1進(jìn)行判斷來(lái)確定基數(shù)，
*          首先，參數(shù)1字符串是以“0”打頭，則es5以前的版本中，基數(shù)為8，es5之后的版本中，基數(shù)為10
*          其次，參數(shù)1字符串是以“0x"打頭，則基數(shù)是16，
*          最后，其他情況，基數(shù)是10
*  3、以確定的基數(shù)來(lái)對(duì)參數(shù)1字符串進(jìn)行有效性截取（非數(shù)字或基數(shù)范圍外的均視為非法字符）
*  4、如果截取的字符串是空字符串，“”則返回NaN
*     如果是非空有效的字符串，則按照進(jìn)制規(guī)則轉(zhuǎn)換成10進(jìn)制的數(shù)
*

*     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函數(shù)專題
* ------------------------------------------------------------------------
* eval是一個(gè)內(nèi)置的函數(shù)
* 作用：當(dāng)eval函數(shù)執(zhí)行時(shí)，會(huì)把傳入的字符串（只能傳入原始字符串，不能是字符串包裝對(duì)象）
*      參數(shù)當(dāng)做JS代碼執(zhí)行
*
*
* eval("alert(100)") //100
*
*
*
* */

/*

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

/*

* 函數(shù)防抖與函數(shù)節(jié)流專題
* ------------------------------------------------------------------------
* 無(wú)論函數(shù)防抖或函數(shù)節(jié)流，都是為了解決在一個(gè)事件內(nèi)因高頻觸發(fā)動(dòng)作而帶來(lái)的性能問(wèn)題
*
*
*
* */
//函數(shù)防抖-代碼實(shí)現(xiàn)
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)
    }
}

/*

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

/*

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