时间：0731-0804（第四周）

1. 新人计划

1、第一天：技能线继续深入学习React，接入项目“个人履历”参与开发
2、第二天：了解React相关的Api，接入项目“个人履历”参与开发
3、第三天：了解React相关的生命周期、事件及Refs，接入项目“个人履历”参与开发
4、第四天：了解Karma，深入使用Mocha，接入项目“个人履历”参与开发
5、第五天：深入了解Babel，了解虚拟DOM，接入项目“个人履历”参与开发

2. 问题

0731

修改隐私设置bug
学习异步编程 promise generator async

问题反馈

这个用generator函数的意义是什么，不用的话也是可以打印出来

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
  var length = a.length;
  for (var i = 0; i < length; i++) {
    var item = a[i];
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  }
};

for (var f of flat(arr)) {
  console.log(f);
}
// 1, 2, 3, 4, 5, 6

答：Generator就是一个迭代器，通过不断的执行next，然后向下执行代码，并不是异步的，只是配合Promise更好的处理异步请求而已

0801

用两种方式完成异步编程思考题
学习react API内容

问题反馈

思考题如何用async的函数来实现，async会自动运行，如何在读取5个json文件的过程进行处理
async函数里面使用await来处理各个promise的继发操作，也就是说下一个await可以读取上一个await操作的值，如果说5个json文件处理是一起的，则可以直接在async函数里面使用Promise.all，因为Promise.all返回的也是个promise，如下例

async function readAllFile() {
  const [json1, json2] = await Promise.all([readFile('./1.json'), readFile('2.json')])
}

0802

学习fish ui中的弹窗以及表单和一些输入框

问题反馈

ui中有一些自带样式，都要改为和PSD图一样的吗？就是去修改ui生成的ant-那个classname吗

可以复写ant 的样式，但要注意对组件样式的编写是全局的，如果只对某一个模态框某一个输入框可以通过加className
答：如果使用第三方组件，可以查询组件中的classname，复写，这对没有使用css module的代码是有效的

fish form中的 this.props.form无法获取
阅读文档不够仔细，需要加入create即可

AddWorkForm = Form.create({})(AddWorkForm)

0803

学习react 事件、refs等内容，完成两个弹窗

问题反馈

localstorage中如果要存储数组、json对象等内容，需要转换为字符串，利用JSON.stringify和JSON.parse

现在要对li增加click事件，但这个事件无法获得li的文本内容 li用获取真实dom的值还是用一个组件
答：正常来说，li里面的值可以通过一个变更绑定到state中，而li的click事件就可以直接引用state的变量，不需要去操作dom

3. CodeReview

http://git.sdp.nd/213520/ND-FE/tree/async

在使用数组的forEach前一般会判断下是否为空，否则就会直接抛出异常
如 json && _.isArray(json) && json.forEach(...)
同埋，使用数组的其它可能产生异常的操作前都要进行相关异常的处理
在react作业的index.js中，并未使用到'react'，所以可以不用在这里引用import React from 'react'

http://git.sdp.nd/213520/ND-FE/tree/react

时间：0724-0728（第三周）

1. 新人计划

第一天：根据上周的学习总结并复习，分析及CodeReview之前的代码

作业1：阅读文章并了解Flux 应用架构，文章：https://www.zhihu.com/question/33864532/answer/58729019

作业2：实践了解数据双向绑定原理，并提交git，文章：https://zhuanlan.zhihu.com/p/25003235

第二天：按技能组路径学习React知识

作业：开始接入项目，每天抽出2小时，进行项目开发：了解Vue

第三天：按技能组路径学习React知识

作业：开始接入项目：隐私管理台开发部分模块

第四天：按技能组路径学习React知识，并把之前支持组作业按React改造

作业：开始接入项目：隐私管理台开发部分模块

第五天：按技能组路径学习React知识，并把之前支持组作业按React改造

作业：开始接入项目：隐私管理台开发部分模块

周思考题：深入实践异步编程

请自行先创建两个.json文件

