JSLearn

JSLearn-ES6 'ES6語法學(xué)習(xí)'

JavaScript基礎(chǔ)知識剖析

01 變量與原型

01-01 變量類型和計(jì)算（1）
01-02 變量類型和計(jì)算（2）
01-03 變量類型和計(jì)算（3）-JSON的理解
01-04 原型與原型鏈-構(gòu)造函數(shù)
01-05 原型規(guī)則和示例
01-06 原型鏈
01-07 instanceof
01-08 知識點(diǎn)小結(jié) & 解決問題

02

02-01 作用域和閉包-執(zhí)行上下文
02-02 作用域和閉包-this
02-03 作用域和閉包-作用域
02-04 作用域和閉包-閉包
02-05 知識點(diǎn)小結(jié) & 解決問題

03

03-01 異步和單線程-什么是異步
03-02 異步和單線程-單線程
03-03 其他知識點(diǎn)-日期和Math
03-04 其他知識點(diǎn)-數(shù)組和對象的API

04

04-01 從基礎(chǔ)知識到JS-Web-API
04-02 DOM本質(zhì)
04-03 DOM節(jié)點(diǎn)操作
04-04 DOM結(jié)構(gòu)操作
04-05 DOM知識總結(jié)
04-06 BOM知識點(diǎn)

05

05-01 事件-知識點(diǎn)
05-02 Ajax-XMLHttpRequest
05-03 存儲

06

06-01 模塊化
06-02 模塊化-AMD
06-03 模塊化-CommonJS

07

07-01 上線回滾-上線回滾流程

08 JS算法

08-01 JavaScript算法測試函數(shù)
08-02 JavaScript算法-冒泡排序
08-03 JavaScript算法-選擇排序

09 函數(shù)應(yīng)用

09-01 JavaScript算法測試函數(shù)

JS小練習(xí)

JSDemo JS小程序
JDMenu 京東無延遲菜單
DatePicker組件開發(fā)
手風(fēng)琴效果開發(fā)

知識點(diǎn)學(xué)習(xí)

01-01

變量類型和計(jì)算（1）

JS中使用typeof能得到的哪些類型
何時(shí)使用===何時(shí)使用 ==
JS中有哪些內(nèi)置函數(shù)
JS變量按照存儲方式區(qū)分為哪些類型购披，并描述其特點(diǎn)
如何理解JSON

值類型

從內(nèi)存來說值類型是把每一個(gè)值存儲在變量類型的每一個(gè)位置

var a = 100;
var b = a;
a = 200
console.log(b);//100

引用類型

把a(bǔ)賦值*-成一個(gè)對象伺绽，a的位置是通過指針指向一個(gè)位置
把b賦值成a，其實(shí)是定義一個(gè)b，b的指針指向了那個(gè)對象位置
也就是有兩份 age：20的對象
對象的引用，就相當(dāng)于復(fù)寫一個(gè)對象，這兩個(gè)對象之間相互獨(dú)立
引用類型：對象、數(shù)組、函數(shù)

var a ={age:20};
var b = a;
b.age = 21;
console.log(a.age); //21

typeof運(yùn)算符

typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton

變量計(jì)算-強(qiáng)制類型轉(zhuǎn)換

字符串拼接

var a = 100 + 10;//110
var b = 100 + '10';//10010

== 運(yùn)算符

100 == '100' //true
0 == '' //true
null == undefined //true

if語句

var a = true;
if(a){
  //....
}
var b = 100;
if (b) {
  //....
}
var c = ''纪挎；
if (c) {
  //...
}

邏輯運(yùn)算

console.log(10 && 0); //0
console.log('' || 'abc'); //abc
console.log(!window.acb); //true

//判斷一個(gè)變量會被當(dāng)做true還是false
var a = 100;
console.log(!!a);//true

01-02

變量類型和計(jì)算（2）

JS中使用typeof能得到的類型

//問題：JS中使用typeof能得到哪些類型
typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton

總結(jié)來說typeof可以得到undefined、String跟匆、number异袄、boolean可以區(qū)分值類型，但對于引用類型無法很細(xì)的區(qū)分贾铝，只能區(qū)分函數(shù)隙轻。
尤其是typeof null object它是一個(gè)引用類型

何時(shí)使用 === 和 ==

//問題：何時(shí)使用===何時(shí)使用==

if (obj.a == null) {
  //這里相當(dāng)于 obj.a === null || obj.a === undefined,簡寫形式
  //這是jquery源碼中推薦的寫法
}

JS中的內(nèi)置函數(shù)

//問題：JS中有哪些內(nèi)置函數(shù)----數(shù)據(jù)封裝類對象
//作為構(gòu)造函數(shù)的作用
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

JS按照存儲方式區(qū)分變量類型

//JS 變量按照存儲方式區(qū)分為哪些類型，并描述其特點(diǎn)

//值類型
var a = 10;
var b = a;
a = 11;
console.log(b);  // 10

//引用類型
var obj1 = {x:100}
var obj2 = obj1;
obj1.x = 200;
console.log(obj2.x); // 200

ES中垢揩，引用類型是一種數(shù)據(jù)結(jié)構(gòu)玖绿，用于將數(shù)據(jù)和功能組織在一起

01-03

變量類型和計(jì)算（3）-理解JSON

//問題：如何理解JSON
//JSON只不過是一個(gè)JS對象
//JSON也是一個(gè)數(shù)據(jù)格式
JSON.stringify({a:10,b:20});
JSON.parse('{"a":10."b":20}')

01-04

原型與原型鏈-構(gòu)造函數(shù)

如何準(zhǔn)確判斷一個(gè)變量數(shù)組類型
寫一個(gè)原型鏈繼承的例子
描述new一個(gè)對象的過程
zepto(或其他框架)源碼中如何使用原型鏈

知識點(diǎn)

構(gòu)造函數(shù)
構(gòu)造函數(shù)-擴(kuò)展
原型規(guī)則和示例
原型鏈
instanceof

構(gòu)造函數(shù)

自己的想法
普通的函數(shù)就像是按步驟執(zhí)行的動(dòng)作，而構(gòu)造函數(shù)更像是可更改零件的木偶叁巨，普通函數(shù)可以直接調(diào)用斑匪，但是構(gòu)造函數(shù)需要new
因?yàn)闃?gòu)造函數(shù)也是函數(shù)，所以可以直接被調(diào)用，但是它的返回值為undefine蚀瘸，此時(shí)構(gòu)造函數(shù)里面的this對象等于全局this對象
擴(kuò)展實(shí)例和對象的區(qū)別狡蝶，從定義上來講：1、實(shí)例是類的具象化產(chǎn)品贮勃，2贪惹、而對象是一個(gè)具有多種屬性的內(nèi)容結(jié)構(gòu)。

funciton Foo(name,age){
  this.name = name;
  this.age = age;
  this.class = 'class-1';
  // return this //默認(rèn)有這一行
}
var f = new Foo('zhangsan',20); //實(shí)例化對象
// var f1 = new Foo('lisi',22) //創(chuàng)建多個(gè)對象

構(gòu)造函數(shù)-擴(kuò)展

