Archive for the ‘ 前端 ’ Category

Pro HTML5 Programming

Pro HTML5 Programming《Pro HTML5 Programming》已经可以在网上下到PDF版的了,有兴趣可以去下载来研究下。

里面的内容也很丰富,介绍了HTML5的新元素和API,如下:

  1. Canvas API
  2. Audio and Video
  3. Geolocation API
  4. Communication APIs
  5. WebSocket API
  6. Forms API
  7. Web Workers API
  8. Web Storage API
  9. Offline Web Applications

虽然介绍了不少新技术,但真正可以实际使用的却非常少。现在在中国主流的浏览器还是IE系列的,里面真正支持HTML5的只有IE 9,但是现在的IE 9还只是个测试版。IE 6css 2都支持不全,更别谈HTML5了。更杯具的是HTML5的标准还没有最终确定下来,也就是说HTML5也不标准,它以后可能还会再变。

但我觉得HTML5可能会在中国很早地得到大规模地支持,因为搜狗浏览器QQ浏览器5Maxthon 3,它们的高速模式使用了WebKit核心,就连360浏览器也打算要内嵌WebKit了,而目前来说WebKitHTML5的支持是最好的。就算这些浏览器的用户不默认开启高速模式,但是他也拥有了支持HTML5的平台,对于HTML5的推广是件好的事。

没有最好的技术,只有最适合的技术。个人认为对于HTML5是要了解一些,但不要过分地追求新技术,毕竟现在HTML5还不规范,支持也少。最后引用岁月如歌的一段话:

关注是可以的。有时间(我觉得大部分人其实都没时间),去尝尝鲜也是有益的。但是对于大部分营养不良的前端,推荐还是脚踏实地老老实实的去学一门传统编程语言,去把数据结构/基础算法/设计模式/数据库等等基础知识点给搞瓷实了再说。这样,等 HTML9 出来的时候,对你而言,无非就是淘汰了一些旧 API, 增加了一些新 API 而已。

动态载入JavaScript以及它的load事件

动态载入JavaScript

动态载入JavaScript非常简单,代码演示如下:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'test.js';
head.appendChild(script);

侦测JavaScript是否载入

我们常常用JavaScript来给其它元素添加load事件,但如果给一个script自身添加load事件还真不是一件容易的事。对于非IE的高级浏览器来说和一般元素添加事件方法是一样的,代码演示如下:

script.onload=function(){
	// do something
};

但对于IE来说则要复杂一点,不能直使用onload,而要使用onreadystatechange事件,通过onreadystatechange事件来判断script元素的readyState属性是否等于complete或者loaded,从而来确认script元素是否已经载入。代码演示如下:

script.onreadystatechange=function(){
	if(this.readyState == 'loaded' || this.readyState == 'complete'){
		// do something
	}
};

readyState具有以下几个状态值:

  1. 0 : uninitialized
  2. 1 : loading
  3. 2 : loaded
  4. 3 : interactive
  5. 4 : complete

阅读全文

CSS中文字体转编码

转自悠悠左《Unicode – CSS中文字体转编码》

在制作网页的时候,为了兼容大部分浏览器,我们常常要求在CSS样式文档中不出现中文字体的,尤其是在{}中,因此通过参照下表将其对应转编,可以将中文名转成英文名。

注意unicode2是直接输出为文本的。

比如:微软雅黑,我们在CSS中的设置为:

.font01{
	font-family:"Microsoft Yahei";
}

也可以是对应的unicode形式:

.font02{
	font-family:"\5FAE\8F6F\96C5\9ED1";
}

但微软雅黑对应的unicode2微软正黑体写在样式文档里是没有效果的,因为unicode2是以文本形式输出的,这个可以将对应的unicode2放到html文档中尝试一下,对应输出微软雅黑四个字。

中文名 英文名 Unicode Unicode 2
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅黑
Office
隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶书
华文行楷 STXingkai \534E\6587\884C\6977 华文行楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新魏

attachEvent中this指针问题

IE中使用attachEvent给一个元素绑定行为时,事件中的this指针会指向window对象,而不是元素本身,但使用addEventListener或者以elem.onclick = someFunc这种形式绑定的行为则不会出现这种问题。解决的问题也很简单,就是通过call或者applythis指针引向元素自己,jQuery中也是这样做的。


var _ele = document.getElementById('myElement');
try{
	_ele.addEventListener('click',clickFunc,false);
}catch(e){
	try{
		_ele.attachEvent('onclick',function(){clickFunc.call(_ele)},false);
	}catch(e){};
}

这样函数clickFunc中的this指针就会指向被绑定行为的元素了。

用Dust-Me Selectors清理CSS文件

