最近一段时间学习到的几个知识点总结

三月 25th, 2010

IE7下图片缩小失真的解决办法

微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property

img { -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */ }

浏览器

版本号

提供CSS属性

Internet Explorer

7.0

-ms-interpolation-mode: bicubic | nearest-neighbor

仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性

Firefox (Gecko)

3.6(1.9.2)

image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges

其他浏览器没有相关的样式

外部引入CSS 的两种方式link和@import的区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import

DTD相关总结

以前一直认为DTD的声明会影响浏览器对页面的渲染模式，直到发现淘宝的新版首页DTD的声明为<!doctype html>，才开始仔细思考和验证这个问题。

声明为Strict.dtd还是Transitional.dtd，在目前的浏览器（请注意发布这篇文章的时间，不保证你看到的时候已经有了新的变化）看来是没有什么区别的。理论上Strict.dtd比Transitional.dtd或者loose.dtd要严格多了，很多元素在strict.dtd里面都不能使用。然而事实上浏览器的兼容以前的版本，通常那些不支持的元素都能正确的展现。

例如iframe这个TAG在strict.dtd里面并不存在，但即使你的DOCTYPE里面声明了strict.dtd，然后使用了iframe这个TAG，浏览器(包括IE7，IE8，FF3.0，Safari 3.0)都能够正确地显示你的文档。目前能够保证你的文档是符合strict.dtd还是Transitional.dtd的，只能通过一些网上的Validator，如W3C Validator来分析。当然，实际上如果你能够严格按照你声明的DTD来书写你的文档，那是最好的，这样保证了以后浏览器对DTD严格遵守的时候，你的文档不会产生错误。

而DTD里面声明是xhtml 还是html其实起不了什么作用，起决定作用的是服务器端提供这个文档的格式。如果服务器端是以”text/html”来提供这个文档的，那么浏览器就会一html来解析，如果是以”application/xhtml+xml“来提供的，那么浏览器会已xhtml的方式来解析。当然，绝大多数时候，服务器端都是以”text/html”来提供的。

总结：

浏览器如何解析文档取决于服务器以什么格式来提供这个文档。如果你的文档是以”text/html”的方式来提供的，那么你就应该声明为HTML。假如你想要让IE7能够正确地显示，那么你就更应该这么做了。(事实上绝大多数服务器端程序都是以这种方式提供的。)
如果你的文档声明为XHTML，那么服务器端提供文档时就应该以”application/html+xml”的方式来提供。
尽量在你的文档前面声明DOCTYPE和DTD，这样能够保证你不是以Quirks Mode的方式来渲染文档的，并且保证向后的兼容性。
如果你声明了DTD，那么就要严格按照DTD的要求来书写你的文档。特别是如果你声明了Strict.dtd，那么你应该注意哪些元素是不能够使用的，当然你也可以为了节省服务器资源像淘宝那样只声明一个<!doctype html>，甚至和google一样连结束的</body></html>标签都不写，但我通常不建议这么干。

Posted in XHTML+CSS | Tags: @import, css, DTD, link, 图片 | 1 Comment »

介绍javascript 中Object的几个方法

三月 23rd, 2010

hasOwnProperty(property)

判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(“name”)），返回布尔值。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

如下代码：

var s =”";

alert(s.hasOwnProperty(“split”)); èreturn false

alert(String.prototype.hasOwnProperty(“split”));èreturn true

isPrototypeOf(object)

判断该对象是否为另一个对象的原型。

obj1.isPrototypeOf(obj2);

obj1是一个对象的实例；obj2是另一个将要检查其原型链的对象。原型链可以用来在同一个对象类型的不同实例之间共享功能。如果obj2的原型链中包含obj1，那么isPrototypeOf 方法返回 true。如果obj2不是一个对象或者obj1没有出现在obj2中的原型链中，isPrototypeOf 方法将返回 false。

propertyIsEnumerable()

判断给定的属性是否可以用 for…in 语句进行枚举,返回布尔值。

toString()

返回对象的原始字符串表示。对于 Object 对象，ECMA-262 没有定义这个值，所以不同的 ECMAScript 实现具有不同的值。

toLocaleString()

