一、编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理,我们编写JS库时要注意两方面的内容: 1、不要使用版本检测,而要使用能力检测 由于浏览器的类型和版本太多,以及不断的新的浏览器出现,我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。”浏览器检测”也叫”版本检测”通常被认为是一种错误的做法,浏览器检测的最佳实践是能力检测,通常也被称为对象检测,指的是在代码执行之前检测某个脚本对象or方法是否存在,而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在,那么说明浏览器能够使用它,而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式1234// JavaScript Document if(document.body && document.body.getElementsByTagName){ //使用document.body.getElementsByTagN ...
阅读全文 »

在这个迷你系列的第一部分中我们看到,为您的网站的移动导航创建一个icon图标,是一个最好的解决方案。 其结果是通过一个HTML元素创建一个icon图标,结构如下: HTML1<div id="nav-btn"></div> 然后给它添加如下css样式: CSS1234567#nav-btn { background: transparent;  border-bottom: 23px double #121212;  border-top: 8px solid #121212; height: 7px;  width:37px;} 结果如下: 制作一个案例我们开始快速创建一个包含一些通过这个icon按钮去控制这些连接的案例页面。我可能在HTML和CSS方面与你的想法有差异,但是我确定你知道怎么做,如果没有内容,给它添加一些东西。你可以在下面的JSFiddle中看到这个结果: 检测您的用户的VIEWPORT ...
阅读全文 »

