专题
/*
* 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、<p onclick="show()">ppppp</p>
* 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加速
*
* */