- 练习
- 猫动画
- js简单获取
- WEUI使用以及简单的js插元素
- JS
- 时钟
获取时间计算出指针偏转的角度并改变转心用setInterval()，定时调用即可 - 构造函数 Constructor 原型 prototype 实例 instance
三者关系
构造函数 Person 可以生成实例 person ，都有自身不同的属性指向原型，通过这个指向原型的属性可以拿到定义好的方法函数和成员变量。他们是三个互相独立的个体，只不过他们有各自的属性指向对方，从而建立了联系。所以在构造函数上定义的静态函数，不能被实例调用。继承Person.prototype = new Animal('earth');
继承实质上只是把原型更改成另外一个实例，从去获取那个实例带有的属性（也包括函数类型）。 - 类型选择
JS里的typeof能判断的复杂数据类型只有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方法转交得到的字符串做对比，从而确定数据类型。
- open-book
用两个盒子，其中一个盒子transform: rotateY(180deg);紧贴另外一个盒子组成page。
翻页就用鼠标移动事件来做，并依靠鼠标点下和放开事件给一个信号量，改变整个page的style的transform:rotateY()。
- CSS
- 豆瓣PC
flex在老浏览器不兼容，大部分布局都是float，但是float有很多坏处，所以用更好的inline-block、grid。
豆瓣里的四宫格ul>li>div>a>img用inline-block做 - 世界杯页面仿写
待完成 - flexible十分之一
原博客的说明 - 火焰
用滤镜写了一个小火花的样式后，再用stylus里的for循环做多个火花，并取随机数做动画延迟。 - 飞机
简单的定位，和旋转以及translate3D动画
- ES6
- 使用map()快速处理
arr.forEach(function(ele形参){}); //arr多长就循环几次
arr.map(function(ele形参){
return ???;
}); //每次循环返回一个元素替掉原数组的元素
或者arr.map(形参 => {
return ???;
}); //其中ele和其他形参都是arr[n]
模版字符串`我叫${name}，我有${age}岁；`
即``字符串中可以插入变量不用+号
arr.join(a)可以快速用a分隔数组做成字符串
- function和箭头函数
注意参数箭头之间不能换行
arguments所有函数里面(除了箭头函数)都可以用的变量
箭头函数不支持重复命名形参，普通函数可以(a,a)
箭头函数不能使用call apply 等方法改变this
箭头函数没有 this 它的 this 指向定义时所处的上下文（外部函数）的this
箭头函数没有原型对象 .prototype
箭头函数不能作为构造函数箭头函数没有 arguments
function Person() {
if(!new.target){
console.log('只能使用new调用该构造函数');
}
console.log(new.target);
}
Person();
返回一个对象的正确做法
var arrow_4 = () => ({name:'马冬梅', age:19})
- 数组解构和reset
- ES6支持解构const [a,[b],c]=[18,[20],30];
对象也支持解构
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);//找满足条件的第一个
const this_age_filter = ages.filter((ages) => ages.age > 18);//找满足条件的所有
const this_age_every = ages.every((ages)=> ages.age > 18);//判断是否所有都满足条件
const this_age_some = ages.some(ages=> ages.age > 18);//判断是否有其中某项满足条件- ES6从类数组对象建真数组对象有两个条件
- 有length 对象
- 通过索引 获取值
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 参数 形式(...变量名)
// 作用：获取函数多余参数
// 搭配的变量是一个数组
// rest参数不在最后一个的报错：Rest parameter must be last formal parameter
const arrow_sum = (a,...args) => {
console.log(a,args);
}
arrow_sum(1,2,3,4);- ...相当于rest 参数的逆运算
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/ 照相机 /,scene/ 场景 /,group,renderer/ 渲染器 */
添加球体（加载贴图）到组，组加载在场景里，渲染器渲染到页面上。
动画就用requestAnimationFrame(animate);不停的刷新canvas的静态照片
- SVG
- 加载笑脸的购物袋
transform使嘴转动，stroke-dashoffset和stroke-dasharray截断做类似上次霓虹灯的效果，眼睛的移动动画用SVG路径做
