我是一颗树(通过故事讲清楚了 BOM 对象)

·  阅读 304

原文

我是一颗树,吹着海风,晒着太阳,活的逍遥自在。我有很多树枝,每一根都很独立,互不相交:

一天有一个叫浏览器的家伙看上了我,说给我很大的权利,在浏览器的世界里可以横行霸道,拥有至高无上的权利,而且福利待遇非常好。我信了,决定到浏览器的世界体验一下生活。 第一天上班后,浏览器帮我换了个造型,说这样非常方便工作,我信了。我被改造成了这个样子。

当照完镜子后,我怒气冲冲向浏览器吼道:“你把我的英俊潇洒还给我”。浏览器微微一笑,说到:“你看你这样多精干啊!”。他那帮手下 window、location、navigator、screen、history 都随声附和道:“比以前帅多了”。我信了,但是我总觉得自己「栽了个跟头」。

浏览器继续补充道:给你换了个造型,你有两点优点是别人无法超越的。第一、你是处于金字塔顶尖的人,独一无二;第二、你可以有无穷多个子孙,每一个子孙都相互独立,互不干扰私生活。

听了浏览器的话,我心里感觉舒服了许多。

浏览器又发话了,你的其它同事都有英文名,我给你也起一个吧,以后叫你 document,你还有一个独特的名字 DOM。我内心嘀咕着:“难道我就是个文档?不过想到从今以后有了英文名字还是挺开心的”。

工作的第一天,我除了「栽了个跟头」,还有一个好听的英文名字。

第二天,我来到工作岗位。浏览器把我叫到办公室,我看到他旁边多了一个人,看着挺厉害,我小心地躲开了她。接着浏览器说道:“这是你的直接 leader —— window 女士,以后你属于她的手下,希望你们合作愉快”。我们彼此微微一笑,然后就都回到自己的工位了。

不一会儿,window 走到我的工位说,我带你认识下其它同事。我屁颠屁颠跟着她。

首先来到我身旁的同事,只见他正在记录着地址(www.xx.com)一类东西。window 说道:“这位是 location,他负责提供浏览器页面的位置信息,也可以跳转到其它页面。以后你们会配合的多一些,他也是你得力的手下,希望你们合作愉快”。

「公众号素燕注:location 即是 window 的属性,也是 document 的属性,document.location === window.location」。

接着,来到另一位同事面前,window 说道:“这位是 navigator,他负责记录我们老大浏览器的一些信息,比如我们老大懂几种语言,老大的名字等”。

接着,又来到了一位同事面前,直见他坐在角落里,此时正玩着游戏呢。见我们走来,急忙退出游戏。window 假装没看到,我心里嘀咕:“这家伙工作不饱和啊”。window 说道:“这位是 screen,他负责记录我们老大的一些身体特征,比如身高”。

「公众号素燕注:screen 主要提供浏览器的尺寸信息,比如浏览器的宽高,很少被用到」。

走到最后一位同事面前,只见他手里在记录这什么,看着比较忙。window 说道:“这位是 history,他负责记录人们在浏览器中访问页面的历史记录,可以帮用户返回他们上次访问的页面”。

介绍完这些同事,我们都回到了工位。此刻正好 11 点,赶紧把刚才 window 介绍给我的同事记录一下,以后遇到问题可以找他们。说着随手画了这张图。正好吃饭的时间到了,和同事们一起吃饭了。

「公众号素燕注:这张图就是各个对象中的属性,负责记录当前页面或浏览器的一些属性」。

吃完饭后回到工位,睡了一会,突然听到微信响了一声。打开微信一看:

完了,估计睡觉被 window 看到了,我匆匆忙忙赶到了办公室,只见 window 已经准备就绪,正等着我。

window 说道:你的工作比其它同事都要多,而且非常重要,只有你能做这份差事,因为你拥有天然的优势,这也是我们老大看上你的原因。我们均为浏览器工作,浏览器的主要功能就是提供各种页面,供人们访问。但最近接到很多开发者吐槽说我们太不灵活了。比如点击按钮后,想修改用户名称也不行,修改背景色也不行,页面只能是“死”的。开发者想让页面“活”起来。

接着 window 打开了一位开发者的页面说道:“实现类似下面的效果,当点击按钮「换个颜色」,顶部的方块变成红色”。

当然这只是一个例子,还有很多功能需要设计,比如位置移动,修改字体大小。总之能让页面“活”起来。

你回去以后,想一个方案,想好以后我们一起再对一下。

听完 window 的需求任务,我回到了工位。本来以为可以体验生活了,没想到是苦差事,好回念吹着海风,晒着太阳,逍遥自在的日子。不管如何我要把我的方案做出来,为我自己争口气。

本节完,下节再见!

「公众号素燕注:本节内容介绍了 window、location、navigator、screen、history、document 的作用。document 如何完成他的任务,请看下节内容」。

分类:
前端
标签:
分类:
前端
标签: