前端编程

前端编程

1、遥远的偏见

事情要从一个遥远的偏见说起:只会html和css的人不能算程序员。

我第一次听说这个偏见是在几年前,那时候看到一些人为这个问题争得不可开交,学院派大喊道:“你们只能被称为切图仔,根本不能算程序员!”,野生前端则反抗道:“我们怎么就不算是程序员了!你会写点C,就看不起别人噢!”。

因为我在野生与学院之间,自然要保持中立态度,所以没有参与过争辩(其实是觉得太无聊)。不过今天为什么要重提这个偏见呢,因为用这个例子来引出本篇文章的主题是再合适不过了。

2、当我们写html和css时,我们在做什么

要看写html和css的人是不是程序员,自然要看他们都做了什么。举个最简单的例子,写一个古典前端初学者经常会写的古诗页面。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>静夜思</title>
    <style>
        body {
            background-color: black;
            text-align: center;
        }
        h1 {
            color: red;
        }
        p {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>静夜思</h1>
    <p>窗前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
</body>
</html>

这些代码的效果如下: Snipaste_2019-07-25_21-29-35.png

为了实现这个效果,我做了些什么呢?我写了几个标签组成页面的大致结构,接着填入脑子里的古诗句,又按照css的规则给它们加上了好看的样式。整个过程像是在绘画——把我脑子里的画面和诗句画出来,不用纸和笔,用html和css。

3、算法+数据结构=程序

Algorithms + Data Structures = Programs这可能是一个CS沾边专业人尽皆知的定义,具有一定的权威性。我清楚地记得大学老师在黑板上写过,但我忘了他是谁……

这个定义经过我的无耻简化变成了 data + logic = programs,即“数据+数据处理逻辑=程序”, 因为这样比较好理解一点,而且意思也差不多。那么我用JS写一段既有数据又有数据处理逻辑的代码,如下:

function add(a, b) {
    return a + b;
}

let x = 100;

let y = 200;

console.log(add(x, y));

我可以肯定地说,上面的代码肯定是“程序”,因为既有数据(值为100的变量x, 值为200的变量y), 又有数据处理逻辑(求和逻辑)。

那么问题来了,如果我写的JS代码没有数据也没有数据处理逻辑呢?说实话,这样的代码我写不出来,就算这样的代码:

let a = 1;

当我写完它,就已经是既有数据又有逻辑了。

至此,我可以提出一个定义,要看一个人会不会编程,只要看他能不能自己熟悉的语言写一个两数求和的过程。如果我只会html和css,那肯定是写不出来的,所以我现在认为"只会html和css的人不能算是程序员"是一个客观事实

4、JS给页面带来了异步程序

当我们在html和css组成的界面中加入js,响应各种事件、获取各种数据从而修改页面的时候,毫无疑问我们是在处理数据,也就是在编程了。而且,编写的不是普通的程序,而是异步程序。

何为异步程序?我的理解就是:异步程序所要处理的数据是不确定的,数据的不确定性在于数据的出现时机不确定,数据的内容不确定。数据出现时机的不确定决定了异步程序需要“永远”运行,以便能够随时处理突然出现的数据。就拿点击事件来说,你永远不知道用户什么时候会点击一个元素,也不知道用户会点击元素的哪个位置。

当捕捉到了用户的点击事件之后,我可能要从页面上删除某条数据,也有可能发送一条ajax请求,获取新的数据,更新页面。这就是处理数据的逻辑。因为既有数据又有逻辑,所以JS确实给页面带来了(异步)程序。