var a = {} 其實(shí)是 var a = new Object()的語法糖
var a = [] 其實(shí)是 var a = new Array()的語法糖
function Foo(){...}其實(shí)是 var Foo = new Function(...)
使用 instanceof 判斷一個(gè)函數(shù)是否是一個(gè)變量的構(gòu)造函數(shù)
- 如果想判斷一個(gè)變量是否為“數(shù)組”：變量 instanceof Array

01-05

原型規(guī)則和示例

5條原型規(guī)則
原型規(guī)則是學(xué)習(xí)原型鏈的基礎(chǔ)

第1條

所有的引用類型(數(shù)組寂嘉、對象奏瞬、函數(shù))，都具有對象特質(zhì)泉孩、即可自由擴(kuò)展屬性(除了“NULL”以外)

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn(){
  fn.a=100;
}

第2條

所有的引用類型(數(shù)組硼端、對象、函數(shù))寓搬，都有一個(gè)__proto__(隱式原型)屬性珍昨，屬性值是一個(gè)普通的對象

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

第3條

prototype解釋為JavaScript開發(fā)函式庫及框架
所有的函數(shù)，都有一個(gè)prototype（顯示原型）屬性句喷，屬性值也是一個(gè)普通對象镣典。

console.log(fn.prototype);

第4條

所有引用類型（數(shù)組、對象唾琼、函數(shù)）骆撇，__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值

console.log(obj.__proto__ === Object.prototype);

第5條

當(dāng)試圖得到一個(gè)對象的某個(gè)屬性時(shí)，如果這個(gè)對象本身沒有這個(gè)屬性父叙，那么會去它的__proto__(即它的構(gòu)造函數(shù)prototype)中尋找

//構(gòu)造函數(shù)
function Foo(name,age){
  this.name = name;
}
Foo.prototype.alertName = function () {
  alert(this.name);
}
//創(chuàng)建示例
var f = new Foo('zhangsan')
f.printName = function () {
  console.log(this.name);
}
//測試
f.printName();
f.alertName();

this

循環(huán)對象自身屬性

var item;
for (item in f) {
  //高級瀏覽器已經(jīng)在for in 中屏蔽了來自原型的屬性
  //但是這里建議大家還是加上這個(gè)判斷，保證程序的健壯性
  if(f.hasOwnProperty(item)) {
    console.log(item);
  }
}

01-06

原型鏈

//構(gòu)造函數(shù)
function Foo(name,age){
  this.name = name;
}
Foo.prototype.alertName = function (){
  alert(this.name);
}
//創(chuàng)建示例
var f = new Foo('zhangsan');
f.printName = function () {
  console.log(this.name);
}
//測試
f.printName();
f.alertName();
f.toString(); // 要去f.__proto__.__proto__中查找

原型鏈視圖

原型鏈圖

01-07

instanceof

用于判斷引用類型屬于哪個(gè)構(gòu)造函數(shù)的方法
f instanceof Foo 的判斷邏輯是：
f的__proto__一層一層往上走肴裙，是否能對應(yīng)到Foo.prototype
再試著判斷f instanceof Object

01-08

知識點(diǎn)小結(jié) & 解決問題

如何準(zhǔn)確判斷一個(gè)變量是數(shù)組類型

var arr = [];
arr instanceof Array; //true
typeof arr //object  typeof是無法判斷是否是數(shù)組

寫一個(gè)原型鏈繼承的例子

//動(dòng)物
function Animal(){
  this.eat = function () {
    console.log('animal eat');
  }
}
//狗??
function Dog(){
  this.bark = function () {
    console.log('dog bark');
  }
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
//如果要真正寫趾唱，就要寫更貼近實(shí)戰(zhàn)的原型鏈

推薦阮一峰老師?????的兩篇文章：Javascript 面向?qū)ο缶幊蹋ㄒ唬悍庋b、Javascript繼承機(jī)制的設(shè)計(jì)思想

描述new一個(gè)對象的過程

創(chuàng)建一個(gè)新對象
this指向這個(gè)新對象
執(zhí)行代碼蜻懦，即對this賦值
返回this ??

