看萧井陌b站直播第一集的收获，附代码

看了萧井陌在b站直播的录播第一集，收获颇大，遂记录一下；

直播中使用的语言是JavaScript，我之前学web后台的时候，对js有一个简单的了解，因为学过C++和Java，所以看录播的时候虽然有些语法不太习惯，但也能够理解；
收获主要集中在两个方面：一是写代码的方式，主要是一个思维过程；二是重构；
我最近两年才学的C++和Java，并没有写过实际的项目，感触也不多；大学的时候，自学Delphi，写过一些小程序；虽然Delphi的知识已经忘完了，但是写代码时的感觉还记得，当时写代码，就好像是记流水账，写的时候非常的畅快，和该录播的前25分钟差不多，因为当时的写的小程序代码量不大，只有数百行，心里也没有什么高内聚，低耦合，可复用之类的概念，除了debug的时候痛苦了一点，也感受不到啥缺点；学习Java的时候，慢慢的接触了面向对象的思想（虽然学习Delphi的时候，也有这个思想，但是那个时候，最大的感觉是面向控件，估计是当时学艺不精），知道了写代码不仅仅是当时能够运行就行了，还要考虑可复用，可移植，可扩展等等，但是毕竟没有经过大量代码的洗礼，还不能够深刻理解这些；
说实话，我现在也不清楚写代码的顺序，是像视频中萧老师那样，先记流水账，在重构呢，还是先抽象，再具体，比如面向接口编程；很多人推崇面向接口编程，我也尝试过，然后发现作为一个初学者，我没有把对象抽象出来的能力，前几天用Java写了一个爬虫，我开始的时候想先把框架搭出来，把对象都抽象出来，发现做不到，后来还是边写边重构；等下次再写爬虫的时候，应该就能先搭架子了；或许别人说的面向接口编程，也是说给有一定编程经验的人听的，我考虑的有些提前了，等多重构几次，或许就习惯了；
以前我写流水账就是流水账，后来学Java就是直接的面向对象，萧老师的直播帮我把这两者联系起来了，这便是我看了第一集最大的收获；
写的比较啰嗦，因为是初学者，也想顺便总结一下自己的学习历程；

直播中，萧老师有说会把代码上传的，但是我没找到，我把我看视频时跟着写的代码贴在下边，供后来者参考：
//25min时的，之后的就开始封装重构了，和这时的代码完全变样了；

<!DOCTYPE html><html><head><meta charset="utf-8"><title>game 1</title><style media="screen">canvas {border:1px black solid;}</style>    </head><body><canvas id="id-canvas" width="800" height="600"></canvas><script>var log = console.log.bind(console)var canvas = document.querySelector('#id-canvas')var context = canvas.getContext('2d')var x = 100var y = 100var speed = 5var img = new Image()img.src = 'paddle.png'log(img)img.onload = function(){context.drawImage(img, x, y)}var leftDown = falsevar rightDown = false// eventswindow.addEventListener('keyup',function(event){log('keyup')var k = event.keylog(k)if(k == 'a') {leftDown = false} else if (k == 'd') {rightDown = false}})window.addEventListener('keydown',function(event){var k = event.keylog(k)if(k == 'a') {leftDown = true} else if (k == 'd') {rightDown = true}})//设置每秒刷新次数，即fpssetInterval(function(){//update xif (leftDown) {x -= speed} else if (rightDown) {x += speed}//可以在这个地方加个限制，把图片移动的范围限制在画面中；//draycontext.clearRect(0, 0, canvas.width, canvas.height)context.drawImage(img, x, y)},1000/30)</script></body>
</html>

//以下是第一集的最终代码

