这是徐超胜的前端开发博客

摘要: 最近开始看一些整本整本的英文典籍,虽然能看个大概,但是作为四级都没过的我来说还是有些吃力,总还有一部分很关键的单词影响我对句子的理解,因为看的是纸质的,所以查询也很不方便,于是想来个突击,我想把程序单词收拢在一起学习一下,希望这样的更有针对性一些,因为你想,arbitrary (任意的,武断的)... 阅读全文
posted @ 2014-07-10 15:30 荒村听雨_ 阅读(2307) 评论(0) 推荐(0) 编辑
摘要: 近来在温故《javascript高级程序设计》这本好书,新生一点感触:如果说jquery是一个美丽的地方,而原生语言是我的朴实的故乡的话,我真是离开故乡好远了!回到故乡了么总得做点事吧,于是写了一个简单的用原生程序写的拼图游戏。不怎么考虑DOM性能问题。<div class="gameWrap"> <div class="header"> <div class="begin">开始拼图</div> </div> <div class="body"&g 阅读全文
posted @ 2013-06-08 09:16 荒村听雨_ 阅读(544) 评论(0) 推荐(0) 编辑
摘要: 最近用上了windows下的clion,发现默认安装的MINGW版本太低,导致所带的gcc版本竟然是3.5的,实在太老了,不支持c++11,于是手动修改了mingw的版本。首先去mingw的官网下载最新的-mingw-get-setup.exe可执行文件,下载过了来的时候其实文件名是-mingw... 阅读全文
posted @ 2014-10-24 07:15 荒村听雨_ 阅读(6362) 评论(0) 推荐(1) 编辑
摘要: 昨天拿项目在ie8下测试,发现不少bug,其中有一个bug让我很不解,报了一个thead开头的bug,因为已经切回到linux下了,我就不报具体是什么bug了,鼓捣了半天,发现引用angular的应用中,table元素在ie8或者7下不能缺少thead,即便是空,也得加上空的thead。 阅读全文
posted @ 2014-07-25 13:52 荒村听雨_ 阅读(844) 评论(0) 推荐(0) 编辑
摘要: 上周五突然接到一个重磅消息:公司决定开发首款手机小游戏,运行平台是淘宝app上的微淘平台。这个微淘平台从技术上讲是一个能运行html5的平台,跟微信比较类似。接到这样的任务,我自然很高兴呀,因为这也是我的第一款手机游戏了。经过一个周末的奋战,算是初步把这个游戏跑起来了。在写之前我也是查看了不少... 阅读全文
posted @ 2014-05-25 06:24 荒村听雨_ 阅读(1286) 评论(0) 推荐(0) 编辑
摘要: 做一个项目,我要实现点击一张图片可以实现拖拽,拖拽是实现了,但是在拖拽的同时却也常常不小心就选中页面文字,影响拖拽效果,于是希望默认的,禁止页面文字被拖动选中,百度了一下,一位高手给出了很好的方案。给出答案的地址:http://zhidao.baidu.com/link?url=-5v05ITT6M7DQQYa1QKdnDnaAdDBIbVPS-R3IYxxcqIaaYop4KoU2B-Buzplr6L0x8RPJ76PoqUGxqPxYf1fva 阅读全文
posted @ 2013-09-22 17:48 荒村听雨_ 阅读(795) 评论(0) 推荐(1) 编辑
摘要: 这段时间在做改版的时候,遇上一个非常莫名其妙的bug,最终是被我的一个后端同事给发现和指正的。这个bug就是,一个js方法在ie7和ie8下面报 SCRIPT:1010 缺少标示符的错误。这个错误我百度过,很多人都提醒出两种错误的可能:1、后台返回的JSON格式有误,在数组或者对象的末尾项上多出一个逗号,IE7和8是不允许的;2、自身JS的错误,和这个json一个错法。我翻来覆去的找这样两种错误,都没找到,我甚至ctrl+F找整个文件的逗号,看看是不是哪里真的多出这样的逗号,后来排查无果。第二天(其实问题已经存在很多天了),我跟这个后台同事聊起这个BUG,本想也就是发发牢骚,问了一下他在写J. 阅读全文
posted @ 2013-09-20 12:57 荒村听雨_ 阅读(274) 评论(0) 推荐(0) 编辑
摘要: 用一些大网站的时候,发现有一个很细节的共同点:点击链接元素的时候,链接元素会产生一个明显的边框,而且这个边框的颜色和#f27b04很接近,我觉得既然很多大网站都这么做,这其中肯定有一些用户体验方面的东西,也就是点击的时候,页面告诉用户:我已经知道你刚刚点击了我。我觉得这确实是一个我之前忽略了的体验:没有通过链接元素提升用户体验。于是模拟实验了一下,不难,但是以后都需要注意起来。以下是一些demo实践:返回顶部 返回顶部 返回顶部a{ color:green; text-decoration:none; float:left; width:80px;... 阅读全文
posted @ 2013-07-08 12:53 荒村听雨_ 阅读(285) 评论(0) 推荐(0) 编辑
摘要: 昨天公司搬新家了,现在的新公司这个办公环境是真真好,周边环境也很不错,很舒心。我这个标题起得自己也不是很满意,但是真的不知道这个组件该起什么名字,但是显示的图片是这样的:,就是轮播这些常见问题的一个div吧,以后在自己网站上也是可以这样做,用来帮助找到常规问题的解决入口的,于是简单的模拟了一下: 举行中俄海上联合军事演习,是贯彻落实两国领导人共识、巩固深化中俄全面战略协作伙伴关系的重要举措。去年在中国海军组织下,中俄海军在黄海海域成功举行了海上联合军事演习, 迈出了中俄海上务实性军事交流合作的第一步。今年,由俄方牵头组织联演,既是去年中俄海上联合演习的延续深化,也标志着中俄海上... 阅读全文
posted @ 2013-07-02 10:39 荒村听雨_ 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 明天是回学校的最后一天了,拿了毕业证书那我就彻底毕业了。这么一晃竟然就是四年,有喜有悲,幸好我今天能和各位同仁一起走上前端开发这条道路,还是觉得这四年没有白费吧。毕业归毕业,我们的前端开发之路一刻也不能停留,于是晚上想着写点什么。。。想到了图片轮播这个效果之前没做过于是试着做了一下。图片轮播我的第一反应是总得有个ul来存放图片吧,图片横着放好以后怎么让他滚动起来呢?css这边的思路我一开始是用ul的margin-left来做,比如整个ul的宽度是400,margin-left:-400px;就能让整个ul隐藏在左边,用js判断一下是不是达到了最左边,到了以后让margin-left:400p. 阅读全文
posted @ 2013-06-20 23:34 荒村听雨_ 阅读(520) 评论(0) 推荐(0) 编辑
摘要: 看到园内有人用CSS属性clip:rect()实现了放大镜查看图片的效果,于是我也痒痒的想学一个。本想也用rect来实现的,没想到,rect没用上就实现了效果,然后绞尽脑汁想方设法要用一下rect,最后也确实用上了。直接上吧!<div class="originImage"> <div class="rectArea"></div> </div> <div class="rectedImage"> <div class="img"></d 阅读全文
posted @ 2013-06-08 16:52 荒村听雨_ 阅读(646) 评论(0) 推荐(0) 编辑
摘要: 美美的周末,在办公室自由自在的翻看博客,真是一种享受。看博客的时候别忘了做一点摘记,哪怕是直接转过来,也是好的。我就边看边摘点有用的东西过来,也注明了出处,感谢提供这些分享的博主们,祝你们周末愉快!文字超出隐藏并添加省略号效果<style> .css { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截... 阅读全文
posted @ 2013-04-13 21:57 荒村听雨_ 阅读(242) 评论(0) 推荐(0) 编辑
摘要: 想写这样一篇文章真是由来已久,因为开发测试这个问题困扰过我很久了。最早的时候,我都是ant 到本地的tomcat上开发的,那时候,后台大致写好了程序,我就通过svn软件把后台新的class文件ant到我本地的tomcat上,然后修改前端代码,如果说在我开发测试的过程中后端确保不会有错误的话,那么这样的开发测试其实也还能接受,但是问题就在于,后台也是是不是弄几个bug出来的,那我就惨了,我就要保存刚写好的前端文件,并更新后端文件,再ant到本地,再把之前的前端代码替换掉旧的前端文件。哎,我现在想回去都觉得真惨,真麻烦。后来,伟大的浩伟哥给我搭建了一个线上测试环境,就是换一个域名,但和真实的... 阅读全文
posted @ 2013-04-13 13:06 荒村听雨_ 阅读(827) 评论(0) 推荐(0) 编辑
摘要: 上个周末顶了客服两天,发现我们的用户大多数对我们的网页上手比较慢,10个过来咨询的7个得问这个网页怎么使用,我回答的次数多了,也有感触的确应该做个导航给用户了。其实这个导航想法之前就有了,但是下定决心要做出来还是因为此次顶了客服两天所致的。做了整整三天,终于做出点模样了,现在就写一点自己的总结。 在写代码之前,我还真想对自己说说一些个人感悟,100行的js代码,我愣是在中间绕了很多弯子,思路不清晰,头脑不灵活,JS的运用上面还是欠缺很多。在开发过程中,军军给了一点样式上的建议,其实很简单,就是一个虚框的效果,看上去更像导航一些,他也在谷歌调试器上给出了大体的样式,让我去兼容IE。结果... 阅读全文
posted @ 2013-04-11 10:45 荒村听雨_ 阅读(3047) 评论(5) 推荐(0) 编辑
摘要: 在看《CSS3实战》这本书,看到了“防止表格标题行换行”这一块,觉得挺有用的,因为自己之前也遇到过类似的问题,但解决的没有书上的好。不知道大家有没有遇到过这样的问题,你做了一个table,大多数td的字符数都挺短的,但是每一列的标题却挺长的,反正比td长多了,导致标题在他们自己格子里只能换行显示,非常不好看,现在的要求就是标题格只能在一行中显示。方法书上讲的很仔细,就把代码在这里打一遍方便以后查询。这里的代码参考自《CSS3实战》(成林 著)第71、72页。 html代码:<table> <tr> <th nowrap="nowrap"> 阅读全文
posted @ 2013-04-05 20:58 荒村听雨_ 阅读(760) 评论(0) 推荐(0) 编辑
摘要: jquery用了4、5个月,也算比较熟了,能比较熟练的使用一般用的比较多的东西,但是看看jquery的文档,我还是发现了自己对jquery中的很多好东西感到很陌生,于是萌生出进一步学习jquery的想法,以下就是我学习jquery的一些笔记。我也希望大家在用框架或者函数库的时候别停留在中低级的阶段,尽量往上看,把一些比较牛逼的用法都掌握下来,说不定哪天你就需要了。1、callbacks.add(callbacks)。这个方法比较有意思,它可以帮助同时调用若干个函数,当然了,给这些函数传的参数都是一样。看看一个例子:var foo = function( value ){ console... 阅读全文
posted @ 2013-03-29 17:48 荒村听雨_ 阅读(670) 评论(0) 推荐(0) 编辑
摘要: IE方面程序调试一直以来都很是让人头疼的,今天又遇到一个了,具体的问题我不太好描述,简化出来是这么一个要注意的地方:有一个标签比如说是<li>08:30</li>,你在某个时候需要拿出这个li元素里面的时间值,用来进一步使用或者对比都行,我就发现有时候通过.text()拿出来的这个值有点怪,它竟然和"08:30"不一样,我不能肯定在任何地方都不一样,但至少我遇见过,我的解决办法是用属性值代替,你就这样写<li v="08:30">08:30</li>,要用li里面的值得时候取属性值来代替。通过这样的办法可以 阅读全文
posted @ 2013-03-29 10:19 荒村听雨_ 阅读(259) 评论(0) 推荐(0) 编辑
摘要: 最近要新上一个小项目,用到了分页功能,这个分页还得是我自己大前端亲自模拟的,也就不是那种点“下一页”向后台请求新数据的那种,于是我需要把从后端一次性拿到的所有数组十个十个作为一个数组保存到一个大数组里面,懂了没?就是一个数组里面有好几个数组,每个数组都有十个元素,作为某一页的数据,当然了,最后一页可能并非是凑巧10个的,那就少于10个也行。于是我开始切割数组,这一切割竟然就是半个小时,我已开始怎么割都割不好,我真心觉得自己的底子好薄~当然了,既然会在这里写这样一段话说明我现在已经解决了,代码在这里写出来算是对自己的一个警告,切记重视基础!ws在打开,我顺便贴上今天找到的一个前端网站,好像里面. 阅读全文
posted @ 2013-03-23 22:56 荒村听雨_ 阅读(157) 评论(0) 推荐(0) 编辑
摘要: 最近在看《编写高质量代码:web前端开发修炼之道》,这是一本好书。首先得说这本书绝对不是入门书,个人认为比较适合有半年以上开发经验的人学习,因为你不经历过一点"散漫式"开发以及不曾感受到因为代码写的不规范而导致的维护困难,你很可能不太能体会作者提到的一系列优化代码、代码组织之道、提高代码可维护性的好处。以下我就写一点从本书中获得的一些收获,以便印象深刻:1.触发ie浏览器hasLayout的方式:zoom:1。这是成本最低的触发方式,但是在极少情况下这个zoom:1可能并不会成功触发hasLayout,这时候考虑用position:relative。2.行内元素的paddi 阅读全文
posted @ 2013-03-20 19:17 荒村听雨_ 阅读(374) 评论(0) 推荐(0) 编辑
摘要: 上午的时候,本来是想做一个position:fixed在各个浏览器下兼容的方案的,但是发现ie7/8下面的position:fixed只支持一个屏幕,如果内容高度超过一个屏幕就不能很好的使用position:fixed了(如果哪个同学有position:fixed的完美方案麻烦给我一下),于是我想用js来兼容,其实就是通过scroll监听来实现,于是需要判断ie7/8这俩版本,但是发现jquery的$.browser.version并不支持ie8,于是我就百度,百度倒是给出很多答案,但是发现ie8还是没能检测出来,后来我自己查看了navigator.userAgent这个东西,在各个浏览器下面 阅读全文
posted @ 2013-03-18 12:33 荒村听雨_ 阅读(27298) 评论(2) 推荐(0) 编辑
摘要: 最近在重新看《javascript权威指南》这本书,每天都看一点,希望能赶在毕业前再夯实一下自己的基础。我觉得自己在从去年10月份开始虽然做了几个小项目,但是对于基础性的东西还是没能彻底掌握,因此在更近一步学习一些模块开发、模式之前,把基础弄弄好,这样对自己应该是很有利的。反正也拿不出什么很好的东西给大家,就是写一下自己还不熟悉的基础或者技巧性的东西,一点一点罗列出来。1. 把一个对象的所有属性都拿出来放到一个数组中,以备接下来的使用,这是一种比较常见的做法,一般性的做法是这样:var obj = { "a":1, "b":2, "c" 阅读全文
posted @ 2013-03-17 17:43 荒村听雨_ 阅读(232) 评论(0) 推荐(0) 编辑
摘要: ---恢复内容开始---在看《JavaScripot权威指南》这本书,看到三元运算符这一块,于是尝试写了这么一个三元运算: var x = 1; var y = (x == 1 ? function(){return 1}:function(){return -1}) console.log(y);结果,各位看官你觉得Y等于多少? y = function(){return 1},他返回的直接就是就是这个函数,而不是函数执行的结果。如果需要结果的话还得让函数立即执行。应该是这样: var x = 1; var y = (x == 1 ? (function(){r... 阅读全文
posted @ 2013-03-17 11:51 荒村听雨_ 阅读(149) 评论(0) 推荐(0) 编辑
摘要: 在看《JavaScripot权威指南》这本书,看到三元运算符这一块,于是尝试写了这么一个三元运算: var x = 1; var y = (x == 1 ? function(){return 1}:function(){return -1}) console.log(y);结果,各位看官你觉得Y等于多少? y = function(){return 1},他返回的直接就是就是这个函数,而不是函数执行的结果。如果需要结果的话还得让函数立即执行。应该是这样: var x = 1; var y = (x == 1 ? (function(){return 1})():... 阅读全文
posted @ 2013-03-16 21:44 荒村听雨_ 阅读(200) 评论(0) 推荐(0) 编辑
摘要: 折腾好久了,搜了一下还真有牛人解决了这个问题。在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。解决方法:ul li{ white-space:nowrap;}看清楚了,是li 设置这个属性,不是ul。原文地址:http://blog.sina.com.cn/s/blog_566dcf7b0100uoff.html 阅读全文
posted @ 2013-01-27 11:18 荒村听雨_ 阅读(830) 评论(0) 推荐(0) 编辑
摘要: 尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方法。eval()有问题,new Fuction()构造函数也是,尽量避免使用它们。拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。使用for()循环替代for…in循环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。把try-catch语句放在循 阅读全文
posted @ 2012-12-14 13:07 荒村听雨_ 阅读(110) 评论(0) 推荐(0) 编辑
摘要: 我记得自己学习前端开发是今年的五月份,那时候刚刚结束对安卓的学习,我清楚的知道自己之所以转向前端,和对安卓的一种失落有直接关系。我学习安卓其实也只有5个月,很短的时间,越学也觉得自己离一个真正的个人开发者很遥远,后来听学习java的陈江讲html5的未来,我觉得真的很不错,于是转向前端开发,其实刚开始的学的时候,我对前端开发很不了解,只是知道要开发html5的web应用,javascript、css、html的必须学的,否则根本开发不了,于是开始学这三样东西,学着学着发现这三样东西的结合-前端开发很有意思,也就是做web应用程序的开发貌似特别符合我的性格,相对后端开发,前端开发更加有效果感,. 阅读全文
posted @ 2012-11-22 22:37 荒村听雨_ 阅读(1656) 评论(4) 推荐(2) 编辑