function Foo(name,age){
  this.name = name ;
  this.age = age ;
  //return this //默認(rèn)有這一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('list',22) //創(chuàng)建多個(gè)對象

zepto(或其他框架)源碼中如何使用原型鏈

甜癞。。宛乃。悠咱。。征炼。

貼近實(shí)際開發(fā)原型鏈繼承的例子

function Elem(id) {
  this.elem = document.getElementById(id);
}

Elem.prototype.html = function (val) {
  var elem = this.elem;
  if (val) {
    elem.innerHTML = val;
    return this; // 鏈?zhǔn)讲僮?  }else {
    return elem.innerHTML;
  }
}

Elem.prototype.on = function (type, fn) {
  var elem = this.elem ;
  elem.addEventListener(type, fn) ;
}

var div1 = new Elem('div1');
//console.log(div1.html());
div1.html('<p>hello imooc</p>')
div1.on('click',function () {
  alert('click')
})

02-01

作用域和閉包-執(zhí)行上下文

說一下對變量提升的理解
說明this幾種不同的使用場景
創(chuàng)建10個(gè)<a>標(biāo)簽析既，點(diǎn)擊的時(shí)候彈出來對應(yīng)的序號
如何理解作用域
實(shí)際開發(fā)中閉包的應(yīng)用

知識點(diǎn)梳理

執(zhí)行上下文
this
作用域
作用域鏈
閉包

執(zhí)行上下文

console.log(a);  // undefined
var a = 100;

fn('zhangsan')  // 'zhangsan' 20
function fn(name) {
  age = 20;
  console.log(name, age);
  var age;
}

范圍：一段<script>或者一個(gè)函數(shù)
全局：變量定義、函數(shù)聲明
函數(shù)：變量定義谆奥、函數(shù)聲明眼坏、this、arguments
注意??“函數(shù)聲明”和“函數(shù)表達(dá)式”的區(qū)別

fn()
function fn() {
  //聲明
}

fn1()
var fn1 = function () {
  //表示
}
var a = 100; //類似于這個(gè)

//全局聲明

console.log(a);
var a = 100;

fn('zhangsan')
function fn(name) {
  console.log(this);
  age = 20;
  console.log(name,age);
  var age;

  bar(100);

  function bar(num) {
    console.log(num);
  }
}

02-01

作用域和閉包-this

this 要在執(zhí)行時(shí)才能確認(rèn)值酸些，定義時(shí)無法確認(rèn)值

var a = {
  name:'A',
  fn:function(){
    console.log(this.name);
  }
}
a.fn() //this === A
a.fn.call({name:'B'}) //this === {name:'B'}
var fn1 = a.fn;
fn1() //this === window

作為構(gòu)造函數(shù)執(zhí)行
作為對象屬性執(zhí)行
作為普通函數(shù)執(zhí)行
call apply bind

function Foo(name){
  this.name = name;
}
var f = new Foo('zhangsan');

var obj = {
  name:'A',
  printName:function(){
    console.log(this.name);
  }
}
obj.printName()

function fn(){
  console.log(this);
}
fn()

// call apply bind
function fn1(name) {
  alert(name);
  console.log(this);
}
fn1.call({x:100},'zhangsan',20);
// bind
var fn2 = function fn2(name) {
  alert(name);
  console.log(this);
}.bind({y:200});
fn2('zhangsan',20);

02-03

作用域和閉包-作用域

作用域

沒有塊級作用域
只有函數(shù)和全局作用域

//無塊級作用域
if(true){
  var name = 'zhangsan';
}
console.log(name);

//函數(shù)和全局作用域
var a = 100;
function fn() {
  var a = 200;
  console.log('fn',a);
}
console.log('global',a);
fn();

作用域鏈

var a = 100;
function fn() {
  var b = 200;

  //但錢作用域沒有定義變量宰译，即“自由變量”
  console.log(a);
  console.log(b);
}
fn();

var a = 100;
function F1() {
  var b = 200;
  function F2() {
    var c = 300;
    console.log(a);//a是自由變量檐蚜。形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)，向父級去查找
    console.log(b);//b是自由變量
    console.log(c);//
  }
}

02-04

作用域和閉包-閉包

函數(shù)作為返回值

function F1() {
  var a = 100;
  //返回一個(gè)函數(shù)（函數(shù)作為返回值）
  return function () {
    console.log(a);//自由變量沿侈，父作用域中查找
  }
}
//f1得到一個(gè)函數(shù)
var f1 = F1();
var a = 200;
f1();

函數(shù)作為參數(shù)傳遞

function F1() {
  var a = 100;
  return function () {
    console.log(a);  //自由變量闯第，父作用域中查找
  }
}
var f1 = F1();
function F2(fn) {
  var a = 200;
  fn();
}
F2(f1);

02-05

知識點(diǎn)小結(jié) & 解決問題

對變量提升的理解

變量定義
函數(shù)聲明（注意和函數(shù)表達(dá)式的區(qū)別）

this幾種不停的使用場景

作為構(gòu)造函數(shù)執(zhí)行
作為對象屬性執(zhí)行
作為普通函數(shù)執(zhí)行
call apply bind

function Foo(name){
  this.name = name;
}
var f = new Foo('zhangsan');

var obj = {
  name:'A',
  printName:function(){
    console.log(this.name);
  }
}
obj.printName()

function fn(){
  console.log(this);
}
fn()

// call apply bind
function fn1(name) {
  alert(name);
  console.log(this);
}
fn1.call({x:100},'zhangsan',20);
// bind
var fn2 = function fn2(name) {
  alert(name);
  console.log(this);
}.bind({y:200});
fn2('zhangsan',20);

創(chuàng)建10個(gè)<a>標(biāo)簽點(diǎn)擊的時(shí)候彈出來對應(yīng)的序號

錯(cuò)誤寫法

//這是一個(gè)錯(cuò)誤的寫法！Ｗ菏谩咳短！
var i,a;
for (var i = 0; i < 10; i++) {
  a = document.createElement('a');
  a.innerHTML = i + '<br>';
  a.addEventListener('click',function (e) {
    e.preventDefault();
    alert(i)
  })
  document.body.appendChild(a);
}
//輸出為如下： <a>"9"<br></a>

正確寫法

//這是一個(gè)正確寫法！Ｖ茄帷诲泌！
var i;
for (i = 0; i < 10; i++) {
  (function(i){
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click',function (e) {
      e.preventDefault();
      alert(i);
    })
    document.body.appendChild(a);
  })(i)
}

如何理解作用域

自由變量
作用域鏈蜗字，即自由變量的查找
閉包的兩個(gè)場景

實(shí)際開發(fā)中閉包的應(yīng)用

//閉包實(shí)際應(yīng)用中主要作用于封裝變量沿腰，收取權(quán)限
function isFirstLoad() {
  var _list = [];
  return function (id) {
    if(_list.indexOf(id) >= 0){
      return false;
    }else {
      _list.push(id);
        return true;  
    }
  }
}

// 應(yīng)用
var firstLoad = isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false;
firstLoad(20) // true

03-01

異步和單線程-什么是異步

同步和異步的區(qū)別是什么？分別舉一個(gè)同步和異步的例子
一個(gè)關(guān)于setTimeout的筆試題
前端使用異步的場景有哪些

異步知識點(diǎn)

什么是異步（對比同步）
前端使用異步的場景
異步與單線程

什么是異步

console.log(100); // step1
setTimeout(function () {
  console.log(200); // step3
},1000);
console.log(300); // step2

對比同步

console.log(100);
alert(200) // 1秒鐘后點(diǎn)擊確認(rèn)
console.log(300);

何時(shí)需要異步

在可能發(fā)生等待的情況
等待過程中不能像alert一樣阻塞程序運(yùn)行
因此厘贼，所有的所有的等待情況都需要異步

前端使用異步的場景

定時(shí)任務(wù)：setTimeout,setInverval
網(wǎng)絡(luò)請求：ajax請求,動(dòng)態(tài)<img>加載

//ajax請求
console.log('start');
$.get('./data1.json',function (data1) {
  console.log(data1);
})
console.log('end');
//<img>加載示例
console.log('start');
var img = document.createElement('img');
img.onload = function () {
  console.log('loaded');
}
img.src = '/xxx.png';
console.log('end');

事件綁定

03-02

異步和單線程-單線程

console.log(100); // step1
setTimeout(function () {
  console.log(200); // step3
});
console.log(300); // step2

從上面代碼中理解單線程
- 執(zhí)行第一行诚卸，打印100
- 執(zhí)行setTimeout后葵第，傳入setTimeout的函數(shù)會被暫存起來，不會立即執(zhí)行（單線程的特點(diǎn)合溺，不能同時(shí)干兩件事）
- 執(zhí)行最后一行打印300
- 待所有程序執(zhí)行完卒密，處于空閑狀態(tài)時(shí)，會立馬看有沒有暫存起來的要執(zhí)行
- 發(fā)現(xiàn)暫存起來的setTimeout中的函數(shù)無需等待時(shí)間棠赛，就立即來過來執(zhí)行

解答：異步與單線程

同步和異步的區(qū)別是什么哮奇？分別舉一個(gè)同步和異步的例子
- 同步會阻塞代碼執(zhí)行，而異步不會
- alert是同步睛约，setTimeout是異步
一個(gè)關(guān)于setTimeout的筆試題
可以說setTimeout是等待頁面加載完畢后鼎俘，在進(jìn)行加載

console.log(1);
setTimeout(function () {
  console.log(2);
},0)
console.log(3);
setTimeout(function () {
  console.log(4);
},1000)
console.log(5);

前端使用異步的場景有哪些
- 定時(shí)任務(wù):setTimeout,setInverval
- 網(wǎng)絡(luò)任務(wù):ajax請求，動(dòng)態(tài)<img>加載
- 事件綁定

03-03

其他知識點(diǎn)-日期和Math

獲取 2017-06-10 格式的日期

Date.now(); // 獲取當(dāng)前時(shí)間毫秒數(shù)
var dt = new Date();
dt.getTime() // 獲取毫秒數(shù)
dt.getFullYear() // 年
dt.getMonth() // 月（0-11）
dt.getDate() // 日（0-31）
dt.getHours() // 小時(shí)（0-23）
dt.getMinutes() // 分鐘（0-59）
dt.getSeconds() // 秒 （0-59）