现在减少文件大小是前端的一项重要任务,对于jscss文件可以用软件去除里面的注释和空格来达到减少体积的目的。但是css文件还是有很多无用的代码,可以用Dust-Me Selectors来得到无用代码的名单,然后就可以按图索骥来清除它们。

  • 支持外链形式的样式表,如使用<link>@import外联到页面中的样式表,还包括<?xml-stylesheet?>处理结构里带的样式表。但是对于嵌入样式(在标签<style>内的样式)和内联(使用元素的style属性的行样式)的样式,是不支持的。
  • 支持IE条件注释语句。
  • 即可以检查单页,也可以检查整个站点。
  • 可以识别大部分的CSS2CSS3选择器,但可以识别所有的CSS1选择器。
  • 可以识别一般的CSShack,如:“* html #foo”会被当成“html #foo”。

Dust-Me Selectors

Dust-Me Selectors

Table的“min-height”属性

今天在制做页面时,需要对table元素里的td设置min-height属性,但怎么设置都没有效果。我想难道是和position属性一样,不能对table元素设置吗?搜索了一下这才恍然大悟,原来对于table元素,如thtd来说,使用height属性就等效于min-height属性了,如果表格内容高度大于所设定的高度值,表格会自己扩大高度以适应内容的。如:

td{
    height:300px; /* 等效于普通元素的 min-height */
}

HTML5的新标签

无论HTML5能否成为Flash的杀手,也不管现在它是否成熟,以目前的情况来看掌握它都是必需的。

HTML5添加了很多功能更强,也更语义化的标签,但也删除了一些HTML4的标签,如:fontcenterHTML5新引入的HTML元素包括:

阅读全文

3个IE Bug及其修复

节选自《10个糟糕的IE Bug及其修复》,正如文章名,文章列出了主要是IE 6的Bug以及其解决方法。有不少都是已经很熟悉的了,现在只列出里面的三个放在这里做下记号。

Bicubic图片缩放

IE中缩放图片会出现一些锯齿,显示效果不如其它浏览器。解决方法可以加入下面一段CSS代码:

img { -ms-interpolation-mode: bicubic; }

IFrame背景透明

要想在IE中把IFrame的背景设为透明,首先要把IFrameallowTransparency属性设置为true,如下:

<iframe src="content.html" allowTransparency="true">
</iframe>

还要在CSS代码中加入如下代码:

body {
    background-color:transparent;
}

禁用IE默认的垂直滚动条

默认情况下IE始终都会显示垂直滚动条,以前去除默认垂直滚动条的方法就是用JavsScript,现在看到这个方法更方便,只要在CSS代码中加入如下代码即可:

html {
    overflow: auto;
}

JavaScript面向对象编程中私有成员、静态成员的实现

JavaScript面向对象编程中私有成员、静态成员的实现要比JavaActionScriptPython要复杂的多,现在摘抄一些《JavaScript设计模式》中的代码来做演示。

私有属性和方法

var Book = function(newName){
    // 私有属性
    var name;

    // 私有方法
    function checkName(name){
        // ...
    }

    // 特权方法
    this.getName = function(){
        return name;
    };

    // 特权方法
    this.setName = function(newName){
        name = newName || 'No Name';
    };

    // 构造代码
    this.setName(newName);

};

var book01 = new Book('name01');
console.log(book01.getName()); // 输出 'name01'
book01.setName('newName01');
console.log(book01.getName()); // 输出 'newName01'

在本例中用var声明私有变量,这意味着它们只存在于Book构造器,checkName函数也是用同样的方法声明的,因此成了一个私有属性。

要想访问这些私有属性和方法的函数只需声明在Book中即可,这些方法称为特权方法(privileged method),它们是公有方法,为了能够在对象外部访问这些特权函数,它们的前面都要加上关键字this。其它任何不需要直接访问私有属性的方法都可以放在像Book.prototype中声明。

阅读全文

自定义表单控件脚本

fileselectradiocheckbox这样的表单控件很难直接用CSS自定义样式,在很多网站中不得不使用浏览器已定的样式。但设计师却很希望对这些表单控件也能够使用自定义的样式,以达到作品丰富美观统一的要求。要实现这种功能一般有两个办法,一个是使用Flash或者Silverlight来替换HTML表单元素。另一个简单方便的办法就是用JavaScript,以近乎障眼法的方式来进行模拟表单元素。而且用JavaScript的方式不会破坏原HTML页面的结构,保证页面的兼容性和可访问性。

Uniform

Uniform是基于jQuery的一个插件,如果你的网站已经在使用jQuery,那么用这个最合适。

Uniform

Niceforms

Niceforms不基于任何JavaScript框架,可以独立使用,而且体积小,是个轻量的应用。

Niceforms

JavaScript image combobox

JavaScript image combobox也是一款基于jQuery的一个插件,它和jQuery Accordion Common出自同一个人。JavaScript image combobox只能自定义select的样式,但是它可以为select的每一个选项定义一个图标。

JavaScript image combobox