摘要:如何优雅的设计 React 组件 如今的 web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么大家会觉得 jQuery “过时了”呢?一来,文章《 "No JQuery! 原生 JavaScript 操作 D 阅读全文
posted @ 2017-11-14 13:03 nicolaszhao 阅读 (814) 评论 (4) 编辑
摘要:舒适的前端开发环境是怎样一种体验 去年一篇 "《在 2016 年学 JavaScript 是一种什么样的体验?》" 吓坏了很多想要入行新同学和入行很久的老司机,感觉一下子前端世界已经看不懂了,做个页面要那么麻烦?当然如果你只是想要一个简单的静态页面,这么玩儿就是杀鸡用牛刀了。但如果你准备开发一个we 阅读全文
posted @ 2017-09-01 13:09 nicolaszhao 阅读 (329) 评论 (1) 编辑
摘要:我经历的前端开发模式进化史 萌芽 记得,在刚接触js那会儿,那时还没有专职的“前端开发”。当时的前端开发工作是由设计师(当时还叫“美工”)来完成的,在这种模式下,设计师需要完成页面的设计、切图、css、html,以及部分js交互的工作。这些完成的工作会成为设计资源的一部分被一并提供给开发人员,由于设 阅读全文
posted @ 2017-06-28 20:56 nicolaszhao 阅读 (2370) 评论 (0) 编辑
摘要:重启 偶然闲来无事,看了下之前在cnblogs上的随笔,发现最后一篇的发布日期已经距离现在有5年之久。想想这5年,一幕幕的经历就在眼前,但唯一不变的是对前端技术的热爱。 不过这几年前端技术却一刻不停的在变化和发展,特别是这2年,变化快的简直令人发指。如果你是个仍然在一线工作的老兵,如果你仍然守住之前 阅读全文
posted @ 2017-06-20 21:14 nicolaszhao 阅读 (84) 评论 (0) 编辑
摘要:最近突然来了兴趣,把很久前写的Ajax请求状态管理器重构了下,随后写了篇介绍小文与大家分享了。然后,又把我的博客改版了下,有时候发现之前喜欢的样式,慢慢会看厌了,就花了时间改观改观吧。今天我想介绍一个大家在平日里会经常遇到的一个问题--图片在容器中的居中。图片在容器中水平及垂直居中其实很简单,甚至可以只通过CSS就能搞定。例如用display: table;,然后在图片外加个容器,定义display: table-cell; vertical-align: middle; text-align: center;,如果再需要限制图片的大小以防超出到容器之外,只要定义上max-width和max- 阅读全文
posted @ 2012-04-27 14:55 nicolaszhao 阅读 (1935) 评论 (2) 编辑
摘要:现在的网站,在一个网页中有异步请求甚至许多个异步请求已经不足为奇。Ajax已经成为了现在网站必须的基本功能,使网页应用更接近于桌面应用。 然而,无论有多么接近,通过客户端与服务端的一来一回,必定会有等待加载数据的时间。所以,大多数网站都通过一个Gif动态图标或‘Loading...’等字样来告知用户数据还在加载中。但有时候这个问题会非常繁琐和麻烦,要么将这个‘Loading’显示在ajax请求之前,然后在ajax成功后隐藏它,或者将它写在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中来控制整个页面的ajax状态。前者方法... 阅读全文
posted @ 2012-04-25 16:44 nicolaszhao 阅读 (7775) 评论 (4) 编辑
摘要:键盘字符英文`backquote~tilde!exclam@at#numbersign$dollar%percent^caret&ampersand*asterisk(parenleft)parenright-minus_underscore=equal+plus[bracketleft{braceleft]bracketright}braceright;semicolon:colon'quote"doublequote\backslash|bar,comma<less.period>greater/slash?questionspace 阅读全文
posted @ 2011-03-22 12:44 nicolaszhao 阅读 (518) 评论 (0) 编辑
摘要:前端开发人员经常会用到“!important”声明样式属性,来提升指定样式规则的应用优先权。很多人也喜欢使用这一特性来区分浏览器之间的兼容性差异,特别是IE6。然而,很少人知道IE6其实是支持这一特性的,只不过用法不同。先看下面的示例:div { background: #000 !important; background: #f00;}以上代码的结果是IE6下为红色,其他浏览器为黑色。这也是原先认为IE6不支持“!important”的原因,久而久之,大家都使用hank来处理这一问题。但是,如果改成这样定义样式:div { background: #000 !important;}div 阅读全文
posted @ 2011-03-21 15:10 nicolaszhao 阅读 (440) 评论 (2) 编辑
摘要:我们经常会对a链接的display设置为block,以便整个标签可以点击。但是,如果对该标签设置为position:absolute后,会发现在ie6、ie7下有时点击无效,ie8下有效(ie8标准),使用zoom:1方式也无法解决问题。解决方案使用position:relative而不是position:absolute;添加背景色;添加透明的背景图片,gif或png,但会增加无意义的http请求;使用background:url(about:blank),*最佳方案。 阅读全文
posted @ 2011-03-17 10:58 nicolaszhao 阅读 (782) 评论 (2) 编辑
摘要:强制不换行p { white-space:nowrap; }自动换行p { word-wrap:break-word; word-break:normal; }强制英文单词断行p { word-break:break-all; }*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。span { display:block; } 阅读全文
posted @ 2011-03-14 15:19 nicolaszhao 阅读 (582) 评论 (0) 编辑