入坑涨姿势

一、前言

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

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

二、正文

第一坑: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

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

三、总结

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

时间: 2024-11-06 10:26:38

入坑涨姿势的相关文章

弃坑pexpect,入坑paramiko

弃坑pexpect,入坑paramiko 上文书说到,ssh库pexpect的使用,简直就是个"月亮公主"--满眼全是坑.勉强把程序写好了,跑起来的时候发现了一个新坑,让我不可抗拒的把它弃掉了--经常莫名其妙的连不上服务器!开线程连接14台服务器,总有1到3台连不上,还查不到原因.这还了得!一怒之下把写好的pexpect封装库删掉了,用paramiko重新写起.其实这个库也是有一些坑的,这个放在后面说.先介绍一下这个库的用法. 安装方法:没有什么新鲜的 pip install para

py3学习笔记0(入坑)

什么是Python? Python是一种面向对象.解释型计算机程序设计语言,语法简洁,具有很多强大的库.它也被称为胶水语言,能够把其他语言制作的库轻松地粘合在一起.现常用于科学计算,界面设计,网络通信等. 它优雅,明确,简单,将“用一种方法,最好是只有一种方法来做一件事”的优雅哲学贯穿始终. 当然关键还是它比较好玩,就抱着玩一玩的心态入坑看看咯. 初期学的是py2,主要写写小游戏,爬虫什么的. 在学校很久没有编程了,平时还是要写写代码练练手. 那就开始学py3吧!虽然都差不多,但周围有好多人都想

ReactNative for Android入坑(一)

最近找工作发现有些公司要求会ReactNative,决定入坑. 搭建环境:官网详细的教程附链接. 坑一:FQ,建议整个搭建过程中FQ.第一步:安装Chocolatey,管理员运行cmd,输入指令: Chocolatey安装官网指令:@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org

VPS 入坑之路

一.入坑动机: 以前一直的FQ服务也被请喝茶了,仅限企业客户使用.于是想到租用一个VPS,搭个梯子. 二.入坑之路: 1.购买 想起在G+看见有人推荐搬瓦工性价比很高,去了解了一下,最低配置19.99刀一年,折合人民币也就十块一个月的样子,果断入之. 2.SS 以前在虚拟机稍微接触过linux,比如ubuntu和fedora,然而都是在图形界面瞎搞.这次终于有机会在终端操作了.各种命令上手确实不容易,只会cd,ls...突然发现控制面板有一键搭建SS,后来又放弃了敲命令...有一天心血来潮,决定

猿说摄影(上)--入坑指南

最近师弟师妹们以及复读的童鞋临近毕业,有的想买相机拍拍毕业照,记录一下旅行毕业游之类的.五一放假,咱就先不聊技术,聊一下摄影,不过摄影也是一个技术活,而且烧钱.摄影穷三代,单反毁一生.相机贵吗?贵,但贵的不只是相机,还有镜头.为什么这么说呢?大家也知道,单反和微单都是可以更换镜头的.一旦入坑,除了买相机同时买的套头(标准变焦镜头)之外,你很可能会接下来陆陆续续地买其它镜头→_→想拍漂亮的人物,你需要大光圈的定焦镜头:想拍壮阔的风景,你需要广角镜头:想拍飞禽走兽,你需要长焦镜头:你可能还要拍点小花

webpack入坑之旅(一)不是开始的开始

最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过任何的构建工具与模块化工具,所以本系列会十分的基础.并且可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进.谢谢! 这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webp

webpack入坑之旅(三)webpack.config入门

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 在上面我们已经尝试过了两种

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,

webpack入坑之旅(二)loader入门

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 引子 在上一篇博客中我们已