(6) - iLeichun

8个PS设计技巧让图片获得新生

分类:Photoshop 来源:网络时间:2012-4-20 19:23:23

　　一：模糊背景

二：聚光灯效果

三、站出来

四、颜色呼应

五、轮廓效果

六、淡化区域

七、剪切及配色

八、线条引导

颜色数值——

阅读全文>>

浏览(8081) | 评论(0)

网页包含文件前面有空行问题的解决办法

分类:网站建设来源:网络时间:2012-4-20 19:15:57

页面采用UTF8编码，头部和尾部用了模板包含文件的方法，结果头部和尾部无端端各多出一个约10px的空行，什么也没有。

　　原因是全部采用utf8编码，包含文件的时候，最后的二进制流中包含了多次UTF8 BOM标记，IE不能正常解析包含多个UTF8 BOM 标记的页面，直接替换成实际显示的回车，这样导致一个空行，而firefox却没有这个问题。

　　故如果模板采用包含的方法包含多个utf8文件需要用ultraedit保存时另存为功能选择utf8 无bom格式保存即可。

　　另外，如果中文页面在html head标记中将title标记放在<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />前面会导致页面空白。

　　所以utf8页面应该使用标准顺序

BOM头：xEFxBBxBF，PHP4、5尚对BOM无视，所以在解析前直接输出。对此 w3.org 标准 FAQ 中对此问题有一个专门的描述：

http://www.w3.org/International/questions/qa-utf8-bom

具体如下:

在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符”ZERO WIDTH NO-BREAK SPACE”。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little- Endian的。因此字符”ZERO WIDTH NO-BREAK SPACE”又被称作BOM。

UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符”ZERO WIDTH NO-BREAK SPACE”的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。

Windows就是使用BOM来标记文本文件的编码方式的操作系统: WindowsXP Professional , 缺省字符集：中文

1） notepad ：可以自动识别出没有带 bom 的 utf-8 编码格式文件，但不可以控制保存文件时是否添加 bom ，如果保存文件，那么会统一添加 bom 。

2）editplus ：不能自动识别出没有 bom 的 utf-8 编码格式文件，文件保存时，选择UTF-8 格式，不会在文件头写上 BOM header.

3） UltraEdit ：对于字符编码的功能最为强大，可以自动识别带 bom 和不带 bom 的 utf-8 文件（可以配置）；保存的时候可以通过配置选择是否添加 bom.

（特别需要注意的是，保存一个新建立的文件时，需要选择另存为 utf-8 no bom 格式）

后来发现 Notepad ++ 也对于 utf-8 bom 支持比较好，推荐大家使用。

本文地址：http://www.bhcode.net/article/20080611/1340.html

阅读全文>>

浏览(8293) | 评论(0)

JSP网页源码中空行的去除方法

分类:Jsp 来源:网络时间:2012-4-20 19:07:39

在jsp使用了很多的Tag，虽然使用方便，页面也很整洁，但是所带来的问题也很令人头疼。例如，编译后输出的页面源码中会有很多的空白和空行，看上去既不美观，又占带宽，同时也不利于seo。

JSP2.1其实提供了一个很有用的命令，简单实用，Tomcat要6.0以上的版本支持：

<%@ page trimDirectiveWhitespaces="true" %>

或者

//顶部接着代码处

<%out.clear();%>

//继续下面的代码

这种方法是把前面的输出全部清除，但是这种方法会把它自己本身留下一个空行，所以不能完全清除。

阅读全文>>

浏览(7421) | 评论(0)

Firefox中Web开发的工具库一览

分类:网站建设来源:网络时间:2012-4-15 17:35:53

Firefox的目标之一就是尽可能地使web开发者的生活更简单高效，并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西。使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选项。本文将这些工具做了简单整理。

Firebug

迄今为止，最知名的web浏览器的web开发工具就是Firebug扩充套件。毫无疑问，在很长的一段时间，它把怎么进行开发和调试作为自己的门槛。Firebug是一个有很多强大的功能的重要工具，包括很多扩展。

Firefox为web开发提供的扩展

多年来，Firefox开发了许多扩展来帮助web开发者最大化利用Firefox。用得最多最有名的是下面列出来的这些。如果我们漏掉了对你有帮助的扩充套件，请一定告知我们。

Accessibility Evaluation Tool

web开发者提供测试web资源的辅助功能。

All in one Sidebar

