Coding Serf | Stay @ Front End | "呆"在前端

【译】JavaScript设计模式:命令模式

在面向对象的世界里,命令模式(the Command Pattern)是一只奇怪的野兽。和大多数对象不同,一个命令对象相当于一个动词(verb)而不是一个名词(noun),但是命令模式又不同于函数。 什么是命令模式 就像我说的,一个命令对象相当于一个动词。还有一种说法是,命令模式是一种对象方法的封装方式。 简单来说,它会作为一个方法实现对象和一个方法调用对象中间的抽象层。这对用户...

【译】JavaScript设计模式:责任链模式

这是JavaScript设计模式系列的最后一篇。今后每周一你不用再期待我发一篇新博客了。那么今天我会讨论责任链模式(the Chain of Responsibility Pattern)。这个模式会解耦一个请求的发送者(sender)和接收者(receiver)。这是通过一个对象链完成的,每一个对象本身都可以处理这个请求或将其传递到下一个对象。是不是有些困惑?继续往下看。 责任链结构 责任链模式有3部分:发送...

响应式与移动端(五):交互的过渡

PC和移动端之间的交互方式有诸多不一样的地方,本文会探讨如何解决这种交互上的过渡。 一、从鼠标到手指 PC网页的交互大多是用鼠标来完成的,到了移动端,在触摸屏上我们任性地挥舞着手指。此时对于同一套响应式的代码,就要考虑如何让交互也是响应式的,即面对不同的设备提供不同的交互(操作)。 1.1、 hover 在移动端并非完全不支持css中的:hover伪类,只不过表现效果与P...

移动端真机调试终极利器-BrowserSync

之前有分享过一篇《如何在移动设备上调试网页》,感谢 xyyjk 留言推荐BrowserSync这个工具,自己也花了点时间研究了一下,还是很好上手的。比起之前介绍的方法更加方便(之前的方法已经过时)。BrowserSync可以实时同步更新CSS、JS文件,此外最关键的是全平台支持,即你可以在手机QQ浏览器、微信浏览器里面调试。今天就介绍一下这个工具的用法(以下针对Mac OSX)。 一、安...

响应式与移动端(四):会变脸的媒体查询

媒体查询即Media Queries,它是实现响应式的核心。我们会在本文中涉及到那些媒体查询最常用的地方,例如它允许我们在某个窗口宽度(或高度)应用不同的css样式,可以理解为窗口尺寸的断点。此时网页似乎完全换了一种布局,就像变脸一样。另外,我们还可以用媒体查询来判断当前设备类型(如打印机)、设备显示器分辨率等媒体特性。 一、引入媒体查询 在页面开发中,我们常用...

响应式与移动端(三):弹力十足的图文混排

想让一个区域富有弹性,并非只有一种办法。首先来看一下我们想要实现的效果: 显而易见,这样的布局需求是头像不动消息动。换句话说,就是两个头像始终贴边,而中间的消息就像有弹性一样随着不同的设备分辨率(窗口)自动伸缩。 一、BFC图文混排 要实现这样的布局首先要理解一个概念BFC——块级格式化上下文(Block Formatting Context)。 BFC是个独立渲染区域,它内部元素...

响应式与移动端(二):了不起的百分比

我们通常把使用百分比的布局称为流动布局,但这不重要,重要的是要理解如何更好地使用百分比。 一、宽度百分比 比如我们写了一个宽度为1000px的布局(通常我们把这种用px的布局叫做固定布局),但是当窗口宽度小于1000px时,显然会截掉部分内容。为了让内容能够随着浏览器窗口的大小的变化全部显示,我们需要使用百分比来布局。此外,你可能已经知道通过响应式中有名的media...

响应式与移动端(一):万事俱备了吗?

“响应式的目标就是移动端”。这句话看似狭隘,但是狭隘是现实的产物。 一、现实是个什么玩意儿 选择移动优先还是PC优先,这样的争论是没有意义的,让哪个终端先行都无可厚非,我们会从以后的讨论中看到这个问题的无关紧要。从现实来看,无论对设计师还是前端来说,在设计稿和布局上做减法要比做加法似乎更容易,因此也更受亲睐。所以我们在真正的制作过程中往往是PC优先的。 ...

响应式 3D Gallery 效果插件(for jQuery)

最近做Engine的官网,有个3D的Gallery效果,网上倒是有一些3D效果的插件,但元素尺寸基本都是写死的,不能满足我们响应式的需求…… 索性就自己写了一个。效果图如下: 如果浏览器不支持3D的transform那么我们就降级一下(这里使用了modernizr来检测CSS的属性支持),使用scale,如下图: 这里有个问题,插件的轮播动画用的是CSS3的transition,IE9是不支持transition的,但...

移动端ClipBox效果插件(for Zepto)

我该怎么介绍它呢?其实它很简单,没什么功能。但是既然已经做了个插件,想着没准也有人需要这样的实现,就拿出来共享一下吧,其实自己写一个也很简单。 效果我感觉用语言不好说,所以才给它起了这么个不知云的名字 —— clipBox。但还是简单描述一下吧,就是在一个框(Box)里可以拖动图片形成一种剪切效果,为的是在小屏幕上查看大图片。就像在一个小窗口里浏览Google地图一样...

文章归档
友情链接
参与项目
  • 830.格林学堂
  • 840.精优教育
  • 850.拯救红包君
  • 860.不开心抢包包
  • 870.打大折
  • 880.金地广场(西安)
  • 890.Engine Group
  • 900.Starbucks Mooncake
  • 910.宝存科技
  • 920.诺优能
  • 930.Zuse
  • 940.新吉士
  • 950.KSNY x Darcel
  • 960.澳大利亚官方旅游网站
  • 970.圣诞捞
  • 980.FlipScript
  • 990.五维互动
Copyright © 2013-2014 Coding Serf | Powered By WordPress |Theme design By Coding Serf