专题

摘要：专题安全攻防专题跨站脚本攻击，原理利用系统漏洞，将具有恶意攻击行为的可执行脚本植入系统，且会自动执行。

专题

/*

* 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加速
*
* */