person.json 人员列表，里面有5000个人员，cid是身份证号，name是人员名称，did是部门ID
dept.json 部门列表，里面有1000个部门，did是部门ID，name是部门名称，pid是上级部门ID
用多种异步的方式读取上面两个文件，并生成如下字符串
部门（全路径名称）/人员名称
注意：每次只能从person中取50个人员
要求有三种实现方案

2. 成长总结

3. 作业汇总

0724

主要内容

完成新增作品渲染到页面
重新编辑新增作品逻辑

问题反馈

无法给列表中的li增加事件,jQuery中动态加载的元素增加事件必须用on

$('#authorname-add-list').on('click','li',function(){
})

答：是的

utils方法中函数参数中的fn的作用

function mySort(arr, columnName, fn) {})

答：比如这个函数，要正序还是逆序，需要传入fn来决定

要往页面中添加作品，一个作品的样式和结构比较复杂，应该如何添加
用clone方法
答：clone是比较方便的方式

0725

主要内容

根据题目修改第三周作业，主要加入回调函数
了解数据双向绑定，学习react

问题反馈

react组件是不是应该从大的开始写，再抽离小的
答：理论上来讲，进行组件抽离，有些人喜欢从下向上，有些喜欢从上向下，这个跟据个人爱好，如果是最佳实践的话，应该先在早稿上似定各组件的层次，及先设计出来，再进行编码，这样写代码的时候，实践上你已经把小组件抽离出来了
改造作业自己重头搭建一个react项目还是可以用create-react-app
答：如果是入门，一步一步来，按教程上不使用工具create-react-app，而直接手写代码是比较好的，可以一步一步了解一些包的安装及使用。建议初学者不直接使用create-react-app

0726

主要内容

导师进行codereview 修改前四周的代码
在作业中使用react，完成静态页面部分

问题反馈

git push的时候报错

Counting objects: 28, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (26/26), done.
Writing objects: 100% (28/28), 102.79 KiB | 0 bytes/s, done.
Total 28 (delta 1), reused 0 (delta 0)
error: RPC failed; HTTP 500 curl 22 The requested URL returned error: 500 Internal Server Error
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
Everything up-to-date

这是由于我要用压缩过的图片来替换原来项目中所有的图片，在push的时候文件太大报错。需要到项目中的.git 下的config 文件修改
URL 的协议

url = http://git.sdp.nd/213520/ND-FE.git

改为

url = [email protected]:213520/ND-FE.git

0727

主要内容

完成作业react 部分路由改造
接入项目，完成隐私模块新增和编辑

问题反馈

react-router 的 link 报错
用新的写法引入

import {Link,Route,BrowserRouter as Router} from 'react-router-dom'

答：需要注意各个模块的引入

0728

主要内容

完成隐私模块新增和编辑，修改代码规范
学习异步编程，先用promise实现

4. 问题答疑

5. 能力评估

6. 导师点评

时间：0717-0721（第二周）

1. 新人计划

第一天：根据上周的学习总结并复习，实现一个博客页面的制作

作业1：视频1，视频2，参考上面视频，写一个博客页面，并附上git地址

第二天：学习模块化前端编程，了解npm、nodejs、webpack等工具，了解前端单元测试mocha，深入理解Javascript并实现一些工具类的npm包

记npm包开发过程：http://www.cnblogs.com/xiaoheimiaoer/p/5041266.html

注意iOS时间格式化的大坑：http://blog.csdn.net/zhoukun1008/article/details/51537862

mocha详细介绍：http://www.cnblogs.com/Leo_wl/p/5734889.html

作业1：参考上面记npm包开发过程例子，实现一个npm包，内容同例子
作业2：参考Java的Calendar时间类，用javascript实现一个Calendar时间工具类，并发布npm

第三天：复习并巩固js基础，webpack联系，了解数据绑定原理

复习并巩固js基础之作用域：http://www.cnblogs.com/longze/p/3542582.html

webpack2.0文档：http://www.css88.com/doc/webpack2/guides/development/

前端构建工具漫谈，fis3、webpack、rollup.js:https://zhuanlan.zhihu.com/p/20933749

作业1：见如下代码，分析最终打印结果、原因，以及如何打印如"My Object"，并形成文档

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　console.log(object.getNameFunc()());

作业2：请练完这16个webpack小例子，并形成文档：https://segmentfault.com/a/1190000009038067
作业3：实践了解数据双向绑定原理，并提交git，文章：https://zhuanlan.zhihu.com/p/25003235

第四天：今天按技能组路线学习

EventLoop解释，文章：http://www.360doc.com/document/14/1011/13/15077656_416048738.shtml

结合microtask和macrotask理解event-loop，文章：http://www.jianshu.com/p/12b9f73c5a4f#

作业1：实现技能组作业
作业2：JS闭包、EventLoop等基础示例
请看下面代码，并解释输出结果

for (var i = 0; i < 5; i++) {
  console.log(i);
}

再看下面代码，并解释输出结果

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

如何改造上面代码，可以实现输出0,1,2,3,4呢？
再看如下代码，并解释输出结果

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

再看如下代码，并解释输出结果

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

第五天：今天按技能组路线学习

作业1：使用jQuery完成技能组作业

2. 成长总结

0717 JS和CSS的基础学习、实现瀑布流页面、完成了一个H5和CSS3的博客
0718 学习npm包开发全过程、前端单元测试moch，跟着教程实现一个包发布；动手用js实现一个dateUtils工具类，包含一些常用的时间处理方法，并发布
0719 复习巩固js基础，主要学习上下文栈和作用域，完成思考题，学习webpack，完成16个小例子，并形成文档；将博客页面用webpack进行打包
0720 js深入系列主要学习执行上下文和闭包，理解思考题，完成技能组任务到第三周内容
0721 完成技能组作业，利用jQuery对dom操作，实现增加作品

3. 作业汇总

http://git.sdp.nd/213520/ND-FE/tree/other
http://git.sdp.nd/213520/ND-FE/tree/advancednpm
http://git.sdp.nd/213520/ND-FE/tree/master
http://git.sdp.nd/213520/ND-FE/tree/webpack
http://git.sdp.nd/213520/ND-FE/tree/basicblog
http://git.sdp.nd/213520/ND-FE/tree/jquery

4. 问题答疑

0717

为什么需要加call，call的作用
解答：call其实是变更作用域，举例来说object1.method.call(object2)，这样就相当于让object2继承object1，这样object2就可以直接调用object1的method方法，另外如果method里面有this的话，这个this就是object2了，而不是object1。所以通常来说，一种就是实现没有的方法，一种就是改变this的作用域指向

0718

写好一个npm包后，无法publish
解答：由于之前按公司的源设置了npm源，导致无法publish到npm上，所以安排cnpm，源指向公司，再修改npm为默认源，现在可以上传

0719

webpack中的load是啥，没用好像也可以加载
解答：webpack核心是模块加载和插件，模块加载把所有文件都当成资源，通过一定的加载器加载并统一处理，而插件就是让功能更丰富require(‘./main.css’) 需要loader才能被识别，同理图片等
可是发现没有加这个模块热替换，修改完内容也可以不用刷新页面就改动了
解答：教程是2.0的，安装的是webpack3.3，好像已经改成默认HRM，不需要配置了

0720

script执行时，遇到setTimeout为一个宏任务源
new Promise实例，第一个参数构造函数会执行，而then会被放到微任务源的队列中，for循环不会放到任何队列中，代码会依次执行
所以顺序为23541

0721

jQuery click事件会执行两次
解答：问题的根源定位错了，这个主要是解答如何有效的定位问题，尽量在疑点处定位debugger，然后再逐条debug，后定位为.class的获取错误
jQuery的.class选择器
解答：优先使用#id选择器，一是速度快，二是不会重复（或重复少）

5. 能力评估

较深入理解了JS，扎实了HTML与CSS的基础，理解作用域及作用域链的操作顺序，了解了闭包。下周可以介入项目实践，并实践异步编程。

6. 导师点评

由于第一周学习很快，第二周的学习计划定制为深入了解基础并学习模块化开发，朱婉灵本周在知识体系的了解上，掌握到位，虽然知识面较广但学员吸收较快，余下一些知识需要再进行巩固和扩展学习。总体上来说，进度速度很快。

