鱼C论坛

 找回密码
 立即注册
查看: 10193|回复: 42

[学习笔记] 007 - 前端工程狮的自我修养

[复制链接]
发表于 2018-6-1 10:19:30 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-6-4 16:54 编辑






在线视频:






课程思维导图

Snip20180601_27.png

猛戳

                               
登录/注册后可看大图
超清





不管在哪种编程语言中,好的注释都是好代码的一部分。

注释的重要性,不用过多解释,假设鱼油做了一部电梯,上面的楼层号都没有标出来。

是不是想一想就很尴尬呢。。。

推荐阅读:码农的自我修养——对代码注释的理解(转)

对不二来说,讨厌写注释,更讨厌自己不写注释

                               
登录/注册后可看大图


课程的一开始,小甲鱼老师带我们树立一个正确的三观:
不要为了注释而注释


很小白的尴尬示范:
Snip20180601_26.png


那么注释到底用来干嘛的呢?

很简单:
Snip20180601_24.png


如果觉得上面的解释太长,那就记住:
语言简单到别人一眼能看懂你这段代码在干什么。





1、HTML注释

HTML中注释使用标签
  1. <!--...-->
复制代码


...,就是要注释的内容。

注释标签用于在源代码中插入注释,注释内容不会显示在浏览器中。

不可以跨行使用,一个注释标签只能注释一行。

通过使用注释来对代码进行解释,这样做有助于在一段时间后再次阅读代码进行提示。

当编写了大量代码,团队合作时是极其有用滴~

示例:
  1. <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  2.     <!--<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">-->
  3.     <!--<meta name="description" content="《零基础入门学习Web开发》案例演示">-->
  4.     <!--<meta name="author" content="鱼C工作室">-->
复制代码





2、CSS注释

CSS中是使用:
  1. /*...*/
复制代码


即在需要注释的内容前使用“/*”标记开始注释,在内容的结尾使用“*/”结束。

注释可以多行内容注释。

其注释范围在“/*”与“*/”之间。

示例:
  1. /*.tab{*/
  2.             /*border:solid 1px #dbdee1;*/
  3.             /*border-collapse: collapse;*/
  4.             /*word-break: break-all;*/
  5.             /*word-wrap: break-word;*/
  6.             /*overflow: hidden;*/
  7.         /*}*/
复制代码


等价于:
  1. /* .tab{
  2.             border:solid 1px #dbdee1;
  3.             border-collapse: collapse;
  4.             word-break: break-all;
  5.             word-wrap: break-word;
  6.             overflow: hidden;
  7.         }*/
复制代码





3、JavaScript注释

JavaScript中有两种注释

第一种是多行注释:
  1. /*...*/
复制代码


一般js文件开头,介绍作者,函数等信息。

复制代码 代码如下:
  1. /*
  2. *author:不二
  3. *day:2018-05-31
  4. */
复制代码

Snip20180531_23.png


第二种注释方法是最常见的:
  1. //...
复制代码


在JS代码中随处可见,只能注释单行

示例:
  1. /*
  2. *author:不二
  3. *day:2018-05-31
  4. */
  5.     const lineEq = (y2, y1, x2, x1, currentVal) => {
  6.         // y = mx + b
  7.         var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
  8.         return m * currentVal + b;
  9.     };

  10.     // const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
  11.     // const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2);
  12.    
复制代码


多行代码注释或者长文字的解释,用第一种。

局部代码注释,用第二种。

借用上一讲文艺的作业,动手修改下JS注释:
Jun-01-2018 10-15-20.gif





4、注释心法

游客,如果您要查看本帖隐藏内容请回复


著名的奥卡姆剃刀原理,不二曾经详细解读过,请看:传送门

好的注释,永远是干净纯粹的,不用废话太多,点睛之笔,让看到代码的后人觉得:
游客,如果您要查看本帖隐藏内容请回复





课后作业,完成了吗?








                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-9-28 13:22:11 | 显示全部楼层
解救零回复惨案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-5 19:18:29 | 显示全部楼层
学习学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-20 12:30:25 | 显示全部楼层
可以
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-23 11:44:21 | 显示全部楼层
我爱小甲鱼
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-7 09:23:27 | 显示全部楼层
999
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-2-12 10:10:41 | 显示全部楼层
写的很详细了,辛苦了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-16 12:39:03 | 显示全部楼层
HTML:<!-- -->
CSS:/* */
JavaScript://
                /* */
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-25 22:11:17 | 显示全部楼层
。0000000000000000000
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-2 15:23:45 | 显示全部楼层
1111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-5 05:08:35 | 显示全部楼层
着急
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-16 16:45:15 | 显示全部楼层
666666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-19 16:23:09 | 显示全部楼层
瞧一瞧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-21 14:27:27 | 显示全部楼层
多行代码注释或者长文字的解释,用第一种。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-6-20 20:36:11 | 显示全部楼层
学习学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-16 17:14:50 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-28 10:19:02 | 显示全部楼层
666666666666666666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-9-3 15:46:48 | 显示全部楼层
修炼
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-7 23:13:39 | 显示全部楼层
学习学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-9-10 08:13:03 | 显示全部楼层
看一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 19:47

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表