banner
DIYgod

Hi, DIYgod

写代码是热爱,写到世界充满爱!
github
twitter
follow
bilibili
telegram
email
steam
playstation
nintendo switch

百度前端技术学院编码挑战(TASK 0002)

TASK 0002 已经发布,初级班的任务时间是从 4 月 24 日至 5 月 7 日,中级班为 4 月 18 日至 4 月 25 日。

TASK 0002 内容:https://github.com/baidu-ife/ife/tree/master/task/task0002

我做的:https://github.com/DIYgod/ife-work/tree/master/task0002

在线 Demo: https://www.anotherhome.net/file/ife/task0002/task0002_1.html

本次任务累计花费时间 17 天(4.19-5.6 )

下面是我做 TASK 0002 过程中的一些记录。


**1. JavaScript 的性能优化 **(参考 JavaScript 的性能优化:加载和执行

・Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript,接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。然而这种常规的做法却隐藏着严重的性能问题 —— 脚本会阻塞页面其他资源的下载。因此推荐将所有 < script > 标签尽可能放到 < body > 标签的底部,以尽量减少对整个页面下载的影响。

・由于每个 <script> 标签初始下载时都会阻塞页面渲染,所以减少页面包含的 < script > 标签数量有助于改善这一情况。

・ 减少 JavaScript 对性能的影响其他方法见参考。

 

2. ===== (参考 Javascript 中双等号 “==” 和三等号 “===” 的区别 JavaScript 里面三个等号和两个等号的区别 JavaScript 编码规范

==:等于运算,但是不比较值的类型;
===:完全等于运算,不仅比较值,而且还比较值的类型,只有两者一致才为真。

百度 JavaScript 编码规范也规定:在 Equality Expression 中强制使用类型严格的 ===。仅当判断 null 或 undefined 时,允许使用 == null。因为使用 === 可以避免等于判断中隐式的类型转换。

 

3. 类型检测 (参考 JavaScript 编码规范 Javascript 数组类型检测:编写更强壮的 isArray 函数 Javascript 判断函数类型完美解决方案

通用的简易做法:类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null

判断数组类型:得到对象的字符串表示,然后对比此字符串是否是 '[object Array]'

9.20 更新:下面这样也可以

判断函数类型:首先保证测试的对象存在,并将其序列化成含有 “function” 的字符串,这个是我们检测的基础 (fn.constructor != String,fn.constructor != Array, and fn.constructor != RegExp)。另外,我们需要保证声明的函数不是一个 DOM 节点(fn.nodeName)。然后,我们就可以作 toString 测试。如果我们将一个函数转换成字符串,在一个浏览器中(fn+"")给我们的结果就像这样 “function name (){...}”。现在,判断它是否为函数就很简单,仅仅只需要判断字符串中是否包含单词 “function”。这很神奇,对于任何有问题的函数,在所有浏览器中都能得到我们所需要的结果。这个函数较之于传统的方法,运行速度有些不尽人意,作者(John Resig)建议我们保守使用。

9.20 更新:上面那种太麻烦,可以类似 Array 那样判断

复制 Array 的简单做法:

 

4. 类型转换 (参考 JavaScript 编码规范

number -> string:

string -> number:

-> boolean:

number 去除小数点:

 

5. 对有序集合进行遍历时,缓存 length (参考 JavaScript 编码规范

虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能。

 

6. document.body.scrollTop 与 document.documentElement.scrollTop 获取滚动条滚动的距离的坑 (参考 document.body.scrollTop 与 document.documentElement.scrollTop 兼容 用 Javascript 获取页面元素的位置 火狐、谷歌、IE 关于 document.body.scrollTop 和 document.documentElement.scrollTop 以及值为 0 的问题

参考阮一峰的教程写了下面一段:

没想到遇到了坑,结果 elementScrollLeft 总是 0,调试结果如下:

task0002_1

好坑啊,说好的如果有文档声明(即网页第一句的 docType)的情况下,document.compatMode 的值等于 "CSS1compat",标准浏览器是只认识 documentElement.scrollTop 的啊。

另外试了一下 IE 和 Firefox,均可认 documentElement.scrollTop,chrome 的错!

还好 document.body.scrollTop 与 document.documentElement.scrollTop 两者有个特点,就是同时只会有一个值生效。比如 document.body.scrollTop 能取到值的时候,document.documentElement.scrollTop 就会始终为 0;反之亦然。所以可以这样写:

 

7. 获取所有 DOM 元素

突然脑洞大开想到的

 

8. 真假判断

对象总为 true,基础类型看是否为空

容易把空数组误以为是 false!

容易把空数组误以为是 false!

容易把空数组误以为是 false!

重要的事情要说三遍!

 

9. 递归获取所有子元素

这个是有问题的,只能获取到下一级的子元素:

但如果改成这样就能获取所有子元素了:

第一段代码出现问题的原因未知,已经想一晚上了,并无进展。

另外调试过程中发现的诡异现象:

task0002_2

解释下:递归调用时返回值 allchilds 是正确的,但返回到上一层时并没有加到上一层的 allchilds 中。

月月 告诉我这句话有问题!

w3school 如是说:concat () 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。仅仅会返回被连接数组的一个副本。仅仅会返回被连接数组的一个副本。

一切都说通了。。

所以根本不关 allchilds 声明位置的事,debug 的方向一直都不对,要这样改:

万万没想到,在 月月 李胜 蛋炒饭 的帮助下千辛万苦终于完成了这个小函数。。。

后续:突然想到这样就能轻易获取到

已吐血

 

10. 数组合并 (参考 JavaScript concat () 方法

重要的事情要另外单独说。因为被坑惨了。

concat () 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

错误用法:

正确用法:

 

11. 事件代理 (参考 javascript 事件代理

在编程中,如果我们不想或不能够直接操纵目标对象,我们可以利用 delegate 创建一个代理对象来调用目标对象的方法,从而达到操纵目标对象的目的。毋庸置疑,代理对象要拥有目标对象的引用。

可以用事件代理的方法来优雅地用一个函数代理另一个函数,比如:

这样就能优雅地用 on un 函数代理 addEvent removeEvent 函数了。这样实现了目标对象的隐藏,这对于我们保护一些核心对象是非常有用的。

我错了,直接这样就行了。。

 

 

12. Object 相关 (参考 js 的 Object 到底是什么呢?

Array、Boolean、Date、Function、Number 等等对象,其实都是从 Object 来的,它们的祖先都是 Object。它们表现不同的语言特性,比如 Array 有被自动管理的 length 属性,Boolean 只有 true 或 false 取值,Date 表示时间结构,Function 可以被运行,都是它们的原始类型 (valueOf) 赋予它们的能力。

所以有些有趣的东西:

可以给函数设置一个也是函数的属性。

 

13. JavaScript 正则表达式分组 (参考 JavaScript 正则表达式 选择、分组和引用

例:

其中 re.exec (document.cookie) 是一个数组,第一个元素是正则式所有匹配出的字符,第二个元素是匹配的第一个分组,即第一个括号里的内容:(.*?)

分组就就是正则表达式中的子表达式,可以用来获取正则式匹配出的字符串中的特定部分。

9.20 更新:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:

 

14. JavaScript 跨域 (参考 JavaScript 跨域总结与解决办法

JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入 iframe 或是 ajax 应用上带来了不少麻烦。

具体限制及解决办法见参考。

 

15. JavaScript 月份多出一 (参考 JS 中 new Date 怎么就多一个月了? JavaScript—— 搞甘特图使用 Date 对象时遇到的问题

task0002_4

明明设置的时 5 月,结果却是 6 月。

实际中,我们数月份不是从 0 开始,但是 JavaScript 却是从 0 开始。JS 中的 0 月是我们的 1 月,JS 中的 1 月是我们的 2 月...

所以设置月份时记得减一,获取月份时记得加一。。

 

15. 计时器不会阻塞代码执行

task0002_5

我的本意是执行完 a () 再输出 b,没想到 b 先输出了,从这里也可以推测出,计时器并不会阻塞后面语句的执行。

 

☆ミ(o*・ω・)ノ完结散花 等待 review

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。