时间：0731-0804（第四周）

1. 新人计划

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

2. 问题

0731

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

问题反馈

1. 这个用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

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

问题反馈

1. 思考题如何用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

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

问题反馈

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

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

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

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

0803

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

问题反馈

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

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

3. CodeReview

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

1. 在使用数组的forEach前一般会判断下是否为空，否则就会直接抛出异常
   如 json && _.isArray(json) && json.forEach(...)
   同埋，使用数组的其它可能产生异常的操作前都要进行相关异常的处理
2. 在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

主要内容

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

问题反馈

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

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

答：是的

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

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

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

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

0725

主要内容

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

问题反馈

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

0726

主要内容

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

问题反馈

1. 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 = git@git.sdp.nd:213520/ND-FE.git

0727

主要内容

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

问题反馈

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

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

<Router>
    <section className="works">
        <Route path="/mine" component={Mine} ></Route>
        <Route path="/classes" component={Classes}></Route>
    </section>
</Router>

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

0728

主要内容

1. 完成隐私模块新增和编辑，修改代码规范
2. 学习异步编程，先用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

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

• 0718

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

• 0719

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

• 0720

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

• 0721

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

5. 能力评估

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

6. 导师点评

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

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

• arrToObj方法

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

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

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

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

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

• myFilter方法

1. 同样，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

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

   ---

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

5. 能力评估

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

6. 导师点评

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

7. Review

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