我们的js世界

从事前端这个职位已经有近两年的时间了，在这段时间里从写第一行js代码，到现在可以说是比较熟练的运用js，从那些乐于分享的人的文章中受益匪浅。今天终于可以分享一点自己的心得，希望能对正在学习js的人能有所帮助。本文主要是面向那些初学者，文中仅为自己的思考，主要论述浏览器环境中的js，所有情况也都是基于浏览器进行的分析。大神们可跳过，若有兴趣也欢迎拍砖，以便更正文中可能的错误。

Js是一种脚本语言，一般工作环境是浏览器（当然也有其他情况，如nodejs，不过咱们这里只谈应用于浏览器中的js）。

我们可以把使用js的结果即一段或很多js代码看做是一个程序。程序的本质可以看做是对数据的处理。在计算机的世界里可以把一切都看做是数据，数据流入程序，经过程序的处理然后流出程序。对js来说就是数据流入程序然后经过处理流出传给浏览器。

数据即信息的载体。对js来说就是用户与浏览器进行的各种交互，如输入一段内容，进行一次点击等等，所有这些行为都被浏览器转化为数据。而我们写的js就是规范哪些数据要流入，要做什么处理。让我们充分的发挥想象，把他想象成一个世界。因为在你写出来之前他们是不存在的，是你创造了他，就像上帝创造世界一样。那么这个世界是一个什么样的世界呢。首先他肯定不是我们生活的现实世界，当然如果你要是曾经看过黑客帝国并对他有更多的思考的话，请稍候联想。这个世界首先并不是完全的虚无，而且我们也不需要创造的像现实世界这么丰富多彩，所以我们的任务要比上帝轻松多了。这个世界本身有一定的规则，就像现实世界存在这基本的物理等法则。当我们打开浏览器，载入一张网页的时候就已经创造了一个js世界，不管这张网页有没有存在js脚本。我们添加的js脚本只是用来完善和塑造这个世界而已。

那么这个世界的基本规则都有什么呢。我们只有首先了解了这些规则并遵循才能继续我们的创造。就想我们必须遵循现实世界的规则一样。这个虚拟的世界是为数据准备的，所以我们首先得让数据在这个世界呈现出来。规则将这些数据分为了六种：布尔（boolean）、字符串（string）、数字（number）、未发现（undefined），不存在（null），以及对象（object），对象比较复杂我们会在后面解释。这些就是这个世界最基本的组成结构，他们以及他们组合而成的更加复杂的，作为数据载体用来存储数据的表现形式就是所谓的数据结构。对于这个虚拟的世界来说，当数据流入的时候会转换为这些形式存在，如果没有这些数据结构的存在，那么数据将永远存在于虚无，不能被我们操作，程序也就失去了存在的意义。流入的数据可以用这些数据结构来表现，同样的我们自己创造的数据也是使用这些数据结构。在js中我们只需 var name = value; 这样就创造了一个数据，稍微正式一点的说法叫做变量声明。var就是规则，表明我们要创建一个数据，而名字（name）代表了这个数据，值（value）是数据本身。就像是一个人必须有一个名字一样，名字代表了这个人，如果没有名字你是无法找到这个人的。这个value可以是上面提到的六种数据类型之中的任意一种。

当有了数据结构之后，不管是流入的数据还是我们自己创造的数据现在都已经以各自的数据结构出现在了这个虚拟的世界中，不过如果只是这样的话这只是一个死寂的世界，没有一点活力。现在我们要了解的另外的一下规则，即控制结构。他们控制这数据的流动。数据通过他们流动，并在流动的过程中发生了变化，即被处理。主要的控制规则有1.自上而下执行，2.条件判断（if、 if else if、 switch），3.循环 （for、for in、 while、 do while）这三个控制结构可以说是所有的程序语言都提供的，也是最基本的，是我们自然思考的抽象化。这里就不做详细的解释了，不懂的同学可以去问下度娘。有了控制规则还需要一些比较规则，用来比较各种数据之间的关系（ ==、 ===、!=、!==、 <、 <=、 >、 >= 等），以及用来变化的规则（+、-、 *、 /、 % 等）。只需要这些我们的虚拟世界就可以运转起来。如果只有这些简单的控制结构那么这个世界还是一个很低级的世界，就像是35亿年前的地球一样，没有一丝生命的痕迹。那么对于我们的虚拟世界要如何才能更好的演进呢，那就是函数和对象。函数可以看做是一段包装起来的代码，实现特定的功能。函数本身就在程序的演化史上有很重要的作用。函数将特定的操作封装在了一起。可以在需要的地方重复使用。而对象则更进一步提高了我们这个虚拟世界的进化程度，就像是这世界进化出了高级生命一样。在js中对象其实就是一组名值对。不过一般情况下的对象是指数据和功能的组合。是数据和函数的集合体。是不是很像世界的演化。其实我们提的很多的设计模式，mvc等思想根本上还是为了让这个世界更加体系清晰，更容易管理。

目前为止我们只提到过在js中如果创造自己的数据，没有提及如果让外部的数据流入进来，也没有提及如果将处理后的数据流出去。脚本语言 是一种用于操作，自定义，自动化现有系统工具的编程语言。故js的虚拟世界和其他的世界有一些联系通道。不是浏览器接收转化的全部数据都会传入到js中。通过一定的接口，js会告诉浏览器它需要什么样的数据，然后当浏览器产生这些数据的时候就会将这些数据流入js。然后数据在js的世界里进行一番变化后通过一定的接口流出js世界流入浏览器。这些接口根据类型不同又分为浏览器对象和文档对象。现在已经完整的构建了整个的js虚拟世界。然后让我们从这个比较玄的想象中脱离出来。用另一种思路来理解js。对于一般的交互来说，其实我们所做的如果抽象一下可以概括为两步。第一：找到对应的元素，第二：进行相应的操作。找到元素是通过页面加载完 js环境就拥有的文档对象（DOM）。具体的方法可以去向度娘等询问更多。进行相应的操作又可以细分为绑定事件，以及事件处理函数。所谓绑定事件就是将用户在浏览器上的操作和具体的元素对应起来。当这些操作发生的时候，对应的元素接收到并执行绑定的事件处理函数。所以从这个角度可以把js的运行看做是由事件驱动的。也就是说我们的这个世界的运转是由这些用户和浏览器交互的事件所驱动的。就像地球绕着太阳转是引力作用的一样。

上面我们已经将js的世界大略而完整的介绍一遍。这些只是让我们对js有个整体的认知。仅凭这些就去构造js程序是远远不够的。大学有言 格物致知，还需要我们对js的规则进行更加详细的了解。

如需转载,烦请注明出处:https://www.fedev.cn/js/my-javascript.html

Match Jordan 8 Take Flight 23 Camo Military Green T-shirt