AiOS允许你打开多个窗口作为侧栏面板，并能够在他们之间快速切换。AIOS结束了窗口混乱的时代，除了书签和历史记录外，它还在侧边栏增加了下载，加载项和其他的一些对话框。

Cache Status

使用它来对缓存进行监督和管理。

CacheToogle

通过点击开关，禁用浏览器的缓存。

Colorzilla

高级取色器，颜色选择器，渐变颜色生成器，和其他的一些进行颜色处理的工具。

Console²

Console²可能会成为下一代的错误控制台，用来取代JavaScript控制台。

从火狐v0.5开始就有控制台过滤扩展套件，之前该套件只在Console²网站上可用。

CSS Reloader

CSS Reloader使你能够重新加载网站的CSS，而需要重新加载网页。

DOM Inspector

DOM Inspector用来观察，编辑web文件或XUL应用正在使用的DOM。可以通过一个显示文件和节点的不同视图的两个小窗口拼起来的大窗口来查看DOM。

Firefogg

该插件用来编码Firefox中的视频和音频。用Firefogg吧大部分的媒体文件编码成Ogg和WebM。Firefox提供接口用来整合编码上传的程序。

FireFTP

FireFTP是一个免费，安全，跨平台的一个Mozilla FirefoxFTP/SFTP客户端，该客户端为访问FTP/SFTP提供简单直观的途径。

FireUnit

JavaScript Unit测试扩充套件。

FoxGuide

显示水平和竖直的不定浮动指南，与你在Photoshop使用到它的方式一样。有助于改进布局，将元素放在恰当的网格中，系统地放置元素，使设计更结构化。

FoxyProxy Standard

FoxyProxy是一个高级代理管理工具，它完全替代了Firefox的有限的代理性能。跟SwitchProxy相比，它提供更多的功能。

Geolocater

地理定位您需要的位置。

GreaseMonkey

通过Javascript自定义网页的显示方式和行为。

HTML Validator

HTMLValidator是个Mozilla扩充套件，它在Firefox和Mozilla中添加了HTML验证。HTML页面中的错误数量通过窗口上的按钮来显示。

HttpFox

一个用于Firefox的HTTP分析器插件

iMacros for Firefox

自动化火狐浏览器。记录和重现重复的工作。如果你喜欢Firefoxweb浏览器，但是厌倦了重复的工作，比如说每天访问同样的站点，填写重复的表格，还要记住密码，那么Firefox的iMacros就是你梦想的解决方式。

Jenkins Build Monitor

Monitor Jenkins（http://jenkins-ci.org）创建和显示Firefox状态栏中的状态。

jQuery extension

嵌入在浏览器中的jQuery and jQuery UI

JSONovich

使浏览器中的JSON的内容更容易阅读。

JSONView

在浏览器中查看JSON文档。

JSView

如果你浏览的网站包含外部的js/css文件，会出现一个有“SS”，“JS”或者两者都有的按钮，每个单独的文件都可以通过点击文件名进行查看。文件将会在一个新的窗口打开。

Link Widgets

通过给第一页，前一页，下一页，最后一页提供工具栏按钮来简化了页面序列的导航（比如，Web漫画，论坛，或者技术规范如HTML4建议）。

Live HTTP Headers

在浏览网页时查看HTTP标头。

LiveReload

当文件变化时，LiveReload就会更新网页。

Measure It

在网页上画一个尺子来查看宽度和高度或者以像素为单位对齐网页元素。

Modify Headers

添加、修改、过滤发送到web服务器上的请求头。这个加载项尤其适用于移动web的开发，HTTP测试和隐私保护。

NoScript

通过这个套件你可以获得web浏览器中最好的安全性能，它只允许你信任的网站播放动态内容，而且保护你免受XSS和Clickjacking的攻击。

PageSpeed

PageSpeed 是开源的，最早出现在Google上通过分析网页性能最佳实例来帮助开发者优化他们的网页。

PixelZoomer

PixelZoomer可以获取当前网站的截屏，并提供多个工具进行像素分析。利用这个工具你可以放大网页（最大可以放大32倍），测量距离，和获取颜色。

Pixlr Grabber

使用Pixlr Grabber使抓屏和从网页上抓取图片变得更容易。使用PixlrGrabber加载项，你只需要点击一下右键就可以复制，保存，分享，甚至可以编辑你抓取的图片或背景

Poster

