wujr5 / modern-web-programming-report

中山大学数据科学与计算机学院 modern web programming 课程问题总结或反馈

modern-web-programming-report

中山大学数据科学与计算机学院 modern web programming 课程问题总结或反馈

TA：吴家荣

wiki：Modern Web Programing

作业提交：My Achievements

目录

1. report1：周四班-第11到15组 前端编程代码风格
2. report2：周四班-第11到15组 问题反馈
3. report3：周四班-第三次作业总结 & life coding show & css3动画初探
4. report4：周四班-第16到第20组 问题总结和谈谈js调试
5. report5：周四班-第21到第25组 问题总结和谈谈js面向对象
6. report6：周四班-第1到5组 问题总结
7. report7：周四班-第九次作业总结 & 浅谈nodejs模块化 & 服务端调试

modern-web-programming-report's Issues

周四班-第11到15组 问题反馈

周四班-第11到15组 问题反馈

1 第二次作业总结

1.1 优点

HTML&CSS编程风格有所改善

这一点比较欣慰，大部分同学都注意到HTML和css的编程风格。我还是强烈建议大家仔细阅读第一篇issue，理解我所表达的意思。可能对以后的学习很有帮助。

1.2 缺点

1.2.1 文件命名不按规则

这个不多说，直接扣分！下次再错扣5分！

1.2.2 部分同学的编程风格仍然不按标准

这个也不多说，直接给低分！

1.2.3 class和id的命名无意义

希望不要再出现无意义的命名，什么a1, a2, k1, k2之类的命名，这次没有狠抓命名，下次严查。

2 CSS语法和概念【推荐阅读】

参考：CSS语法和概念

3 HTML5与HTML4的区别【推荐阅读】

参考：HTML5与HTML4的区别

周四班-第三次作业总结 & 谈谈CSS3动画

周四班第三次作业总结 & life coding show & css3动画初探

1 第三次作业总结

1.1 优点

1.1.1 开始有意识地添加注释

1.1.2 效果大致符合要求，都有自己用心的思考

1.1.3 自己记录改进过程

1.1.4 大部分同学的代码风格都不错

参考： 前端编程代码风格

1.1.5 大部分同学的作业都符合题目要求，小圈的散开收回、大圈和@的缩放都很完整，与视频效果吻合。

1.1.6 有的同学的外观和设计图基本吻合，找不到任何瑕疵。

1.1.7 有同学提供的github链接中，有markdown语法所写的readme

1.2 缺点

1.2.1 效果理解有偏差

大气泡内容，缩放原点；小气泡缩放原点；中心气泡缩放原点；动画颤抖；

1.2.2 css注释符号不清

注释有点让人看不太懂，可能适得其反。

1.2.3 position属性特点不清

position: static, absolute, relative, fixed

参考：

1. 学习css布局
2. MDN position

1.2.4 作业的一些细节要求没有完成

配色，动画时间，大小等

1.2.5 仍有相当部分同学没按要求命名

这个不多说

1.2.6 有的同学注释写的太多了

如果能确定大家基本能看懂的地方，就不用注释啦。注意注释冗余。

1.2.7 比较多同学没有仔细观察视频的动画效果：鼠标移开之后没有做到小圈先收回，@再缩小。

这是普遍存在的问题。

1.2.8 部分同学的外观和设计图相差较大。

这个呵呵😷

1.3 优秀作业展示

1.3.1 优秀作业

14331291    吴思
14359047    洪生楠
14331077    关伟杰
14331091    胡南
14353101    黄炜
14331034    陈颂熙 
14331051    邓杰友
14331231    邱天睿
14331136    李为
14331327    颜鹏翔
14331020    陈纪庚
14331295    吴子昊
14331030    陈锐彬
14332011    梁权民

1.3.2 优秀作业展示

1.3.3 郝思佳：作业提点

有请美女TA 😍

2 life coding show

2.1 王老师 coding show

😄 王老师codingshow 😄

新地址：codingshow

3 css3动画初探

3.1 网页动画

总体来说有三种方式可以实现网页动画。

首先，是JavaScript实现。一般来说会直接使用JavaScript函数库，很少自己实现JS动画，因为比较复杂。优秀的函数库有JQuery等，还有一般的前端框架都会提供js动画。比如Bootstrap，Materialize等。

由于目前我们还没有学习JS的只是，这部分的内容不讲。

其次，是CSS3中的transition实现。transition翻译为过渡，意思是当一些CSS属性发生变化的时候，通过设置transition，可以控制变化的过程。因此我们能够利用过渡实现动画。

