最近使用mediaelementjs做一个iPad上的Html5的video标签的播放器包装. 首先感谢一下mediaelementjs这样的开源项目, 可用度极高, 代码质量明显比我自己写要好多了, 模块化清晰, 许可证很开放(MIT). 开发的过程中遇到了些浏览器兼容问题, 也涉及到一下iPad这样的平板平板设备上的浏览器与桌面浏览器在用户行为设计上的不同的问题. 下面罗列一下: 0. position:fixed 最著名的应该是iOS5之前的版本不支持css的 position:fixed 了吧. 1. 脱离浏览器的视频播放和全屏问题 在手机上, 如iPhone, 浏览器对video标签的处理, 基本上是直接使用系统的媒体播放器播放. 这时由于已经脱离了浏览器, 所以没有办法在播放视频的同时在屏幕上叠加任何显示元素. iPad好一点, 能在页面内直接播放视频, 但是一但用户选择了全屏播放, 则进入iPhone一样的状态. 只有桌面上的Chrome对这个支持的最好, 全屏状态下依然能够叠加浏览器里元素; Firefox逊色些, 全屏并没有全屏显示, 而是把视频充满了当前浏览器窗口. 2. 音量控制问题 在iOS设备上, 浏览器没有办法通过Javascript来操作音量控制, 不管是调节音量大小, 还是静音都不行. 读取当前音量也永远只会得到1. 这又是Apple故意的吧. 3. 剪贴板问题 在iOS设备上, 不能通过Javascript访问系统剪贴板. 用户只能在文字上单击, 调出系统的拷贝粘贴按钮. 要是不想让用户拷贝粘贴倒是有办法, 使用这个CSS. 4. 文本框文字选取问题 在iOS设备上, 不能通过Javascript访问textarea元素的select()来选中该元素的文字, 得到的只不过是把光标移到到了文字的最后位置. 5. 文本框滚动条问题 在iOS设备上, [...]
正在浏览发布于 2011十二月 的文章
ECMAScript里关于delete操作符的解释晦涩的很, 实在不是我能理解的. 有兴趣你可以去看看. 实际中使用中, 经常会碰到Javascript变量有时候能成功删除, 有时候却不掉成功删除的情况. 这篇Understanding delete牛文详细解释了, 为什么会这样, 什么样的变量能成功delete, 什么样的不能成功delete. 简而言之, 就是通过”声明“方式创建的变量不能成功删除, 通过”赋值“方式创建的变量能成功删除; 一但一个变量创建后, 它能不能被删除的属性将不会改变. 一个特例是通过eval()函数执行动态代码创建出来的变量,都是可以删除的. 如下面这段代码在Firefox/Chrome/Nodejs里的运行结果如下: Firebug的console里直接定义的变量(不包括在函数里定义的变量), 似乎是因为以eval()的方式在运行代码. 所以通过在Firebug的console里输入代码创建出来的变量,是可以删除的. Chrome等webkit系的浏览器的开发工具没有这个问题. 这一点在调试代码时可能会引起奇怪的现象.
在Web程序员应该知道的Javascript prototype原理里,说到了prototype chain. 但是有一点要特别注明一下, 那就是prototype chain只在对对象的方法和属性调用和读取时有效, 遵循沿着prototype查找方法和属性的规律; 但是在对对象属性进行赋值时, 并不遵循这一规律. 在对Javascript对象的属性进行赋值时, 原则是这样的: 1. 如果该对象本身有这个属性, 则对该属性赋值 2. 如果该对象本身没有这个属性, 则在该对象上新建一个该属性, 并进行赋值. (这时不会通过__proto__属性, 找该对象的prototype, 检查prototype上有没有该属性, 然后在prototype的属性上赋值.) 举个简单的例子: 看console里打出了的对象应该比较清楚. 用对象的数组写法可能更容易理解些.
有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也希望对别人也有帮助. 首先js里面没有类这回子事情, 虽然class是js的保留字, 但是到现在也没派上任何用场. 在js里面, 几乎所有的东西都是对象, 函数也是对象, 所以函数可以赋值给别的变量. 另外js对象也可以用数组的方式访问, 也就是说访问obj1.something, 也可以写成obj1['something']. 在js里虽然没有类, 但是有一个在类编程里常用的的概念, Constructor构造器, 或者叫构造函数. 语法上Constructor跟普通的js函数没有区别, 但是Constructor前面加上new关键字就可以产生新的对象. 那么”new Constructor()”这样调用时到底做了什么事情呢? 1. js运行环境首先创建一个空对象 2. 把this变量指向这个对象 3. 把__proto__指向这个构造器的prototype属性 4. 通过this把属性和方法加在这个对象上 5. 最后会把this指向的对象return出来(当然你也可以显示的return别的对象,这是情况跟我讨论的有点不一样) 这里有2个概念比较重要, 第一是Constructor的prototype属性, 它是Constructor的一个保持共享属性和方法的对象. 二通过该Constructor生成的对象的__proto__属性, 它指向了那个prototype对象. 对象的Constructor可以通过该对象的constructor属性获得. 我们定义一个简单的Constructor Demo(), 然后通过他生成一个aDemo对象, 在Chrome的console里把aDemo打出来看到的结果是这样的,这是我们能很清楚的看出这种关系. 换一种写法, 其实跟前面没多大区别, 不过这一次f2()不在创建出来的对象上, 而是在对象的__proto__指向的构造器DemoB上. 这样的好处是当使用DemoB创建很多对象时, 比较节省内存. js的prototype搜索链 prototype Chain js的运行环境是这样使用构造器的prototype的. 当我们对第一个对象调用其方法时, [...]
我使用过的编辑器主要有: Ultraedit, VIM, e-Texteditor, Sublime text 2. 基本上是从收费到免费,再到无限期试用. 由于我是个程序员, 编辑器除了用来编辑文本, 主要用来写JavaScript/PHP这样的脚步程序. 直到遇见了Sublime text 2以后, 它基本上满足了所有的要求. 我没用过textmate,不敢说Sublime一定比textmate好, 但是我想至少不会差, 而它不光能在Mac上跑, 也能在Windows和Linux上跑. 下面罗列一下Sublime跟我用过的其他编辑器的简单对比.
最近评论