2017年8月
1，ES6 Map和Set
Map
ES6中新增的數(shù)據(jù)類型，類似PHP中的鍵值對(duì)形式結(jié)構(gòu)
var m = new Map([['a',1],['b',2],['c',3]]);
m.get('a'); //1
m.set('d',4); //新增
Set
ES6中新增了Set數(shù)據(jù)結(jié)構(gòu)，類似于數(shù)組，但是它的成員都是唯一的，其構(gòu)造函數(shù)可以接受一個(gè)數(shù)組作為參數(shù)
let array = Array.from(newSet([1,1,1,2,3,2,4]));
//Array.from函數(shù)可以實(shí)現(xiàn)set-->Array的轉(zhuǎn)化
console.log(array);// => [1, 2, 3, 4]
2，MVVM
angular,js
臟檢查模式:在angular中當(dāng)觸發(fā)某些執(zhí)行條件時(shí)(如change，input等)，執(zhí)行一個(gè)檢測(cè)輪詢，來(lái)遍歷所有數(shù)據(jù)，對(duì)比更改的地方，然后執(zhí)行變化，響應(yīng)到DOM
因?yàn)榇朔椒ú豢茖W(xué)，有很多多余的遍歷，故稱為臟檢查
vue.js
數(shù)據(jù)劫持:在ES5中定義了一個(gè)名為"屬性描述符的對(duì)象"，可以通過(guò)Object.getPropertyDescriptor()來(lái)查詢，getPropertyDescriptor接收一個(gè)對(duì)象，和對(duì)象上的某個(gè)屬性兩個(gè)參數(shù)，查詢?cè)搶傩缘乃膫€(gè)描述符狀態(tài)，如:
Object.getPropertyDescriptor({x:1},x);
//返回該屬性的值，可寫性，可枚舉性和可配置性
{
value:1,
writable:true,
enumeable:true,
configurable:true
}
而需要設(shè)置，修改這些特性時(shí)，使用Object.defineProperty。在vue vm中通過(guò)Object.defineProperty()對(duì)需要監(jiān)聽的每個(gè)對(duì)象屬性設(shè)置getter和setter，每當(dāng)對(duì)象屬性的數(shù)據(jù)發(fā)生變更時(shí)，觸發(fā)setter的函數(shù)(劫持)，在setter中通知所有的訂閱者，watcher監(jiān)聽到變化之后更新視圖
函數(shù)節(jié)流
「函數(shù)節(jié)流讓一個(gè)函數(shù)只有在你不斷觸發(fā)后停下來(lái)歇會(huì)才開始執(zhí)行，中間你操作得太快它直接無(wú)視你?！?br> 為了節(jié)制某些函數(shù)的執(zhí)行頻率，在觸發(fā)時(shí)設(shè)置setTimeout，如果短時(shí)間內(nèi)再次觸發(fā)，清除上一個(gè)定時(shí)器，設(shè)置新的定時(shí)器。
function throttle(method, context) {
clearTimeout(methor.tId);
method.tId = setTimeout(function(){
method.call(context);
}， 100);
}
//接收一個(gè)函數(shù)和一個(gè)上下文(函數(shù)執(zhí)行上下文為非必選參數(shù))，將定時(shí)器設(shè)為該函數(shù)的一個(gè)屬性，100ms內(nèi)再次調(diào)用這個(gè)函數(shù)將清除并重新設(shè)置定時(shí)器
//調(diào)用
window.onresize = function(){
throttle(myFunc);
}
//摘自js高程
2017年9月
1，獲取瀏覽器窗口大小
//PC
var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//移動(dòng)設(shè)備中，除了以上方法window.innerWidth || window.innerHeight都保存著可見視口信息
2，常見的POST數(shù)據(jù)提交方式
application/x-www-form-urlencoded：瀏覽器的原生表單提交，若不設(shè)置參數(shù)格式，默認(rèn)就為application/x-www-form-urlencoded，后端可以方便讀取
multipart/form-data：常用于文件上傳，于表單和請(qǐng)求頭中設(shè)置
application/json：這種方案，可以方便的提交復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合 RESTful 的接口。各大抓包工具如 Chrome 自帶的開發(fā)者工具、Firebug、Fiddler，都會(huì)以樹形結(jié)構(gòu)展示 JSON 數(shù)據(jù)，非常友好。
3，前端安全XSS和CRSF
XSS，跨站腳本攻擊，全稱cross-site scripting，使用js腳本注入的方式攻擊網(wǎng)站。
防范:
1，過(guò)濾轉(zhuǎn)義輸入輸出，若輸入輸出中帶有<script>等標(biāo)簽，將不會(huì)被執(zhí)行。
2，通信cookie使用httponly屬性，防止被讀寫.
CRSF，跨站請(qǐng)求偽造，偽造請(qǐng)求發(fā)送到服務(wù)器
防范:
1，防止登錄的session長(zhǎng)時(shí)間儲(chǔ)存在客戶端中，設(shè)置reprice
2，檢測(cè)請(qǐng)求域名
3，關(guān)鍵請(qǐng)求使用驗(yàn)證碼
4，CSS中的box-sizing
box-sizing用于設(shè)置盒模型的模式
其中屬性
context-box:(默認(rèn)值)標(biāo)準(zhǔn)盒模型，border和padding不計(jì)入元素width中，一個(gè)塊的總寬度等于margin+padding+border+width
border-box:IE怪異盒模型，border和padding計(jì)入width中，一個(gè)塊的總寬度等于margin+width
padding-box:padding計(jì)算入width內(nèi)
5，H5語(yǔ)義化標(biāo)簽
標(biāo)簽寫得語(yǔ)義化有助于SEO，搜索引擎易檢索查到。
充分利用各種HTML標(biāo)簽完成他們本職的工作。
6，創(chuàng)建對(duì)象方式
1，對(duì)象字面量 var obj = {a:1}
2，構(gòu)造函數(shù)創(chuàng)建對(duì)象 var obj = new Function()
3，對(duì)象原生方法創(chuàng)建 var obj = Object.create({})
7，New一個(gè)新對(duì)象時(shí)發(fā)生了什么？
var obj = new Function()
1，創(chuàng)建了一個(gè)新對(duì)象 obj
2，將this上下文指向這個(gè)新對(duì)象 this-->obj，此時(shí)的這個(gè)對(duì)象已經(jīng)是繼承于構(gòu)造函數(shù).prototype
3，執(zhí)行構(gòu)造函數(shù)中的代碼
4，返回一個(gè)新對(duì)象 return obj 共四步
8，性能優(yōu)化
1，雪碧圖，減少http請(qǐng)求
2，減少dom操作（事件代理等）
3，壓縮js,css
4，CDN靜態(tài)資源托管
5，DNS預(yù)加載(在頭部添加meta標(biāo)簽，預(yù)先請(qǐng)求域名外的域名文件)
9，今日雜項(xiàng)
1，表單reset之后不是清空表表單，而是重置到每個(gè)input都為默認(rèn)的value值
2，Jq中設(shè)置dom屬性為$("#id").attr('src',path)；
而在JS中為dom.setattribute('value',value)；
3，原生表單提交阻止頁(yè)面自動(dòng)跳轉(zhuǎn)，設(shè)置一個(gè)隱藏的iframe，然后將表單的target指向該iframe，返回信息顯示在iframe中而頁(yè)面不會(huì)跳轉(zhuǎn)。原始發(fā)送表單submit()。
4，刷新頁(yè)面location.reload。
10，ES6深拷貝
var arr = [1,2,3]
var copy = Object.assign([],arr) //此處的第一個(gè)參數(shù)也能換成{}對(duì)象形式，返回的copy即為鍵值對(duì)對(duì)象
copy.push(4)
console.log(arr) //[1, 2, 3]
console.log(copy) //[1，2，3，4] 對(duì)copy的操作并未對(duì)arr產(chǎn)生影響
11，事件委托性能優(yōu)化
在一個(gè)UI李有10個(gè)li，實(shí)現(xiàn)點(diǎn)擊對(duì)應(yīng)的li，輸出對(duì)應(yīng)的下標(biāo)
var lis = querySelectorAll('li')
for(var i = 0 ; i < 10 ; i++){
lis[i].onclick = (function(a) {
return function() {
alert(a)
}
})(i) //閉包實(shí)現(xiàn)塊級(jí)作用域
}
使用事件委托
利用冒泡的原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。
1.可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)。
2.可以方便地動(dòng)態(tài)添加和修改元素，不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
return
}
}
});
！?。?！注意：addEventListener()方法添加的匿名函數(shù)是無(wú)法移除的，所以如果需要移除監(jiān)聽器，添加時(shí)應(yīng)使用函數(shù)名添加。（若多次添加相同的監(jiān)聽器不會(huì)覆蓋，而是在觸發(fā)時(shí)執(zhí)行兩次）
11，split、join、splice、slice
var a = [1,2,3,4,5]
a = a.join('-') //將數(shù)組以傳入的參數(shù)連接起來(lái)，返回一個(gè)合并的字符串
console.log(a) //1-2-3-4-5
a = a.split("") //將字符串以傳入的參數(shù)分隔，返回一個(gè)分隔的數(shù)組
console.log(a) //[1,-,2,-,3,-,4,-,5]
var del = a.splice(0,3) //直接對(duì)源數(shù)組進(jìn)行修改從下標(biāo)0開始的長(zhǎng)度為3數(shù)組
console.log(del) //[1,-,2]
console.log(a) //[-,3,-,4,-,5]
a = a.slice(0,1) //不修改原數(shù)組，返回從下標(biāo)0開始長(zhǎng)度為1的截取的數(shù)組
console.log(a) //[-]
***********************************************************************************
split(' ')操作字符串
join('-')操作數(shù)組 -->合并為字符串
splice(0,3)操作數(shù)組 -->刪除
slice(0,3)操作字符串，數(shù)組皆可 -->即可分隔數(shù)組，又可分隔字符串
12，Object.creat()函數(shù)
Object.creat()函數(shù)接受兩個(gè)參數(shù)，第一個(gè)設(shè)置的是這個(gè)新創(chuàng)建的對(duì)象所指向的原型對(duì)象，第二個(gè)是這個(gè)新創(chuàng)建對(duì)象的屬性。收獲一種新的創(chuàng)建對(duì)象的方法hhh
var obj = Object.create(null,{ //此處原型對(duì)象可以傳空值，此時(shí)obj的__proto__指針指向null
name:{
value:'cty', //使用Object.create創(chuàng)建對(duì)象時(shí)，對(duì)象的屬性名內(nèi)，屬性值必須用value設(shè)置
enumerable: true //enumerable設(shè)為true將其設(shè)置為可枚舉屬性
}
})
console.log(obj.name) //cty
13，文件上傳
直接上代碼
label for="resource" class="upload">pdf上傳</label>
<input type="file" id="resource" name="resource" ref="resource" @change="fileChange">
----------------分割線-----------------------
fileChange(e) {
//通過(guò)事件獲取到上傳的文件，操作字符串獲得文件格式，files的size方法控制上傳文件大小
var fileSize = 0;
獲取上傳的文件
var files = e.target.files || e.dataTransfer.files;
fileSize = e.target.files[0].size;
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
e.target.value="";
return
}
var name = e.target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName != "pdf" && fileName != "mp4" && fileName != "ppt" && fileName != "pptx" && fileName != "avi"){
this.$alert('文件格式有誤，請(qǐng)選擇PPT,PDF,PPTX,avi,mp4格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}
14，js獲取事件和h5中的data-*屬性
在全局下發(fā)生點(diǎn)擊的事件可以直接傳入函數(shù)中，如click(e)（即便綁定時(shí)并沒有傳入這個(gè)參數(shù)）
然后，通過(guò)e.target可以獲取目標(biāo)元素，即事件流中的事件觸發(fā)階段的最具體的元素
再然后，
獲取元素上綁定的data-*屬性，用原生js，方法為let value = e.target.dataset.*。
動(dòng)態(tài)設(shè)置，用原生js，方法為e.target.dataset.*='xxx'
dataset屬性的值是DOMStringMap的一個(gè)實(shí)例，名值對(duì)的映射。每個(gè)data-name形式的屬性都有一個(gè)對(duì)應(yīng)的屬性，只不過(guò)該屬性名沒有data-前綴。
15，reduce方法
reduce為數(shù)組方法，數(shù)組對(duì)象可以調(diào)用，接收的回調(diào)函數(shù)接收兩個(gè)參數(shù)，第一個(gè)是上一次處理后的屬性的值，第二個(gè)是上一個(gè)屬性的下一個(gè)屬性
var arr = [1,2,3,4,5]
arr.reduce(function(pre,cur){
return pre+cur
})
//可以簡(jiǎn)單地對(duì)number數(shù)組求和
//回調(diào)函數(shù)第一次執(zhí)行pre為空，cur為1
//第二次執(zhí)行pre為上一次返回的數(shù)值，即1，cur進(jìn)入數(shù)組下一個(gè)值為2
//第三次執(zhí)行pre為上一次返回的數(shù)值，即3，cur進(jìn)入數(shù)組下一個(gè)值為3
//...以此類推，最后得出1至5的累加為15
15，Object.key(obj)
或得一個(gè)對(duì)象數(shù)組的屬性值，通常檢測(cè)屬性值可以使用hasOwnProperty
var o = {a:'123',b:'456'}
Object.keys(o).forEach(res=>{
console.log(res)
}) //a b
2017年10月
1，這里放一些Vue全局對(duì)象的基本操作
1，axios.defaults.withCredentials = true
默認(rèn)允許后臺(tái)跨域操作，如在客戶端存儲(chǔ)cookie等需要權(quán)限的操作。重要，若請(qǐng)求不設(shè)置，后端無(wú)法在客戶度設(shè)置cookie，再發(fā)起請(qǐng)求時(shí)無(wú)法在請(qǐng)求頭中攜帶cookie會(huì)發(fā)生302錯(cuò)誤
2，Vue.config.productionTip = false
設(shè)置 Vue.config.productionTip = false 來(lái)關(guān)閉生產(chǎn)模式下給出的提示
3，Vue.prototype.$axios = axios
Vue實(shí)例添加axios方法
4，前端響應(yīng)式布局
rem怎么來(lái)的？
rem是css3中新增加的一個(gè)單位屬性(font size of the root element),根據(jù)頁(yè)面的根節(jié)點(diǎn)的字體大小進(jìn)行轉(zhuǎn)變的單位。根節(jié)點(diǎn)，也就是html。
例：(下面例子中的根節(jié)點(diǎn)是html ，它的字體大小是100px，所以根節(jié)點(diǎn)下面的元素所設(shè)置的rem，都是1rem=100px。)
rem的初始值是16px，也就是說(shuō)在沒有設(shè)置根節(jié)點(diǎn)的font-size的時(shí)候，1rem=16px；
于是，只要在媒體查詢中改變根節(jié)點(diǎn)的font-size設(shè)置，rem將自動(dòng)根據(jù)根節(jié)點(diǎn)設(shè)置的font-size進(jìn)行適配。
html,body{
height: 100%;
margin: 0;
padding: 0;
font-size: 14px;
}
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}
以此適配三種屏幕大小。
5，判斷一個(gè)字符串是否是回文字
function isreverse(str){
//reverse只能作用于數(shù)組，將數(shù)組反轉(zhuǎn)
return str.split('').reverse().join('') == str
}
6，統(tǒng)計(jì)一個(gè)字符串中出現(xiàn)最多的字符
var str = 'aabbcc'
function findMaxDuplicateChar(str){
var obj = {}
var max = 0
var maxindex = []
for(var index in str){
//存儲(chǔ)在對(duì)象類數(shù)組中，并統(tǒng)計(jì)次數(shù)
if(!obj[str[index]]){
obj[str[index]] = 1
}else{
obj[str[index]] += 1
}
}
for(var index in obj){
//for..in..也可以作用于類數(shù)組
if(obj[index] >= max){
max = obj[index]
maxindex.push(index)
}
}
return maxindex
}
findMaxDuplicateChar(str)
> 輸出(3) ["a", "b", "c"]
以下排序算法皆是從小到大
7，冒泡排序
冒泡排序原理是，每次比較數(shù)組中相鄰的兩個(gè)元素，每次將大的數(shù)放在后面，小的數(shù)向上冒泡，所以經(jīng)過(guò)第一輪冒泡后，最大的數(shù)已經(jīng)在最后一位了。第一輪比較了n-1次，第二輪只要比較n-2次，最后最大的那個(gè)數(shù)已經(jīng)不用比較了。代碼如下:
function bubbleSort(arr){
//每次要比較的次數(shù)減一
for(var i = arr.length ; i > 0 ; i--){
for(var j = 0 ; j < i ; j++){
if(arr[j] > arr[j+1]){
//如果滿足條件，交換位置
var tmp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = tmp
}
}
}
return arr
}
var arr = [1,4,3,6,7,23,56,2]
bubbleSort(arr)
> 輸出(8) [1, 2, 3, 4, 6, 7, 23, 56]
8，快速排序
快速排序的原理是:遞歸
每次遞歸判斷數(shù)組長(zhǎng)度是否小于或等于1個(gè)數(shù)。若否，則取出數(shù)組中的第一個(gè)數(shù)，對(duì)剩下的n-1個(gè)數(shù)進(jìn)行遍歷，把較大的數(shù)放在右邊，較小的數(shù)放在左邊，再對(duì)左右數(shù)組再次進(jìn)行快排，分別以左右兩邊數(shù)組的第一個(gè)數(shù)為哨兵，再次比較分組，最后將所有的分組數(shù)組使用[].concat方法連接，得到一個(gè)從小到大的數(shù)組。代碼如下:
function quickSort(arr){
//此處還有左邊或右邊數(shù)組一個(gè)元素都沒有的情況
if(arr.length <= 1){
return arr
}
let leftArr = []
let rightArr = []
let p = arr[0]
for(var i = 1 ; i < arr.length ; i++){
if(arr[i] < p){
leftArr.push(arr[i])
}else{
console.log(arr[i])
rightArr.push(arr[i])
}
}
return [].concat(quickSort(leftArr),arr[0],quickSort(rightArr))
}
var arr = [7,3,45,2]
quickSort(arr)
> 輸出(4) [2,3,7,45]
9，斐波那契數(shù)列
又稱黃金分割數(shù)列:0,1,1,2,3,5,8,13.....
斐波那契數(shù)列的原理也是遞歸，代碼如下
function getFibonacci(n){
var fibarr = []
for(var i = 0 ; i < n ; i++){
if(i < 2){
//前面兩個(gè)數(shù)不需要遞歸，從0,1開始產(chǎn)生遞歸
fibarr.push(i)
}else{
fibarr.push(fibarr[i-2]+fibarr[i-1])
}
}
//其實(shí)整個(gè)方法只調(diào)用了一次，只是通過(guò)fibarr[i-2]+fibarr[i-1]不斷調(diào)用了之前的數(shù)組，所以也叫遞歸
return fibarr
}
上次筆試竟然寫不出來(lái)。。。。平時(shí)用不到，但是原理不能忘?。?！
10，前端上傳多種格式文件參數(shù)設(shè)置
fileChange(e){
//監(jiān)聽文件上傳的input框change事件
var value = e.target.dataset.type
var name = e.target.value
var fileName = name.substring(name.lastIndexOf(".")+1)
//獲取文件后綴名，這里也可以用slice
//var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase()
if(value == 'pdf'){
if(fileName != "pdf"){
this.$alert('文件格式有誤，請(qǐng)選擇PDF格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}else{
this.file1 = event.target.files[0]
}
}
if(value == 'ppt'){
if(fileName != "ppt" && fileName != "pptx"){
this.$alert('文件格式有誤，請(qǐng)選擇PPT,PPTX格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}else{
this.file2 = event.target.files[0]
}
}
this.loading = true
//通過(guò)驗(yàn)證
this.$axios.post(BASEPATH+'/subject/info/list/all').then(
res=>{
var data = res.data.allSubjectList
var subId = document.getElementById('subjectid').value
//重復(fù)驗(yàn)證
for(var index in data){
if(subId == data[index].subjectid){
this.$alert('此課程id重復(fù)，請(qǐng)重新輸入！', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
return
}
}
//文件轉(zhuǎn)為formData格式才能正確上傳帶文件的from表單
var formData = new FormData();//formData屬性
formData.append('subjectid',this.subjectid)
formData.append('title',this.title)
formData.append('remark',this.remark)
formData.append('parentid',this.parentid)
formData.append('status',this.status)
//formData.append('imgPath',this.imgPath)
formData.append('lessonDetail',this.lessonDetail)
formData.append('relatedLesson',this.relatedLesson)
if(this.file1){
//file文件append到formData后數(shù)據(jù)格式發(fā)生變化
formData.append('resource',this.file1)
}
formData.append('lessonPptnum',this.lessonPptnum)
var config = {
//文件上傳使用multipart/form-data格式上傳，設(shè)置ajax參數(shù)
headers: {
'Content-Type': 'multipart/form-data'
}
}
//發(fā)送請(qǐng)求 this.$axios.post(BASEPATH+'/subject/info/upload',formData,config).then(res=>{
if(res.data.code == 1){
this.$message({
type: 'success',
message: '上傳成功!'
})
this.$router.push({path:'super_courselist'})
}else{
this.$message({
type: 'error',
message: '上傳失敗!'
})
this.loading = false
}
})
}).catch(err=>{
this.$alert('提交出錯(cuò)！', '提示', {
confirmButtonText: '確定',
type: 'error'
})
this.loading = false
})
}).catch((err) => {
this.$message({
type: 'warning',
showClose: true,
message: '已取消提交'
});
});
},
//判斷輸入字符格式，使用了ES6模板解析
isString(...s){
for(var i of s){
if(i!=null && typeof i != 'string'){
return false
}
}
return true
},
isNumber(...n){
var pattern =/^[0-9]+([.]{1}[0-9]{1,2})?$/
for(var i of n){
if(i!=null && !pattern.test(i)){
return false
}
}
return true
}
}
11，css偽類創(chuàng)建三角形箭
原理是利用絕對(duì)定位的偽類元素，創(chuàng)建邊框顏色為透明色的，僅有邊框的正方形，在需要設(shè)箭頭方向的的另一側(cè)設(shè)置邊框?yàn)樗杓^顏色。即出現(xiàn)一個(gè)小△。
若要出現(xiàn)箭頭，則使用after，before兩個(gè)大小相同的三角形通過(guò)position定位重疊后留下一個(gè)小箭頭。
12，閉包
閉包是指能夠訪問其他函數(shù)內(nèi)部變量的函數(shù)。
最常見的產(chǎn)生閉包的方法就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。
閉包的作用域鏈包含所引用的外部函數(shù)的活動(dòng)對(duì)象，自身活動(dòng)對(duì)象(如果有的話)和全局變量對(duì)象(全局變量對(duì)象，誰(shuí)都有)
理解閉包的作用域鏈，就可以清晰地知道this的指向了
this對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的：在全局函數(shù)中，this指向window對(duì)象，而當(dāng)函數(shù)被當(dāng)作某個(gè)對(duì)象的方法調(diào)用時(shí)，this等于那個(gè)對(duì)象。
匿名函數(shù)的this對(duì)象延作用域鏈向上搜尋，但是只會(huì)搜索到其活動(dòng)對(duì)象為止，搜索不到外外部函數(shù)的活動(dòng)對(duì)象，如果都沒有，this則會(huì)指向全局對(duì)象window
13，清除浮動(dòng)
1，給父元素設(shè)置高度
2，在父元素的結(jié)尾處添加一個(gè)有clear:both屬性的盒子標(biāo)簽
3，overflow:hidden
4，使用偽類元素
.clearfix:after{
content:'';
height:'';
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;//兼容ie
}
第五種方法應(yīng)用最為廣泛，不用添加額外的標(biāo)簽，而且可以通用，添加一個(gè)class類名即可。
14，BFC（block fomating context）塊級(jí)格式上下文
描述:簡(jiǎn)單地說(shuō)，BFC描述的是塊級(jí)盒的布局規(guī)則
作用:BFC可以用來(lái)清除浮動(dòng)和防止margin重疊
防止margin重疊:因?yàn)楫?dāng)塊級(jí)盒外層沒有BFC作保護(hù)時(shí)，margin-top和margin-bottom會(huì)發(fā)生重疊，解決辦法是在外層套一個(gè)BFC保護(hù)，則不會(huì)再發(fā)生重疊
**清除浮動(dòng)""
- BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊
- BFC不會(huì)重疊浮動(dòng)元素
- BFC可以包含浮動(dòng)
我們可以利用BFC的第三條特性來(lái)“清浮動(dòng)”，這里其實(shí)說(shuō)清浮動(dòng)已經(jīng)不再合適，應(yīng)該說(shuō)包含浮動(dòng)。也就是說(shuō)只要父容器形成BFC就可以，如何形成BFC
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
我們可以對(duì)父容器添加這些屬性來(lái)形成BFC達(dá)到“清浮動(dòng)”效果。
15，undefined和null的區(qū)別
如果一個(gè)變量聲明后未初始化，那么改值為undefined
如果一個(gè)變量聲明后接下來(lái)是為了保存某種對(duì)象的，那么就把它初始化為null，也因此typeof null結(jié)果為object
16，文檔聲明<!DOCTYPE>
文檔聲明在html文檔的最前面，作用是為了告知瀏覽器的解析器，用什么文檔類型規(guī)范來(lái)解析這個(gè)文檔，只有正確地確定了一個(gè)文檔類型，html和css才能正常生效。
html4.01是基于SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，xml可擴(kuò)展標(biāo)記語(yǔ)言是它的子集)的，在文檔聲明中需要引用.dtd文件(DTD文件就是文檔類型聲明文件)
根據(jù)DTD引入的不同會(huì)觸發(fā)兩種格式
標(biāo)準(zhǔn)模式和混雜模式
標(biāo)準(zhǔn)模式，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面
混雜模式，頁(yè)面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無(wú)法工作。
而html5既然沒有DTD，也就沒有嚴(yán)格模式與寬松模式的區(qū)別，html5有相對(duì)寬松的語(yǔ)法，實(shí)現(xiàn)時(shí)，已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。文檔聲明只要簡(jiǎn)單的<!DOCTYPE html>
17，==運(yùn)算符
下面程序得到的結(jié)果分別是什么？（）
console.log(([])?true:false);
console.log(([]==false?true:false));
console.log(({}==false)?true:false)
A.false true true B.true true true C.true false true D.true true false
解析：
Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0
因此：
console.log(([])?true:fasle);// => console.log((true)?true:false); //true
console.log([]==false?true:false); // => console.log(0==0?true:false); //true
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false); //false
選D選項(xiàng)
拓展：《JavaScript權(quán)威指南》的部分相關(guān)知識(shí)點(diǎn)
“==”運(yùn)算符（兩個(gè)操作數(shù)的類型不相同時(shí)）
如果一個(gè)值是null，另一個(gè)值是undefined，則它們相等
如果一個(gè)值是數(shù)字，另一個(gè)值是字符串，先將字符串轉(zhuǎn)換為數(shù)學(xué)，然后使用轉(zhuǎn)換后的值進(jìn)行比較。
如果其中一個(gè)值是true，則將其轉(zhuǎn)換為1再進(jìn)行比較。如果其中的一個(gè)值是false，則將其轉(zhuǎn)換為0再進(jìn)行比較。
如果一個(gè)值是對(duì)象，另一個(gè)值是數(shù)字或字符串，則將對(duì)象轉(zhuǎn)換為原始值，再進(jìn)行比較。
18，Vue Virtual DOM
由于原始的DOM操作非常耗時(shí)，對(duì)性能造成了很大的影響，但是js很快。
vue框架使用的是virtual dom來(lái)進(jìn)行dom操作。
虛擬dom的核心思想是:對(duì)復(fù)雜的文檔dom結(jié)構(gòu)，提供一種方便的工具進(jìn)行最小化的dom操作。dom的子節(jié)點(diǎn)，標(biāo)簽，屬性，都可以用js來(lái)表示，當(dāng)數(shù)據(jù)狀態(tài)發(fā)生改變時(shí)，先通過(guò)js對(duì)象表示的虛擬dom計(jì)算出實(shí)際dom需要進(jìn)行的最小改動(dòng)再去操作dom。
11月
1，簡(jiǎn)單的git操作
提交
$ git add . 將文件添加到緩存區(qū)
$ git commit -m "說(shuō)明" 提交緩存區(qū)的代碼
$ git push origin master 推送到源分支
拉取并合并
$ git pukk origin master
2，--save和--save-dev
- --save將install的依賴包名放入package.json的dependencies中，dependencies屬于項(xiàng)目發(fā)布之后還是需要依賴的東西。
- --save-dev將insatll的依賴包名放入package.json的devDependencies中，devDependencies屬于項(xiàng)目發(fā)布前打包，編譯等需要所依賴的工具，項(xiàng)目上線以后并不需要這些東西。webpack屬于打包工具，安裝時(shí)npm install webpack --sava-dev
3，css選擇器權(quán)重
行內(nèi)樣式(1000) > id選擇器(100) > class選擇器(10) == 屬性選擇器(10) > 偽類選擇器(+1) > 標(biāo)簽選擇器(1) > 通用選擇器(0)
4，逗號(hào)選擇器總是由逗號(hào)最后的一個(gè)表達(dá)式?jīng)Q定的
5，瀏覽器渲染過(guò)程
- html文檔加載后，構(gòu)建dom tree
- css文檔加載后，構(gòu)建css rule tree
- dom tree 和 rule tree 結(jié)合生成 render tree，渲染樹
- layout 計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，叫回流，或者布局
- 繪制（Painting）根據(jù)上一步的layout計(jì)算出的位置和元素尺寸進(jìn)行頁(yè)面的繪制
dom tree --> rule tree --> render tree --> layout --> painting
6，call，apply
通過(guò)document.getElementsByTagName選擇的dom 節(jié)點(diǎn)是一種類似array的array。它不能應(yīng)用Array下的push,pop等方法。我們可以通過(guò)：
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
這樣domNodes就可以應(yīng)用Array下的所有方法了。
12月
1，Object.prototype.toString.call([1,2,3])
數(shù)組是類對(duì)象，但它不是真正的對(duì)象，不能直接調(diào)用toString方法，通過(guò)call改變this的指向，使得數(shù)組調(diào)用對(duì)象原型上的toString方法，數(shù)組作為類對(duì)象返回[Object string]，而真正的對(duì)象則返回[Object object]。
另外判斷其是否為數(shù)組
[1,2,3].__proto__.constructor == Array
true
2，vue生命周期的操作問題
vue生命周期從init到destroy，應(yīng)該在哪個(gè)地方操作dom，那個(gè)地方操作數(shù)據(jù)？
首先，獲取異步數(shù)據(jù)在created中，因?yàn)閏reated中還未掛載vue實(shí)例，且未渲染，如果在其后獲取異步數(shù)據(jù)，雖然也可以，但是會(huì)導(dǎo)致頁(yè)面刷新兩次，導(dǎo)致加載時(shí)間過(guò)長(zhǎng)，所以獲取異步數(shù)據(jù)，預(yù)處理數(shù)據(jù)都應(yīng)該在created中操作。
其次，操作dom，應(yīng)該在mounted或者vm.nextTick之后，因?yàn)榇藭r(shí)所有的dom的掛載和渲染都已經(jīng)完成，此時(shí)操作dom才不會(huì)出現(xiàn)問題。
最后再提一下updated，updated在每次數(shù)據(jù)更新的時(shí)候都會(huì)被觸發(fā)，而mounted只觸發(fā)一次，如果updated中獲取異步數(shù)據(jù)，則每次頁(yè)面有數(shù)據(jù)變化時(shí)都會(huì)觸發(fā)這個(gè)異步請(qǐng)求。所以u(píng)pdated一般不推薦使用。
3，fork和clone的區(qū)別
- 區(qū)別
git clone 是在自己電腦（這里我是ubuntu）直接敲命令，結(jié)果是將github倉(cāng)庫(kù)中的項(xiàng)目克隆到自己本地電腦中了
fork是直接訪問github網(wǎng)站，在項(xiàng)目頁(yè)面中點(diǎn)擊fork，然后自己github項(xiàng)目中就會(huì)多出一個(gè)復(fù)制的項(xiàng)目 - 用法
如果我們想要修改他人github項(xiàng)目的話，我們直接git clone代碼到本地是不能pull的，所以我們使用fork，先把代碼復(fù)制到自己的github倉(cāng)庫(kù)，然后git clone到本地修改，然后在提交pull（這里的pull是pull到自己github倉(cāng)庫(kù)了，我們自己的github倉(cāng)庫(kù)中的代碼是fork源的一個(gè)分支），這時(shí)候我們想要把修改的代碼提交給他人的話，就可以在自己github上pull，等其他人看到后就可以把代碼做一個(gè)合并。
2018.5.21
1，重溫圣杯布局和雙飛翼布局
圣杯布局和雙飛翼布局都是三列布局左右長(zhǎng)度固定，中間寬度隨左右變化的的一種方式，當(dāng)然現(xiàn)在可以使用flex，中間flex為1，左右固定。
圣杯布局：
雙飛翼布局：
盒子固定，中間自適應(yīng)內(nèi)容用新的寬度100%的盒子包裹，新盒子向內(nèi)padding，左右兩側(cè)僅需利用margin負(fù)邊距即可。