獲取隨機(jī)數(shù)辩涝，要求時(shí)長度一致的字符串格式

Math 獲取隨機(jī)數(shù) Math.random()

03-04

其他知識點(diǎn)-數(shù)組和對象的API

寫一個(gè)能遍歷對象和數(shù)組的通用forEach函數(shù)

數(shù)組API

forEach 便利所有元素

var arr = [1,2,3];
arr.forEach(function (item,index) {
  //遍歷數(shù)組所有元素
  console.log(index,item);
})

every 判斷所有元素是否都符合條件

var arr = [1,2,3];
var result = arr.every(function (item,index) {
  if (item<4) {
    //用于判斷所有的數(shù)組元素贸伐，都滿足一個(gè)條件
    return true;
  }
})
console.log(result);

some 判斷是否有至少一個(gè)元素符合條件

var arr = [1,2,3];
var result = arr.some(function (item,index) {
  // 用來判斷所有的數(shù)組元素，只要有一個(gè)滿足條件即可
  if (item<2) {
    return true;
  }
})
console.log(result);

sort 排序

var arr = [1,4,2,3,5]
var arr2 = arr.sort(function (a,b) {
  //從小到大排序
  return a - b;
  //從大到小排序
  //return b - a
})
console.log(arr2);

map 對元素重新組裝怔揩，生成新數(shù)組

var arr = [1,2,3,4]
var arr2 = arr.map(function functionName(item,index) {
  //將元素重新組裝捉邢，并返回
  return '<b>' + item + '</b>';
})
console.log(arr2);

filter 過濾符合條件的元素

var arr = [1,2,3];
var arr2 = arr.filter(function (item,index) {
  //通過某一個(gè)條件過濾數(shù)組
  if(item >= 2){
    return true;
  }
})
console.log(arr2);

對象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]);
  }
}

舉個(gè)例子

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
        <title>Register</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
<body>
  <script type="text/javascript">
    console.log(Date.now());
    var dt = new Date();
    console.log(dt);
    console.log(dt.getTime());
    console.log(dt.getFullYear());
    console.log(dt.getDate());

    var arr = [1,2,3,4]

    arr.forEach(function (item,index) {
      console.log(index,item);
    })
  </script>
</body>
</html>

問題解答

獲取2017-06-10格式的日期

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();
  if (month < 10) {
    //強(qiáng)制轉(zhuǎn)換類型
    month = '0' + month;
  }
  if (date < 10) {
    //強(qiáng)制轉(zhuǎn)換類型
    date = '0' + date;
  }
  //強(qiáng)制轉(zhuǎn)換類型
  return year + '-' + month + '-' + date;
}
var dt = new Date();
var formatDate = formatDate(dt);
console.log(formatDate);

獲取隨機(jī)數(shù)商膊，要求是長度一致的字符串格式

var random = Math.random();
var random = random + '0000000000'; //后面加上10個(gè)0
var random = random.slice(0,10);
console.log(random);

寫一個(gè)能遍歷對象和數(shù)組的通用forEach函數(shù)

//do
var arr = [1,2,3];
//注意伏伐，這里的參數(shù)的順序換了，為了和對象的遍歷格式一致
forEach(arr,function (index,item) {
  console.log(index.item);
})

var obj = {x:100,y:200};
forEach(obj,function (key,value) {
  console.log(key,value);
})

//init
function forEach(obj,fn) {
  var key;
  if (obj instanceof Array) {
    //準(zhǔn)確判斷是不是一個(gè)數(shù)組
    obj.forEach(function (index.item) {
      fn(index,item);
    })
  }else {
    //不是數(shù)組就是對象
    for (key in obj){
      fn(key,obj[key]);
    }
  }
}

04-01

從基礎(chǔ)知識到JS-Web-API

變量類型和計(jì)算
原型和原型鏈
閉包和作用域
異步和單線程
其他（如日期晕拆、Math秘案、各種常用API）

特點(diǎn)

特點(diǎn)：表面上來看不能用于工作中開發(fā)代碼
內(nèi)置函數(shù)：Object Array Boolean String ......
內(nèi)置對象：Math JSON ...
我們連在網(wǎng)頁彈出一句Hello World都不能實(shí)現(xiàn)

JS-Web-API

JS基礎(chǔ)知識：ECMA 262標(biāo)準(zhǔn)
JS-Web-API：W3C標(biāo)準(zhǔn)
W3C標(biāo)準(zhǔn)中關(guān)于JS的規(guī)定有：
- DOM操作
- BOM操作
- 事件綁定
- ajax請求(包含http協(xié)議)
- 存儲

基本操作

頁面彈框是windows.alert(123)，瀏覽器需要做：
- 定義一個(gè)windows全局變量，對象類型阱高；
- 給它定義一個(gè)alert屬性赚导，屬性值是一個(gè)函數(shù)；
獲取元素document.getElementById(id),瀏覽器需要：
- 定義一個(gè)document全局變量赤惊，對象屬性吼旧；
- 給它定義一個(gè)getElementById的屬性，屬性值是一個(gè)函數(shù)未舟；
W3C標(biāo)準(zhǔn)沒有規(guī)定任何JS基礎(chǔ)相關(guān)的東西圈暗；
不管什么變量類型、原型裕膀、作用域和異步
只管定義用于瀏覽器中JS操作頁面的API和全局變量
全面考慮员串，JS內(nèi)置的全局函數(shù)和對象有哪些？
之前ECMA的
比如 window document
所有未定義的全局變量昼扛，如navigator.userAgent

總結(jié)

常說的JS(瀏覽器執(zhí)行的JS)包含兩個(gè)部分：
JS基礎(chǔ)知識(ECMA262標(biāo)準(zhǔn))寸齐；
JS-Web-API(W3C標(biāo)準(zhǔn))；

04-02

DOM操作

Document Object Model
DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)
DOM操作的常用API有哪些
DOM節(jié)點(diǎn)的attr和property有和區(qū)別

DOM的本質(zhì)

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Dont forget me this weekend</body>
<other>
<a></a>
<b></b>
</other>
</note>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>
<body>
  <div>
    <p>this is p</p>
  </div>
</body>
</html>

04-03

DOM節(jié)點(diǎn)操作

獲取DOM節(jié)點(diǎn)
prototype,獲取JS對象上的屬性
Attribute,獲取DOM標(biāo)簽上的屬性

獲取DOM節(jié)點(diǎn)

var div1 = document.getElementById('div1'); //元素
var divList = document.getElementByTagName('div'); //集合
console.log(divList.length);
console.log(divList[0]);

var containerList = document.getElementByClassName('.container'); //集合
var pList = document.querySelectorAll('p'); //集合

property

var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width); // 獲取樣式
p.style.width = '100px' // 修改樣式
console.log(p.className);//獲取class
p.className = 'p1' //修改class

// 獲取 nodeName 和 ndoeType
console.log(p.nodeName);
console.log(p.nodeType);

Attribute

var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name');
p.getAttribute('data-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font-size:30px;');