在Object中和toString()方法的实现方式一样，但在其他类中有特定的实现，如在Date中，toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

valueOf()

返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 toString() 的返回值相同。

以上6个方法都是Object.prototype上定义的，ECMAScript 中的所有对象都由Object继承而来，所以在ECMAScript上的所有对象都具有以几个方法。

Posted in Javascript | Tags: hasOwnProperty, Javascript, Object | No Comments »

javascript 小测试

三月 1st, 2010

javascript小测试，弄清楚这些题目可以帮助你更好的理解javascript语言的一些特性，比如运算符的优先级、作用域链、强制数据转换、函数表达式等。

点击这里有这些题的运算结果。

先看题：

example 1

    var num1 = 5,
    num2 = 10,
    result = num1+++num2;
    rusult 的值是多少，num1和num2 的值分别是多少？

example 2

    var x = 5,
        o = {
            x: 10,
            doIt: function doIt(){
                var x = 20;
                setTimeout(function(){
                    alert(this.x);
                }, 10);
            }
        };
    o.doIt();

example 3

   var num1 = "10",
    num2 = "9";
    num1 < num2 的值是?
    +num1 < num2 的值是?
    num1 + num2 的值是?
    +num1 + num2 的值是?

example 4

  var message = "Hello world!";
    message.substring(1, 4)值是?
    message.substr(1,4)值是?

example 5

    var o = {
        x: 8,

        valueOf: function(){
            return this.x + 2;
        },
        toString: function(){
            return this.x.toString();
        }
    },
    result = o < "9";
    alert(o);
    result 的结果是？
    alert 打印的结果是？

example 6

      (function(){
          return typeof arguments;
        })();

example 7

        var f = function g(){ return 23; };
        typeof g();

example 8

  (function(x){
        delete x;
        return x;
    })(1);

example 9

    var y = 1, x = y = typeof x;
    x的值是？

example 10

    (function f(f){
        return typeof f();
    })(function(){ return 1; });

====================================分割线====================================

解答：

example 1

result 的值是15，num1为6,num2为10
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ — – ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ – +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

很明显，”++”为一元运算符，优先级要高于”+”加法运算符。所以，result=num1+++num2 等价于 result = (num1++)+num2,又因为++运算符后置，后缀式运算符是在计算过包含它们的表达式后才进行增量或减量运算的。所以result 的值是15。

example 2

该题的结果是5.涉及到了作用域链（JavaScript scope）的知识，setTimeout 中的函数的的scope会放入global scope， “this”指向window,所以会找到全局变量x。

example 3

字符串比较大小，会把字符转换为ASCII 码来对比，是逐个字符比较，如果相等，再比较下一个字符，否则返回比较结果。“10”的第一个字符‘1’比‘9’的ASCII要小。所以，”10″<”9″会返回 true.

字符串前面的”+”运算符会把字符串转换为数字。当一个是字符串变量,一个是数字比较大小时，这里还包括字符串变量是数字还是字母。当字符串是数字时,ECMAscript规定自动转换为数字类型,当是字母时,转换为数字时会转换为NaN,当NaN和数字比较时不论大小都返回false。

example 4

substring(index1,index2)的第二个参数是截取结束字符的index值。

substr(index1,length) 的第二个参数是截取的字符串的长度。

注：substr() 在ECMA中已建议弃用

example 5

在javascript中，object的prototype中已有两个方法valueOf和toString,前者在获取对象的值时自动调用，后者在转换为字符串的时候自动调用。该题中对象o重写了这两个方法，所以result=o<”9″ 调用了o的valueOf方法，转换为result =10<”9″,根据第二题，9自动会转换为数字，所以返回为false.而在执行alert(o)时，会自动调用toString方法，打印出来是8

example 6

标识符arguments本质上是个局部变量，在每个函数中都会被自动声明并被初始化,是一个特殊的数组，继承自object，typeof 打印出来为“object”.

example 7

在IE下返回为number,在FF下报“ReferenceError: g is not defined”的异常。具体情况还未知，有知道的告诉我。

example 8

通过var声明的变量和通过function声明的函数拥有DontDelete特性，无法被删除.详细可参考这篇文章。