这是一个开发者工具栏，用来跟web服务和其他web资源进行交互，允许你发出HTTP请求，设置实体主体和内容类型。Poster允许你与web服务进行交互并检视结果。

QuickJava

在状态栏和（或）工具栏中快速启用和禁用Java,Javascript,Flash,Sliverlight,Images,Stylesheets,he Proxy，而不需要打开任何对话！

Rainbow Color Tools

Web开发的颜色工具。选色，取色+保存颜色，并拖放这些颜色来尝试调配颜色。

Regular Expressions Tester

正则表达式的测试工具（用高亮色显示（包括子匹配））和新建表达式的助手。

Remove Cookie(s) for Site

这是一个非常简单的扩展套件，用来移除所有的正在打开网站。它在你的网页右键菜单中添加了一个选项，和一个清除Cookies按钮来完成操作，并在状态栏显示操作的状态。

Screenshot Pimp

只要点击一下，你就可以捕获，抓取，保存，下载或者复制你在web浏览器上看到的任何东西。Screenshot pimp是迄今为止最具有自主定义性和用户友好的屏幕捕获工具栏，这个工具栏能在Windows和Mac上使用。

SQLite Manager

管理你电脑上的SQLite数据库。

Selenium IDE Buttons

只需要一个简单的工具栏按钮就可以打开SeleniumIDE。你需要先安装SeleniumIDE：http://seleniumhq.org/projects/ide/

SeoQuake SEO extension

Seoquake是Firefox 的一个SEO套件，其主要目的是帮助网管优化搜索引擎，优化社交媒体，和Internet推广。Seoquake允许研究许多重要的SEO参数。

ShowIP

在状态栏中显示当前网页的IP地址。它也允许通过IP查询用户信息服务（右键）和主机姓名（左键）。另外，你可以把IP地址拷贝到粘贴板。

Stylish

用Stylish重设网页的样式，它是一个用户样式管理器。Stylish允许你很容易就可以为Google，Facebook，YouTube,Orkut和许多其他网站安装主题和皮肤。你甚至可以自定义Firefox和其他程序。

Tamper Data

用tempdata访问修改HTTP/HTTPS表头和发送参数。

TAW3

如果你想查看网站的可访问，只要点击这个按钮就可以做到。

Tilt 3D

基于WebGL的网页3D视觉效果。

TotalValidator

该套件对网页执行一系列的验证操作。这种多重验证包括外部，内部，本地网页验证，本地网页验证是通过一个从http://www.totalvalidator.com/downloads/extensiontool.html获得的桌面工具本地的拷贝进行的。

TryAgain

TryAgain一直在尝试着在无法连接服务器的时候加载网页。

User Agent Switcher

UserAgentSwitcher扩充套件添加了一个菜单和工具栏按钮，用来切换用户代理。

Wapplayer

Wapplayer是一个浏览器加载项，该加载项用来显示用在网站上的技术。

WebDevelop

WebDevelop扩充套件给浏览器添加了许多web开发工具。

Firebug extensions

在一些特殊的用例中用到一些Firebug的扩充套件，下面将列出其中的一部分：

Acebug

用Ace突出显示Firebug的命令行。

Code Coverage v2 for Firebug 0.1

这个Firebug扩充套件用来记录Javascript代码的覆盖率。

CSS Usage

Firebug 中能够查看使用了哪些CSS规则的扩充套件。

Firecookie

Firecookie是Firebug的一个扩充套件，该套件能够查看，管理你的浏览器里的cookies。

Firefinder

找到与选中的CSS选择器或者Xpath表达式匹配的HTML元素。

FirePHP

FirePHP允许你调用一个简单PHP方法将日志写入Firefox控制台。

FireQuery

Firebug为jQuery开发提供的插件。

Friendly bug

使Firebug更友好更简单易用。

Inline Code Finder for Firebug

Inline Code Finder 是Firebug的一个加载项，能够发现HTML元素中的一些问题：内联的 Javascript事件，内联的样式，是在链接的href属性中直接编写javascript代码。

FireRainbow

突出显示Firebud的Javascript的语法。

NetExport

NetExport是Firebug的扩展，该扩展允许输出所有NetPanel收集和计算的数据。已创建的文件使用HTTP文档格式（基于JSON）。

PixelPerfect

PixelPerfect是Firefox/Firebug的一个扩展，这个扩展允许web开发者和设计者用web组件轻松覆盖原来的HTML的头部.

