总结：这个项目算是我做过的最大的一次项目了，果然是项目一大考虑的东西就不一样了，而且因为公司来了CTO，也算是终于有规范了，体验了一次后端接口规范的重要性。
URL到底要怎么写，参数要怎么写，后端返回的数据格式怎样才好，都是以前所没有考虑过的问题。
而且CTO也给了一些指导都是很实用的，比如每个页面的JS要独立开来写啊，解耦性什么的，而且还有可阅读性什么的，参数什么不怕长就怕不明白。真正的项目有测试、有产品经理、有技术主管、有后端、还有我前端，也是第一次这么规范地做一次项目，我想这项目对于我来说，进步是很大的。
总结的经验
①把所有JS都写一个文件上，想把很复杂的东西都写成一个公用函数，花销是很大，有些东西确实是很难公用那就不要用同一个了
②年轻人年轻气盛是正常的，但不要没有礼貌，其实每一个比你资历老的人都会比你有经验，会懂你不会的东西，所以不要小看每一个人
③和别人有意见分歧的时候，先不要根据自己的观念急着反对，语言不要那么绝对，毕竟你还只是个新手
④很多时候别人根本就不用知道你是怎么写的，用没用工具，就是想看效果好不好而已，所以也不要固执地认为插件都是不好的。
当然，我个人认为前期还是应该自己写的，在难度并不是很大的时候，因为对自己的提升是很大的
⑤以后处理数据的时候，一定要考虑没有数据的情况下是怎样的
⑥你的职称有时候和你的技术能力并不挂钩，更多的是办事能力和沟通能力。（只不过有时候这头衔到底有没有用咯）
⑦真正能被别人学走的是窍门，学不走的是学识。所以别吝啬教别人，因为窍门别人迟早学会，但学识得到一定的高度才能学会
⑧注释真的很重要，不光是别人，对自己也很重要，因为大一点的项目如果过一段时间再来维护就知道了
⑨以后写函数时，最好不好只写一种情况的，最好通过参数来传递
遇到的问题
①对于form表单的elements属性，用for(name in elements)，输出name，大部分浏览器都会返回0，1，2...，但不一定会返回表单字段上的name值
②各个浏览器对于小数的处理是不一样的
比如我设置一个div的宽高为100.1px
chrome：100.094px（一般是接近你的值这样子的） firefox：100px（四舍五入，100.8px时为101px）
IE8+：100.1px（是符合预期的）IE7-：100px（不过设置100.1还是100.8都是100px）
在这方面我吃过一次亏，当时上头交给我一个嵌入在邮件的页面，因为看这页面比较简单，就让设置把文字都扣掉发给我一张底图，但由于不同浏览器的元素默认高度是不一样，所以就调来调取发现了这个问题
③怎么实现0.5px的细线
这个问题和②是有关联的，也恰好是我遇到的一个面试题
如果是1px的话当然很好实现，用border（不同浏览器对于border-width为小数点处理不同，chrome为floor，chrome为ceil）、hr、br、div都可以实现高度为1px的细线
那如果是0.5px呢，IE下可以用zoom：0.5来实现缩小一倍，那主流浏览器就可以用transform:scale(.5)来缩小一倍
还有其他办法欢迎提出
④:focus伪元素并不是可以应用到所有元素，兼容到IE8+：指示当前拥有输入焦点的元素，也就是说可以接受键盘输入或者以某种方式激活的元素
⑤table设置了border-collapse属性的话，对table应用border-raduis无效
⑥为什么块级元素设置line-height等于块级元素高度会让子元素垂直居中呢？
⑦怎么向表插入一次性插入HTML？
如果是其他元素的话，我们很容易就用innerHTML来一次性插入HTML，但MS上的MSDN有说明“The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.” 说明在IE下，这些 的innerHTML属性是只读的。 仔细看这说明，其实table中也就td可以使用了innerHTML来插入HTML了，因此我们也不借助其他JS库的话，也就只能这样写了
//更新表格数据
var row, c, k;
for(i=0; i<j; i++){
row = otbody.insertRow();
for(k=0; k<6; k++){
c = row.insertCell();
c.innerHTML = data[i][k];
}
}一个一个的插入呗
修改：距离上次写的时候有段时间了，其实这个问题可以简化的，不是有documentFragment吗？
⑧onchange可以冒泡吗？不行 （当时口误，其实是可以的）
onkeydown可以冒泡
⑨怎么冻结对象
我倒是觉得不用冻结。做一下压缩混淆其实就可以了，一般人也不会去看的东西
⑩前端可以获取后端的session吗？
不能。前端的session和后端的session是不一样的，保存位置不同
11.要是图片返回的是JPEG的图片字节流，XHR怎么去解析？
不懂，不过其实可以不用XHR去处理，<img>的src属性可以处理的，都不用XHR
12.背景颜色的透明度background:rgba()是可以应用到border的。但如果border有颜色会覆盖背景色
13.当设置一个弹出窗口为position:fixed时，弹出窗口的子元素的高度大于屏幕高度怎么办？只要设置弹出窗口为overflow：auto就行了。别以为这里很简单，一旦卡住就难想出来这办法
<!DOCTYPE html>
<html lang="ch-zn">
<head>
<meta charset="utf-8">
<title>测试test</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
#test {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
background: no-repeat center center rgba(0,0,0,1);
overflow: auto;
}
#test>div {
/*position: absolute;
left: 0;
right: 0;*/
background-color: rgb(221,221,221);
height: 1000px;
}
</style>
</head>
<body>
<p>hello, guys</p>
<div id="test">
<div>
i'm a good boy
</div>
</div>
</body>
</html>
14.并不是所有<img>元素都要设置宽高，虽然对于页面渲染的速度会有加快，但banner就不用设置宽高了
15.text-align:justify用在汉字没效果
16.IE9图像不显示
我本来想做的效果是transform:scale(0)->tansform:scale(1)的，但IE9上图片不显示
设置成transform:scale(.1)->tansform:scale(1)就可以了，好怪的IE
17.在IE9-中，XHR的readyStateChange的readystate不等于4时，访问status会报错。这和我们本来认为的访问不存在的属性为undefined的观念不一样
18.IE8下半透明图片img如果要实现淡入淡出效果使用fliter:alpha(opacity=100)会出现黑边（注意两个半透明会冲突）
详情看这篇文章 IE8下图片出现黑边
最终解决办法：不使用filter:alpha(opacity=0)就好了，反正也没有效果
19.IE8-下a标签若是只包含图片，把图片设置为float不为none，position不为static，那么a标签没有宽高的。
这个问题很常见，必须引起关注啊
20.var a = [1,2,]; a.length = ？你猜猜是多少。
一般情况下确实如我们所想为2，但IE8不是，别以为只是一个小细节，但这个小细节引起的问题造成大问题呢？我当时确实因为这引起了大问题，影响到了百度插件Echarts的使用，所以平时JS基础就必须要好才能不出错，但JS基础不好像我这样的呢？你就要学会调试了，必须的必须
21.生成随机颜色
color: function (value){
return "#"+("00000"+((Math.random()*16777215+8777215.5)>>0).toString(16)).slice(-6);
}
我也不知道原理，就这样吧
22.document.querySelectorAll和JQuery的find在有些时候是不一样的
就比如$(#myid).find("div div")和document.querySelector("#myid").querySelectorAll("div div")的意思是不一样的
find方法的意思是找到id为myid的子孙div的元素下的子孙元素div，
而querySelctorAll的意思是查询id为myid的子元素，同时满足整个页面下div div选择器条件的DOM元素
23.word-wrap:break-word和word-break:break-all在对待长字符串有什么区别？
区别是一个会在新行重新断行，另一个在旧行断行
24.font的简写属性说明
font的简写属性中，font-style、font-weight、font-variant这三个属性值可以按任何顺序来写。此外，如果其中某个属性的值为normal，则可以忽略。但是font-size和font-family不仅要以此先后顺序作为声明中的最后两个值，而且必须要有这两个值
25.img和设置为display:inline-block的元素下会多出一段空隙
图片底部的空隙实际上涉及行内元素的布局模型，图片的默认垂直对齐方式是基线，而基线的位置是和字体相关的。所以在某些时候，图片底部的空隙可能是2px，而可能是4px或者更多，不同的font-size应该也会影响到这个空隙的大小。
解决办法：①设置为块状
②设置vertical-align为top或bottom（建议使用）
③设置font-size为0
引用：点击打开链接
26.异步是什么意思？
看了一些资料，我就用自己的话说吧。JavaScript虽然是单线程，但浏览器不是单线程啊，假设JavaScript使用的是主线程，但我们使用Ajax()方法和后端交互时，浏览器会再开一个线程给HTTP请求使用，一直等待后端返回数据。拿到后端响应时，再通过事件队列去通知浏览器它取到数据了，然后浏览器再通知主线程去取。
27.dom.getBoundingClientRect()获得元素在视口中的位置top、bottom、left、right，兼容性很好，不过IE7-的默认坐标是（2，2），其他主流浏览器是(0,0)
28.异步加载JS时最好是把新创建的<script>标签添加到<head>标签里比添加到<body>更保险，尤其是在页面加载过程中执行代码时更是如此
29.关于touch事件
touchmove要用preventDefault(可以解决Andoird上的一个bug：只有触发一次touchstart，一次touchmove，touchend不触发，但会导致默认行为不发生，如scroll页面不滚动)
注意touchend的touches和targetTouches为空，只有changeTouches获取上一次的touchList
还有touchcancel事件：当系统停止跟踪触发时触发
判断是移动端还是PC断可以看是否支持touch事件，用if("ontouchstart" in window)来判断
30.怎么取消AJAX方法
在接收到响应之前还可以调用abort()方法来取消异步请求xhr.abort();
调用这个方法,XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象
31.HTTP状态码301：永久移动，请求的网页已永久移动到新位置。服务器返回此响应（对GET或head请求的响应）时，会自动将请求者转到新位置。您应使用此代码告诉GoogleBot某个网页已永久移动到新位置
32.伪元素在非闭合元素上无效，比如img
33.闭包结束后释放掉不再引用的变量
比如闭包返回了一个函数，该变量保留了对于这个闭包中所有变量的引用，虽然只用了一个变量，因此没用到的变量也会一直驻留在内存空间中，尤其是对于dom元素的引用对内存的消耗会很大，因此在闭包返回前我们可以将没用到的其他变量释放，设置为null
34.使元素不能点击可以用CSS属性解决.disabled {pointer-events: none}，JS也不能触发
35.怎么使用HTTP的head方法，就拿下面的获取服务器时间来说吧
//获取服务器时间
function getSevertime(){
var xmlHttp = new XMLHttpRequest();
if( !xmlHttp ){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("HEAD",location.href,false);
xmlHttp.send();
var severtime=new Date(xmlHttp.getResponseHeader("Date"));
return severtime;
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
