使用JavaScript实现media queries检测

最近在做一个项目,项目中需要根据用户的设备来加载不同的样式,比如同一个页面,如果是PC访问,则显示PC版样式,手机访问则显示mobile样式。这个是一个不完全属于响应式的设计。QQ会员下面有大量的活动页面,不同的活动页面结构会随主题而改变,不像首页之类的频道页。为了使手机用户也能获得更好的体验,我们专门设计了一套移动模版样式。 开始的时候我们直接使用css media query加载样式: 总体还Ok,各个浏览器都能兼容。此时产品观察到了一个问题,在PC下如果缩小浏览器窗口,则会切换到mobile.css,由于mobile.css是一套固定风格的样式,突然变换了风格,用户感觉起来将会很怪。于是我们就想区分PC与手机设备。 media: min-width 指的是浏览器窗口宽度,等价于document.documentElement.clientWidth;min-device-width 是设备宽度,等价于window.screen.width。 我们想到使用min-device-width进行判断,很显然这个行不通,很多设备的device-width比PC分辨率还宽。 最后也没能找到使用CSS控制的办法,只能是让JS来检测了。 最简单的方法是使用window.matchMedia: var mq = window.matchMedia( “(min-width: 500px)” ); if (mq.matches) { // window width is at least 500px } else { // window width is less than 500px } 但可惜目前在移动设备上支持度还不够。 换一个思路,先通过检测UA来区分移动设备与PC:

解决iScroll横向滚动区域无法拉动页面的问题

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。 Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在这里可以找到。 代码如下: myScroll = new iScroll(‘scrollpanel’, { // other options go here… vScroll: false, onBeforeScrollStart: function ( e ) { if ( this.absDistX > (this.absDistY + 5 ) ) { // user is scrolling the x axis, so prevent the browsers’ native scrolling e.preventDefault(); } } }); 重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时(也就是左右滑动时)才取消默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。 [...]

浅谈ECMAScript 5 严格模式(Strict Mode)

自ECMAScript 5开始,增加了一个严格模式(Strict Mode)的新特性。 ECMAScript 5虽然可以跟前一版的ECMAScript 3相容(ECMAScript 4已废弃) , 但是,当我们宣告为”Strict Mode”后,那些ECMAScript 5不再建议使用的ECMAScript 3的旧语法会被全面禁止。一旦出现,便会出现错误或抛出异常(Exception)。 Strict Mode 的宣告方式有两种: 若要在全域范围内宣告使用Strict Mode,只需在程式码的第一行加上下面叙述,如: “use strict” 也可以在指定的函数内宣告使用Strict Mode,在函数的第一行加上下面叙述,如: // Non-strict code… function func_UseStrictMode() {   ”use strict” ;   // … your code … }

提高web应用性能之JavaScript性能调优

JavaScript 性能调优 JavaScript 语言由于它的单线程和解释执行的两个特点,决定了它本身有很多地方有性能问题,所以可改进的地方有不少。 eval 的问题: 比较下述代码: 清单 1. eval 的问题 var reference = {}, props = “p1”; eval(“reference.” + props + “=5”) var reference = {}, props = “p1”; reference[props] = 5 有“eval”的代码比没有“eval”的代码要慢上 100 倍以上。 主要原因是:JavaScript 代码在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。但是,如果你使用了“eval”,则“eval”中的代码(实际上为字符串)无法预先识 别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低。 Function 的用法: 比较下述代码: 清单 2. function 的用法 var func1 = new [...]

Javascript对象冒充——call与apply

构想原始的 ECMAScript 时,根本没打算设计对象冒充(object masquerading)。它是在开发者开始理解函数的工作方式,尤其是如何在函数环境中使用 this 关键字后才发展出来。 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法。例如,用下面的方式定义 ClassA 和 ClassB: function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor) { } 还记得吗?关键字 this 引用的是构造函数当前创建的对象。不过在这个方法中,this 指向的所属的对象。这个原理是把 ClassA 作为常规函数来建立继承机制,而不是作为构造函数。如下使用构造函数 ClassB 可以实现继承机制: function ClassB(sColor) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; } [...]

Javascript的this用法

作者: 阮一峰 日期: 2010年4月30日 this是Javascript语言的一个关键字。 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,   function test(){     this.x = 1;   } 随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。 下面分四种情况,详细讨论this的用法。 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。 请看下面这段代码,它的运行结果是1。   function test(){     this.x = 1;     alert(this.x);   }   test(); // 1 为了证明this就是全局对象,我对代码做一些改变:   var x = 1;   function test(){     alert(this.x);   }   test(); // 1 运行结果还是1。再变一下:   var x = 1;   function test(){     this.x = 0;   }   test();   alert(x); //0 情况二:作为对象方法的调用 函数还可以作为某个对象的方法调用,这时this就指这个上级对象。 [...]

Javascript面向对象编程(三):非构造函数的继承

作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了”封装”,第二部分介绍了使用构造函数实现”继承”。 今天是最后一个部分,介绍不使用构造函数实现”继承”。 一、什么是”非构造函数”的继承? 比如,现在有一个对象,叫做”中国人”。   var Chinese = {     nation:’中国’   }; 还有一个对象,叫做”医生”。   var Doctor ={     career:’医生’   } 请问怎样才能让”医生”去继承”中国人”,也就是说,我怎样才能生成一个”中国医生”的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现”继承”。 二、object()方法 json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。   function object(o) {     function F() {}     F.prototype = o;     return new F();   } 这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。 使用的时候,第一步先在父对象的基础上,生成子对象:   var Doctor = object(Chinese); 然后,再加上子对象本身的属性:   Doctor.career = ‘医生’; 这时,子对象已经继承了父对象的属性了。   alert(Doctor.nation); //中国 三、浅拷贝 除了使用”prototype链”以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。 下面这个函数,就是在做拷贝:   function [...]

Javascript面向对象编程(二):构造函数的继承

作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何”封装”数据和方法,以及如何从原型对象生成实例。 今天要介绍的是,如何生成一个”继承”多个对象的实例。 比如,现在有一个”动物”对象的构造函数,   function Animal(){     this.species = “动物”;   } 还有一个”猫”对象的构造函数,   function Cat(name,color){     this.name = name;     this.color = color;   } 怎样才能使”猫”继承”动物”呢? 1. 构造函数绑定 最简单的方法,大概就是使用call或apply方法,将父对象的构造函数绑定在子对象上,也就是在子对象构造函数中加一行:   function Cat(name,color){     Animal.apply(this, arguments);     this.name = name;     this.color = color;   }   var cat1 = new Cat(“大毛”,”黄色”);   alert(cat1.species); // 动物 2. prototype模式 更常见的做法,则是使用prototype属性。 如果”猫”的prototype对象,指向一个Animal的实例,那么所有”猫”的实例,就能继承Animal了。   Cat.prototype = new Animal();   Cat.prototype.constructor [...]

Javascript 面向对象编程(一):封装

作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。 下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了 以下两本书籍: 《面向对象的Javascript》(Object-Oriented JavaScript) 《Javascript高级程序设计(第二版)》(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Javascript读物,推荐阅读。 笔记分成三部分。今天的第一部分是讨论”封装”(Encapsulation),后面的第二部分和第三部分讨论”继承”(Inheritance)。 ============================ Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。 那么,如果我们要把”属性”(property)和”方法”(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 1. 生成对象的原始模式 假定我们把猫看成一个对象,它有”名字”和”颜色”两个属性。   var Cat = {     name : ”,     color : ”   } 现在,我们需要根据这个原型对象,生成两个实例对象。   var cat1 = {}; // 创建一个空对象     cat1.name = “大毛”; // 按照原型对象的属性赋值     cat1.color = “黄色”;   var [...]

Javascript继承机制的设计思想

作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制。 它没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的区分,全靠一种很奇特的”原型链”(prototype chain)模式,来实现继承。 我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样设计。 下面,我尝试用自己的语言,来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂,真相非常简单。 一、从古代说起 要理解Javascript的设计思想,必须从它的诞生说起。 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个 版本的浏览器只能用来浏览,不具备与访问者互动的能力。比如,如果网页上有一栏”用户名”要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器 端判断。如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得,没必要设计得很复杂,这种语言只要能够完成一些简单操作就够了,比如判断用户有没有填写表单。 1994年正是面向对象编程(object-oriented programming)最兴盛的时期,C++是当时最流行的语言,而Java语言的1.0版即将于第二年推出,Sun公司正在大肆造势。 Brendan Eich无疑受到了影响,Javascript里面所有的数据类型都是对象(object),这一点与Java非常相似。但是,他随即就遇到了一个难题,到底要不要设计”继承”机制呢? 二、Brendan Eich的选择 如果真的是一种简易的脚本语言,其实不需要有”继承”机制。但是,Javascript里面都是对象,必须有一种机制,将所有对象联系起来。所以,Brendan Eich最后还是设计了”继承”。 但是,他不打算引入”类”(class)的概念,因为一旦有了”类”,Javascript就是一种完整的面向对象编程语言了,这好像有点太正式了,而且增加了初学者的入门难度。 他考虑到,C++和Java语言都使用new命令,生成实例。 C++的写法是:   ClassName *object = new ClassName(param); Java的写法是:   Foo foo = new Foo(); 因此,他就把new命令引入了Javascript,用来从原型对象生成一个实例对象。但是,Javascript没有”类”,怎么来表示原型对象呢? 这时,他想到C++和Java使用new命令时,都会调用”类”的构造函数(constructor)。他就做了一个简化的设计,在Javascript语言中,new命令后面跟的不是类,而是构造函数。 举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。   function DOG(name){     this.name = name;   } 对这个构造函数使用new,就会生成一个狗对象的实例。   var dogA = new DOG(‘大毛’); [...]