程序猿最爱
前端技术乐园

最新发布

前端技术

关于BrowserStack的一些记录.

作者( rekey )原文(http://www.csdn.net/article/2013-08-19/2816615-api-browserstack)

BrowserStack 是一个提供网站浏览器兼容性测试的在线云端应用,支持9大操作系统上的100多款浏览器。支持本地测试,预装有完备的开发者工具。BrowserStack在近期发布了API,移动开发者将会进一步提高测试效率。

昨天JK发来http://www.csdn.net/article/2013-08-19/2816615-api-browserstack这个链接让看看,研究了一下顺便记录一点资料.

BTW : BrowserStack 是不是可以缩写成BS.. 网站地址 http://www.browserstack.com/

闲话少说,先来说一说优点吧.

阅读全文 »

前端技术

Fl发布将图片使用DATA URI的功能

作者( welefen )原文(http://www.welefen.com/more-about-img-use-data-uri-opti.html)

上篇文章里介绍了使用图片的DATA URI进行优化,提到了之前实现方式的弊端,同时给出了新解决方案的思路。

目前该功能已经开发完成,集成在Fl中。你可以去https://github.com/welefen/Fl下载最新的FL代码。

如何使用

require_once "path/to/fl/Fl.class.php";
Fl::loadClass("Fl_Css_DataUri");
$instance = new Fl_Css_DataUri($cssContent);
$instance->getImgRealPath = "get_img_real_path_fn";
$options = array(
    'maxlength' => 3000 //使用DATA URI的图片最大值,如果大于这个值,则不使用DATA URI模式
);
$output = $instance->run($options);
$ie6Text = $output['ie6'];
$css3Text = $output['css3'];

阅读全文 »

前端技术

关于ol有序列表的小bug...

作者()原文(/post/%E5%85%B3%E4%BA%8Eol%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%E7%9A%84%E5%B0%8Fbug.html)

这两天在制作电影排行榜的页面.使用ol有序列表的时候,遇到了一个小的趣事.整理出来如下.

BUG: 形成条件:使用OL.场景:IE6,IE7.

阅读全文 »

前端技术

使用 Flash LocalConnection 解决 IE6/7 postMessage

作者( panliu888 )原文(http://www.imququ.com/post/84.html)

关于跨域数据交互的总结,请看奇舞团JerryQu的文章 http://www.imququ.com/post/84.html

我们今天聊的主要是 HTML5的新特性 postMessage(跨文档消息传输,使用方式), 这个是个好东西, 网上也有大量的总结。

postMessage 是 IE8, Firefox3, Opera9, Chrome3和 Safari4 支持的。

那么万恶的IE6也想用怎么办?

阅读全文 »

前端技术

ES7 Decorator 与函数变换

作者( akira_cn )原文(https://www.h5jun.com/post/decorator-functional)

ES7 Decorator 与函数变换

在ES7的众多新特性中,我个人最喜欢的特性除了广为人知的 async/await 外,就数Yehuda Katz提出的decorator

decorator 是什么?

decorator 的概念来源于 Python 的decorator,也类似于 Java 的 Annotation。它实际上是一个 wrapper ,作用于一个函数或者对象,对目标函数或对象进行一系列变换,然后返回一个新的函数或对象。

阅读全文 »

前端技术

[译]神马是AMD, CommonJS, UMD?

作者( hxl )原文(http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/)

原文: What is AMD CommonJS and UMD

简介

最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。

为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。

阅读全文 »

前端技术

Node.js和MongoDB——从MongoJS开始

作者( snow yang )原文(http://howtonode.org/node-js-and-mongodb-getting-started-with-mongojs)

原文:Node.js and MongoDB - Getting started with MongoJS

在过去几个月里,毫不夸张的说,Node.js和MongoDB在软件和web行业简直大为轰动。不仅仅是前沿创业公司,大中型企业也通过利用大容量,可持久和可扩展app来促使这两个技术给用户带来更好的体验。

Node.js是什么?

Node.js是一个建立在Chrome的JavaScript运行环境的平台,为了更方便,更快捷地建立可扩展的网络应用。Node.js利用事件驱动,非阻塞式I/O模型使它更为轻量和高效,对于运行在分布式设备上数据密集型和实时应用表现完美。

MongoDB是什么?

MongoDB是一个可扩展,高性能,开源的非关系型数据库。

阅读全文 »

前端技术

[小Tip]移动端audio使用的一个注意事项

作者( snadn )原文(/post/%E5%B0%8Ftip%E7%A7%BB%E5%8A%A8%E7%AB%AFaudio%E4%BD%BF%E7%94%A8%E7%9A%84%E4%B8%80%E4%B8%AA%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.html)

这几天做移动端的音乐播放,果然是踩坑不断呀!

其中一个就是,做好的播放功能,在pc上可用,在手机上的壳子浏览器可用,可偏偏在原生浏览器和chrome上不行。

折腾了好久(主要还是移动端的调试真心不方便呀),最终定位到问题是:

移动端一个audio对象的第一次播放,必须是一个用户触发的行为。

阅读全文 »

前端技术

【翻译】10个非常节省时间的CSS整理工具

作者( 冰果 )原文(http://www.sitepoint.com/terrific-time-saving-css-tools/)

原文地址:http://www.sitepoint.com/terrific-time-saving-css-tools/

整洁,组织良好的CSS有很多好处。一个干净整洁的CSS的站点将被加载的更快,展现在搜索引擎结果中更加突出,并且在未来的客户端中也能得以很好的展示。从每天的访问者到资深的设计师同事都将从你的辛勤成果整洁的CSS标签中获益。
但是,当你准备整理一堆被无数次迭代设计和更改的css时,那将会是一个枯燥、耗时的过程。
或许,你并不想去承担如此枯燥乏味的任务,你的客户也不想付费去做如此耗时却只有很少好处的活儿。
站在设计师的角度,手动整理css可是足以摧毁创造力的,它让你不再关注工作中需要的较高层次的思考,也可能让你逐渐不喜欢你的专业。
幸运的是,这里有一些出色有用的工具可以帮助你自动处理CSS中一些更平常的问题,解放你的脑细胞来处理网页设计中更有创意,更有意思的事情。以下工具会给你留下一个高效,优化,无可挑剔组织的CSS样式表。

阅读全文 »

前端技术

IE的浏览器模式和文本模式(二)

作者( admin )原文(http://www.imququ.com/post/browser-mode-and-document-mode-in-ie.html)

一年半之前我写了一篇《关于浏览器模式和文本模式的困惑》,介绍了IE8+特有的浏览器模式(Browser Mode)和文本模式(Document Mode),以及我的测试和微软文档有出入的部分。其中有一些没有提到的内容,本文继续讨论。

判断真正的IE版本

很多JS框架都通过UA判断IE的版本。对于IE6,这种做法没问题(IE6没有浏览器模式的概念,也没有其它IE可以把浏览器模式改为IE6;IE7虽然也没有浏览器模式,但IE8+可以把浏览器模式设置为IE7模式)。但是从IE8开始引入的浏览器模式会产生不同的UA。例如,IE9有这些:

浏览器模式 navitor.userAgent 默认文本模式
IE7 MSIE 7.0 IE7标准
IE8 MSIE 8.0 && Trident/4.0 IE8标准
IE9 MSIE 9.0 && Trident/5.0 IE9标准
IE9兼容性 MSIE 7.0 && Trident/5.0 IE7标准

如果仅通过UA中的“MSIE X.0”来判断,会得到IE7~9三种不同结果。

实际上,对于IE8+,根据UA字符串只能确定当前是否是兼容性视图。因为兼容性视图的UA中,IE版本和Trident版本不匹配。例如UA里同时有“MSIE 7.0”和“Trident/6.0”,说明浏览器模式肯定是IE10兼容性。这是因为IE8才开始给UA加上Trident信息,而Trident/6.0是IE10所特有。

除此之外,上面IE7IE8这两种浏览器模式,UA和跟真正的IE7或IE8没有任何区别,根据UA完全没办法区分。甚至连IE9模式,我们也无法确认这是IE9浏览器的默认模式,还是IE10浏览器的IE9模式。

下面来看看文本模式,依然用IE9测试。选择不同的文本模式,documentMode的值也不一样。

文本模式 document.documentMode
IE7标准 7
IE8标准 8
IE9标准 9
IE5怪异(Quirks) 5

document.documentMode这个JS属性是IE8引入的,对于IE8+无论选择什么文本模式,这个属性都有值。而IE6和IE7下,这个属性是undefined。根据这一点,可以结合UA判断出用户使用的是不是真正的IE7:UA包含IE7时,如果documentMode等于undefined,就一定是真正的IE7浏览器。对于IE8+,这种方法就力不从心。例如IE10在浏览器模式为IE8,文本模式为IE8标准时,与真正的IE8比较,无论是UA,还是document.documentMode,都一模一样。

综上,我们可以通过检查UA中Trident版本和IE版本是否匹配,来判断浏览器是否工作在兼容性视图模式下。结合document.documentMode,还可以判断出用户是否使用真正的IE7浏览器。

JScript引擎版本号

JScript是IE的JS引擎,IE提供了一系列JS接口来获取它的JScript信息:

ScriptEngine() JS中固定返回“JScript”
ScriptEngineMajorVersion() 大版本号
ScriptEngineMinorVersion() 小版本号
ScriptEngineBuildVersion() 内部版本号

我用这些接口测试了IE6~10,发现JScript的版本号只与浏览器有关,与浏览器的浏览器模式或文档模式无关。

浏览器 JScript版本号
IE6 5.6.8827
IE7 5.7.22145
IE8 5.8.18702
IE9 9.0.16434
IE10 10.0.16521

忽略内部版本号,只关注前两个数字,我们会发现,从IE9把JS引擎换成Chakra开始,版本号的规律变了。令人欣慰的是,不同的JScript版本号对应着不同版本的浏览器,这对判断出真正的IE版本很有帮助。例如,要识别低于IE8的浏览器,下面这样写就可以了。

if(ScriptEngineMinorVersion() != 0 && ScriptEngineMinorVersion < 8) {
    //ie8- browser
}

实际上,IE支持的条件编译功能中,有个表示JScript版本的条件编译变量,如下(完整的条件编译变量清单见这里.aspx)):

这个变量是“major.minor”格式的JScript版本号,跟使用JS接口获取到的版本号一致,也只取决于浏览器版本,不受浏览器模式和文本模式的影响。

文本模式对JScript没影响?

看完上一节,再看我之前写的这段:文本模式决定:1)排版引擎;2)JS引擎,有明显的矛盾。难道之前的结论有误?

实际上,JS获取到的JScript版本号仅仅表示了当前浏览器自带的JScript引擎版本(例如IE9始终是9.0,IE7始终是5.7),并不代表任何情况都可以使用这个版本JS引擎的所有功能,页面使用哪种版本的JScript引擎还是由页面的文本模式来决定

例如,IE8的JScript版本是5.8,但是只有在文本模式等于IE8标准时才可以使用JScript5.8的功能,其它任何文本模式都会导致页面使用JScript5.7。

举个例子,JScript5.8增加了对JSON的支持,所以IE8支持原生JSON对象。但网上很多人问为什么在IE8/9下无法使用原生JSON。一种可能是页面没写DTD,导致页面进入了IE5怪异这种文本模式,进而启用了不支持原生JSON的JScript5.7导致的。

再举几个例子:[,].length在JScript9.0之前是2;[1,2,3].join(undefined)在JScript5.8之前是"1undefined2undefined3"。把IE9的文本模式分别改成IE9标准IE8标准IE7标准,可以得到下表:

文本模式 [,].length [1,2,3].join(undefined) 使用的JScript版本
IE7标准 2 "1undefined2undefined3" 5.7
IE8标准 2 "1,2,3" 5.8
IE9标准 1 "1,2,3" 9.0

类似的例子还有很多。大部分情况下,页面使用的JScript引擎版本会随着文本模式的降低而退化,页面对JS的支持度也随之退化。但教主franky提供了一个“for in顺序”的反例:

var o = {1 : '0', 0 : '1'}; for(var i in o) { console.log(i); }

对于IE9+浏览器,这行代码输出顺序始终是0 1;对于IE9以下的浏览器,输出顺序都是1 0,并不受文本模式的影响。关于这一点我没想到比较好的解释。

一些DOM相关的方法,如document.querySelectorAll,在文本模式为IE7标准IE5怪异时不可用;addEventListener在文本模式为IE8标准IE7标准IE5怪异时不可用。这说明IE浏览器对DOM的支持度也会随着文本模式的降低而退化。

但是一些BOM方法,却跟文本模式无关。例如IE8开始支持的postMessage和localStorage,只要浏览器是IE8+,无论什么文本模式,这两个功能都可用。IE9+支持的window.performance,在IE9+浏览器上,也始终可用,跟当前的文本模式无关。

小结下:随着文本模式的降低,页面上实际使用的JScript引擎会退化,一些高版本支持的语言特性不再可用(如JSON),但for in的顺序问题似乎不会退化;DOM相关功能也有相应的退化;但大部分BOM接口却不会退化(如localStorage)。

总结

本文讨论的内容在各部分都小结过,最后只说一个结论:在解决JS兼容性问题时,一定要使用能力检测和特性检测。因为无论是从UA中得到的浏览器信息,还是从JS接口中获取到的JScript引擎版本,都非常不可靠。例如UA中包含IE7,并不一定不支持IE9+的window.performace。也可能是IE9浏览器使用了IE9兼容性视图,UA确实会变成IE7,文本模式为IE7标准,但不影响对window.performace的支持。

另外,虽然IE的浏览器模式和文本模式非常复杂,组合起来有几十种情况,但大部分情况只能通过开发者工具来构造。例如UA中包含IE9,实际上使用JScript5.7的情况(浏览器模式为IE9,文本模式为IE7标准),正常情况下不会出现。

参考:

原文链接:http://www.imququ.com/post/browser-mode-and-document-mode-in-ie-2.html

阅读全文 »