本文分享了一位前端新人的心路历程，从找工作的艰难到对行业的深入理解。作者探讨了前端开发的重要性，以及JavaScript编程中的两种思想：面向对象编程和基于过程编程。
新人的迷茫
大四出来实习找工作，断断续续也投出去几千份简历，也接到过几个面试电话，也去过几家面试，但是大部分都是培训学校居多，我就在想，培训学校以这样的方式来招揽学生会不会略显低级呢，本来前端技术这个行业对于新人的宽容度和接纳度就不够，所以我们一直在碰壁，一直在坚持，因为我们真的想在这个行业待下去，当我们接到你们的面试邀请时，你有没有想过我们是如何珍惜这份机会，我们甚至想到了好多怎么表现自己能力的细节，但是见面后我们得到的是你们一味的贬低和诱导，最后告诉我们你来我们培训学校吧，你觉得这个时候我会选择去你们学校吗？真的是可笑。另外，只要找工作就有一点硬性要求，工作经验，工作经验，还是工作经验，我想问的是诸葛亮出山的时候有工作经验吗？谁出生的时候就有工作经验吗？你不让我工作我什么时候有工作经验。你仔细看过我的案例吗？你仔细听过我的思路吗？我们需要的只是一个机会而已。
算了，原谅我前面内心的吐槽。这是当前的行业状况，吐槽归吐槽，但是我们还是要必须面对现实，最主要的还是充实自己，也是很开心能来到这个纯技术交流的园区，在这有大神发布的一些看都看不懂的代码块，也有一些新手前辈的学习感悟，所以在这我也想以一个新手的身份去谈一下我对前端这个行业的理解。
首先，有人称呼我们是互联网时代的码农，我不喜欢这个称谓，并且我认为这是对我们web前端开发的误解。WEB前端开发侧重于网页页面制作（css+div）及页面动态效果（js脚本），不过也要会设计页面。因为随着社会的发展，以人为本的核心价值观一定会越来越被重视，那么互联网的侧重点一定会从数据，后台方面倾向于交互，因为作为消费受众来说，他们不会关心我们网站后台的数据交换的具体流程，他们的第一印象往往是我们的门户网站的舒服度，也就是交互的体验感。因此，前端不仅仅是网站的实现者，更是一个艺术品展现的参与者，有些前辈会说编程是一门艺术，编程是一门哲学，这其实也是在说明我们前端的重要性。
进入前端之后有三个组成是必须面对的，结构，样式，行为。首先来讲结构，一个合理的结构是所有后续动作的起源，特别是对于行为来说，一个合理的结构直接关系到正常交互的实现，其重要性不言而喻。至于样式，这是消费受众对于消费品的直观感受所在，这也是一个至关重要的一个点。最后来说行为，这是区分一个前端开发者水平的重要参考标准，也是我们前端开发者中心所在，在这里我想简单的谈谈我对于JavaScript的理解度。
首先，JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。至于其他的特点我也就不再一一赘述了，百度词条都有定义，这里我就先谈谈我对于JS的一点简单的理解，这里我先不谈细节，我想谈谈两种编程思想，至于其他的细节感悟，学习心得，我会在我后续的分享中去谈论这些东西。
一：基于对象的编程思想，我们在实现一个行为方式时我们先要分析一下，我们所要面对的行为对象是谁，需要牵扯到几个对象，每个对象需要作出什么行为，而这些行为应该如何展现，如何组合，这就是我们所说的面向对象的过程。下面我想插入一个这样的代码段，这是我自己写的一个贪吃蛇的小游戏。细节方面没有完善，但是基本框架都已经搭建出来了，有需要实现细节的可以联系我。
首先，我们分析有这么三个对象： 1：场景也就是画布 2：蛇 3：实物；
这里是CSS代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/ground.js" ></script>
<script type="text/javascript" src="js/snake.js" ></script>
<script type="text/javascript" src="js/game.js" ></script>
<script>
var game, game1;
window.onload = function() {
var cvs = document.getElementById("cvs");
var cvs1 = document.getElementById("cvs1");
game = new Game(cvs, 20);
game.start();
document.onkeydown = onkeydownhandler;
}
function onkeydownhandler(e){
console.log(e.keyCode);
switch(e.keyCode) {
case 37:
case 65:
game.snake.direct = 0;
game1.snake.direct = 0;
break;
case 38:
game.snake.direct = 1;
game1.snake.direct = 1;
break;
case 39:
game.snake.direct = 2;
game1.snake.direct = 2;
break;
case 40:
game.snake.direct = 3;
game1.snake.direct = 3;
break;
}
};
</script>
</head>
<body>
<canvas id="cvs" width="400" height="400">
您的浏览器太low了。
</canvas>
</body>
</html>
接下来是几个对象：
1.场地对象。
function Ground(canvas, gameSize) { this.context = canvas.getContext("2d"); this.gameSize = gameSize; this.cellSize = canvas.width / gameSize; } Ground.prototype.draw = function() { //绘制场地 this.context.strokeStyle = "#666"; for(var y = 0; y < this.gameSize; y++) { // 绘制一排矩形 for(var x = 0; x < this.gameSize; x++) { // 绘制一个矩形 this.context.strokeRect(x*this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); } } }
2.蛇对象
function Snake (canvas, gameSize){ this.context = canvas.getContext("2d"); this.cellSize = canvas.width / gameSize; this.bodies = [ {x: 10, y:8}, {x: 10, y:9}, {x: 10, y:10} ]; this.direct = 0; // 0: left 1: up 2: right 3: down } Snake.prototype.draw = function() { this.context.fillStyle = "brown"; for (var i = 0; i < this.bodies.length; i++) { this.context.fillRect(this.bodies[i].x * this.cellSize, this.bodies[i].y * this.cellSize, this.cellSize, this.cellSize); } } Snake.prototype.move = function() { // 移动身体 for(var i = this.bodies.length-1; i >= 1; i--){ // 把当前第i结身体 移到前一节(i-1)身体的位置 this.bodies[i].x = this.bodies[i-1].x; this.bodies[i].y = this.bodies[i-1].y; } // 移动蛇头 switch(this.direct) { case 0: this.bodies[0].x --; break; case 1: this.bodies[0].y --; break; case 2: this.bodies[0].x ++; break; case 3: this.bodies[0].y ++; break; } }
3.对象的行为组合
function Game(canvas, gameSize) { this.canvas = canvas; this.context = canvas.getContext("2d"); this.ground = new Ground(canvas, gameSize); this.snake = new Snake(canvas, gameSize); // this.apples = []; } //绘画场地 Game.prototype.draw = function(self) { self.context.clearRect(0, 0, self.canvas.width, self.canvas.height); self.ground.draw(); //绘制蛇 self.snake.draw(); //蛇的移动 self.update(); } //蛇的移动 Game.prototype.update = function() { this.snake.move(); } Game.prototype.start = function () { window.setInterval(this.draw, 200, this);
4.食物对象。其操作原理是利于随机数随机渲染出食物，然后判断食物和蛇头是不是碰撞，这里我也就不细写了。
二：基于过程的编程思想。
分别有以下几个过程
1：绘制场景 2： 绘制蛇头 3：蛇的移动 4：蛇吃食物 5 ：蛇咬到自己 6： 绘制食物 这里要注意一点在刷新页面的时候记得要清除场景。context.clearRect(0,0,400,400);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#cvs{background-color: #bbb;}
</style>
<script>
var gameSize=20;
var headx=10;
var heady=10;
var context;
var bodies=[
{x:8,y:3},
{x:8,y:4},
{x:8,y:5}
];
var direct=0;
var apples=[{x:10,y:10,color:"red"}];
var number=0;
window.onload=function(){
var cvs=document.getElementById("cvs");
context=cvs.getContext("2d");
drew();
setInterval(drew,200);
};
function drew(){
// 清除场景
context.clearRect(0,0,400,400);
document.onkeydown=monseonkeydown;
// 绘制场景
drewground();
// 绘制食物
drewapple();
// 绘制蛇头
drewhead();
// 蛇咬到自己
eatoneself();
// 蛇的移动
drewremove();
// 蛇吃食物
eat();
};
function eatoneself(){
for (var i=1;i<bodies.length;i++){
if(bodies[0].x==bodies[i].x && bodies[0].y==bodies[i].y ){
alert("gameover");
bodies.splice(i,3);
// bodies.push({x:apples[i].x ,y:apples[i].y});
}
}
}
function monseonkeydown(e){
switch(e.keyCode){
case 37:
direct=0;
break;
case 38:
direct=1;
break;
case 39:
direct=2;
break;
case 40:
direct=3;
break;
}
};
function eat(){
for (var i=0;i<apples.length;i++){
if(bodies[0].x==apples[i].x && bodies[0].y==apples[i].y ){
apples.splice(i,1);
bodies.push({x:apples[i].x ,y:apples[i].y});
}
}
}
function drewapple(){
number++;
console.log(number);
if(number%10==1){
apples.push({x:parseInt(Math.random()*20),y:parseInt(Math.random()*20),color:"red"});
}
context.fillStyle=apples[0].color;
for(var i=0;i<apples.length;i++){
context.fillRect(apples[i].x*20,apples[i].y*20,20,20);
};
};
function drewground(){
for(var y=0;y<20;y++){
for(var x=0;x<gameSize;x++){
context.strokeRect(20*x,20*y,20,20);
}
}
};
function drewhead(){
context.fillStyle="yellow";
for(var i=0;i<bodies.length;i++){
context.fillRect(bodies[i].x*20,bodies[i].y*20,20,20);
}
};
function drewremove(){
// 移动身体
for(var i=bodies.length-1;i>=1;i--){
bodies[i].y=bodies[i-1].y;
bodies[i].x=bodies[i-1].x;
};
switch (direct){
case 0:
bodies[0].x--;
break;
case 1:
bodies[0].y--;
break;
case 2:
bodies[0].x++;
break;
case 3:
bodies[0].y++;
break;
}
};
</script>
<body>
<canvas id="cvs" width="400" height="400">
</canvas>
</body>
</html>
上面是我对这两种思想的理解，但是在实际运用中运用的也不好，因为容易考虑掉对象或者是过程。这些其实是需要经验的累积的，欢迎大家来分享讨论。
扫一扫
5752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