04-04

DOM結(jié)構(gòu)操作

新增節(jié)點(diǎn)

var div1 = document.getElementById('div1');
//添加新節(jié)點(diǎn)
var p1 = document.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1); //添加新創(chuàng)建的元素
//移除已有節(jié)點(diǎn)
var p2 = document.getElementById('p2');
div1.appendChild(p2);

獲取父元素-獲取子節(jié)點(diǎn)

var div1 = document.getElementById('div1');
var parent = div1.parentElement;

刪除節(jié)點(diǎn)

var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]);

舉個(gè)栗子(例子：example)３场Ｃ祓小！

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="div1">
    <p id="p1">this is p1</p>
    <p id="p2">this is p2</p>
  </div>
  <div id="div2">
    <p id="p3">this is p3</p>
    <p id="p4">this is p4</p>
  </div>
  <script type="text/javascript">
  // 1.
  // var p = document.createElement('p');
  // p.innerHTML = 'new p';
  // var div1 = document.getElementById('div1');
  // div1.appendChild(p);
  // 2.移動(dòng)P4到div1中
  var p4 = document.getElementById('p4');
  var div1 = document.getElementById('div1');
  div1.appendChild(p4);
  console.log(p4.parentElement);
  console.log(div1.parentElement);
  console.log(div1.childNodes);
  console.log(div1.childNodes[0].nodeType); //text 3
  console.log(div1.childNodes[1].nodeType); //p    1
  </script>
</body>
</html>

04-05

DOM知識解答

DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)?
- 樹
DOM操作的常用API有哪些
- 獲取DOM節(jié)點(diǎn)蛹含，以及節(jié)點(diǎn)的property和Attribute
- 獲取父節(jié)點(diǎn)毅厚，獲取子節(jié)點(diǎn)
- 新增節(jié)點(diǎn)，刪除節(jié)點(diǎn)
DOM節(jié)點(diǎn)的Attribute和property有何區(qū)別
- property只是一個(gè)JS對象的屬性的修改
- Attribute是對html標(biāo)簽屬性的修改
重點(diǎn)總結(jié)
- DOM本質(zhì)
- DOM節(jié)點(diǎn)的操作
- DOM結(jié)構(gòu)操作

04-06

BOM操作

Browser Object Model

如何監(jiān)測瀏覽器的類型

拆解url的各部分

知識點(diǎn)

navigator & screen

//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);
//screen
console.log(screen.width);
console.log(screen.height);

location & history

//location
console.log(location.href);
console.log(location.protocel);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
//history
history.back();
history.forward();

05-01

編寫一個(gè)通用的事件監(jiān)聽函數(shù)

描述事件冒泡流程

* DOM樹形結(jié)構(gòu)
* 事件冒泡
* 阻止冒泡
* 冒泡的應(yīng)用

對于一個(gè)無線下拉加載圖片的頁面浦箱，如何給每個(gè)圖片綁定事件

* 使用代理
* 知道代理的有點(diǎn)

通用事件綁定

var btn = document.getElementById('btn1');
btn.addEventListener('click',function (event) {
  console.log('clicked');
})

function bindEvent(elem,type,fn) {
  elem.addEventListener(type,fn);
}
var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
  e.preventDefault(); //阻止默認(rèn)行為
  alert('clicked');
});

關(guān)于IE低版本的兼容性
- IE低版本使用attachEvent綁定事件吸耿，和W3C標(biāo)準(zhǔn)不一樣
- IE低版本使用量非常少，很多網(wǎng)站早已不支持
- 建議對IE低版本的兼容性：了解即可酷窥，無需深究
- 如果遇到對IE低版本要求苛刻的面試珍语，果斷放棄

事件冒泡

<body>
  <div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
  </div>
  <div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
  </div>
</body>

var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1,'click',function (e) {
  e.stopPropatation();
  alert('激活');
});
bindEvent(body,'click',function(e){
  alert('取消');
})

代理

<div id="div1">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <!-- 會隨時(shí)新增更多a標(biāo)簽 -->
</div>

var div1 = document.getElementById('div1');
div1.addEventListener('click',function (e) {
  var target = e.target;
  if (target.nodeName === 'A') {
    alert(target.innerHTML);
  }
})

完善通用綁定事件的函數(shù)

//使用代理
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function (e) {
  console.log(this.innerHTML);
})

function bindEvent(elem,type,selector,fn) {
  if (fn == null) {
    fn = selector;
  }
  elem.addEventListener(type,function (e) {
    var target;
    if (selector) {
      target = e.target;
      if (target.matches(selector)) {
        fn.call(target,e);
      }
    }else {
      fn(e);
    }
  })
}

05-02

Ajax-XMLHttpRequest

手動(dòng)編寫一個(gè)ajax，不依賴第三方庫
跨域的幾種實(shí)現(xiàn)方式