众所周知,JavaScript不使用块作用域。但是在try语句的catch部分有个奇怪的情况。catch是带一个参数的,它并没有使用闭包,却不会影响所在作用域中的同名变量。但是在catch的语句块中声明的变量却又完全遵循普通语句块的规则,只有catch的参变量特殊。123456789101112131415(function(){ e="default"; try{ throw "test"; }catch(e){ var e,x=123; console.log(e); //test console.log(delete e); //false e=456; console.log(e); //456 }; console.log(x); //123 console.log(e); //default console.log(window.e); //undefined})() ...
阅读全文 »

本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。借用网上的一张图来看下目前主流的本地存储方案: Cookie**: **在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全,Cookie 的内容会随着页面请求一并发往服务器。 Flash SharedObject**: **使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中,基本上不存在兼容性问题,缺点是要在页面中引入特定的swf和js文件,增加额外负担,处理繁琐;还是有部分机子没有flash运行环境。 Google Gears**: **Google的离线方案,已经停止更新,官方推荐使用html5的l ...
阅读全文 »

你可以轻易找到许多如何设置响应式设计响应点的攻略,但是这些过时的设计方法都是以主流屏幕尺寸为依据的,效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个方法听起来好一些。但是仍有疑问,我们怎么判断是否布局被打破了呢?其中一个合理回答是依照经典可读性理论定义响应点。 名人的看法Robert Bringhurst认为,单列页面里的内容被设置为普通有衬线字体和普通字体大小时,排列45至75个字符长度为最佳。Josef Müller-Brockmann认为,一行如果能容纳10个单词那么这栏就很容易阅读。有许多原因会影响实际的字符数或单词数,但这是一种基本理论。如果你从小屏幕开始,然后你逐渐增大,主要内容的宽度也可能会变得比75个字符或者10个单词更宽,一些改变就会发生了。简单的说,这些就是你的响应点。 多种因素决定理想尺寸许多因素决定了理想尺寸的大小。比如,德语的长度比英语长,那就需要更宽的位置了。你理解对了:对于需要多种语言的国际网站你必须有不 ...
阅读全文 »

如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率,降低维护成本,提升用户体验等突出优势更是为Web 2.0时代掀起了又一股狂潮,致使无数开发者倾心致力于响应式网页设计。纷纷为响应式设计贡献自己的绵薄之力,当然各大软件制造上肯定不会放过如此良机,也纷纷推出各类响应式设计软件。理所当然不乏优秀之作: Groundwork,一款开源的响应式设计工具,在Github上可以找到其项目源代码。Groundwork提供多套通用响应式页面模版,用于快速构建Web响应式应用程序。此外,它还提供丰富的UI组件,详情可以访问Groundwork官网。 FROONT,一个网页版的响应式开发工具。提供在线编辑,布局调整,以及在不同临界值之间切换预览等响应式开发必备功能,还能导出html/css文件,实属强大的响应式开发工具,更具体的介绍请参看FROONT官网,注册并登录即可体验在线响应式开发。 Adobe Edge Reflow CC,由世界著名软件大户Adobe公司开发的响应 ...
阅读全文 »

背景2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局。这是一个多么强大的概念,一套代码兼容所有设备,节省维护成本,提高开发效率。然而,现实并非如此完美,在其强大的背后也有鲜为人知的辛酸苦楚。 众所周知,在响应式设计出现或者说在各种移动设备不断迅速抢占PC市场之前,所有的网页设计几乎不要求兼容移动设备,而在PC端的开发调试已经相当成熟,各种调试工具纷纷脱颖而出,诸如:Firebug、Chrome开发者工具等。这让开发者如鱼得水,在传统网页设计中游刃有余。 而如今的互联网市场已经有很大一部分属于移动设备的领地,网页设计兼容移动设备刻不容缓,而响应式设计的提出让这一目标成为可能,甚至可以说是网页设计兼容移动设备的完美解决方案。但是,光有方案只能是空谈,几乎没有人能够不经过反复调试就能写出完全正确的代码,移动设备上 ...
阅读全文 »

在之前IE版本中,有一些特性得不到支持,需要条件注释来让样式统一,或者让不同浏览器显示不同效果。值得高兴的是,在IE10里已无需使用条件注释.aspx)。在通常情况下,所有的特征检测都是件好事,但如果有一些样式是专门针对IE10,那你就需要做些特殊说明了。 对此,Roge在前段时间提出了一个非常简单地想法,并且能够很好地工作。 如何用useragent方式实现专门为IE10编写样式。 JavaScript12var doc = document.documentElement;doc.setAttribute('data-useragent', navigator.userAgent); IE10用户代理字符串1Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0) HTML1<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows N ...
阅读全文 »

万事开头难。斗霜傲雪二十年,堂堂剑气尚寒。——《诗词三百首》 第一章 窗口与应用程序在iOS应用程序中窗口(Window)是视图(View)的载体,每一个应用程序都至少有一个Window,一般而言也只有一个Window,在某些特定应用中会出现多个Window,本文暂不考虑多窗口的情况。Window是UIWindow类的一个实例,当应用程序启动时会创建这个窗口。当窗口显示出来后,一般来说,开发者就很少再会用到窗口。 在“iOS开发入门教程”一文中已经描述过创建一个iOS引用程序的过程,这里不做重复。根据iOS应用程序的生命周期可以发现,每一个iOS应用程序启动的时候都会调用一个启动方法:1- (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions; 下面我们就从这里开始,完成第一个iOS应用程序。 方法全貌如图: 我们先看方法实 ...
阅读全文 »

程序发轻狂,代码阑珊,苹果开发安卓狂!——写给狂热的编程爱好者们 写在前面的话学习iOS应用程序开发已有一段时间,最近稍微闲下来了,正好也想记录一下前阶段的整个学习过程。索性就从最基础的开始,一步一步记录一个最简单的iOS应用从创建到运行的全过程,其中会穿插很多相关知识或是遇到过的问题。其实算不上教程,但希望能够帮助更多的开发爱好者更快、更好的入门。 iOS开发环境简述最友好,最现实,也是最方便的开发环境就是在Mac系统中安装Xcode进行开发。原因在于:第一,开发工具(Xcode)限制。苹果官方只提供Mac版的Xcode,而Xcode内置了Xcode IDE,性能分析工具,iOS SDK,iOS模拟器和最新的OS X,可以方便迅速的进行代码编辑以及应用调试,可谓是Mac和iOS开发工具的不二选择。第二,代码提示和自动补全。iOS开发中用到的类或方法的名称,为了更具语义化,让开发者一目了然,通常会比较长,这往往会让刚刚接触iOS开发的开发者为了记住这些方法而伤透脑经。而Xcode拥有优 ...
阅读全文 »