写在前面，这篇文章仅用来记录自己在前端方面曾经踩过的一些坑，一些在当时不那么容易费了好一会神才能解决的坑，避免日后自己重复犯错的同时，也给予别人一个参考，老司机就见笑了。
1. 用IE9以下版本的浏览器打开一个页面，发现页面上很多文字都带上了一条黑色的删除线，这让人非常困惑，因为页面上大部分的字都这样，依我所知，只有 <del> 才有这样的特性，但是这些字都并不是 <del> 标签的，还有另外一种可能，就是样式去改变它，样式上有个 text-decoration: line-through，但很快就否定了是样式引起的问题，因为假如是样式引起的话，删除线跟字体颜色是保持一致的，但在页面上是无论何种颜色的字体，删除线都是黑色，因此可以定位为 del 标签的问题，后来同事帮忙排查，查看起始标签跟闭合标签的个数是否一致，最终发现是少了一个 闭合标签 </del>，由于高级浏览器都太过智能了，能够自己识别未闭合的标签并为其添加闭合标签，但像 IE9 以下这些老古董，是不懂这样解析的。谨记
2. 在VIP的日子里，前端工作流迷之崩溃了，多次是因为 node_modules 不见了，其实我也好想知道是为啥不见了，重新 junction 一下就好了。
3. IE8及其更低版本中，javaScript 内置对象 Date 不支持传入 "YYYY-MM-DD" 格式的参数，比如 new Date("2016-08-04") 会返回 NaN，解决办法可以通过正则将其格式改成 "YYYY/MM/DD" 可以使其正确返回。dateStr.replace(/-/g,"/") 即可
4. 由于公司的模板中是带 php 判断的，所有会有不少 php 的代码，然后今天就遇到一个关于php判断的问题，‘abcd’ == 0 在 php 中会输出true，经查询文档：如果比较一个数字和字符串或者比较涉及到数字内容的字符串，则字符串会被转换为数值并且比较按照数值来进行。此规则也适用于switch语句。当用 === 或 !== 进行比较时则不进行类型转换，因为此时类型和数值都要比对。额，还是让我费了一个多小时哎~
5. 今天遇到一个坑，与其说是坑，其实算是个浏览器的特性吧。我发现在 js 中有一处原来是用 data('sizeName')，所以我就很自然的去新的标签也设置同样的属性，但后来怎么都拿不到我想要的值，都是 undefined，后来查证，原来是给标签 是给标签设置 data-xxx 属性时，浏览器会自动把你后面 xxx 字符串中所有的字母转换成小写，因为 html 标准中 html 属性是不区分大小写的。但是 js 却可以用 data('sizeName') 来拿数据？why ? 查了下源码，原来是这样定义的 data-size-name=xxx... ORZ~~所以，以后最好还是用小写来进行命名，而且 html 与 js 使用一致的名称，这样能大大提高发现问题的效率啊~
——20160819
6. 页面查看的源码是直接输出的 HTML 代码和 php 数据，是未经 js 处理的代码，今天在调试器中调试的时候发现修改代码没有生效，然后查看源码后又发现又是修改后的代码，后来跟问了同事（www）才得知源码是未经脚本处理的代码，这就可以得知 JavaScript 对其做了覆盖，同时这里也可以看到写在 html 上的代码显得多余了，这也一定程度的违背了《编写可维护的 JavaScript 》的编码原则，这样会增加代码的维护成本，因为假如想要给某个标签添加属性，当然会首先去排查 html 的代码。今后要尽可能避免 JavaScript 中插入 html 代码，有需要时可以使用模板引擎。
7. 昨天踩了一个非常 low 逼的坑（严肃脸，坑也是有尊严的），我有段代码是这样写的
然而看上去并没有发现有什么问题，而且在高级浏览器上都能正常运行，但是在IE及其更低版本却只能赋值价格符号，于是我断点看看 money 变量的值是不是 undefined 或者为空，并没有！是正确的值！然后我尝试在后面加一些字符串，发现竟然连字符串都不能输出！再在价格符号和价格变量之间加字符串，好了，终于出来了。然后我就想这到底是什么原因，为什么加了字符串却可以，然后细看了下，发现价格字符串少了个分号，导致IE不能正常解析html代码，这个真是够呛的。其实我都不好意思把这个坑记下来了~
8. 在文档流关闭后，异步请求回来的 script 中不可以使用 document.write(), 我暂时想象不到这种场景会出现在什么样的业务上，不过这个问题还是可以解决的，比如 append，innerHtml等等，参见传送门>>Execute write on doc: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
9. js中判断条件的变量，如果不能确定值是否为 true 或 false，最好是使用与具体的值比较作为判断条件而非直接使用类似 if(isSoldout) 这样的判断，因为假如 isSoldout 的值是字符串 0 时，该判断条件为真所以程序会跑到 if 下面的代码中，这样不符合我们的预期，所以往往会造成错误，有时甚至会因为数据的缺失而导致页面运行被中断，昨天就因为在 php 输出变量的值时多加了引号导致开关值为 0 的时候也跑了开关为开状态的代码，页面报错，这个导致了严重了线上报错 T^T
——20160907
10. 写程序的时候，尤其是 ajax 请求，要考虑 CDN 的因素，什么情况下应该读 CDN，什么情况下应该回服务器取最新的数据？而决定这个问题的关键因素就是请求 url 的参数，假如参数中带有随机数，这完全就是等于 always 回服务器取数据，而不是读 CDN，要考虑是否有这个必要，否则 CDN 的使用率会大大降低。
11. 在Chrome 中，有时候会有名字带有 VM+数字 的脚本，然而这些文件并没有特殊的含义，是由 Chrome 自动识别生成的，而生成这些文件的规则，是页面加载的 HTML 中包含 script 标签，里面的脚本内容没有指定的文件名，比如使用 eval()（更多解释详见 >> Chrome Development Tool: [VM] file from javascript Stackoverflow 真是一个好东西）
12. 页面中 window 对象和 document 的宽度对比
$(window).width();// returns width of browser viewport
$(document).width();// returns width of HTML document
获取到 window 宽度是当前视窗的宽度，而 document，则是页面真正的宽度，上周在公司的项目中，就踩到这方面问题的坑，页面有一个弹窗，由于弹窗触发时，其内容是为空的，后来才把相应 html 内容塞到里面，此时弹窗已居中，塞内容后重置弹窗的位置发现仍然没有居中对齐。排查原因后发现是因为往弹窗塞内容后，超出了原来 document 的宽度，使得 document 与 window 的宽度不一致，而公司的组件是以 document 的宽高来计划居中的值，left 值一直计算不准确正是因为 document 的宽度因为弹窗内容的增而变大了，导致 left 值也相应的增大。