知識點(diǎn)

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false)
xhr.onreadystatechange = function () {
  //這里的函數(shù)異步執(zhí)行竖幔，可參考之前JS基礎(chǔ)的異步模塊
  if(xhr.readyState == 4){
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}
xhr.send(null);

* IE低版本使用ActiveXObject，和W3C標(biāo)準(zhǔn)不一樣
* IE低版本使用量已經(jīng)非常少是偷，很多網(wǎng)站早已不支持IE低版本
* 建議對IE低版本的兼容性：了解即可拳氢，無需深究

狀態(tài)碼

xhr.onreadystatechange = function () {
  //這里的函數(shù)異步執(zhí)行，可參考之前JS基礎(chǔ)的異步模塊
  if(xhr.readyState == 4){
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}

readyState
- 0-(未初始化)還沒有調(diào)用send()方法
- 1-(載入)已調(diào)用send()方法蛋铆，正在發(fā)送請求
- 2-(載入完成)send()方法執(zhí)行完成馋评，已經(jīng)接收到全部響應(yīng)內(nèi)容
- 3-(交互)正在解析響應(yīng)內(nèi)容
- 4-(完成)響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用
status
- 2XX-表示成功處理請求刺啦。如200
- 3XX-需要重定向留特，瀏覽器直接跳轉(zhuǎn)
- 4XX-客戶端請求錯(cuò)誤，如404
- 5XX-服務(wù)端錯(cuò)誤

跨域

什么時(shí)跨域
- 瀏覽器有同源策略，不允許ajax訪問其他域接口
- http://www.yourname.com/page1.html
- http://m.imooc.com/course/ajaxcourserecom?cid=459
- 跨域條件：協(xié)議蜕青、域名苟蹈、端口、有一個(gè)不同就算跨域
  - 但是有三個(gè)標(biāo)簽允許跨域加載資源
  - <img src=XXX>
  - <link href=XXXX>
  - <script src=XXX>
- 三個(gè)標(biāo)簽的場景
  - <img>用于打點(diǎn)統(tǒng)計(jì)右核，統(tǒng)計(jì)網(wǎng)站可能是其他域
  - <link><script>可以使用CDN慧脱，CDN的也是其他域
  - <script>可以用于JSONP
- 跨域注意事項(xiàng)
  - 所有的跨域請求都必須經(jīng)過信息提供方允許
  - 如果未經(jīng)允許即可獲得，那是瀏覽器同源策略出現(xiàn)漏洞
JSONP
- 加載 http://coding.m.imooc.com/classindex.html
- 不一定服務(wù)器端真正有一個(gè)classindex.html文件
- 服務(wù)器可以根據(jù)請求贺喝，動(dòng)態(tài)生成一個(gè)文件菱鸥，返回
- 同理與<script src="http://coding.m.imooc.com/api.js">
- 假如你的網(wǎng)站要跨域訪問慕課網(wǎng)的一個(gè)接口
- 給你一個(gè)地址http://coding.m.imooc.com/api.js
- 返回內(nèi)容格式如callback({x:100,y:200})(可動(dòng)態(tài)生成)

<script>
window.callback = function (data) {
  //這是我們跨域的到信息
  console.log(data);
}
</script>
<script src="http://coding.m.imooc.com/api.js"></script>
<!-- 以上將返回 callback({x:100,y:200}) -->

服務(wù)器端設(shè)置http header
- 另外一個(gè)解決跨域的簡潔方法，需要服務(wù)器來做
- 但是作為交互方躏鱼，我們必須知道這個(gè)方法
- 是將來解決跨域問題的一個(gè)趨勢

//注意：不同后端語言的寫法可能不一樣

//第二個(gè)參數(shù)填寫允許跨域的域名稱氮采，不建議直接寫 “*”
response.setHeader("Access-Control-Allow-Origin","http://a.com, http://b.com");
response.setHeader("Access-Control-Allow-Header","X-Requested-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

//接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");

05-03

存儲

請描述一下cookie,sessionStorage和localStorage的區(qū)別？

cookie

本身用于客戶端和服務(wù)端通信
但是它有本地存儲的功能染苛，于是就被借用
使用document.cookie = ... 獲取和修改即可

cookie用于存儲的缺點(diǎn)

存儲量小鹊漠，只有4kb
所有http請求都帶著，會影響獲取資源的效率
API簡單殖侵，需要封裝才能用document.cookie = ...

localStorage和sessionStorage

HTML5專門為存儲設(shè)計(jì)贸呢，最大容量5M
API簡答易用：
localStorage.setItem(key,value);localStorage.getItem(key);
sessionStorage關(guān)閉瀏覽器會清理
iOS safari 隱藏模式下，localStorage.getItem會報(bào)錯(cuò)
建議統(tǒng)一使用try-catch封裝

cookie sessionStorage localStorage 的區(qū)別

容量
是否會攜帶到ajax中
API易用性

06-01

模塊化

不使用模塊化
使用模塊化
AMD
CommonJS

不使用模塊化

util getFormatDate函數(shù)
a-util.js aGetFormatDate函數(shù) 使用getFormatDate
a.js aGetFormatDate
定義

//util.js
function getFormatDate(date,type) {
  //type === 1返回 2017-06-15
  //type === 2返回 2017年6月15日 格式
  //...
}
//a-util.js
function aGetFormatDate(data) {
  //返回
  return getFormatDate(date,2);
}
// a.js
var dt = new Date()
console.log(aGetFormatDate(dt));

使用

<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
<!-- 1.這些代碼中的函數(shù)必須是全局變量拢军，才能暴露給使用方楞陷。全局變量污染 -->
<!-- 2. a.js 知道要引用 a-util.js ,但是他知道還需要依賴于util.js嗎？ -->

使用模塊化

//util.js
export{
  getFormatDate:function (data,type) {
    //type === 1 返回 2017-06-15
    //type === 2 返回 2017年6月15日 格式
  }
}
//a-util.js
var getFormatDate = require('util.js');
export{
  aGetFormatDate:function (date) {
    //要求返回 2017年6月15日 格式
    return getFormatDate(date,2);
  }
}
// a.js
var aGetFormatDate = require('a-util.js')
var dt = new Date();
console.log(aGetFormatDate(dt));

//直接‘<script src="a.js"></script>’,其他的根據(jù)依賴關(guān)系自動(dòng)引用
//那兩個(gè)函數(shù)茉唉，沒必要做成全局變量固蛾，不會帶來污染和覆蓋

06-02

AMD

require.js requirejs.org/
全局define函數(shù)
全局require函數(shù)
依賴JS會自動(dòng)、異步加載

//util.js
define(function () {
  return{
    getFormatDate: function (date,type) {
      if (type === 1) {
        return '2017-06-15'
      }
      if (type === 2) {
        return '2017年6月15日'
      }
    }
  }
});

//a-util.js
define(['./util.js'],function (util) {
  return{
    aGetFormatDate: function (date) {
      return util.getFormatDate(date,2);
    }
  }
});

// a.js
define('[./a-util.js]',function (aUtil) {
  return{
    printDate:function (date) {
      console.log(aUtil.aGetFormatDate);
    }
  }
});

//main.js
require('[./a.js]',function (a) {
  var date = new Date();
  a.printDate(date);
});

使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>
<body>
  <p>AMD test</p>
  <script src="/require.min.js" data-main="./main.js"></script>
</body>
</html>

06-03

CommonJS

nodejs模塊化規(guī)范度陆，現(xiàn)在被大量用于前端艾凯，原因：
- 前端開發(fā)依賴的插件和庫，都可以從npm中獲取
- 構(gòu)建工具的高度自動(dòng)化懂傀，是的使用npm的成本非常低
- CommonJS不會異步加載JS趾诗，而是同步一次性加載出來

module.exports = {
  getFormatDate:function (data,type) {
    if (type === 1) {
      return '2017-06-15';
    }
    if (type === 2) {
      return '2017年6月15日';
    }
  }
}

// a-util.js
var util = require('util.js')
module.exports = {
  aGetFormatDate:function (data) {
    return util.getFormatDate(data,2);
  }
}

AMD和CommonJS的使用場景

需要異步加載JS，使用AMD
使用了npm之后建議使用CommonJS

07-01

上線回滾-上線回滾流程

上線和回滾的基本流程
linux基本命令

上線回滾流程

重要的開發(fā)環(huán)節(jié)

上線流程要點(diǎn)

將測試完的代碼提交到git版本庫的master分支
將當(dāng)前服務(wù)器的代碼全部打包并記錄版本號蹬蚁，備份
將master分支的代碼提交覆蓋到線上服務(wù)器恃泪，生成新的版本號

回滾流程要點(diǎn)

將當(dāng)前服務(wù)器的代碼打包并記錄版本號，備份
將備份的上一個(gè)版本號解壓犀斋，覆蓋到線上服務(wù)器贝乎，并生成新的版本號

Linux基本命令

服務(wù)器使用Linux居多，server版叽粹，只有命令行
測試環(huán)境要匹配線上環(huán)境览效，因此也是Linux
經(jīng)常需要登陸測試機(jī)來自己配置却舀、獲取數(shù)據(jù)

08-01

JavaScript算法測試函數(shù)

SetData()函數(shù)生成了存儲在數(shù)組中的隨機(jī)數(shù)字。Math類的random()函數(shù)會生成[0,1)區(qū)間內(nèi)的隨機(jī)數(shù)字锤灿。換句話說挽拔，random()函數(shù)生成的隨機(jī)數(shù)字大于等于0，但不會等于1衡招。最后在用Math類的floor()函數(shù)確定最終結(jié)果篱昔。
如下這個(gè)公式可以成功生成1~100的隨機(jī)數(shù)字集合。


function CArray(numElements) {
  this.dataStore = [];
  this.pos = 0;
  this.numElements = numElements;
  this.insert = insert;
  this.toString = toString;
  this.clear = clear;
  this.setData = setData;
  this.swap = swap;
  for (var i = 0; i < numElements; ++i) {
    this.dataStore[i] = i;
  }
}
//數(shù)據(jù)輸出
function setData() {
  for (var i = 0; i < this.numElements; ++i) {
    this.dataStore[i] = Math.floor(Math.random() * (this.numElements + 1));//生成隨機(jī)數(shù)組
  }
}

function clear() {
  for (var i = 0; i < this.dataStore.length; ++i) {
    this.dataStore[i] = 0;
  }
}

function insert(element) {
  this.dataStore[this.pos++] = element;
}

function toString() {
  var restr = "";
  for (var i = 0; i < this.dataStore.length; ++i) {
    restr += this.dataStore[i] + " ";
    if (i > 0 & i % 10 == 0) {
      restr += "\n";
    }
  }
  return restr;
}

function swap(arr,index1,index2) {
  var temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
}

//測試
var numElements = 100;
var myNums = new CArray(numElements);
myNums.setData();
console.log(myNums.toString());

</p>

名詞解釋：

n: 數(shù)據(jù)規(guī)模
k:“桶”的個(gè)數(shù)
In-place: 占用常數(shù)內(nèi)存始腾，不占用額外內(nèi)存
Out-place: 占用額外內(nèi)存
穩(wěn)定性：排序后2個(gè)相等鍵值的順序和排序之前它們的順序相同

08-02

JavaScript算法-冒泡排序

冒泡排序
最慢的排序算法之一
冒泡排序州刽，之所以這么叫是因?yàn)槭褂眠@種排序算法排序時(shí)，數(shù)據(jù)值就會像氣泡一樣從數(shù)組的一端漂浮到另一端浪箭。假設(shè)正在將一組數(shù)字按照升序排列穗椅，較大的值會浮動(dòng)到數(shù)組的右側(cè)，而較小的值會浮動(dòng)到數(shù)組的左側(cè)奶栖。之所以會產(chǎn)生這種現(xiàn)象是因?yàn)樗惴〞啻卧跀?shù)組中移動(dòng)匹表，比較相鄰的數(shù)據(jù)，當(dāng)左側(cè)值大于右側(cè)值時(shí)將它們進(jìn)行互換宣鄙。