第三，是CSS中的animation实现。animation是3D变形，比transition更复杂，功能也更强大。

3.2 transition 过渡

过渡其实是对于某个属性，或者某些属性而言的。比如，

<style>
    div {
        width: 100px;
        height: 100px;
        background: blue;
    }

    div:hover {
        width: 200px;
        height: 200px;
    }
</style>

<div></div>

当鼠标hover在div上的时候，div的宽度和高度就会突变成为200px，这时是突然变化的，没有过渡，也可以认为是动画，但是不美观。

transition属性就是用来调和这个变化过程的。

举个例子。transition intro

transition：MDN transition

transition语法：

transition: transition-property transition-duration transition-timing-function transition-delay[, ...]

属性如下：

1. transition-property：需要过渡处理的属性
2. transition-duration：延续时间
3. transition-timing-function：属性值随时间的变化函数
4. transition-delay：执行动画的延迟时间

transition-timing-function:

ease: 缓解效果，立方贝塞尔曲线
linear: 线性效果
ease-in: 渐显效果
ease-out: 渐隐效果
ease-in-out: 渐显渐隐效果
cubic-bezier: 特殊立方贝塞尔曲线

3.3 transform 2D变形

transform也可以看做是一个属性，包含很多变形函数。如果没有为transform设置transition，那也是一个瞬变效果，因此transform一般与transition配合使用。

举例说明。transform example

transform函数：

skew
matrix：矩阵变换
translate：移动元素
scale：缩放元素
rotate：旋转元素
skew：倾斜元素

3.4 animation 3D变形

举个例子：animation 3d

animation语法：

animation: animation-name animation-duration animation-timming-function animation-delay animation-iteration-count animation-direction

animation-name: 动画名称，对应关键帧的定义
animation-duration：动画时间
animation-timing-function：动画播放方式
animation-delay：延迟时间
animation-iteration-count：重复次数
animation-direction：播放方向

关键在于，定义关键帧。

