時(shí)間：0731-0804（第四周）
1. 新人計(jì)劃
1、第一天：技能線繼續(xù)深入學(xué)習(xí)React式矫，接入項(xiàng)目“個(gè)人履歷”參與開發(fā)
2乡摹、第二天：了解React相關(guān)的Api，接入項(xiàng)目“個(gè)人履歷”參與開發(fā)
3采转、第三天：了解React相關(guān)的生命周期聪廉、事件及Refs，接入項(xiàng)目“個(gè)人履歷”參與開發(fā)
4氏义、第四天：了解Karma锄列，深入使用Mocha，接入項(xiàng)目“個(gè)人履歷”參與開發(fā)
5惯悠、第五天：深入了解Babel邻邮，了解虛擬DOM，接入項(xiàng)目“個(gè)人履歷”參與開發(fā)
2. 問題
0731
- 修改隱私設(shè)置bug
- 學(xué)習(xí)異步編程 promise generator async
問題反饋
- 這個(gè)用generator函數(shù)的意義是什么克婶，不用的話也是可以打印出來
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就是一個(gè)迭代器筒严，通過不斷的執(zhí)行next，然后向下執(zhí)行代碼情萤，并不是異步的鸭蛙，只是配合Promise更好的處理異步請求而已
0801
- 用兩種方式完成異步編程思考題
- 學(xué)習(xí)react API內(nèi)容
問題反饋
- 思考題如何用async的函數(shù)來實(shí)現(xiàn)，async會自動運(yùn)行筋岛，如何在讀取5個(gè)json文件的過程進(jìn)行處理
async函數(shù)里面使用await來處理各個(gè)promise的繼發(fā)操作娶视，也就是說下一個(gè)await可以讀取上一個(gè)await操作的值，如果說5個(gè)json文件處理是一起的睁宰，則可以直接在async函數(shù)里面使用Promise.all肪获，因?yàn)镻romise.all返回的也是個(gè)promise，如下例
async function readAllFile() {
const [json1, json2] = await Promise.all([readFile('./1.json'), readFile('2.json')])
}
0802
- 學(xué)習(xí)fish ui中的彈窗以及表單和一些輸入框
問題反饋
- ui中有一些自帶樣式柒傻，都要改為和PSD圖一樣的嗎孝赫？就是去修改ui生成的ant-那個(gè)classname嗎
可以復(fù)寫ant 的樣式，但要注意對組件樣式的編寫是全局的红符，如果只對某一個(gè)模態(tài)框某一個(gè)輸入框可以通過加className
答：如果使用第三方組件青柄，可以查詢組件中的classname，復(fù)寫预侯，這對沒有使用css module的代碼是有效的
- fish form中的 this.props.form無法獲取
閱讀文檔不夠仔細(xì)致开，需要加入create即可
AddWorkForm = Form.create({})(AddWorkForm)
0803
- 學(xué)習(xí)react 事件、refs等內(nèi)容雌桑，完成兩個(gè)彈窗
問題反饋
localstorage中如果要存儲數(shù)組喇喉、json對象等內(nèi)容，需要轉(zhuǎn)換為字符串校坑，利用JSON.stringify和JSON.parse
- 現(xiàn)在要對li增加click事件拣技，但這個(gè)事件無法獲得li的文本內(nèi)容 li用獲取真實(shí)dom的值 還是 用一個(gè)組件
答：正常來說千诬，li里面的值可以通過一個(gè)變更綁定到state中，而li的click事件就可以直接引用state的變量膏斤，不需要去操作dom
3. CodeReview
http://git.sdp.nd/213520/ND-FE/tree/async
- 在使用數(shù)組的forEach前一般會判斷下是否為空徐绑，否則就會直接拋出異常
如 json && _.isArray(json) && json.forEach(...)
同埋，使用數(shù)組的其它可能產(chǎn)生異常的操作前都要進(jìn)行相關(guān)異常的處理 - 在react作業(yè)的index.js中莫辨，并未使用到'react'傲茄，所以可以不用在這里引用import React from 'react'
http://git.sdp.nd/213520/ND-FE/tree/react
時(shí)間：0724-0728（第三周）
1. 新人計(jì)劃
第一天：根據(jù)上周的學(xué)習(xí)總結(jié)并復(fù)習(xí)，分析及CodeReview之前的代碼
- 作業(yè)1：閱讀文章并了解Flux 應(yīng)用架構(gòu)沮榜，文章：https://www.zhihu.com/question/33864532/answer/58729019
- 作業(yè)2：實(shí)踐了解數(shù)據(jù)雙向綁定原理盘榨，并提交git，文章：https://zhuanlan.zhihu.com/p/25003235
第二天：按技能組路徑學(xué)習(xí)React知識
- 作業(yè)：開始接入項(xiàng)目蟆融，每天抽出2小時(shí)草巡，進(jìn)行項(xiàng)目開發(fā)：了解Vue
第三天：按技能組路徑學(xué)習(xí)React知識
- 作業(yè)：開始接入項(xiàng)目：隱私管理臺開發(fā)部分模塊
第四天：按技能組路徑學(xué)習(xí)React知識，并把之前支持組作業(yè)按React改造
- 作業(yè)：開始接入項(xiàng)目：隱私管理臺開發(fā)部分模塊
第五天：按技能組路徑學(xué)習(xí)React知識型酥，并把之前支持組作業(yè)按React改造
- 作業(yè)：開始接入項(xiàng)目：隱私管理臺開發(fā)部分模塊
周思考題：深入實(shí)踐異步編程
請自行先創(chuàng)建兩個(gè).json文件
person.json 人員列表山憨，里面有5000個(gè)人員，cid是身份證號弥喉，name是人員名稱郁竟，did是部門ID
dept.json 部門列表，里面有1000個(gè)部門由境，did是部門ID棚亩，name是部門名稱，pid是上級部門ID
用多種異步的方式讀取上面兩個(gè)文件虏杰，并生成如下字符串
部門（全路徑名稱）/人員名稱
注意：每次只能從person中取50個(gè)人員
要求有三種實(shí)現(xiàn)方案
2. 成長總結(jié)
3. 作業(yè)匯總
0724
主要內(nèi)容
- 完成新增作品渲染到頁面
- 重新編輯新增作品邏輯
問題反饋
- 無法給列表中的li增加事件,jQuery中動態(tài)加載的元素增加事件必須用on
$('#authorname-add-list').on('click','li',function(){
})
答：是的
- utils方法中 函數(shù)參數(shù)中的fn的作用
function mySort(arr, columnName, fn) {})
答：比如這個(gè)函數(shù)蔑舞，要正序還是逆序，需要傳入fn來決定
- 要往頁面中添加作品嘹屯，一個(gè)作品的樣式和結(jié)構(gòu)比較復(fù)雜，應(yīng)該如何添加
用clone方法
答：clone是比較方便的方式
0725
主要內(nèi)容
- 根據(jù)題目修改第三周作業(yè)从撼，主要加入回調(diào)函數(shù)
- 了解數(shù)據(jù)雙向綁定州弟，學(xué)習(xí)react
問題反饋
- react組件是不是應(yīng)該從大的開始寫，再抽離小的
答：理論上來講低零，進(jìn)行組件抽離婆翔，有些人喜歡從下向上，有些喜歡從上向下掏婶，這個(gè)跟據(jù)個(gè)人愛好啃奴，如果是最佳實(shí)踐的話，應(yīng)該先在早稿上似定各組件的層次雄妥，及先設(shè)計(jì)出來最蕾，再進(jìn)行編碼依溯，這樣寫代碼的時(shí)候，實(shí)踐上你已經(jīng)把小組件抽離出來了 - 改造作業(yè)自己重頭搭建一個(gè)react項(xiàng)目還是可以用create-react-app
答：如果是入門瘟则，一步一步來黎炉，按教程上不使用工具create-react-app，而直接手寫代碼是比較好的醋拧，可以一步一步了解一些包的安裝及使用慷嗜。建議初學(xué)者不直接使用create-react-app
0726
主要內(nèi)容
- 導(dǎo)師進(jìn)行codereview 修改前四周的代碼
- 在作業(yè)中使用react，完成靜態(tài)頁面部分
問題反饋
- git push的時(shí)候報(bào)錯(cuò)
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
這是由于我要用壓縮過的圖片來替換原來項(xiàng)目中所有的圖片丹壕，在push的時(shí)候文件太大報(bào)錯(cuò)庆械。 需要到項(xiàng)目中的.git 下的config 文件修改
URL 的協(xié)議
url = http://git.sdp.nd/213520/ND-FE.git
改為
url = git@git.sdp.nd:213520/ND-FE.git
0727
主要內(nèi)容
- 完成作業(yè)react 部分路由改造
- 接入項(xiàng)目，完成隱私模塊新增和編輯
問題反饋
react-router 的 link 報(bào)錯(cuò)
用新的寫法 引入
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>
答：需要注意各個(gè)模塊的引入
0728
主要內(nèi)容
- 完成隱私模塊新增和編輯菌赖，修改代碼規(guī)范
- 學(xué)習(xí)異步編程缭乘，先用promise實(shí)現(xiàn)
4. 問題答疑
5. 能力評估
6. 導(dǎo)師點(diǎn)評
時(shí)間：0717-0721（第二周）
1. 新人計(jì)劃
第一天：根據(jù)上周的學(xué)習(xí)總結(jié)并復(fù)習(xí)，實(shí)現(xiàn)一個(gè)博客頁面的制作
第二天：學(xué)習(xí)模塊化前端編程逛尚，了解npm、nodejs刁愿、webpack等工具绰寞，了解前端單元測試mocha，深入理解Javascript并實(shí)現(xiàn)一些工具類的npm包
- 記npm包開發(fā)過程：http://www.cnblogs.com/xiaoheimiaoer/p/5041266.html
- 注意iOS時(shí)間格式化的大坑：http://blog.csdn.net/zhoukun1008/article/details/51537862
- mocha詳細(xì)介紹：http://www.cnblogs.com/Leo_wl/p/5734889.html
- 作業(yè)1：參考上面記npm包開發(fā)過程例子铣口，實(shí)現(xiàn)一個(gè)npm包滤钱，內(nèi)容同例子
- 作業(yè)2：參考Java的Calendar時(shí)間類，用javascript實(shí)現(xiàn)一個(gè)Calendar時(shí)間工具類脑题，并發(fā)布npm
第三天：復(fù)習(xí)并鞏固js基礎(chǔ)件缸，webpack聯(lián)系，了解數(shù)據(jù)綁定原理
- 復(fù)習(xí)并鞏固js基礎(chǔ)之作用域：http://www.cnblogs.com/longze/p/3542582.html
- webpack2.0文檔：http://www.css88.com/doc/webpack2/guides/development/
- 前端構(gòu)建工具漫談叔遂，fis3他炊、webpack、rollup.js:https://zhuanlan.zhihu.com/p/20933749
- 作業(yè)1：見如下代碼已艰，分析最終打印結(jié)果痊末、原因，以及如何打印如"My Object"哩掺，并形成文檔
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()());
- 作業(yè)2：請練完這16個(gè)webpack小例子凿叠，并形成文檔：https://segmentfault.com/a/1190000009038067
- 作業(yè)3：實(shí)踐了解數(shù)據(jù)雙向綁定原理，并提交git，文章：https://zhuanlan.zhihu.com/p/25003235
第四天：今天按技能組路線學(xué)習(xí)
- EventLoop解釋盒件，文章：http://www.360doc.com/document/14/1011/13/15077656_416048738.shtml
- 結(jié)合microtask和macrotask理解event-loop蹬碧，文章：http://www.reibang.com/p/12b9f73c5a4f#
- 作業(yè)1：實(shí)現(xiàn)技能組作業(yè)
- 作業(yè)2：JS閉包、EventLoop等基礎(chǔ)示例
- 請看下面代碼履恩，并解釋輸出結(jié)果
for (var i = 0; i < 5; i++) {
console.log(i);
}
- 再看下面代碼锰茉，并解釋輸出結(jié)果
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
- 如何改造上面代碼，可以實(shí)現(xiàn)輸出0,1,2,3,4呢切心？
- 再看如下代碼飒筑，并解釋輸出結(jié)果
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
- 再看如下代碼，并解釋輸出結(jié)果
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);
第五天：今天按技能組路線學(xué)習(xí)
- 作業(yè)1：使用jQuery完成技能組作業(yè)
2. 成長總結(jié)
- 0717 JS和CSS的基礎(chǔ)學(xué)習(xí)绽昏、實(shí)現(xiàn)瀑布流頁面协屡、完成了一個(gè)H5和CSS3的博客
- 0718 學(xué)習(xí)npm包開發(fā)全過程、前端單元測試moch全谤，跟著教程實(shí)現(xiàn)一個(gè)包發(fā)布肤晓；動手用js實(shí)現(xiàn)一個(gè)dateUtils工具類，包含一些常用的時(shí)間處理方法认然，并發(fā)布
- 0719 復(fù)習(xí)鞏固js基礎(chǔ)补憾，主要學(xué)習(xí)上下文棧和作用域，完成思考題卷员，學(xué)習(xí)webpack盈匾，完成16個(gè)小例子，并形成文檔毕骡；將博客頁面用webpack進(jìn)行打包
- 0720 js深入系列 主要學(xué)習(xí)執(zhí)行上下文和閉包削饵，理解思考題，完成技能組任務(wù)到第三周內(nèi)容
- 0721 完成技能組作業(yè)未巫，利用jQuery對dom操作窿撬，實(shí)現(xiàn)增加作品
3. 作業(yè)匯總
- 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其實(shí)是變更作用域叙凡，舉例來說object1.method.call(object2)劈伴，這樣就相當(dāng)于讓object2繼承object1，這樣object2就可以直接調(diào)用object1的method方法握爷，另外如果method里面有this的話宰啦，這個(gè)this就是object2了，而不是object1饼拍。所以通常來說，一種就是實(shí)現(xiàn)沒有的方法田炭，一種就是改變this的作用域指向
- 0718
- 寫好一個(gè)npm包后师抄，無法publish
解答：由于之前按公司的源設(shè)置了npm源，導(dǎo)致無法publish到npm上教硫，所以安排cnpm叨吮，源指向公司辆布，再修改npm為默認(rèn)源，現(xiàn)在可以上傳
- 0719
- webpack中的load是啥茶鉴，沒用好像也可以加載
解答：webpack核心是模塊加載和插件锋玲，模塊加載把所有文件都當(dāng)成資源，通過一定的加載器加載并統(tǒng)一處理涵叮，而插件就是讓功能更豐富require(‘./main.css’) 需要loader才能被識別惭蹂，同理圖片等 - 可是發(fā)現(xiàn)沒有加這個(gè)模塊熱替換， 修改完內(nèi)容也可以不用刷新 頁面就改動了
解答：教程是2.0的割粮，安裝的是webpack3.3盾碗，好像已經(jīng)改成默認(rèn)HRM，不需要配置了
- 0720
- script執(zhí)行時(shí)舀瓢，遇到setTimeout為一個(gè)宏任務(wù)源
new Promise實(shí)例廷雅，第一個(gè)參數(shù)構(gòu)造函數(shù)會執(zhí)行，而then會被放到微任務(wù)源的隊(duì)列中京髓，for循環(huán)不會放到任何隊(duì)列中航缀，代碼會依次執(zhí)行
所以順序?yàn)?3541
- 0721
- jQuery click事件會執(zhí)行兩次
解答：問題的根源定位錯(cuò)了，這個(gè)主要是解答如何有效的定位問題堰怨，盡量在疑點(diǎn)處定位debugger芥玉，然后再逐條debug，后定位為.class的獲取錯(cuò)誤 - jQuery的.class選擇器
解答：優(yōu)先使用#id選擇器诚些，一是速度快飞傀，二是不會重復(fù)（或重復(fù)少）
5. 能力評估
- 較深入理解了JS，扎實(shí)了HTML與CSS的基礎(chǔ)诬烹，理解作用域及作用域鏈的操作順序砸烦，了解了閉包。下周可以介入項(xiàng)目實(shí)踐绞吁，并實(shí)踐異步編程幢痘。
6. 導(dǎo)師點(diǎn)評
- 由于第一周學(xué)習(xí)很快，第二周的學(xué)習(xí)計(jì)劃定制為深入了解基礎(chǔ)并學(xué)習(xí)模塊化開發(fā)家破，朱婉靈本周在知識體系的了解上颜说，掌握到位，雖然知識面較廣但學(xué)員吸收較快汰聋，余下一些知識需要再進(jìn)行鞏固和擴(kuò)展學(xué)習(xí)门粪。總體上來說烹困，進(jìn)度速度很快玄妈。
7. Review（第三周、第四周作業(yè)）
- arrToObj方法
- 定義對象的時(shí)候可以更簡潔的定義為如下方式
let jsonObj = {
result: [],
entities: {}
}
- 需要進(jìn)行邊界判斷，參數(shù)不一定傳的是數(shù)據(jù)拟蜻，需要進(jìn)行判斷
const tempArr = arr && arr[0] || []
- 另外Object.keys是ES5的語法昆禽，建議用更早的語法進(jìn)行實(shí)現(xiàn)（IE8不支持Object.keys）
- myFilter方法
- 同樣采桃，forEach也是ES5語法，另外做為底層庫，forEach的速度不同原生loop
時(shí)間：0710-0714（第一周）
1. 新人計(jì)劃
- 熟悉HTML喷屋、JS格二、CSS基礎(chǔ)知識践啄，相關(guān)資料：https://juejin.im/post/59278e312f301e006c2e1510
- 了解JS基本的設(shè)計(jì)模式羡棵，相關(guān)資料：http://www.cnblogs.com/WebYan/p/6066191.html
- 了解函數(shù)式編程，相關(guān)資料：https://lodash.com/docs/4.17.4
- 了解界面布局經(jīng)驗(yàn)阁谆，相關(guān)資料：http://web.jobbole.com/84285/
- 作業(yè)：實(shí)現(xiàn)一個(gè)簡單的瀑布流靜態(tài)布局頁面
2. 成長總結(jié)
- 對HTML碳抄、JS、CSS基礎(chǔ)加深了解
3. 作業(yè)匯總
4. 問題改進(jìn)
- 0714
- 頁面的所有內(nèi)容最好應(yīng)該包在一個(gè)塊里面嗎场绿？如果不包起來剖效，那整體的樣式（比如長寬）應(yīng)該寫在body里面嗎
解答：理論上包在塊里面有一定的好處，可以進(jìn)行塊寬度與高度的繼承焰盗，但實(shí)際上璧尸，頭、中熬拒、尾三塊一般是獨(dú)立出來的爷光，然后，其它再包含在這三塊中澎粟，這樣可維護(hù)性比較好蛀序，這點(diǎn)上沒有標(biāo)準(zhǔn)答案。 - 如下圖的豎線怎么解決比較好活烙，是通過
標(biāo)簽設(shè)置樣式徐裸，還是用border，或者其他的什么方式
Paste_Image.png
解答：在HTML布局中啸盏，為了可讀性重贺，像這種介于兩個(gè)元素之間的豎線之類的處理，一般會使用before/after偽元素或使用border回懦，也可以使用背景漸變或box-shadow之類的气笙，不過一般不推薦，最后就是圖片了怯晕，也不推薦潜圃，除非特殊用途。也不建議像這種通用的堅(jiān)型直接使用標(biāo)簽重復(fù)標(biāo)記
前端開發(fā)上舟茶，布局使用HTML秉犹，而樣式則最好是由CSS處理蛉谜。
5. 能力評估
- 有一定的HTML、CSS崇堵、JS基礎(chǔ)，可以考慮深入學(xué)習(xí)
6. 導(dǎo)師點(diǎn)評
- 本周工作達(dá)到預(yù)期目標(biāo)客燕。朱婉靈本周花費(fèi)了一定時(shí)間鸳劳，對前端基礎(chǔ)知識進(jìn)行鞏固，并提前完成了技能組的部份作業(yè)也搓，額外實(shí)踐了瀑布流布局赏廓，值得表揚(yáng)。
7. Review
- 最后輸出切圖最好優(yōu)化大小傍妒，進(jìn)行無損壓縮（建議使用：https://tinypng.com/）
