论坛 › Web开发 › 007 - 前端工程狮的自我修养

不二如是 发表于 2018-6-1 10:19:30

007 - 前端工程狮的自我修养

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

上一集：006 - 为网页注入灵魂



在线视频：

https://www.bilibili.com/video/BV1QW411N762?p=8



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



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

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

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

推荐阅读：码农的自我修养——对代码注释的理解（转）

对不二来说，讨厌写注释，更讨厌自己不写注释：
http://bbs.fishc.com/forum.php?mod=attachment&aid=NTY3Nzd8NTUzZDU4OTV8MTUyNzc1MDc1N3wzNzg5MzB8ODAzNTg%3D&noupdate=yes

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

很小白的尴尬示范：


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

很简单：


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



1、HTML注释

HTML中注释使用标签：
<!--...-->

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

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

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

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

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

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



2、CSS注释

CSS中是使用：
/*...*/

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

注释可以多行内容注释。

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

示例：
/*.tab{*/
            /*border:solid 1px #dbdee1;*/
            /*border-collapse: collapse;*/
            /*word-break: break-all;*/
            /*word-wrap: break-word;*/
            /*overflow: hidden;*/
      /*}*/

等价于：
/* .tab{
            border:solid 1px #dbdee1;
            border-collapse: collapse;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
      }*/



3、JavaScript注释

JavaScript中有两种注释。

第一种是多行注释：
/*...*/

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

复制代码 代码如下:
/*
*author:不二
*day:2018-05-31
*/


第二种注释方法是最常见的：
//...

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

示例：
/*
*author:不二
*day:2018-05-31
*/
    const lineEq = (y2, y1, x2, x1, currentVal) => {
      // y = mx + b
      var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
      return m * currentVal + b;
    };

    // const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
    // const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2);
   

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

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

借用上一讲文艺的作业，动手修改下JS注释：




4、注释心法

**** Hidden Message *****

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

好的注释，永远是干净纯粹的，不用废话太多，点睛之笔，让看到代码的后人觉得：
**** Hidden Message *****



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：008 - 相拥和独行



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif

qianduan2018 发表于 2018-9-28 13:22:11

解救零回复惨案{:10_266:}

Azathouth 发表于 2018-10-5 19:18:29

学习学习

782173264 发表于 2018-10-20 12:30:25

可以

甲鱼小粉丝啊 发表于 2019-1-23 11:44:21

我爱小甲鱼

chenzhiqing 发表于 2019-2-7 09:23:27

999

李小控 发表于 2019-2-12 10:10:41

写的很详细了，辛苦了

TCY 发表于 2019-2-16 12:39:03

HTML：<!-- -->
CSS：/* */
JavaScript：//
                /* */

494303810 发表于 2019-3-25 22:11:17

。0000000000000000000

学习者小白 发表于 2019-4-2 15:23:45

1111

achou31 发表于 2019-4-5 05:08:35

着急

紫殇 发表于 2019-4-16 16:45:15

666666666666

硝烟未散 发表于 2019-4-19 16:23:09

瞧一瞧

a15022606145 发表于 2019-4-21 14:27:27

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

ck123 发表于 2019-6-20 20:36:11

学习学习

天地~玄黄 发表于 2019-7-16 17:14:50

看看

药水哥 发表于 2019-8-28 10:19:02

666666666666666666666666

墨轩swsh 发表于 2019-9-3 15:46:48

修炼

Maxhwang 发表于 2019-9-7 23:13:39

学习学习

辣条一侠 发表于 2019-9-10 08:13:03

看一下

查看完整版本: 007 - 前端工程狮的自我修养