- 練習(xí)
- 貓動(dòng)畫(huà)
- js簡(jiǎn)單獲取
- WEUI使用以及簡(jiǎn)單的js插元素
- JS
- 時(shí)鐘
獲取時(shí)間計(jì)算出指針偏轉(zhuǎn)的角度并改變轉(zhuǎn)心用setInterval()边翼，定時(shí)調(diào)用即可 - 構(gòu)造函數(shù) Constructor 原型 prototype 實(shí)例 instance
三者關(guān)系
構(gòu)造函數(shù) Person 可以生成實(shí)例 person 升酣，都有自身不同的屬性指向原型，通過(guò)這個(gè)指向原型的屬性可以拿到定義好的方法函數(shù)和成員變量。他們是三個(gè)互相獨(dú)立的個(gè)體定硝，只不過(guò)他們有各自的屬性指向?qū)Ψ匠况ǎ瑥亩⒘寺?lián)系。所以在構(gòu)造函數(shù)上定義的靜態(tài)函數(shù)紧卒，不能被實(shí)例調(diào)用侥衬。繼承Person.prototype = new Animal('earth');
繼承實(shí)質(zhì)上只是把原型更改成另外一個(gè)實(shí)例，從去獲取那個(gè)實(shí)例帶有的屬性（也包括函數(shù)類(lèi)型）跑芳。 - 類(lèi)型選擇
JS里的typeof能判斷的復(fù)雜數(shù)據(jù)類(lèi)型只有function轴总，其他的都是object。所以博个，不能用原生的typeof怀樟。
var Type = {};
for (var i=0, type;type = ['String','Array','Number'][i++];) {
(function(type) {
Type['is' + type] = function(obj) {
return Object.prototype.toString.call(obj) === `[object ${type}]`;
}
})(type)
}
辨別方法是利用Object原型的toString方法轉(zhuǎn)交得到的字符串做對(duì)比，從而確定數(shù)據(jù)類(lèi)型盆佣。
- open-book
用兩個(gè)盒子往堡，其中一個(gè)盒子transform: rotateY(180deg);緊貼另外一個(gè)盒子組成page。
翻頁(yè)就用鼠標(biāo)移動(dòng)事件來(lái)做罪塔，并依靠鼠標(biāo)點(diǎn)下和放開(kāi)事件給一個(gè)信號(hào)量投蝉，改變整個(gè)page的style的transform:rotateY()。
- CSS
- 豆瓣P(guān)C
flex在老瀏覽器不兼容征堪，大部分布局都是float瘩缆，但是float有很多壞處，所以用更好的inline-block佃蚜、grid庸娱。
豆瓣里的四宮格ul>li>div>a>img用inline-block做 - 世界杯頁(yè)面仿寫(xiě)
待完成 - flexible十分之一
原博客的說(shuō)明 - 火焰
用濾鏡寫(xiě)了一個(gè)小火花的樣式后，再用stylus里的for循環(huán)做多個(gè)火花谐算，并取隨機(jī)數(shù)做動(dòng)畫(huà)延遲熟尉。 - 飛機(jī)
簡(jiǎn)單的定位，和旋轉(zhuǎn)以及translate3D動(dòng)畫(huà)
- ES6
- 使用map()快速處理
arr.forEach(function(ele形參){}); ????//arr多長(zhǎng)就循環(huán)幾次
arr.map(function(ele形參){
????return ???;
}); ????//每次循環(huán)返回一個(gè)元素替掉原數(shù)組的元素
或者arr.map(形參 => {
????return ???;
}); ????//其中ele和其他形參都是arr[n]
模版字符串`我叫${name}洲脂，我有${age}歲斤儿；`
即``字符串中可以插入變量不用+號(hào)
arr.join(a)可以快速用a分隔數(shù)組做成字符串
- function和箭頭函數(shù)
注意參數(shù)箭頭之間不能換行
arguments所有函數(shù)里面(除了箭頭函數(shù))都可以用的變量
箭頭函數(shù)不支持重復(fù)命名形參剧包，普通函數(shù)可以(a,a)
箭頭函數(shù)不能使用call apply 等方法改變this
箭頭函數(shù)沒(méi)有 this 它的 this 指向定義時(shí)所處的上下文（外部函數(shù)）的this
箭頭函數(shù)沒(méi)有原型對(duì)象 .prototype
箭頭函數(shù)不能作為構(gòu)造函數(shù)箭頭函數(shù)沒(méi)有 arguments
function Person() {
if(!new.target){
console.log('只能使用new調(diào)用該構(gòu)造函數(shù)');
}
console.log(new.target);
}
Person();
返回一個(gè)對(duì)象的正確做法
var arrow_4 = () => ({name:'馬冬梅', age:19})
- 數(shù)組解構(gòu)和reset
- ES6支持解構(gòu)const [a,[b],c]=[18,[20],30];
對(duì)象也支持解構(gòu)
const obj = {
foo:'foo val',
bar:'bar val',
baz:'baz val'
}
const {baz, foo:str1}=obj;
const obj1 = {
p:['hello',{msg:'Wolrd'}]
}
const {p:[a,{msg:b}]} = obj1;- const this_age = ages.find((ages) => ages.age > 18);//找滿(mǎn)足條件的第一個(gè)
const this_age_filter = ages.filter((ages) => ages.age > 18);//找滿(mǎn)足條件的所有
const this_age_every = ages.every((ages)=> ages.age > 18);//判斷是否所有都滿(mǎn)足條件
const this_age_some = ages.some(ages=> ages.age > 18);//判斷是否有其中某項(xiàng)滿(mǎn)足條件- ES6從類(lèi)數(shù)組對(duì)象建真數(shù)組對(duì)象有兩個(gè)條件
- 有l(wèi)ength 對(duì)象
- 通過(guò)索引 獲取值
const objarr = Array.from(obj);
- ES5中的方法
function sum() {
const args = Array.from(arguments);
console.log(args.map(arr => 2*arr),args);
// return [2,4,6,8];
}- // rest 參數(shù) 形式(...變量名)
// 作用：獲取函數(shù)多余參數(shù)
// 搭配的變量是一個(gè)數(shù)組
// rest參數(shù)不在最后一個(gè)的報(bào)錯(cuò)：Rest parameter must be last formal parameter
const arrow_sum = (a,...args) => {
console.log(a,args);
}
arrow_sum(1,2,3,4);- ...相當(dāng)于rest 參數(shù)的逆運(yùn)算
const arr = [18,19,20];
console.log(...arr);//等同于console.log((18),(19),(20));
console.log(Math.max(...arr));//等同于console.log(Math.max((18),(19),(20)));
- webgl
- 用three.js做3d效果地球
配置canvas/* 幕布 /,camera/ 照相機(jī) /,scene/ 場(chǎng)景 /,group,renderer/ 渲染器 */
添加球體（加載貼圖）到組，組加載在場(chǎng)景里往果，渲染器渲染到頁(yè)面上疆液。
動(dòng)畫(huà)就用requestAnimationFrame(animate);不停的刷新canvas的靜態(tài)照片
- SVG
- 加載笑臉的購(gòu)物袋
transform使嘴轉(zhuǎn)動(dòng)，stroke-dashoffset和stroke-dasharray截?cái)嘧鲱?lèi)似上次霓虹燈的效果陕贮，眼睛的移動(dòng)動(dòng)畫(huà)用SVG路徑做
