前端那些事儿-winter前端公开课
前端那些事儿-winter前端公开课
黑白棋练习
文末附源码
关于面试和前端职业发展方向
关于面试的问题
- 前端面试内容
vue nodejs 闭包 …
- 面试基于简历
简历写的都是真实的，再向外拓展；面试的东西 如果不知道，尽量把相关的 知道的东西讲出来；
- 程序员应该具备的能力
- 编程能力：算法题 或者 解决问题的一段代码；
- 架构能力：应对什么样规模的代码；组件化：高内聚 低耦合；
- 工程能力：单元测试等；
公司定级
是基于具体工作内容的，能力是进阶的必要条件；
- 1.助理工程师
- 2.前端工程师：独立完成工作的能力
- 3.资深工程师：
带其他人 解决疑难问题;
有自己的特点和方向，一般是项目的核心；
技术难题：别人做不出来的问题;
架构难题：代码乱 组件化能力;
项目管理：落后问题; - 4.技术专家：
P7 有自己的知识理论体系；组件体系能力 沉淀为团队财富；人无我有 人有我强；
- 5.高级专家：确定团队技术方向
项目难题
- 一些复杂组件的整合使用：富文本 树形组件；
- 处理项目经理反向压力
- 项目有很多问题 如何发现问题；效率低的问题 提高效率 根本上解决问题；
- 任何痛苦的地方都可能是一个难题：如何解决难题，进一步提升；
工作岗位选择
项目价值大 薪资高 契合自己的能力 能坚持学习
关于组件化
- 代码复用的问题？自身工程师的做事方法？
- 学习组件化的操作和需求：复用 和 解耦；
资深工程师目标
- 业务型的；
- 技术型的；
- 单点型的
- 架构型的：如何解决大量的重复劳动，大量模块间的耦合；
- 工程型的：主推可能目标：组件化；如何解决xss攻击；
其他类前端内容
- flutter：是一个应对移动端的生态环境
- 微信小程序：则是自成一体 是一个私有的技术生态
- 前端：ok…
黑白棋优化
组件化思想（组件化的思想 与具体的前端编程框架无关），逻辑与UI相分离；JS面向对象；
其他
关注Vue3.0，坚持学习；
黑白棋
<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>