Entries by Johnny

淘宝UED前端技术系列课程

这个系列的课程是淘宝新员工的培训课程(主要针对开发者),当你有了一定基础,你会了解到淘宝最有价值“流程和理念”,把这些融入你的项目中去,保证你会进步地更快,看得更远。 第一课:淘宝前端技术巡礼 淘宝前端技术巡礼 View more presentations from jay li 第二课:HTML/CSS/JavaScript基础 HTML/CSS/JS基础 View more presentations from jay li Ecmascript View more presentations from jay li 第三课:深入剖析浏览器 深入剖析浏览器 View more presentations from jay li 第四课:深入学习JavaScript语言 潜力无限的编程语言Javascript View more presentations from jay li “学而时习之,不亦说乎?” – 《论语》

Javascript 设计模式(单例模式、复合模式和外观模式)

原创翻译:《JavaScript design patterns – Part 1: Singleton, composite, and façade》 – Javascript 设计模式(单例模式、复合模式和外观模式); 作者:微博@IMAGINE3R 原文地址:http://www.adobe.com/devnet/html5/articles/javascript-design-patterns-pt1-singleton-composite-facade.html 要求 必备知识: 基本JavaScript编程知识 其他要求 (开源库使用) Query库 译者提示: 这是一篇关于“javascript面向对象程序设计”的文章,注意,不是“javascript交互设计模式” 这是”javascript通用设计模式”系列的的第一篇文章。设计模式是最有效的编程手段,它让你的程序代码更易维护、更好扩展、更独立而不容易冲突,所有这些对于”创建一个大型javascript应用(尤其在大型公司的大型项目中)”是很有必要的。 单例模式 利用单例模式保证一个对象的只创建了一个实例,实现资源整合。在传统的面向对象的编程语言中,有“类”的概念,这个“类”可能同时拥有静态和非静态的属性和方法,所以单例在这里显得有些复杂。而对于Javascript这个动态语言来讲,它没有真正意义上“类”的概念,这样,单例到Javascript就显得清晰而且简单了很多。 为什么需要单例呢? 在进行详细部署之前,我需要讨论单例是否对我的应用有用。如果能够确保一个对象只有一个实例,这就大大降低了复杂度而且更方便使用。比如,在服务器端,为一个请求开通一个以上的数据接口是一种浪费,因此你需要用一个单例去控制一个数据接口。同样,比如,在客户端的Javascript中,你也许会把一个用来处理所有的AJAX请求的对象作为一个单例进行打包。这里有一个简单的规则:当你需要创建一个新的实例的时候,如果在功能上和其他实例完全一样,创建一个单例把它们包含起来。 如何创建一个单例 你需要做的就是用”对象字面量表示法”(Object Literal Notation)创建一个对象: //Object Literal Notation的中文翻译有很多,比如标题写的对象自变量表示法,又或者文字对象表示法等等,总觉得原来的英文术语翻译成中文就会经历一下“演绎”的过程,变得过于“专业”和“深奥”。好多时候这样的中文术语还不如英文原词来的轻松。接下来的文章就用Object Literal来表示。 var Singleton = { prop: 1, another_prop: ‘value’, method: function() {…}, another_method: function() {…} }; 你还可以创建私有属性和方法的单例,如果涉及闭包或匿名的自调用函数,就会复杂一些:例如,在一个功能函数里,先声明那些函数和变量,然后,创建并返回到一个object literal,引用之前在父函数范围内声明的那些函数和变量,这样,在功能完成声明后,object literal就会被指向一个变量时,这时外部函数就会立即被替换并执行。说起来有些含糊,还是来看一个例子: var […]

What We Need for a Global e-Business

Global Business is like a world trip in which we expect for treasure and pleasure. However, we are mostly accompanied with bad weathers, loneliness and even pirate during the journey. No matter how experienced is the captain, he, all by himself, can’t be sure what is about to happen because the ocean is always a […]

40 Creative Examples of Facebook Timeline Designs

Recently at the F8 conference, Facebook CEO Mark Zuckerberg introduced a massive redesign to our favorite* social media website. Honestly The new updates are understandable and from their point of view provide a better experience for the end user. From personal point of view, each time they implement a change I get more confused while […]

响应式Web设计

眼下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle…各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头? 在Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的;结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。 响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 响应式Web设计的概念 Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”,文中援引了响应式建筑设计的概念: 最近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产“智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。 将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。 显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。 调整分辨率 不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于横屏(portrait),有些是竖屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况? 要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且很多用户甚至不去将浏览器的窗口最大化;类似这样的变数,我们还要考虑多少呢? Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图展示了大致的统计结果: 在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着“多方案”的思路继续走下去;那么我们应该怎样做呢? 部分解决方案:一切弹性化 几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。 现在,我们可以通过响应式的设计和开发思路让页面更加“弹性”了。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。 在前文提到的Ethan Marcotte的文章中,他通过一个实例展示了响应式Web设计在页面弹性方面的特性: 该实例的实现方式完美的结合了液态网格和液态图片技术,并且聪明的在正确的地方使用了正确的HTML标记。“液态网格”是一种很常见的实践方式;对于“液态图片”技术,下面的文章做了不错的介绍: Hiding and Revealing Portions of Images Creating Sliding Composite Images Foreground Images That Scale With the Layout 说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating […]

New rEvolutions for eBook

From the beginning, eBook was defined as a Format which could be viewed, edited, and published through computers or devices supporting this kind of Format. Finally, Adobe’s PDF finally become the most popular format for eBook because of it looks nice and well adopted by most devices. As Amazon sells millions of eBooks and Kindles […]

2012 – A Big Year For Windows Phone?

Indicating yet again that 2012 is going to be a big year for Windows Phone, details have emerged about Microsoft’s plans for its upcoming Tango and Apollo updates. Tango, an update which will focus on delivering “products with the best price,” will hit sometime in the second quarter, while Apollo, a major update meant for […]

The Market share of Mobile OS (Jan 30, 2012)

According to a latest research of Nielsen, Android ranks No.1 in smartphone OS marketshare and it holds 46.3% of the whole market. iOS, however, just occupied 30% in this research. (The figures are from Nielsen and the data comes from a research from 75000 customers which is beyond 18 years old.) From the figure, we […]