@keyframes keyframeName {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(180deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

3.5 浏览器兼容处理

自己查阅相关资料。

4 本周作业

上周作业是正式分数。

本周作业不作为期末分数。只作为参考。

本周作业为，根据老师或者TA的提点，改进上周作业，按时提交。

改进原则：

1. 更接近题目要求的效果
2. css代码可读性更好
3. 在第二点的基础上，css代码更短。DRY：don‘t repeat yourself
4. 改善你的代码风格

5 接下来安排

小组内互动交流讨论

6 Tool tips

老师视频上提到的开发工具，还有我自己推荐的开发工具

6.1 Sublime Text

相信这个大家已经有了。链接：sublime text 3

6.2 Page Ruler

链接：page ruler

6.3 Colorzilla

链接：Colorzilla

6.4 Livereload

chrome插件结合软件一起使用。插件：chrome livereload，桌面应用：livereload

6.5 Markdown编辑器

三平台支持：haroopad

Mac强烈推荐：Mou

参考：

1. Mac 下两款 Markdown 编辑器 Mou/MacDown 大 PK
2. 10款流行的Markdown编辑器，总有一款适合你
3. Markdown语法比较好的教程：Garrett Flavored Markdown Reference Guide

6.5 微博图床

写Markdown文本时的利器，免费图片网盘。新浪微博图床

6.6 网页截图fireshot

可以全网页截图或者滚动截图：fireshot

6.7 免费科学上网

这个我没有用过，大家不妨试下，同学推荐说好用。lantern

6.8 去除页面牛皮癣

免费去除页面广告：Adblock

周四班-第11到15组 前端编程代码风格

周四班-第11到15组 前端编程代码风格

1 第一次作业总结

1.1 总体上

本周作业总体问题不大，有些同学在index.html上面下功夫比较多，这个不错。全部同学也基本实现了要求的功能，所以分数都比较高。有些同学有创新，实现了另外的功能。因此得到了加分。

1.2 存在问题

效果上，基本没问题。代码上，最大的问题就是HTML和CSS风格，还有CSS代码的冗余。
槽点如下。

1.2.1 HTML缩进糟糕

1.2.2 CSS缩进糟糕

1.2.3 CSS代码冗余

1.3 文件命名

文件命名是最大的槽点23333，知不知道TA每下一个文件夹都要修改你们的文件名，目前MA还没有提供全部下载的功能，所以一个一个下载非常痛苦([痛苦状表情])。

再补充一点是，一定要按照规定的命名格式来命名。否则扣分！

吐槽完了，下面说一下web前端编程的代码风格的问题

2 HTML代码风格

先上一份代码风格良好的代码让大家感受一下。

有没有感觉到赏心悦目！对！可读性良好的代码，看起来就是倍儿爽！

那怎样的代码才是可读性良好的代码呢？HTML究竟有什么样的编程风格？

2.1 高质量HTML

2.1.1 从缩进开始说起

写HTML代码一定要注意缩进，在同一层次的代码就有相同的缩进，比如上面的风格良好的示例代码。<head>和<body>是具有相同的层次的，因此他们的缩进相同，<html>在最外层，所在的层次最低，因此没有缩进。其他的一样的道理。

除了缩进就是空行和注释了。我们可以根据语义或者结构，利用空行，把代码划分成多块。空行还可以放一些注释，用来说明你这段程序的作用。

2.1.2 语义化标签

• 了解HTML标签的全称
  

参考链接: HTML常用标签及其全称

我们要了解所有标签所表达的含义。一般来说标签都是有语义的，比如<p>表示段落，<div>表示分割，等等。我们要根据标签设计出来是为了表达什么的，还有能表达什么，或者用在什么场合，进而决定选择什么标签。而不是都用<div>或者都用<p>。

• 少使用样式标签

  所谓样式标签其实就是，具有浏览器默认样式的标签，比如<strong></strong>，<bold>，<em>等，让HTML回归表示结构，让CSS完全控制样式。做到结构和样式的分离。

• 根据内容将代码分不同的模块

  也就是上面说的，利用空行和注释分割代码。把具有类似结构或者表达内容的代码划分到一个模块当中，比如一个<div>，然后使用相应的class或者id进行标识。还可以利用<ul>和<li>来进行内容块的划分。

• 判断网页语义是否良好

  当一个网页完全去除CSS的时候，就可以观察其HTML结构，这时就能看到网页HTML结构是否良好。举例如下：

我们先来看一张图片，这时w3c官网的截图。

下面是把网页去掉后的情况：

大家可以看到两张图的对比。当没有样式，仍然不影响我们读取其中的内容，网页结构非常良好。这就是判定结构是否良好的标准。比较主观，关键在于看，去掉css后，html文件可读性是否良好。

3 CSS代码风格

3.1 糟糕的CSS

• 命名不友好，class和id，的命名乱七八糟，无意义
• 缩进问题，糟糕的缩进，代码成团，结在一起
• 代码冗余，每个地方都有相同的属性值

3.1 高质量的CSS

• class和id根据语义命名，有表达的意思，让人一看就懂。命名不怕长，就怕表达意思不清晰。

• class和id与大括号之间应该保留一个空格，属性应该有一个缩进，比如：
  

  顺便举一个css风格良好的例子：

  

  

• 代码精简。如果多个class或者其他标签具有相同的css属性的时候，就应该考虑把相同部分的内容抽取出来，独立成一个class

• css属性的排序。一个class或者id、标签里面的css属性应该按照什么顺序排列呢？这里有多重参考方案。

  比如：

  1. 按照字母序排列属性
  2. 按照实现功能的相似性，比如处理字体的放在一块，然后空行，然后是处理图片的属性
  3. 按照添加日期，也就是你先后添加的顺序来排列属性。

  初学者一般用的是第三种方案，但是并不建 议使用。最建议使用的是第二点，看起来非常清楚。其次是第一点，优点是能快速定位属性。

  希望同学们意识到这一点，从而改善自己的代码。

第九次作业报告 & 浅谈nodejs模块化 & 服务端调试

第九次作业报告 & 浅谈nodejs模块化 & 服务端调试

1 作业总结

周四班第九次作业总结

2 nodejs模块化

2.1 同学作业例子

Example code

2.2 简单模块化

2.2.1 nodejs包管理器：npm

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。npm提供了命令行工具，使你可以方便地下载，安装，删除包，也可以让你作为开发者发布并维护包。

2.2.2 服务器端模块化简单方式

exports and require

exports是模块公开的借口。
require用于从外部获取一个模块的接口，即获取模块的exports对象。

创建模块

一个文件就是一个模块

// module.js
var name;

exports.setName = function(n) {
    name = n;
}

exports.sayHello = function() {
    console.log("Hello " + name);
}

// getModule.js

var myModule = require('./module');

myModule.setName("xiaoming");
myModule.sayHello();

输出：

Hello xiaoming

覆盖exports

将对象封装到模块中。

// singleobject.js

function Hello() {

    var name;

    this.setName = function(n) {
        name = n;
    }

    this.sayHello = function() {
        console.log("Hello " + name);
    }
}

exports.Hello = Hello;

但是这时候，需要通过一下语句来获取对象。

require('./singleobject.js').Hello;

略显冗余。

以下方法简化了一些。

// hello.js

function Hello() {

    var name;

    this.setName = function(n) {
        name = n;
    }

    this.sayHello = function() {
        console.log("Hello " + name);
    }
}

module.exports = Hello;

获取语句：

var hello = require('./hello');

3 服务端调试

安装：

npm install -g node-inspector

使用：

node --debug-brk=5858 server.js

然后打开新命令行，运行：

node-inspector

浏览器访问

nodejs后台程序：http://localhost:8080/debug?port=5858

程序运行界面：http://localhost:8000

周四班-第21到第25组 问题总结和谈谈js面向对象

周四班-第21到第25组 问题总结和谈谈js面向对象

1 问题总结

1.1 优点

• 大部分同学基本上能按照要求完成作业
  
  
• 使用变量代替getElementById
  
• 尝试利用函数闭包特性
  
• 迷宫界面创新
  
• 打地鼠界面创新
  
  
  
• 动态创建元素
  

1.2 缺点

• 部分同学没理解清楚题目，游戏交互不佳
• 打地鼠：Stop game or Pause game ？
• 不建议js改变元素style，而应该改变className

2 js面向对象

非常想写，然而时间有限，待补充...

周四班-第16到第20组 问题总结和谈谈js调试

周四班-第16到第20组 问题总结和谈谈js调试

1 问题总结

1.1 html嵌入js函数

违反结构、样式、行为分离的原则。

1.2 css选择器全是id，属性冗余

css选择器过多使用id导致属性冗余。

1.3 html使用表格布局

表格应该用来呈现数据，而不应该用来布局，布局任务应该由css承担。

1.4 js函数臃肿

js函数非常庞大。应该把重复很多的代码抽离出来，独立成函数。

1.5 尴尬的全局变量

全局变量滥用，污染全局空间。

2 优点

2.1 界面做的很用心。

2.2 使用try catch捕获错误

3 谈谈js调试

写任何一门语言的代码，都不可能一蹴而就，js也一样。涉及到逻辑处理的代码，出现错误，或者代码行为不符合预期的时候，最重要的就是快速定位错误，搞清楚出问题的原因。这个过程就是调试的过程。

以下我就我的经验，谈谈在浏览器控制台，js的调试技巧。

3.1 认识浏览器控制台

3.1.1 概览

七个功能区：Elements，Network，Sources，Timeline，Profiles，Audits，Console

3.1.2 Elements

这个功能区，最大的功能莫过于查看html，还有对应元素的css了。html的内容同学们很熟悉了。关键是css的查看，可能还需要了解多一些。比如下面。

Styles

查看某元素详细的css，包括继承，默认的，还有自己的。

Computed

查看元素盒模型，可以实时改变width，height，border，padding，margin的值。

下面还可以看到属于元素自己的css属性值。

Event Listeners

在元素上绑定的事件监听器。这个我不常用，不熟悉，如有见解，望不吝评论。

DOM Breakpoints

在该元素对应的DOM元素所涉及的断点。

Properties

该元素涉及的各种属性。

3.1.3 Network

网络监控区。监控在网页范围内的各种资源请求。不过这个需要在打开控制台之后，重新刷新网页才能收集到相关信息。

点开其中一个资源查看详情，可以看到各种相关信息。

3.1.4 Sources

源文件区。在这里可以集中看到网页引用或者设计的，js，html，css文件。这个区域非常重要，用来进行js调试。下面在调试技巧那里具体说明。

3.1.5 Timeline

时间线。资源请求的详细时间情况。这个也是需要重新刷新网页才能收集到相关信息。

3.1.6 Profiles

profiles区域。用来检测js运行是内存和cpu的运行情况。应该是作性能研究之用，我很少用。如有见解，望不吝评论。

3.1.7 Resources

资源区。在这里可以随时查看该网页或者网站对应的，各种数据资源。比如：数据库信息，local storage的信息，session，cookies等。

3.1.8 Audits

审计区。用来审查网页加载性能，组成情况，等等。这里有很多浏览器对网页分析的信息，很有用。

3.1.9 Console

控制台。在这里可以查看js的console.log或者console.dir输出。或者查看一些错误，或者直接可以运行js语句。极其有用的区域。

3.1.10 快捷键

在其他区域调出Console区。快捷键：esc。比如在elements区域，调出console功能区。再按一次ese键即可隐藏它。

其他快捷键：点击菜单自行查看。

比较有用的有：control + L清除console区域的信息。

3.2 错误查看

在console区，会输出js运行时发生的错误，因此通过这些错误，我们就可以及时知道我们的程序出现了问题。然后根据信息，快速定位错误发生的位置。

比如：我现在故意讲程序中的一个函数名字改成另外的名字。刷新网页，点击一下出发该函数的按钮。然后控制台马上就输出了错误信息。

sumUp is not defined提示说sumUp不是一个函数。

我就可以根据这个信息，马上找到sumUp使用的地方，然后去查看js文件，看看为什么没有定义这个函数。最后发现是函数名不一致，然后马上就可以把程序修改正确。

3.3 输出调试

调试的时候，可以使用以下两个命令讲js运行时的变量数值，或者字面量输出到控制台。

就像是C语言中的printf，或者C++中的cout，或者java中的System.out.println

3.3.1 console.log

最简单的方法是console.log，可以用来取代alert或document.write。

3.3.2 console.dir

console.dir可以显示一个对象所有的属性和方法。

参考：(这个一定要看！)

Firebug控制台详解

3.4 断点调试

断点调试极其重要，是前端工程师的调试利器。

3.4.1 设置断点

需要在Sources区针对相应的js文件来设置断点。如图：点击相应js文件的行数就能在该行设置断点。

问题来了，什么是断点？

这样解释：

如果在第34行加了一个断点，然后当程序运行到第34行的时候，就会在第34行停下来，在断点行可以查看该行所在的作用域下的各种局部变量或者全局变量，或者函数栈等等。

现在在程序添加了断点，重新刷新一下网页，看看会发生什么神奇的事情。

我们发现左边出现了Paused in debugger的功能区，右边红色框里面之前的黑色的暂停按钮，现在变成了蓝色，说明可以点击。而且在第34行变成了蓝色，说明程序运行到该断点。

3.4.2 控制按钮

现在我们来介绍一下上一个图右边红色框里面的按钮的意思。

还有以下的这个区域。里面记录了好多程序有关的数据。

简单解释一下：

watch：设置的watch的变量
call stack：函数调用栈
Scope：目前所在作用域下的所有有关的引用或值。
Breakpoints：设置的断点
DOM Breakpoints：设置的跟DOM相关的断点
XHR Breakpoints：异步相关断点
Event Listener Breakpoints：时间监听器断点
Event Listeners：事件监听器

请自行捣腾。

3.4.3 查看数值

当程序执行到断点的时候，有两种方法查看变量的值。

一是直接在控制台使用console.log输出变量的值。如下图所示，首先按esc键调出console控制台。输入a，回车，直接就可以显示a的值。

二是直接把鼠标移动到变量的上面。如下图所示，程序执行到第5行，当鼠标移动到a得上面的时候，马上马上弹出了7的小框，说明a=7

3.4.4 二分调试法

有时候错误莫名其妙地发生，但是找了好久又找不到错误发生在什么地方。

当你挠头抓脑，不知下一步该干什么的时候，不妨试一下二分调试法。

二分调试，顾名思义，就是一分为二，分治的调试**。

步骤如下：

1. 在不影响程序运行的情况下，把错误发生的可以区域，注释一半。
2. 刷新网页，重新运行js代码，重现案发现场。或者人为制造错误。
3. 观察错误是否产生。
4. 若错误发生了，说明你接近错误代码了，就是没有注释的可疑区域。然后继续二分注释，重新运行，观察错误。直到找到错误发生的地点。
5. 若错误没有发生，说明错误代码就在你注释的区域，而不在没有注释的可疑区域。然后把可疑的注释区域去掉一半的注释，重新运行，观察错误。

以上步骤就是为了让你能不断缩小可疑区域，直到命中错误代码。

二分调试法，效率奇高。

4 js学习

像之前学习高级语言一样，先学习基础语法，再学习高级应用。

推荐书籍

JavaScript高级程序设计（第3版）

JavaScript语言精粹

JavaScript权威指南

在线资源

1. MDN: JavaScript
2. ECMAScript 6入门

周四班-第1到5组 问题总结

周四班-第1到5组 问题总结

1 优点

1.1 界面美观，效果良好

1.2 自动恢复

1.3 尝试面向对象编程

1.4 基本按照要求完成作业

2 缺点

2.1 违反Soc原则

2.2 没了...