example 9

x值为undefine(而不是报异常)，JavaScript引擎会优先解析var变量和function定义。在预解析完成后，才会执行代码。详见lifesinger的《JavaScript运行机制浅探》

example 10

number,注意f后面那个括号。

Posted in Javascript | Tags: Javascript, quiz, 测试 | 3 Comments »

收藏：《Don’t make me think》笔记

二月 22nd, 2010

很多年前就看过《Don’t make me think》的第一版，第二版在书架上很久了，这两天才翻看。温故知新，笔记如下：

某个东西越是需要投入大量时间（或者看起来会这样），它将来用到的可能性越小。
可用性第一定律：别让我思考。
我们使用web的第一个事实：我们不是阅读，而是扫描，一般会关注“与手头任务有关的”或者“当前或接下来的个人兴趣”或者“长久的兴趣，如免费、美女等”这些文字和短语。（老邓注：所以，别老想着在首页上放一大段自吹自擂的话了，那是自恋）
我们使用web的第二个事实：我们不作最佳选择，而是满意即可。
我们使用web的第三个事实：我们不是追根究底，而是勉强应付，很少有人花时间读说明书，大家总是贸然前进勉强应付，一旦发现某个方法能够用，即使很难用，也不愿意再主动去找另一种更好的方法，这不是智力问题，而是并不认为这个网站对自己有那么的重要。（老邓注：所以，别老想着用Flash去制作一个“预订流程说明”了，那是单恋）。
让页面不易理解的一个最大原因是视觉噪声，设计的时候可以先假定所有内容都是噪声，除非得到证明它不是。
大多数页面上的大部分文字都不过是在占地方，因为没有人打算阅读它们。但它们确实在那儿，所以会暗示你可能需要阅读它们，这样常常使得页面看起来难度更高了。去掉没有人看的文字能降低页面噪声，从而让有用的内容更突出，人们更加愿意阅读。（老邓注：这就是设计中常说的“少即是多”，加文字的时候需要反问“是想给客户看的还是只是为了立此为证以便后面和客户理论？”）P34页有一个非常好的精简案例，精简幅度60%。
如果你想为我提供选项来调整搜索的范围，在它有用的时候再提供给我——当我到达搜索结果页面，发现搜索全部内容得到的结果太多的时候，这时就需要缩小搜索范围。
共有区域的悲剧（The Tragedy of the Commons）。任何共享的资源（共有区域）都会因为过度使用而遭到破坏。（老邓注：这就是首页上为什么广告越来越多、内容越来越乱的原因）
从焦点小组了解到的是你在设计网站之前就应该了解的，别把焦点小组和可用性测试弄混了。详细的区别见P100页。
每轮可用性测试只测试三名用户，以保证尽快进行下一轮，多进行几轮。测试对象是谁并不重要，对于大部分网站而言，你只需要懂得上网基本知识的用户就可以了。
推荐屏幕录制软件Camtasia，它是TechSmith公司的产品，和SnagIt出于同一家公司。只需要300美元。再加1000美元，可以买到该公司的另一个产品Morae，它允许观察者在另一台电脑上看到真实测试情况。
测试中有两部分内容：理解测试，看看用户是否理解这个网站；任务测试，看看用户是怎么完成一些任务的。
P109-P113页是很值得一读的用户测试对话范例。
P115页，关于Kayak（皮划艇）问题。Kayak问题总是存在，因为有些含混之处总是没有简单的解决办法，比如“港澳台酒店”应该放在“国内酒店”里还是“国际酒店”里，可能我们会觉得放到两个分类里。笔者的建议是一个项目最好只在一个地方存在，其他位置用链接“参见……”来标出。
要抵制添加的冲动。当在测试时清楚地看到人们没有理解某些内容时，大部分人的第一反应是增加一些内容，例如一些注释或一些指导说明。而正确的解决方案往往是去除某个（一些）让人混淆的内容，而不是增加另一些干扰。
隐藏客户服务电话、运费、价格信息，会降低客户好感。隐藏电话的初衷是希望用户不打电话，通常这样做会降低用户的好感程度，而且他们找到号码并拨打时会更恼火。另一方面，如果电话很容易看到，他们知道在需要的时候可以拨打，会让人们在网站上停留的时间更长，从而增加了他们自己解决问题的可能性。
人们喜欢对网站的外观发表意见，但是几乎没有人会因为觉得它不够好看而离开。（老邓注：不过，根据《情感化设计》，更赏心悦目的网站，能增加用户忍受度，使用户更加愿意探索）
向用户询问不必要的信息可能产生三个后果：您得到的表单更少；您常常无法得到真实数据；您的网站形象下降。