7. Review（第三周、第四周作业）

arrToObj方法

定义对象的时候可以更简洁的定义为如下方式

let jsonObj = {
  result: [],
  entities: {}
}

需要进行边界判断，参数不一定传的是数据，需要进行判断

const tempArr = arr && arr[0] || []

另外Object.keys是ES5的语法，建议用更早的语法进行实现（IE8不支持Object.keys）

myFilter方法

同样，forEach也是ES5语法，另外做为底层库，forEach的速度不同原生loop

时间：0710-0714（第一周）

1. 新人计划

熟悉HTML、JS、CSS基础知识，相关资料：https://juejin.im/post/59278e312f301e006c2e1510
了解JS基本的设计模式，相关资料：http://www.cnblogs.com/WebYan/p/6066191.html
了解函数式编程，相关资料：https://lodash.com/docs/4.17.4
了解界面布局经验，相关资料：http://web.jobbole.com/84285/
作业：实现一个简单的瀑布流静态布局页面

2. 成长总结

对HTML、JS、CSS基础加深了解

3. 作业汇总

http://git.sdp.nd/213520/ND-FE/tree/other

4. 问题改进

0714

页面的所有内容最好应该包在一个块里面吗？如果不包起来，那整体的样式（比如长宽）应该写在body里面吗
解答：理论上包在块里面有一定的好处，可以进行块宽度与高度的继承，但实际上，头、中、尾三块一般是独立出来的，然后，其它再包含在这三块中，这样可维护性比较好，这点上没有标准答案。
如下图的竖线怎么解决比较好，是通过
标签设置样式，还是用border，或者其他的什么方式

Paste_Image.png

解答：在HTML布局中，为了可读性，像这种介于两个元素之间的竖线之类的处理，一般会使用before/after伪元素或使用border，也可以使用背景渐变或box-shadow之类的，不过一般不推荐，最后就是图片了，也不推荐，除非特殊用途。也不建议像这种通用的坚型直接使用标签重复标记
前端开发上，布局使用HTML，而样式则最好是由CSS处理。

5. 能力评估

有一定的HTML、CSS、JS基础，可以考虑深入学习

6. 导师点评

本周工作达到预期目标。朱婉灵本周花费了一定时间，对前端基础知识进行巩固，并提前完成了技能组的部份作业，额外实践了瀑布流布局，值得表扬。

7. Review

最后输出切图最好优化大小，进行无损压缩（建议使用：https://tinypng.com/）

新人培训记录

时间：0731-0804（第四周）

1. 新人计划

2. 问题

0731

问题反馈

0801

问题反馈

0802

问题反馈

0803

问题反馈

3. CodeReview

时间：0724-0728（第三周）

1. 新人计划

第一天：根据上周的学习总结并复习，分析及CodeReview之前的代码

第二天：按技能组路径学习React知识

第三天：按技能组路径学习React知识

第四天：按技能组路径学习React知识，并把之前支持组作业按React改造

第五天：按技能组路径学习React知识，并把之前支持组作业按React改造

周思考题：深入实践异步编程

2. 成长总结

3. 作业汇总

0724

主要内容

问题反馈

0725

主要内容

问题反馈

0726

主要内容

问题反馈

0727

主要内容

问题反馈

0728

主要内容

4. 问题答疑

5. 能力评估

6. 导师点评

时间：0717-0721（第二周）

1. 新人计划

第一天：根据上周的学习总结并复习，实现一个博客页面的制作

第二天：学习模块化前端编程，了解npm、nodejs、webpack等工具，了解前端单元测试mocha，深入理解Javascript并实现一些工具类的npm包

第三天：复习并巩固js基础，webpack联系，了解数据绑定原理

第四天：今天按技能组路线学习

第五天：今天按技能组路线学习

2. 成长总结

3. 作业汇总

4. 问题答疑

5. 能力评估

6. 导师点评

7. Review（第三周、第四周作业）

时间：0710-0714（第一周）

1. 新人计划

2. 成长总结

3. 作业汇总

4. 问题改进

5. 能力评估

6. 导师点评

7. Review

你可能感兴趣的:(新人培训记录)