整体收获
- 要尝试着理解身边的人，特别是母上大人
- 要有意识的 促进团队一起的进步
技术回顾
1.setTimeout理解
function fn(){
const attrs = [1,2,3,4];
for(var i=0,len=attrs.length; i<len; i++){//len=4
setTimeout(function(){
console.log(i);
},0)
}
}
fn();// 4,4,4,4修改成 输出为1,2,3,4
//方案1 var变let
function fn(){
const attrs = [1,2,3,4];
for(let i=0,len=attrs.length; i<len; i++){//i 变let
setTimeout(function(){
console.log(i);
},0)
}
}
fn();//方案2
function fn(){
const attrs = [1,2,3,4];
for(let i=0,len=attrs.length; i<len; i++){//
;(function(){//babel 中不需要前面加“；”，自动会加；这里形成闭包，执行上下文的概念
setTimeout(function(){
console.log(i);
},0)
})()；
}
}
fn();2.css正方形
参考：demo
难点是：不定宽，如何让高使之跟随着宽
方案：
- vw
- 使用 margin与padding的百分比是相对于父元素宽度
3.js 对象属性拦截
//方案一 不足 无法监听 属性的add与delete
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log('get value')
return val
},
set: function reactiveSetter(newVal) {
console.log('change value')
val = newVal
}
})//方案二 proxy
var handler = {
get: function(target, name){
console.log('===',target,name);
return name in target ? target[name] : 37;
}
};
var p = new Proxy({}, handler);//方案三 Object.observe 不过最新该方法被w3c移除了
var obj = {
foo: 0,
bar: 1
};
Object.observe(obj, function(changes) {
console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]
obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]6. Event体系
this|Target|currentTarget 难点是触发的NODE与绑定事件的node并不是同一个node
target 是指向被触发（点击）的那个node
this === currentTarget 绑定的node
停止冒泡
- e.stopPropagation ()
- e.stopImmediatePropagation () //对比与 stopPropagation不同，demo
- jquery 中 return false //一般不支持这么玩，因为 return false 做三件事 1.阻止默认事件 2.阻止冒泡 3.停止回调函数执行并立即返回。
Event 规范
7.实现一个简单的模板引擎（todo）
尝试逐步实现一个相对完善的模板引擎
//简单初始版本
const TemplateEngine = function(tpl,data){
var re = /<%([^%>]+)?%>/g;
while(match = re.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]])
}
return tpl;
}
let template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
console.log(TemplateEngine(template,{
name: "caoyi",
age: 18
}))//版本二
8.算法
9. 项目经验
如何带领团队一起进步
项目分两类：1.技术 2.业务