YSlow

YSlow分析网页，并根据Yahoo！为高性能网站提供的规则来分析网站为什么运行缓慢。

来源：http://www.webapptrend.com/2011/12/589.html

阅读全文>>

浏览(8254) | 评论(0)

为什么空白区域在网页设计中如此重要

分类:网页设计来源:网络时间:2012-4-11 21:30:25

　在网页设计中，空白区域是指不同设计元素间的区域。文字之间、段落之间、图片之间、链接和页脚之间等的区域都是所谓的空白区域。空白区域并不一定是“白色的”，而是内容上的空白。

　　使用空白区域有助于浏览网站或网页的不同部分。不过设计的网页模板设计师通常低估了空白区域的重要性。空白区域减少了访客需要浏览，一气呵成的文字量。不同的视觉隔离设计元素都能有效地用于空白区域。有效地使用空白区域可以使网站模板干净利落并清新。让我们来探讨下有关网页设计空白区域（也称负空间）的几个方面。（编注：关于负空间，这里有《15个极具创意的负空间Logo》。）

　　聚焦

　　当设计一个网站模板时，设计师通常把空白区域用于组织文字、对比图片、聚焦和吸引访客的目光。这增加了浏览范围以及可浏览性。正空间——是图片和文字都被合适地放置，可以很好地突出负空间。空白区域也用于创造高价值品牌。同时，空白区域也是昂贵及高品质的代名词。

　　 空白区域的类型

　　网页设计中有两类空白区域。有效空白区域是有意留下好的结构和布局空间。同样，也用于突出内容。在网页设计布局时，留下无内容的网页或空白区域。这种区域被称为消极空白。

　　 行距（Line spacing）

　　当留有足够的行距，网页模板更具可读性并且便于浏览。假如行距太紧凑，就不便于浏览。而当行距太宽，字与字之间过于分开，会不易于访客阅读。借助CSS，可以达到标准行距。

　　行与行之间的距离也被成为—— 行距（leading）。这通常设置在标准字体的 120-150%，就10pts这类来说，12~15pt 为最佳。小于此间距可能会让副本不宜辨别或浏览。大于这个间距可能给访客浏览带来障碍。

　　 页面空白

　　在设计一个网页模板时，这是围绕一个特定元素的空间。这可以由CSS页面空白控制。尝试着与整个布局保持一致。间距一致也会使页面模板更专业有序。当考虑空白页面时，要考虑纵向和横向距离。

　　过大面积的空白会带来距离感。在设计网页模板时，你应该注意像素是否适合屏幕。设置过多的空白实属浪费。

　　当设计网页模板时，你需要确保文字没有与图片、侧边栏、导航以及页眉相左。必要的空白可以给访客一个休息的空间。网页设计常适用于800×600分辨率的屏幕。随着时间的推移，这也发展为1024×768.

　　标题

　　标题是可控制内容分隔的一种很好的方式。有H1、H2及H3等不同的类型。这可以强调不同的内容。标题上方或下方的空白区域对于分隔相关部分的内容是十分有用的。

　　 平衡布局

　　空白区域也具有平衡布局的作用。假如没有足够的空白区域，访客的眼睛就不能得到休息。网页设计应该保持开放空间和内容的平衡。网络营销机构发现，在错误区域过多的空白区域就像过高的页脚会误导用户。他们可能认为已经结束并离开页面。用户希望网页空白内容比印刷媒介中的少。

　　最近网页模板空白区域或负空间的设计都得到关注。它的存在或使用不是定义上的数量而是对于网页贡献的方式。

　　空白区域在网页模板设计中得到越来越多的重视。如今它被视为不可或缺的一部分而并非背景。不少网页模板设计师把它用于强调内容、增强网页可读性和平衡网页布局。改革和创新正在日益替代墨守成规和习俗。虽然适量地使用负空间有助于实现预期效果，但是过量使用弊大于利。

来源：http://blog.jobbole.com/1165/

阅读全文>>

浏览(6763) | 评论(0)

网页初学者易犯的7大错误

分类:网页设计来源:网络时间:2012-4-11 21:29:23

设计一个非常好的布局是一件非常不容易的事情，任何一个设计可能会取悦你，也可能让其它人厌恶。尽管这样，这里仍旧有些大家都承认的设计误区。我这里列出了一些布局设计的小技巧。

1. 空白区域不足

