一、前言
目前为止也算是扯过几个小项目了,姑且算作有点经验,以下总结一些遇到的坑,和涨到的姿势,将它们记录下来,希望以后不要再坑到自己。
以下总结是有卤煮亲测有坑,下次开项目的时候看一眼,希望不要再最后在返工。
二、正文
第一坑: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>
像上面那样的写法呢,如果#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
(虽然这句以外的其他都没看懂,但是)终于真相了有木有啊,我以前的秀发掉的是有多冤屈呀,竟然都特么不知道上网百度一下那是啥呀,但是不管怎样以后再扒人家页面的时候臣妾内心不用再惶恐了好吧,一页顶过去五页呀。居家旅行杀人灭口必备逼格,带走还是在这装啊~(虽然灰常坑的是现在只能手动修改,装完哔就跑,但是好刺激有木有啊)。
三、总结
这一次对坑的整理先这么多,下次想起来别的再说。