Write the Code. Change the World.

4月 24

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,调试结果如下:

好坑啊,说好的如果有文档声明(即网页第一句的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. 递归获取所有子元素

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

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

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

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

解释下:递归调用时返回值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 对象时遇到的问题

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

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

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

 

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

如图

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

 

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

活捉 26 条
  1. 总觉得 对事件代理的理解还少了一些。 给你看一段代码$body.on(‘click’, ‘[data-action]’, function () { var actionName = $(this).data(‘action’) switch (actionName) { case ‘lucky-draw’: BX.luckyDraw() break case ‘some-btn’: // do something… break // … }})

      1. 天然呆

        1) 很多地方写得不明确; 2) 过于古老; 3) 确实容易入门,但也容易跑偏。稍入门后上MDN是更好选择。