你应该保留一定得空白页面让访问者放松眼睛。很多设计者都想提供更多的内容在第一个页面。感觉初学设计的人更容易犯这个错误，但其实各个设计水平的人都有这个倾向。

2. 颜色搭配不当

一个很常见的错误就是使用高对比颜色创建一个富有视觉张力的设计。很多的对比设计都希望通过一种颜色的色彩和饱和度重点突出最重要的部分。这里有一个小花招非常不错：降低你的颜色饱和度，如果各个元素之间的区别非常清晰的话，那就足够了。

3. 单个页面元素过多

一个拥有信息太多内容的网站，例如，插入太多的图标，按钮和图片将会非常难以浏览。因此会让用户的易用度大打折扣。

4. 图片缺少含义

一个图片可能抵得过成百的文字，但是如果这些文字都是批评你的话，你的布局设计就有问题了。书写的内容，布局和图片应该组合使用，并不是分离的实体。图片应该能有效的说明网站需要表达的信息及其选择，这是一个设计时最初需要考虑的因素。

5. 排版混乱

如果说一个简单演讲是网站的其中一个特殊目地的话，字体排版就是一个关键的因素。另外一个问题是大家如何理解字体排版，它不是一个简单的如何选择字体的过程，它决定了句子、段落及其标题的组织方式。

6. 没有照顾所有人的使用感受和可用性

一个可用性差的网站是一个自私设计者的作品。实际上可用性的使用并不是个高科技的东西。例如，你只需要简单的加上alt标签属性，这并不会带来任何麻烦。

7. 前期准备不足

缺乏经验使得我们不停的修改自己的东西。一个聪明的设计者会在最开始的时候思考整个布局的大概设计。这种方式可以省去很多时间和资源。很明显，在实际做之前思考是一件很不容易的事情，不可能不去修改任何设计，但是至少能够帮助我们尽量少的去修改我们的设计。

来源：http://www.gbin1.com/tools/design/201111217bigmistakesthatmakeyourlayoutadisaster/

阅读全文>>

浏览(6493) | 评论(0)

再谈javascript面向对象编程

分类:JavaScript 来源:网络时间:2012-4-11 21:28:00

虽有陈皓《Javascript 面向对象编程》珠玉在前，但是我还是忍不住再画蛇添足的补上一篇文章，主要是因为javascript这门语言魅力。

吐槽Javascript

初次接触Javascript，这门语言的确会让很多正规军感到诸多的不适，这种不适来自于Javascript的语法的简练和不严谨，这种不适也来自Javascript这个悲催的名称，我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤，人们都认为他是Java的附属物，一个WEB玩具语言。因此才会有些人会对Javascript不屑，认为Javascript不是一门真正的语言，但是这此他们真的错了。Javascript不仅是一门语言，是一门真真正正的语言，而且他还是一门里程碑式的语言，他独创多种新的编程模式原型继承，闭包（作者注：闭包不是JS首创，应该Scheme首创，prototypal inheritance 和 dynamic objects 是self语言首创，Javascript的首创并不精彩,谢谢网友的指正。），对后来的动态语言产生了巨大的影响。做为当今最流行的语言（没有之一），看看git上提交的最多的语言类型就能明白。随着HTML5的登场，浏览器将在个人电脑上将大显身手，完全有替换OS的趋势的时候，Javascript做为浏览器上的一门唯一真真的语言，如同C之于 unix/linux，java之于JVM，Cobol之于MainFrame，我们也需要来重新的认真地认识和审视这门语言。另外Javascript的正式名称是：ECMAScript，这个名字明显比Javascript帅太多了！

言归正传，我们切入主题——Javascript的面向对象编程。要谈Javascript的面向对象编程，我们第一步要做的事情就是忘记我们所学的面向对象编程。传统C++或Java的面向对象思维来学习Javascript的面向对象会给你带来不少困惑，让我们先忘记我们所学的，从新开始学习这门特殊的面向对象编程。既然是OO编程，要如何来理解OO编程呢，记得以前学C++，学了很久都不入门，后来有幸读了《Inside The C++ Object Model》这本大作，顿时豁然开朗，因此本文也将以对象模型的方式来探讨的Javascript的OO编程。因为Javascript 对象模型的特殊性，所以使得Javascript的继承和传统的继承非常不一样，同时也因为Javascript里面没有类，这意味着Javascript里面没有extends,implements。那么Javascript到底是如何来实现OO编程的呢？好吧，让我们开始吧，一起在Javascript的OO世界里来一次漫游