</p>


function bubbleSort() {
  var numElements = this.dataStore.length;
  var temp;
  for (var outer = numElements; outer >= 2; --outer) {
    for (var inner = 0; inner <= outer - 1; ++inner ) {
      if (this.dataStore[inner] > this.dataStore[inner + 1]) {
        swap(this.dataStore,inner,inner + 1);
      }
    }
  }
}

使用bubbleSort()對10個(gè)數(shù)字排序

var numElements = 10;
var mynums = new CArray(numElements);
mynums.setData();
console.log(mynums.toString());
mynums.bubbleSort();
console.log(mynums.toString);

08-03

JavaScript算法-選擇排序

選擇排序
選擇排序從數(shù)組的開頭開始袍镀，將第一個(gè)元素和其他元素進(jìn)行比較。檢查完所有元素后冻晤，最小的元素會被放到數(shù)組的第一個(gè)位置苇羡，然后算法會從第二個(gè)位置繼續(xù)。這個(gè)過程一直進(jìn)行鼻弧，當(dāng)進(jìn)行到數(shù)組的倒數(shù)第二個(gè)位置時(shí)设江，所有的數(shù)據(jù)便完成了排序。
選擇排序會用到嵌套循環(huán)攘轩。外循環(huán)從數(shù)組的第一個(gè)元素一定到倒數(shù)第二個(gè)元素叉存；內(nèi)循環(huán)從第二個(gè)數(shù)組元素移動(dòng)到最后一個(gè)元素，查找比當(dāng)前外循環(huán)

</p>

09-01

JS基本應(yīng)用-函數(shù)

函數(shù)聲明與函數(shù)表達(dá)式度帮、對象實(shí)例化的區(qū)別

 add1(1,1);
 add2(1,2);
 add3(1,3);
 function add1(i, j){
   console.log(i+j);
 }
 var add2 = function(i, j){
   console.log(i+j);
 }
 var add3 = new Function("i", "j", "console.log(i+j);");

對象實(shí)例化與函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別

 (function(){
   var i = 10;
   function add(j) {
     console.log(i+j);
     debugger;
   }
   add(1);
 })();

 (function(){
   var i = 10;
   var add = new Function("j", "console.log(i+j);debugger;");
   add(1);
 })();

bind的使用

 function Point(x, y){
     this.x = x;
     this.y = y;
 }
 Point.prototype.move = function(x, y) {
     this.x += x;
     this.y += y;
 }
 var p = new Point(0,0);
 var circle = {x:1, y:1, r:1};
 var circleMove = p.move.bind(circle, 2, 1);
 circleMove();

構(gòu)造函數(shù)

 function Car(type,color){
   this.type = type;
   this.color = color;
   this.status = "stop";
   this.light = "off";
 }
 Car.prototype.start = function(){
   this.status = "driving";
   this.light = "on";
   console.log(this.type + " is " + this.status);
 }
 Car.prototype.stop = function(){
   this.status = "stop";
   this.light = "off";
   console.log(this.type + " is " + this.status);
 }
 var audi = new Car("audi", "silver");
 var benz = new Car("benz", "black");
 var ferrari = new Car("ferrari", "yellow");

函數(shù)調(diào)用模式

 function add(i, j){
   return i+j;
 }
 var myNumber = {
   value: 1,
   double: function(){
     var helper = function(){
       this.value = add(this.value,this.value);
     }
     helper();
   }
 }

arguments轉(zhuǎn)數(shù)組

 function add(i, j) {
   var args = Array.prototype.slice.apply(arguments);
   args.forEach(function(item){
     console.log(item);
   })
 }
 add(1,2,3);

arguments.callee使用

 console.log(
   (function(i){
     if (i==0) {
       return 1;
     }
     return i*arguments.callee(i-1);
   })(5)
 );

遞歸

 function factorial(i){
   if (i==0) {
     return 1;
   }
   return i*factorial(i-1);
 }

普通遞歸函數(shù)跟記憶函數(shù)調(diào)用次數(shù)對比

 var factorial = (function(){
   var count = 0;
   var fac = function(i){
     count++;
     if (i==0) {
       console.log('調(diào)用次數(shù)：' + count); 
       return 1;
     }
     return i*factorial(i-1);
   }
   return fac;
 })();
 for(var i=0;i<=10;i++){
   console.log(factorial(i)); 
 }

