考察点
typeof （JS变量类型）
==和 === （强制类型转换）
Jquery 源码中
if(obj.a == null){
//相当于 obj.a === null , obj.a === undefined
}
window.onload 和 DocumentCotentLoaded （浏览器渲染过程）
JS创建10个<a> 弹出对应的序号 （作用域）
模块加载器 （JS模块开发）
显现数组的随机排序（JS基础算法）
变量类型
值类型 vs 引用类型
typeOf 值类型
instanceOf 引用类型 用于判断引用类型属于哪个构造函数的方法
JSON
只不过是一个JS对象而已 有2个api
构造函数
var a={} 其实就是 var a = new Object()的语法糖
var a=[] 其实就是 var a = new Array()的语法糖
function Foo(){} 其实就是 var Foo= new Function()
原型规则
所有的引用类型（数组，对象，函数） 都有一个_proto_属性（隐式原型），属性值是一个普通对象（除了基本类型值 其他都是对象 万物皆对象）
所有的函数 都有一个prototype属性（显式原型） 属性值是一个普通对象
原型链 (封装一个DOM查询)
function Elem(id){
this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
var elem = this.elem
if(val){
elem.innerHTML = val
return this // 链式操作
}else{
return elem.innerHTML
}
}
Elem.prototype.on = function (type, fn){
var elem = this.elem
elem.addEventListener(type,fn)
return this
}
var div1 = new Elem('idxxxx')
div.html('xxxxx').on(click,function(){...})
执行上下文
1.范围： 一段<script> 或者一个函数
全局：变量定义，函数声明 （一段script）
函数：变量定义，函数声明， this， arguments （函数）
PS: 注意 函数声明 和 函数表达式的区别
在执行之前 确定 this，argument 不是声明 定义时
this
1.作为构造函数
2.作为对象属性
3.作为普通函数
4.call apply bind
作用域
1.无块级作用域
2.函数和全局作用域
在哪定义的 作用域就在哪
作用域链
1.自由变量
2.作用域链，即自由变量的查找
3.闭包的场景（收敛权限，循环）
闭包
1.函数作为返回值
2.函数作为参数传递
function F1(){
var a =100
return function(){
console.log(a) //自由变量a， 父级作用域寻找
}
}
var f1= F1()
var a=200
f1() // 100
//闭包实际应用中主要用于封装变量，收敛权限
function isFirstLoad(){
var _list = []
return function (id){
if(_list.indexOf(id)>=0){
return false
} else{
_list.push(id)
return true
}
}
}
var firstLoad = isFirstLoad()
firstLoad(10) //true
firstLoad(10) //false
firstLoad(20) // true
变量_list 被保存
var i,a
for(i=0;i++;i<10){
（function(i){
a= doucment.createElement('a')
a.innerHTML = i + '<br>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i) //自由变量， 要去父作用域获取值
})
document.body.appendChild(a)
})(i)
自执行函数，就是不用调用，只要定义完成，立即执行的函数
异步和单线程
JS是单线程
同步：阻塞后面的
异步：非阻塞
异步的场景：
1.定时任务：setTimeout， setInterval
2.网络请求： ajax请求，动态<img>加载
3.事件绑定
Date
Date.now()
var dt = new Date()
dt.getTime()
dt.getFullYear()
dt.getMonth()
dt.getDate()
dt.getHours()
dt.getMinutes()
dt.getSeconds()
Math
Math.random()
Array Api
1.forEach
var arr = [1,2,3]
arr.forEach(function(item,index){
//遍历数组的所有元素
console.log(index,item)
})
2.every
var result = arr.every(function(item,index){
//用来判断所有的数组元素，都满足一个条件
if(item<2) {
return true
}
})
3.some
var result = arr.some(function(item,index){
//用来判断所有的数组元素，只要有一个满足一个条件
if(item<2) {
return true
}
})
4.sort
var result = arr.sort(function(a,b){
//从小到大排序
return a-b
//从大道小排序
return b-a
})
5.map
var arr2 = arr.map(function (item,index){
// 将元素重新组装,并返回
return '<b>' + item + '<b>'
})
6.filter
var arr2 = arr.filter(function(item,index){
//通过某一个条件过滤数组
if(item>=2){
return true
}
})
对象API
var obj ={
x:100,
y:200,
z:300
}
var key
for (key in obj){
//注意这里的 hasOwnProperty
if (obj.hasOwnProperty(key)){
console.log(key.obj[key])
}
}
写一个能遍历对象和数组的forEach的函数
function forEach(obj,fn) {
var key
if (obj instanceof Array){
//Array
obj.forEach(function(index,item){
fn(index,item)
})else{
for (key in obj) {
//obj
fn(key,obj[key])
}
}
}
JS web api
Dom
document.getElementById
document.getElmentsByTagName
document.querySelectorAll
document.getAttribute
document.setAttribute
document.createElement
div.appendChild
div.parentElement
div.childNodes
div.removeChild
div.childNodes[0].nodeName
dive.childNodes[0].nodeType
BOM
//navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
//screen
screen.width
screen.height
//location
location.href
location.protocol
location.pathname
location.search
location.hash
location.host
location.search
location.hash
history.forward
history.back
事件
//通用的事件监听函数
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
console.log('clicked')
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
//事件冒泡
bindEvent(body,'click',function(e){ e.stopPropatation() })
//代理
div.addEventListener('click',function(e){
var target = e.target
if(target.nodeName ==='A'){
//dosomething
}
})
AJAX
var xhr = new XMLHttpRequest()
xhr.open('Get',"/api",false)
xhr.onreadstatechange = function(){
if(xhr.readystate ===4){
if(xhr.status===200){
alert(xhr.responseText)
}
}
}
xhr.send()
可以跨域的三个标签
<img src=xxx> //用于打点统计,统计网站可能是其他域
<link href=xxx>
<script src=xxx>
存储
cookie
sessionStorage
localStorage
Git
git add .
git checkout xxx
git commit -m "xxxx"
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx
git merge xxx
git clone
模块化
1.AMD
define['xx.js']
require['xxx.js']
<script src="/require.min.js" data-main="./entry.js">
//异步加载 用才加载
2.CommonJS
同步加载
module.exports
var x = require('xxx')
3.wepack
压缩
打包
性能优化
1.缓存
2.懒加载
3.数据节流
var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup',function(){
if (timeoutId){
clearTimeout(timeoutId)
}
timeoutId=setTimeout(function(){ dosomething},100)
})
4.合并DOM操作
5.合并JS
6.尽早操作
window.addEventListener('load',function(){})
// 页面的全部资源加载完全才会执行，包括图片 视频
document.addEventListener('DomCotentLoaded',function(){})
//Dom 渲染完成即可执行，此时图片视频可能没有加载完
安全性
1.xss
2.xsf
网友评论