首先，我们需要先看看Javascript如何定义一个对象。下面是我们的一个对象定义：

    
            var o = {};

还可以这样定义一个对象

    
            function f() { 
}

对，你们没有看错，在Javascript里面，函数也是对象。
当然还可以

    
            var array1= [ 1,2,3];

数组也是一个对象。
其他关于对象的基本的概念的描述，还是请各位亲们参见陈皓《Javascript 面向对象编程》文章。
对象都有了，唯一没有的就是class，因为在Javascript里面是没有class关键字的，算好还有function，function的存在让我们可以变通的定义类，在扩展这个主题前，我们还需要了解一个Javascript对象最重要的属性，__proto__成员。

proto成员

严格的说这个成员不应该叫这个名字，__proto__是Firefox中的称呼，__proto__只有在Firefox浏览器中才能被访问到。做为一个对象，当你访问其中的一个成员或方法的时候，如果这个对象中没有这个方法或成员，那么Javascript引擎将会访问这个对象的__proto__成员所指向的另外的一个对象，并在那个对象中查找指定的方法或成员，如果不能找到，那就会继续通过那个对象的__proto__成员指向的对象进行递归查找，直到这个链表结束。
好了，让我们举一个例子。
比如上上面定义的数组对象array1。当我们创建出array1这个对象的时候，array1实际在Javascript引擎中的对象模型如下：

array1对象具有一个length属性值为3，但是我们可以通过如下的方法来为array1增加元素：

    
            array1.push(4);

push这个方法来自于array1的__proto__成员指向对象的一个方法(Array.prototye.push())。正是因为所有的数组对象（通过[]来创建的）都包含有一个指向同一个具有push,reverse等方法对象(Array.prototype)的__proto__成员，才使得这些数组对象可以使用push,reverse等方法。

那么这个__proto__这个属性就相当于面向对象中的”has a”关系，这样的的话，只要我们有一个模板对象比如Array.prototype这个对象，然后把其他的对象__proto__属性指向这个对象的话就完成了一种继承的模式。不错！我们完全可以这么干。但是别高兴的太早，这个属性只在FireFox中有效，其他的浏览器虽然也有属性，但是不能通过__proto__来访问，只能通过getPrototypeOf方法进行访问，而且这个属性是只读的。看来我们要在Javascript实现继承并不是很容易的事情啊。

函数对象prototype成员

首先我们先来看一段函数prototype成员的定义，

When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object
当一个函数对象被创建时，这个函数对象就具有一个prototype成员，这个成员是一个对象，这个对象包含了一个构造子成员，这个构造子成员会指向这个函数对象。

例如：

    
            function Base() { 
    this.id = "base"
}

Base这个函数对象就具有一个prototype成员，关于构造子其实Base函数对象自身，为什么我们将这类函数称为构造子呢？原因是因为这类函数设计来和new 操作符一起使用的。为了和一般的函数对象有所区别，这类函数的首字母一般都大写。构造子的主要作用就是来创建一类相似的对象。

上面这段代码在Javascript引擎的对象模型是这样的

new 操作符

在有上面的基础概念的介绍之后，在加上new操作符，我们就能完成传统面向对象的class + new的方式创建对象，在Javascript中，我们将这类方式成为Pseudoclassical。
基于上面的例子，我们执行如下代码

    
            var obj = new Base();

这样代码的结果是什么，我们在Javascript引擎中看到的对象模型是：

new操作符具体干了什么呢?其实很简单，就干了三件事情。

    
            var obj  = {}; 
obj.__proto__ = Base.prototype; 
Base.call(obj);

第一行，我们创建了一个空对象obj
第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行，我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法，请参看陈皓《Javascript 面向对象编程》文章
如果我们给Base.prototype的对象添加一些函数会有什么效果呢？
例如代码如下：

    
            Base.prototype.toString = function() { 
    return this.id; 
}

那么当我们使用new创建一个新对象的时候，根据__proto__的特性，toString这个方法也可以做新对象的方法被访问到。于是我们看到了：
构造子中，我们来设置‘类’的成员变量（例如：例子中的id），构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符，模拟出类和类实例化的效果。

Pseudoclassical 继承

