專題

專題

/*

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

/*

* 跨域專題
* ------------------------------------------------------------------------
* 一、什麼狀況下產生跨域？
*    http://www.a.com:8000/
*    當協議、主機、端口三者有任一一個不一樣，視爲跨域
*
* 二、跨域出現的緣由？
*    根本緣由是安全問題，即「同源策略」，禁止非同域下的請求產生
*    同源策略涉限制主要有：
*    a、ajax
*    b、dom操做
*    c、本地存儲
*    以上這三種操做均有跨域限制
*
* 三、跨域解決方案
*    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進制的數，省略的時候進制多是八、十、16
*   var n=parseInt("11",0) //表示字符串"11"是10進制的數
*   var n=parseInt("11",NaN) //表示字符串"11"是10進制的數
*   var n=parseInt("11",10) //表示字符串"11"是10進制的數
*
*
*   使用方法總結：
*   一、看參數1是不是字符串，若是不是則先轉成字符串（若是是非字符串類型，會發生隱式類型轉換）
*   二、先肯定進制
*   三、根據進制截取最終的字符串，若是最終是空字符串，則返回NaN
*     （截取的規則是這樣的，從字符串的首位(若是是0的8進制數，則從0以後開始截取，有點特殊；若是是0x的16進制數，則從0x以後開始截取，有點特殊)
*     （若是是空格、+會忽略哦，若是是-則會輸出）開始，依次向後截取，直到「非數字」或者「非指定進制範圍內」的字符截止）
*   四、轉成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是不是字符串，若是不是，則會發生隱式類型轉換
*  二、肯定基數（進制）
*       a、有明確指定基數，則以指定的基數爲準
*       b、沒有明確指定基數，則以參數1進行判斷來肯定基數，
*          首先，參數1字符串是以「0」打頭，則es5之前的版本中，基數爲8，es5以後的版本中，基數爲10
*          其次，參數1字符串是以「0x"打頭，則基數是16，
*          最後，其餘狀況，基數是10
*  三、以肯定的基數來對參數1字符串進行有效性截取（非數字或基數範圍外的均視爲非法字符）
*  四、若是截取的字符串是空字符串，「」則返回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中事件模型分爲三種：
*   一、DOM0（原始事件模型）
*   二、DOM2
*   三、IE事件模型
*
*   一、DOM0原始事件模型，有兩種觸發方式：
*     a、<p onclick="show()">ppppp</p>
*     b、document.getElementById(".box").onclick=function(){}
*     優勢：全部瀏覽器都支持
*     缺點：沒有事件流（沒有冒泡、捕獲），只能綁定一次，後面綁定的事件會覆蓋前面的
*
*   二、DOM2,是由w3c制定的標準規範，在這個事件模型中，一次事件包含三個階段
*      a、捕獲階段
*      b、目標階段
*      c、冒泡階段
*
*      oDiv.addEventListener("click",fn,false)//綁定事件
*      oDiv.removeEventListener("click,fn,false)//解綁事件
*
*
*   三、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加速
*
* */