前端那些事兒-winter前端公開課
黑白棋練習
文末附源碼
關於面試和前端職業發展方向
關於面試的問題
- 前端面試內容
vue nodejs 閉包 …
- 面試基於簡歷
簡歷寫的都是真實的，再向外拓展；面試的東西 如果不知道，儘量把相關的 知道的東西講出來；
- 程序員應該具備的能力
- 編程能力：算法題 或者 解決問題的一段代碼；
- 架構能力：應對什麼樣規模的代碼；組件化：高內聚 低耦合；
- 工程能力：單元測試等；
公司定級
是基於具體工作內容的，能力是進階的必要條件；
- 1.助理工程師
- 2.前端工程師：獨立完成工作的能力
- 3.資深工程師：
帶其他人 解決疑難問題;
有自己的特點和方向，一般是項目的核心；
技術難題：別人做不出來的問題;
架構難題：代碼亂 組件化能力;
項目管理：落後問題; - 4.技術專家：
P7 有自己的知識理論體系；組件體系能力 沉澱爲團隊財富；人無我有 人有我強；
- 5.高級專家：確定團隊技術方向
項目難題
- 一些複雜組件的整合使用：富文本 樹形組件；
- 處理項目經理反向壓力
- 項目有很多問題 如何發現問題；效率低的問題 提高效率 根本上解決問題；
- 任何痛苦的地方都可能是一個難題：如何解決難題，進一步提升；
工作崗位選擇
項目價值大 薪資高 契合自己的能力 能堅持學習
關於組件化
- 代碼複用的問題？自身工程師的做事方法？
- 學習組件化的操作和需求：複用 和 解耦；
資深工程師目標
- 業務型的；
- 技術型的；
- 單點型的
- 架構型的：如何解決大量的重複勞動，大量模塊間的耦合；
- 工程型的：主推可能目標：組件化；如何解決xss攻擊；
其他類前端內容
- flutter：是一個應對移動端的生態環境
- 微信小程序：則是自成一體 是一個私有的技術生態
- 前端：ok…
黑白棋優化
組件化思想（組件化的思想 與具體的前端編程框架無關），邏輯與UI相分離；JS面向對象；
其他
關注Vue3.0，堅持學習；
黑白棋
<!DOCTYPE html>
<head>
<title>
黑白棋
</title>
<meta name="author" content="Flower">
<style type="text/css">
.icon-power{
width: 30px;
height: 30px;
margin:20px;
border: 6px solid #9EEA6A;
border-radius: 50%;
position: relative;
display: inline-block;
}
.icon-power::before{
width: 7px;
height: 22px;
background: #9EEA6A;
position: absolute;
left: 8px;
top: -13px;
content: "";
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="container">
</div>
<script>
/*
0 無子
1 黑子
2 白子
*/
let board = [
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,2,1,0,0,0],
[0,0,0,1,2,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0]
];
// 黑棋先手
let color = 1;
let container = document.getElementsByClassName("container")[0];
render();
//
function render(){
container.innerHTML = '';
for (let y = 0; y < 8; y++){
for(let x = 0; x < 8; x++){
let element = document.createElement("div");
//爲棋盤每個格子 添加點擊事件
element.addEventListener('click',(event)=>{
let ox = x; oy = y;//點擊div所在的座標
let canMove = false;//能否喫子
//方向 向量
let direct = [
[-1,-1],
[-1,0],
[-1,1],
[0,-1],
[0,1],
[1,-1],
[1,0],
[1,1]
];
//各個方向上的終點座標及狀態記錄
let dir_xy = [
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false},
{x:ox,y:oy,isCanMove:false}
];
//判斷是可落子的div
if(board[y][x] !== 0){
return;
}
for(let i = 0; i < 8; i++){
let dir_hasOpposite = false;//是否有相反的顏色
let dir_canMove = false;//能否喫子
//每個方向上的循環初始 需要將需要遍歷的x y 進行重置
x = dir_xy[i].x;
y = dir_xy[i].y;
while (true){
//沿着各自方向開始找
x += direct[i][0];
y += direct[i][1];
//棋盤越界判斷
if((x >=8 || x <=0) ||
(y >=8 || y <=0)){
break;
}
//向x軸反方向遍歷（直到邊）
if (board[y][x] === 3 - color){
//發現白子
dir_hasOpposite = true;
}
if (board[y][x] === color){
//存在白子 後續 又發現黑子 則可喫子
if (dir_hasOpposite){
dir_canMove = true;
}
break;
}
//到空子的位置break
//-break結束該方向上的查找
if (board[y][x] === 0){
break;
}
}
//在該方向上 若可喫子 則將具體的狀態及找到的終點位置 進行記錄
if(dir_canMove){
dir_xy[i].isCanMove = dir_canMove;
dir_xy[i].x = x;
dir_xy[i].y = y;
}
//是否可喫子的 總狀態
canMove = canMove || dir_canMove;
}
if (canMove){
//判斷能喫子的話 x還要加回來 並且實現變子
for(let i = 0; i < 8; i++){
//沿着各個方向 往回找 直到找到原始的落子點爲止
let dir_canMove = dir_xy[i].isCanMove;//能否喫子
let x_x = dir_xy[i].x;
let y_y = dir_xy[i].y;
while(dir_canMove && (x_x != ox || y_y != oy)){
//可變子 路徑上的全部變化
board[y_y][x_x] = color;
x_x -= direct[i][0];
y_y -= direct[i][1];
}
//
board[y_y][x_x] = color;
}
//黑白棋 是隻有喫子的時候 才能落子 才需要變換黑白
color = 3 - color;
}
//點擊棋盤落子 重新渲染視圖
render();
})
//指定每個棋盤單元格的樣式
element.style = `
width:50px;
height:50px;
background-color:green;
display: inline-block;
border:solid 1px white;
vertical-align:bottom;
`;
//將創建的期盼添加到父元素上
container.appendChild(element);
//根據數據源 初始化黑白子
if(board[y][x] === 1){
let disc = document.createElement('div');
disc.style = `
border-radius:20px;
width:40px;
height:40px;
background-color:black;
margin-top:5px;
margin-left:5px;
`;
element.appendChild(disc);
}else if(board[y][x] === 2){
let disc = document.createElement('div');
disc.style = `
border-radius:20px;
width:40px;
height:40px;
background-color:white;
margin-top:5px;
margin-left:5px;
`;
element.appendChild(disc);
}
}
container.appendChild(document.createElement("br"));
}
}
</script>
</body>