我们模拟类，那么继承又该怎么做呢？其实很简单，我们只要将构造子的prototype指向父类即可。例如我们设计一个Derive 类。如下

    
            
            function Derive(id) { 
    this.id = id; 
} 
Derive.prototype = new Base(); 
Derive.prototype.test = function(id){ 
    return this.id === id; 
} 
var newObj = new Derive("derive");

        

这段代码执行后的对象模型又是怎么样的呢？根据之前的推导，应该是如下的对象模型

这样我们的newObj也继承了基类Base的toString方法，并且具有自身的成员id。关于这个对象模型是如何被推导出来的就留给各位同学了，参照前面的描述，推导这个对象模型应该不难。
Pseudoclassical继承会让学过C++/Java的同学略微的感受到一点舒服，特别是new关键字，看到都特亲切，不过两者虽然相似，但是机理完全不同。当然不关什么样继承都是不能离不开__proto__成员的。

Prototypal继承

这是Javascript的另外一种继承方式，这个继承也就是之前陈皓文章《Javascript 面向对象编程》中create函数，非常可惜的是这个是ECMAScript V5的标准，支持V5的浏览器目前看来也就是IE9，Chrome最新版本和Firefox。虽然看着多，但是做为IE6的重灾区的中国，我建议各位还是避免使用create函数。好在没有create函数之前，Javascript的使用者已经设计出了等同于这个函数的。例如：我们看看Douglas Crockford的object函数。

    
            
            function object(old) { 
   function F() {}; 
   F.prototype = old; 
   return new F(); 
} 
var newObj = object(oldObject);

        

例如如下代码段

    
            
            var base ={ 
  id:"base", 
  toString:function(){ 
          return this.id; 
  } 
}; 
var derive = object(base);

        

上面函数的执行后的对象模型是：

如何形成这样的对象模型，原理也很简单，只要把object这个函数扩展一下，就能画出这个模型，怎么画留给读者自己去画吧。
这样的继承方式被称为原型继承。相对来说要比Pseudoclassical继承来的简单方便。ECMAScript V5正是因为这原因也才增加create函数，让开发者可以快速的实现原型继承。
上述两种继承方式是Javascript中最常用的继承方式。通过本文的讲解，你应该对Javascript的OO编程有了一些‘原理’级的了解了吧

参考:

《Prototypes and Inheritance in JavaScript Prototypes and Inheritance in JavaScript》
Advance Javascript （Douglas Crockford 大神的视频，一定要看啊）

题外话：

web2.0后，web应用可谓飞速发展，如今在HTML5发布之际，浏览器的功能被大大强化，我感觉Browser远远在不是一个Browser那么简单了。记得C++之父曾经这样说过JAVA，JAVA不是跨平台，JAVA本身就是一个平台。如今的Browser也本身就是一个平台了，好在这个平台是基于标准的。如果Browser是平台，由于Browser安全沙箱的限制，个人电脑的资源被使用的很少，感觉Browser就是一个NC（Network Computer）？我们居然又回到了Sun最初提出的构想，Sun是不是太强大了些？

来源：http://coolshell.cn/articles/6668.html

阅读全文>>

浏览(8313) | 评论(0)

实现并列布局的7种方式

分类:CSS 来源:网络时间:2012-4-11 21:25:50

首先说明要求,实现3个容器并列布局,如下图所示:

这种题在web前端css部分笔试题中经常出现.通过这题能考察出应聘者对css的掌握程度,其考察的面非常广.公司里刚来的前端我也给他出了这样一题,不过我说的至少写出3种实现方式.当时自己想到的有5种实现方式,后来回来一总结才发现可以有7种实现方式满足上述要求,但不限于7种.我目前只能想到这几种.所以特做总结,和大家分享.

1.最常用的方式:float

这是最常用的一种方式,利用float属性向左或右浮动便可实现。

主要html代码：

    
            <DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV>

主要css代码：

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    float:left; 
    margin:20px; 
}

        

2.利用table布局实现
这也算是很早以前较常使用的方式。
主要html代码：

    
            <TABLE><TBODY><TR><TD><DIV id=c1></DIV></TD><TD><DIV id=c2></DIV></TD><TD><DIV id=c3></DIV></TD></TR></TBODY></TABLE>

3.使用position:absolute绝对定位实现
主要html代码：

    
            <DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV>

主要css代码：

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    position:absolute; 
} 
#c1{ 
    top:20px; 
    left:20px; 
} 
#c2{ 
    top:20px; 
    left:260px; 
} 
#c3{ 
    top:20px; 
    left:500px; 
}

        

