入坑涨姿势

一、前言

目前为止也算是扯过几个小项目了，姑且算作有点经验，以下总结一些遇到的坑，和涨到的姿势，将它们记录下来，希望以后不要再坑到自己。

以下总结是有卤煮亲测有坑，下次开项目的时候看一眼，希望不要再最后在返工。

二、正文

第一坑：jQuery中绑定事件记得写到$(function(){})里面

下面来解释一下，原先我不知道绑定事件为啥要写到$(function(){})，然后果然很傻很天真的把$("xxx").click(function(){});统统丢到$(function(){})外面，如果是在普通的html页面里面似乎是没多大问题的，问题出现在当页面一部分使用jQuery里面的load方法：load(url,[data],[callback])的时候

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是第一页a.html</title>
 6 </head>
 7 <body>
 8     <button id="change">load b.html</button>
 9     <div id="changeme"></div>
10 </body>
11 <script>
12 $(function(){
13     $("#change").click(function(){
14         $("#changeme").load("b.html",function(){
15             //do sth
16         });
17     });
18 });
19 </script>
20 </html>
21 
22 
23 
24 <div>
25 <!--这是第二页，b.html-->
26 <button id="clickme">请点我</button>
27 <script>
28 //关键在这里
29 $("#clickme").click(function(){
30     alert(1)
31 });
32 </script>
33 </div>

View Code

像上面那样的写法呢，如果#clickme的绑定不写在$(function(){})出现的结果就是如果a.html里面的#changeme先load了b.html然后又load了其他什么的东西然后又load回了b.html，这时候b.html被load了2次，那么就绑定了2次click事件，然后就会欢乐的弹2个alert给你，更欢乐的是加载几次弹几次

综上，请将事件绑定写在$(function(){})里

第二不算坑：JavaScript和CSS的版本问题

作为一只野生的前端代码狗，你有没有被你的项目负责人提出过“哎？我们有需要做一个啥啥，反正没有美工，你就照着那啥啥网页来扒个一样的吧”，这种被严重不重视的情况你能忍？平时给钱少还老让你加班也就算了，作为一个堂堂正正的前端，净是拿你当闲杂人等，做个项目连美工都不给配这种事你能忍？反正我忍得了。于是我也算是扒过几个网页了，然后我发现有一些js和css看上去big略高呀，style.css?v=1.0.526 什么鬼呀，卧槽，原先以为他们css都特么动态生成的好伐，于是菊花一紧啊有木有，生怕少侠了啥玩扔别的页面跑不了哇，秀发哗啦哗啦的掉哇。。。

然后苦逼的加班狗迎来了项目不紧，换工作的春天有木有哇，现在也有时间上上网涨涨姿势了有么有哇，虽然继续野生着，但是好像是发现了破毛衣上漏出来的线头有木有哇

正题是今天不造什么机缘巧合看到了以下描述

"我们都知道 JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件，那就意味着当我们需要改JavaScript或者CSS文件的时候，即使我们后端改了，那么客户端也是看不到，这个在“JS一统天下”的时代是不可接受的，因为现在几乎所有的WEB 程序都严重依赖JavaScript，而所有的网站都是需要使用CSS的。在我经历过的项目即使是很多年经验的程序员都出现过JavaScript和CSS文件的版本问题，比如客户让修复一个Bug，这个Bug是JavaScript引起的，程序员修复了，或者是客户说改一个背景颜色，可是当我们给客户部署后或者代码交给客户客户部署时，客户说Bug依然存在，这个时候程序员经常说的话就会出现了 “我本地是好的呀”，最后再找来别人帮忙后，发现原来是没有清除浏览器的缓存，于是有的程序员就赶紧给客户说：“你需要Ctrl+F5 清除浏览器的缓存”。每当我听到这样的话时就像关上灯留给我一屋子黑，首先，有几个普通用户会使用Ctrl+F5？其次，有几个用户愿意去Ctrl+F5? 那么怎么办？我想很多程序员都知道加一个版本号就可以了，这样浏览器就会认为是新的文件，比如原来是 http://www.a.com/app.js 你现在只需要把地址改为http://www.a.com/app.js?v=1.0 即可但是如果这个动作是手动的，那么10次基本上至少有5次程序员会忘掉，那么这就是为什么我们需要前端构建"

引用并注明出处：http://www.cnblogs.com/cnblogsfans/p/5093012.html

（虽然这句以外的其他都没看懂，但是）终于真相了有木有啊，我以前的秀发掉的是有多冤屈呀，竟然都特么不知道上网百度一下那是啥呀，但是不管怎样以后再扒人家页面的时候臣妾内心不用再惶恐了好吧，一页顶过去五页呀。居家旅行杀人灭口必备逼格，带走还是在这装啊~（虽然灰常坑的是现在只能手动修改，装完哔就跑，但是好刺激有木有啊）。

三、总结

这一次对坑的整理先这么多，下次想起来别的再说。