源地址：http://www.raydeng.com/%E3%80%8Adont-make-me-think%E3%80%8B%E7%AC%94%E8%AE%B0.html

Posted in 用户体验 | Tags: Don’t make me think, 收藏, 笔记 | No Comments »

Android 学习笔记（1）–布局方式

一月 5th, 2010

今天终于收到了《Google Android SDK 开发范例大全》，迅速的配置好了开发环境，写了一个hello world。

发现这本书完全是围绕示例来写的，完全没有系统的总结，我就把学到的内容加上网上的搜索把一些知识点总结一下，记录再这里，方便自己以后开发的时候查询。

Android 的layout是通过xml配置的（这让我想起了Flex中的界面），而且也有样式表（不是css，也是一个xml）。

一段布局代码：

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android“
android:orientation=”vertical” android:layout_width=”fill_parent”
android:layout_width = “fill_parent”
android:layout_height=”fill_parent”>
<TextView android:layout_width=”full_parent” //宽度与父容器一样（也就是和屏幕宽度一样）
android:layout_heigth =”wrap_content” //高度自适应
android:text=”hello world!”
/>
</LinearLayout>

Android 的布局类型有五种：

FrameLayout：框架布局，这个布局浏览单张图片的时候很合适，放入其中的所有元素都被放置在FrameLayout区域最左上的区域，而且无法为这些元素指定一个确切的位置。如果一个FrameLayout里有多个子元素，那么后边的子元素的显示会重叠在前一个元素上。这个布局方式的宽与高的参数一般是用wrap_content。
LinearLayout：线性布局管理器，只能进行单行布局，是由参数android:orientation(方位)决定的，分为水平和垂直两种（或者说是行与列两种），vertical表示竖直排列，horizontal表示横向排列。
TableLayout：任意行和列的表格布局管理器。其中TableRow代表一行，TableRow的每一个视图组件代表一个单元格。
AbsoluteLayout：绝对布局管理器，坐标轴的方式，这个很好理解，左上角是（0，0）点，往右x轴递增，往下Y轴递增,组件定位属性为android:layout_x 和 android:layout_y来确定坐标。
RelativeLayout：相对布局管理器，根据另外一个组件或是顶层父组件来确定下一个组件的位置。

再看一个采用TableLayout布局的例子（3行2列）：

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android“
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:stretchColumns=”1″>
<TableRow>
<TextView android:text=”用户名:” android:textStyle=”bold” android:gravity=”right” android:padding=”3dip” />
<EditText android:id=”@+id/username” android:padding=”3dip” android:scrollHorizontally=”true” />
</TableRow>
<TableRow>
<TextView android:text=”登录密码:” android:textStyle=”bold” android:gravity=”right” android:padding=”3dip” />
<EditText android:id=”@+id/password” android:password=”true” android:padding=”3dip” android:scrollHorizontally=”true” />
</TableRow>
<TableRow android:gravity=”right”>
<Button android:id=”@+id/cancel” android:text=”取消” />
<Button android:id=”@+id/login” android:text=”登录” android:layout_width=”wrap_content” android:layout_height=”wrap_content”/>
</TableRow>
</TableLayout>

Posted in 移动平台 | Tags: 布局, 移动平台 | 1 Comment »

img标签src为空的陷阱

一月 2nd, 2010

把页面中的img标签的src设置为“”存在巨大的风险，无论是在html中写入

还是在js中写入

var img = new Image(); img.src = “”;

出现一次这样的标签会导致向你的服务器多做一次请求。