4.利用position:relative相对定位实现
主要的css代码:

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    position:relative; 
} 
#c2{ 
    top:-400px; 
    left:240px; 
} 
#c3{ 
    top:-800px; 
    left:480px; 
}

        

5.利用display:inline-block实现
对于这种方式,有高手推荐完全用这个属性来取代float.大家自行斟酌吧。
主要的css代码:

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    margin:20px; 
    display:inline-block; 
}

        

6.利用display:table来实现
该方法类似于table布局实现.
主要html代码：

    
            
            <DIV id=container> 
<DIV id=row> 
<DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV> 
</DIV> 
</DIV>

        

主要的css代码:

    
            
            #container{ 
    display:table; 
} 
#row{ 
    display:table-row; 
} 
#c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    border-right:40px solid #fff; 
    display:table-cell; 
}

        

7.利用css3新属性column实现
这种方法可能是大家最陌生的一种,ie8及以下浏览器都不支持。
主要html代码：

    
            <DIV id=container> 
<DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV> 
</DIV>

主要的css代码:

    
            
            #container{ 
    width:700px; 
        -webkit-column-count: 3; 
        -webkit-column-gap: 20px; 
        -webkit-column-width: 200px; 
  
        -moz-column-count: 3; 
        -moz-column-gap: 20px; 
        -moz-column-width: 200px; 
  
        column-count: 3; 
        column-gap: 20px; 
        column-width: 200px; 
} 
#c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
}

        

希望大家能给出更多的实现方案以前分享.博客也很久没更新了,主题最近一段时间也没进展.

来源：http://gulangfish.com/?p=768

阅读全文>>

浏览(7656) | 评论(0)

select的最佳预设（reset）

分类:网站建设来源:网络时间:2012-4-11 21:23:08

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要外形CSS属性的支持，打造全兼容select。

我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如链接图片各浏览器DEMO外观

我们可以得出以下研究属性。

	ie6	ie7	ie8	ie9	ff	ch	sf	op
默认高度	22px	22px			19px	20px	19px	19px
height	F	T	T	T	T	T	F	T
padding	F	F	T	T	T	T	F	T
line-height	F	F	F	F	F	F	T	F
文字垂直居中	T	T	T	F	F	T	T	T

通过上述的研究成果属性汇总，我们知道IE6是无论如何设置都是固定高度为22px不变的，而其他浏览器除safari都是支持height属性的，那么我们设置 height:22px。那么现在我们修正一下safari浏览器，，我们发现仅有safari支持line-height属性那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下设置 line-height:22px,最后FF和IE9里面的文字不居中，对其设定 padding:2px 0,我们发现FF和IE9都居中了，但是各个浏览器的select的高度也并没有增加，那么这里有点疑问，在高度设定的情况下，小量数字的padding不增加整体高度？

下面是全兼容代码示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<div style="margin-top:20px; margin-left:20px; background:#000">
<select>
    <option>演示问题一</option>
    <option>演示问题二</option>
    <option>演示问题三</option>
</select>
</div>
</body>
</html>

来源：http://ued.ctrip.com/blog/?p=3229

阅读全文>>

浏览(6583) | 评论(0)

CSS线性渐变linear-gradient

分类:CSS 来源:网络时间:2012-4-11 21:21:33

今天分享一个CSS的线性渐变功能，比较舒服，比起用图片来，方便不少！！

要创建一个线性渐变，关键在于设置一个渐变的方向和渐变的起止颜色！

这里直接给出一个示例，兼容各大主流浏览器，其中IE用了滤镜！

<style>
.nuodou_com{/* 背景色渐变 兼容不同内核浏览器 */
    background:-webkit-gradient(linear,left top,left bottom,from(#ff0000),to(#0000ff));
    background:-moz-linear-gradient(top,#ff0000,#0000ff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=¹#ff0000¹,endColorstr=¹#0000ff¹);
    background:-o-linear-gradient(top,#ff0000,#0000ff);
    background:linear-gradient(top,#ff0000,#0000ff)
}

.box-border{ border:1px solid #ccc; width:200px; height:200px; line-height:30px; }
</style>

<div class="box-border nuodou_com"> </div>

如下图：

来源：http://www.nuodou.com/a/186.html

阅读全文>>

浏览(7633) | 评论(0)