<!DOCTYPE html>
<!--
这个注释中的东西是我看视频时的总结、记录
重构：1.定义一个入口；2.把所有的代码都放在入口中；目的：高内聚，低耦合命名规范之函数命名：如果这个函数表达的是一个动作，那么以动词开头，不要用介词，比如to
-->
<html><head><meta charset="utf-8"><title>game 1</title><style media="screen">canvas {border:1px black solid;}</style></head><body><canvas id="id-canvas" width="800" height="600"></canvas><script>var log = console.log.bind(console)var imageFromPath = function(path) {var img = new Image()img.src = pathreturn img}var Paddle = function() {var image = imageFromPath('paddle.png') //这个形式有点像C++中的structvar o = {image: image,x: 100,y: 500,speed:15,//此处最后一定要加个逗号（,），为了一致性；以后增删都简单；据说ie6会报错}o.moveLeft = function() {o.x -= o.speed}o.moveRight = function() {o.x += o.speed              }//函数参数之前不加参数类型，真的好不习惯o.collide = function(ball) {if(ball.y + ball.image.height > o.y) {if(ball.x > o.x && ball.x < o.x + o.image.width) {log('相撞')return true }   }return false    }return o}var Ball = function() {var image = imageFromPath('ball.png')var o = {image: image,x: 100,y: 200,speedX:10,speedY:10,fired: false,//此处最后一定要加个逗号（,），为了一致性；以后增删都简单；据说ie6会报错}o.move = function() {if (o.fired) {log('move')if (o.x < 0 || o.x > 800) {o.speedX = -o.speedX}if (o.y < 0 || o.y > 600) {o.speedY = -o.speedY}//moveo.x += o.speedXo.y += o.speedY}}o.fire = function() {o.fired = true}return o}var GuaGame = function() {var g = {actions: {},keydowns: {},}var canvas = document.querySelector('#id-canvas')var context = canvas.getContext('2d')g.canvas = canvasg.context = context//drawg.drawImage = function(guaImage) {g.context.drawImage(guaImage.image, guaImage.x, guaImage.y)}//eventswindow.addEventListener('keydown',function(event){log('keydown')g.keydowns[event.key] = true})window.addEventListener('keyup',function(event){g.keydowns[event.key] = false})//g.registerAction = function(key, callback) {g.actions[key] = callback}//timer:设置每秒刷新次数，即fpssetInterval(function(){//eventsvar actions = Object.keys(g.actions)for (var i = 0;i < actions.length; i++) {var key = actions[i]if(g.keydowns[key]) {//如果按键被按下，调用注册的actiong.actions[key]()}}//updateg.update()//clearcontext.clearRect(0, 0, canvas.width, canvas.height)//drawg.draw()},1000/30)return g}var __main = function() {var game = GuaGame()    var paddle = Paddle()var ball = Ball()game.registerAction('a',function(){paddle.moveLeft()})game.registerAction('d',function(){paddle.moveRight()})game.registerAction('f',function(){ball.fire()})game.update = function() {ball.move()//判断相撞if(paddle.collide(ball)) {//这里应该调用一个ball.反弹()来实现；ball.speedY *= -1}}game.draw = function() {//drawgame.drawImage(paddle)game.drawImage(ball)}}__main()</script></body>
</html>

看萧井陌b站直播第一集的收获，附代码相关推荐

看萧井陌直播写代码有感
1. 先把功能写出来,再说优化的事儿. 拿到一个需求之后,最重要的事儿一定是先把这个功能写出来.而不是写的多好看. 2. 全局变量最好不要用. 最外层最好只有函数. 3. __main函数里是整个文件 ...
python面试大全萧井陌_Python就该这么学？！
分享零基础学习Python的经验,15年4月份正式开始学习Python语言的,入门读物是一本书<父与子编程>. 关于第1点,我需要进一步强调:因为我目标非常明确,利用Python进行Web ...
知乎萧井陌大神《编程入门指南v1.3》思维导图
毕业之后才发现大学的基础课程是多么的关键,有幸在知乎上看到萧井陌大神的文章,打算将涉及的内容学一学,下午花了1h用思维导图将文章梳理如下,希望对大家有帮助(图片太大,因此进行了分割): 原文链接: ...
萧井陌java_萧井陌编程入门指南
萧井陌编程入门指南下载!萧井陌编程入门指南pdf是一款为学习JAVA用户打造的视频教程.需要学习JAVA的用户赶紧下载,此套JAV编程思想的课程适合想要自学java的同学们,课程抽丝拨茧,层层推进,让 ...
python面试大全萧井陌_有多少人按@萧井陌大神给出的Python+Flask路线找到工作了？...
python+Flask(之后转Django)的答一发. 背景先上,30+岁,零基础,自学.不管是年龄还是工作背景还是教育经历都同web开发无关.也没有名校背景. 二月初开始学,五月拿到offer.三 ...
萧井陌java课程资料_群大佬里分享的知乎萧大萧井陌24课前端视频，需要的自取...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼世界上最后一个人类躺在床上,他的床边是名女性机器人. 机器人身怀任务,她要观察人类这个濒危物种,并研究他们的思想. 现在任务即将结束,人类太老了,他正在等 ...
编程入门指南 @萧井陌的心得
编程入门指南 v1.4 这是一个知乎上的程序员大神,给了我很多帮助,还有轮子哥vczh.感谢这些大神的无私分享精神,才让我一窥什么是程序员,以及如何成为一名程序员.下面进入正题: 今年的目标:APP ...
萧井陌 python培训千锋为中钞研究院提供Python培训，助力企业高效数据运营
随着数字化时代到来,数字化应用所产生的各个维度的数据以几何速度不断递增,对企业来说掌握数据信息,得到有效数据结果,依据结果进行企业判断与决策是关乎企业发展的重中之重,所以,通过企业内训提升员工数据分析 ...
python面试大全萧井陌_知乎萧井陌大神Python Flask实战课程
[课程内容] 第1章网址组成.端口.HTTP协议.web服务器第2章作业讲解.服务器框架.html和getpost传递参数第3章基本框架.框架解释.model解释第4章 cookie讲解. ...

看萧井陌b站直播第一集的收获，附代码

看萧井陌b站直播第一集的收获，附代码相关推荐

最新文章

热门文章