//記憶函數(shù)
 var factorial = (function(){
   var memo = [1];
   var count = 0;
   var fac = function(i){
     count++;
     var result = memo[i];
     if(typeof result === 'number'){
       console.log('調(diào)用次數(shù)：' + count); 
       return result;
     } 
     result = i*fac(i-1);
     memo[i] = result;
     return result;
   }
   return fac;
 })();
 for(var i=0;i<=10;i++){
   console.log(factorial(i)); 
 }

curry 函數(shù)柯里化

把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)歼捏，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)

 function add(value){
    var helper = function(next){
       value = typeof(value)==="undefined"?next:value+next;
       return helper;
    }
    helper.valueOf = function(){
      return value;
    }
    return helper
 }

JSDemo JS小程序

JDMenu 京東無延遲菜單

1.開發(fā)普通二級菜單

事件代理方式進(jìn)行綁定
mouseenter和mouseover的區(qū)別：
使用mouseover/mouseout時(shí)候，如果鼠標(biāo)移動(dòng)到子元素上笨篷，即便沒有離開父元素瞳秽，也會觸發(fā)父元素的mouseout事件；
使用mouseenter/mouseleave時(shí)冕屯，如果鼠標(biāo)沒有離開父元素，在其子元素上任意移動(dòng)拂苹，也不會觸發(fā)mouseleave事件安聘；

2.加入延遲優(yōu)化

切換子菜單的時(shí)候痰洒，用setTimeout設(shè)置延遲
debounce去抖o((⊙﹏⊙))o.技術(shù)：
在事件被頻繁觸發(fā)時(shí)買只執(zhí)行一次

3.基于用戶行為預(yù)測的切換技術(shù)

跟蹤鼠標(biāo)的移動(dòng)
用鼠標(biāo)當(dāng)前位置，和鼠標(biāo)上一次位置與子菜單上下邊緣形成的三角區(qū)域進(jìn)行比較

DatePicker組件開發(fā)

1.基礎(chǔ)頁面制作

標(biāo)頭
身體

2.數(shù)據(jù)部分

渲染當(dāng)月日歷表格
用于點(diǎn)擊時(shí)取日期值

日期對象

newDate(year,month-1,date)
月份需要-1
越界自動(dòng)進(jìn)退位
getFullYear()/getMonth()/getDate()
getDay()獲取當(dāng)前日期是周幾浴韭？
轉(zhuǎn)自github

最后編輯于：2017.12.09 16:10:16

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末丘喻，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子念颈，更是在濱河造成了極大的恐慌泉粉，老刑警劉巖，帶你破解...
沈念sama閱讀 221,430評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件榴芳，死亡現(xiàn)場離奇詭異嗡靡，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)窟感，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,406評論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門讨彼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人柿祈，你說我怎么就攤上這事哈误。” “怎么了躏嚎？”我有些...
開封第一講書人閱讀 167,834評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蜜自，是天一觀的道長。經(jīng)常有香客問我卢佣，道長重荠，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,543評論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任珠漂，我火速辦了婚禮晚缩，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘媳危。我一直安慰自己荞彼，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 68,547評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布待笑。她就那樣靜靜地躺著鸣皂，像睡著了一般。火紅的嫁衣襯著肌膚如雪暮蹂。梳的紋絲不亂的頭發(fā)上寞缝，一...
開封第一講書人閱讀 52,196評論 1贊 308
城市分裂傳說
那天，我揣著相機(jī)與錄音仰泻，去河邊找鬼荆陆。笑死，一個(gè)胖子當(dāng)著我的面吹牛集侯，可吹牛的內(nèi)容都是我干的被啼。我是一名探鬼主播帜消，決...
沈念sama閱讀 40,776評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼浓体！你這毒婦竟也來了泡挺？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,671評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤命浴，失蹤者是張志新（化名）和其女友劉穎娄猫，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體生闲，經(jīng)...
沈念sama閱讀 46,221評論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡媳溺，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,303評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了跪腹。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片褂删。...
茶點(diǎn)故事閱讀 40,444評論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖冲茸，靈堂內(nèi)的尸體忽然破棺而出屯阀，到底是詐尸還是另有隱情，我是刑警寧澤轴术，帶...
沈念sama閱讀 36,134評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布难衰，位于F島的核電站，受9級特大地震影響逗栽，放射性物質(zhì)發(fā)生泄漏盖袭。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,810評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一彼宠、第九天我趴在偏房一處隱蔽的房頂上張望鳄虱。院中可真熱鬧，春花似錦凭峡、人聲如沸拙已。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,285評論 0贊 24
一樁弒父案摧冀，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽倍踪。三九已至，卻和暖如春索昂，著一層夾襖步出監(jiān)牢的瞬間建车，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,399評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工椒惨，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缤至，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,837評論 3贊 376
代替公主和親
正文我出身青樓康谆，卻偏偏與公主長得像领斥，于是被迫代替她去往敵國和親错洁。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,455評論 2贊 359

JSLearn

JavaScript基礎(chǔ)知識剖析

01 變量與原型

02

03

04

05

06

07

08 JS算法

09 函數(shù)應(yīng)用

JS小練習(xí)

知識點(diǎn)學(xué)習(xí)

01-01

變量類型和計(jì)算（1）

值類型

引用類型

變量計(jì)算-強(qiáng)制類型轉(zhuǎn)換

01-02

變量類型和計(jì)算（2）

JS中使用typeof能得到的類型

何時(shí)使用 === 和 ==

JS中的內(nèi)置函數(shù)

JS按照存儲方式區(qū)分變量類型

01-03

變量類型和計(jì)算（3）-理解JSON

01-04

原型與原型鏈-構(gòu)造函數(shù)

知識點(diǎn)

構(gòu)造函數(shù)

構(gòu)造函數(shù)-擴(kuò)展

01-05

原型規(guī)則和示例

第1條

第2條

第3條

第4條

第5條

循環(huán)對象自身屬性

01-06

原型鏈

原型鏈視圖

01-07

instanceof

01-08

知識點(diǎn)小結(jié) & 解決問題

如何準(zhǔn)確判斷一個(gè)變量是數(shù)組類型

寫一個(gè)原型鏈繼承的例子

描述new一個(gè)對象的過程

zepto(或其他框架)源碼中如何使用原型鏈

貼近實(shí)際開發(fā)原型鏈繼承的例子

02-01

作用域和閉包-執(zhí)行上下文

知識點(diǎn)梳理

執(zhí)行上下文

02-01

作用域和閉包-this

02-03

作用域和閉包-作用域

作用域

02-04

作用域和閉包-閉包

02-05

知識點(diǎn)小結(jié) & 解決問題

對變量提升的理解

this幾種不停的使用場景

創(chuàng)建10個(gè)<a>標(biāo)簽 點(diǎn)擊的時(shí)候彈出來對應(yīng)的序號

如何理解作用域

實(shí)際開發(fā)中閉包的應(yīng)用

03-01

異步和單線程-什么是異步

異步知識點(diǎn)

什么是異步

對比同步

何時(shí)需要異步

前端使用異步的場景

03-02

異步和單線程-單線程

解答：異步與單線程

03-03

創(chuàng)建10個(gè)<a>標(biāo)簽點(diǎn)擊的時(shí)候彈出來對應(yīng)的序號