在IE中，这样做会请求一次当前页面所在的目录。如在http://playgoogle.com/demo/a.html 中出现这种空src的标签，会导致重新请求一次://playgoogle.com/demo/
在Safari 和 Chrome中，将请求当前页面本身。
在Firefox 3.5以前的版本中，有和Safari同样的问题，但是在3.5中修正了这个BUG。
在Opera 中，不会做额外的请求。

在一个访问量不高的网站中，多一个这样的请求也无所谓（甚至可以让你的网站浏览看上去翻番），但在一个千万级访问量甚至更高的WEB站点里，这样会导致你的服务器和带宽的成本显著增加。另外一个隐患是，重新请求某个页面可能会导致用户的一些信息被无意中修改，例如cookies，或者ajax操作。

你永远不会写出这样的代码？

我并不这么认为，很多时候这种情况在无意中出现，比如下面这段php代码：

<img src="$imageUrl" >

你原计划是从服务器端读取这个src地址，但是由于某个原因，这个地址还未设置，或者代码的BUG导致读取失败，就会出现空的src标签。

其他的标签中的空src会不会导致这样的问题？

好消息是，在IE中只有image标签有这个问题。坏消息是，在Chrome, Safari, 和 Firefox中<script src=""> 和<link href="">都会导致出现一个新的请求。

如何解决这个问题？

可以从两方面着手，一是尽量避免这种坏的编程方式，不要出现空的src标签。另外，可以从服务器端着手，在发现时这种无意义的请求时不要返回任何东西给客户端。

<?php
    //Works for IE only when using path URLs and not file URLs

    //get the referrer
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';

    //current URL (assuming HTTP and default port)
    $url = "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];

    //make sure they're not the same
    if ($referrer == $url){
        exit;
    }
?>

原文网址：

Empty image src can destroy your site

Posted in Javascript, XHTML+CSS | Tags: src, 陷阱 | 6 Comments »

国产JS框架–Como JS 1.0 正式发布

十二月 23rd, 2009

综合了多个框架的优势，希望能给各位开发人员带来更大的方便。

由于框架刚发布，会存在很多不足之处，我们会在后续不断推出新的版本，也希望大家有任何意见或建议与我们联系。

Email/Gtalk/MSN: KevinComo@gmail.com

Como 是一款代码简易而功能强大的Javascript框架，这也是开发者在工作过程中的经验总结，实用性强；通过它，能够简化Javascript代码开发，增强代码重用性，能够异步按需加载js和css文件，增强page的加载速度；

Como完全兼容市场目前的主流浏览器：Internet Explorer6+, Firefox 2, Safari 2+, Chrome, Opera 9+, 及其他基于IE内核的浏览器如Maxthon、360、Sogou等

待Como完善成一套框架体系后，我们将提供出一套基于BSD协议的开源方案，供大家学习和分享。我们也将逐步推出一些扩展组件，比如编辑器等。

Posted in Javascript | Tags: Javascript Javascript 框架 | 4 Comments »

递归练习,做个奥数题

十月 28th, 2009

今天有个朋友问我一个小学生的奥数题，酒1元钱1瓶，2个空瓶子可以换一瓶酒，问20块钱可以喝多少瓶酒。我OUT了，我被鄙视了。

我不会，但是谁让我是写代码的呢，写了个小程序用来鄙视他。告诉他，我不仅知道20块能买多少酒，你就是20000块我也能算出来。

点击查看

Posted in Javascript | Tags: Javascript 递归奥数 | 7 Comments »

Play Google–Karry 的技术BLOG

最近一段时间学习到的几个知识点总结

介绍javascript 中Object的几个方法

javascript 小测试

example 1

example 2

example 3

example 4

example 5

example 6

example 7

example 8

example 9

example 10

example 1

example 2

example 3

example 4

example 5

example 6

example 7

example 8

example 9

example 10

收藏：《Don’t make me think》笔记

最近有点烦

Android 学习笔记（1）–布局方式

img标签src为空的陷阱

你永远不会写出这样的代码？

其他的标签中的空src会不会导致这样的问题？

如何解决这个问题？

国产JS框架–Como JS 1.0 正式发布

推荐一本书–《从零到百亿Facebook创业故事》

递归练习,做个奥数题

分类目录

工具

志同道合

朋友

组织

最近评论