有时候需要把表单里的元素复制出来,这里有两个方法,一是先去innerHTML,然后在innerHTML到其他的地方;二是cloneNode(true)出来到其他地方,但是这个两个方法在各个浏览器仅仅是对普通的表单的元素都是支持不完善的,甚至IE自己的系列都有变化。

以下是支持列表,yes表示会把值复制出来,no表示不会。其实还有包括表单元素的自定义属性,事件等也是各有千秋,我实在是懒得列举。

innerHTML IE6 IE7 IE8 FF Chrome
input[text] yes yes yes no no
input[checkbox] yes yes no no no
input[radio] yes yes no no no
select yes yes yes no no
textarea yes yes yes no no

cloneNode IE6 IE7 IE8 FF Chrome
input[text] yes yes yes yes yes
input[checkbox] no no no yes yes
input[radio] no no no yes yes
select no no no no no
textarea yes yes yes no no

解决上面的最保险的方法是对每一个元素类似这样:

var aClone = dClone.getElementsByTagName('SELECT');
var aSelect	 = dSelect.getElementsByTagName('SELECT');
 
if( aClone.length > 0 && aClone.length == aSelect.length ){
	for( var i = 0, len = aClone.length; i < len; i++ ){
		aClone[i].selectedIndex = aSelect[i].selectedIndex;
	};
}

随即,附送美图一张:

点击小图看大图,这次outing最欢畅的就是住五星,很豪华很奢侈!

怿飞与 Function 和 Object 相关的有趣代码,据说此人也叫圆心,公布下答案:

function Foo() {};
var foo = new Foo();
alert(foo instanceof Foo); // true
alert(foo instanceof Object); // true
alert(foo instanceof Function); // false
alert(Foo instanceof Function); // true
alert(Foo instanceof Object); // true

先上图:

以上这张图杂乱无章,其实我不太看懂,那先看下下面这些例子:

1: Function 和 function

    alert(Function);
    //function Function() {
    //  [native code]
    //}
    alert(typeof Function); //function
    alert(Function instanceof Object); // true
 
    function fun() { };
    alert(typeof fun); //function
    alert(fun.constructor == Function); //true
    alert(fun instanceof Function); //true
    alert(fun instanceof Object); //true

Function系统内置的function,用户定义的 function 都由它创建。并且他们都是”继承”于Object的.
2: function 和 Object

 function Class(){};
 
    alert(typeof Class); //function
    alert(Class.constructor == Function); //true
    alert(Class instanceof Function); //true
    alert(Class instanceof Object); //true
    alert(typeof Class.prototype); //object
 
    var c1 = new Class();
    alert(typeof c1);  //object
    alert(c1.constructor == Class); //true
    alert(c1 instanceof Class); //true
    alert(c1 instanceof Function); //false
    alert(c1 instanceof Object); //true
    alert(typeof c1.__proto__); //ie下为undefined firefox为object
    alert(c1.__proto__ == Class.prototype); //ie下为flase firefox为true

function 是 Function 的一个实例,是继承与Object的,在具有Object对象的特征之外,还具有
1) 可以进行 new 操作,来模拟一些面向对象的功能, new 操作返回的是一个 object 对象。它是构造函数和Object对象的实例。
2) new Class() 操作的三个步骤
a) var c1 = new Object 对象
b) 新建的 c1 复制 原来 function Class 的所有属性和方法
c) c1.__proto__ = Class.prototype
3) 在c1中,把this 指向c1
//ie 中 看不到__proto__,不过应该有相应的隐藏值

3: 关于javascript中instanceof

    function class1() { };
    function class2() { };
    class2.prototype = new class1();
    function class3() { };
    class3.prototype = new class2();
    function class4() { };
    class4.prototype = new class3();
    function class5() { };
    class5.prototype = new class4();
 
    var obj = new class4();
 
    //测试正常的继承关系
    alert(obj instanceof class5); //false
    alert(obj instanceof class4); //true
    alert(obj instanceof class3); //true
    alert(obj instanceof class2); //true
    alert(obj instanceof class1); //true
 
    class3.prototype = new class5(); //改变继承关系
 
    //测试改变后的继承关系
    alert(obj instanceof class5); //false
    alert(obj instanceof class4); //true
    alert(obj instanceof class3); //false
    alert(obj instanceof class2); //true  仍然是true
    alert(obj instanceof class1); //true  仍然是true
    var _proto = obj.__proto__;
 
    while (_proto) {
            if (_proto == class1.prototype) {
                alert("class1");
            }
            else if (_proto == class2.prototype) {
                alert("class2");
            }
            else if (_proto == class3.prototype) {
                alert("class3");
            }
            else if (_proto == class4.prototype) {
                alert("class4");
            }
            else if (_proto == class5.prototype) {
                alert("class5");
            }
            else if (_proto == Object.prototype) {
                alert("Object");
            } else {
                alert("unknow");
                alert(_proto.constructor);
            }
            _proto = _proto.__proto__;
     }

什么是许可协议?

什么是许可,当你为你的产品签发许可,你是在出让自己的权利,不过,你仍然拥有版权和专利(如果申请了的话),许可的目的是,向使用你产品的人提供一定的权限。

不管产品是免费向公众分发,还是出售,制定一份许可协议非常有用,否则,对于前者,你相当于放弃了自己所有的权利,任何人都没有义务表明你的原始作者身份,对于后者,你将不得不花费比开发更多的精力用来逐个处理用户的授权问题。

开源许可协议使这些事情变得简单,开发者很容易向一个项目贡献自己的代码,它还可以保护你原始作者的身份,使你至少获得认可,开源许可协议还可以阻止其它人将某个产品据为己有。以下是开源界的 5 大许可协议。

GNU GPL

GNU General Public Licence (GPL) 有可能是开源界最常用的许可模式。GPL 保证了所有开发者的权利,同时为使用者提供了足够的复制,分发,修改的权利:

  • 可自由复制
    你可以将软件复制到你的电脑,你客户的电脑,或者任何地方。复制份数没有任何限制。
  • 可自由分发
    在你的网站提供下载,拷贝到U盘送人,或者将源代码打印出来从窗户扔出去(环保起见,请别这样做)。
  • 可以用来盈利
    你可以在分发软件的时候收费,但你必须在收费前向你的客户提供该软件的 GNU GPL 许可协议,以便让他们知道,他们可以从别的渠道免费得到这份软件,以及你收费的理由。
  • 可自由修改
    如果你想添加或删除某个功能,没问题,如果你想在别的项目中使用部分代码,也没问题,唯一的要求是,使用了这段代码的项目也必须使用 GPL 协议。

需要注意的是,分发的时候,需要明确提供源代码和二进制文件,另外,用于某些程序的某些协议有一些问题和限制,你可以看一下 @PierreJoye 写的 Practical Guide to GPL Compliance 一文。使用 GPL 协议,你必须在源代码代码中包含相应信息,以及协议本身。

GNU LGPL

GNU 还有另外一种协议,叫做 LGPL (Lesser General Public Licence),它对产品所保留的权利比 GPL 少,总的来说,LGPL 适合那些用于非 GPL 或非开源产品的开源类库或框架。因为 GPL 要求,使用了 GPL 代码的产品必须也使用 GPL 协议,开发者不允许将 GPL 代码用于商业产品。LGPL 绕过了这一限制。

BSD

BSD 在软件分发方面的限制比别的开源协议(如 GNU GPL)要少。该协议有多种版本,最主要的版本有两个,新 BSD 协议与简单 BSD 协议,这两种协议经过修正,都和 GPL 兼容,并为开源组织所认可。

新 BSD 协议(3条款协议)在软件分发方面,除需要包含一份版权提示和免责声明之外,没有任何限制。另外,该协议还禁止拿开发者的名义为衍生产品背书,但简单 BSD 协议删除了这一条款。

MIT

MIT 协议可能是几大开源协议中最宽松的一个,核心条款是:

该软件及其相关文档对所有人免费,可以任意处置,包括使用,复制,修改,合并,发表,分发,再授权,或者销售。唯一的限制是,软件中必须包含上述版权和许可提示。

这意味着:

  • 你可以自由使用,复制,修改,可以用于自己的项目。
  • 可以免费分发或用来盈利。
  • 唯一的限制是必须包含许可声明。

MIT 协议是所有开源许可中最宽松的一个,除了必须包含许可声明外,再无任何限制。

Apache

Apache 协议 2.0 和别的开源协议相比,除了为用户提供版权许可之外,还有专利许可,对于那些涉及专利内容的开发者而言,该协议最适合(这里有一篇文章阐述这个问题)。

Apache 协议还有以下需要说明的地方:

  • 永久权利
    一旦被授权,永久拥有。
  • 全球范围的权利
    在一个国家获得授权,适用于所有国家。假如你在美国,许可是从印度授权的,也没有问题。
  • 授权免费,且无版税
    前期,后期均无任何费用。
  • 授权无排他性
    任何人都可以获得授权
  • 授权不可撤消
    一旦获得授权,没有任何人可以取消。比如,你基于该产品代码开发了衍生产品,你不用担心会在某一天被禁止使用该代码。

分发代码方面包含一些要求,主要是,要在声明中对参与开发的人给予认可并包含一份许可协议原文。

Creative Commons

Creative Commons (CC) 并非严格意义上的开源许可,它主要用于设计。Creative Commons 有多种协议,每种都提供了相应授权模式,CC 协议主要包含 4 种基本形式:

  • 署名权
    必须为原始作者署名,然后才可以修改,分发,复制。
  • 保持一致
    作品同样可以在 CC 协议基础上修改,分发,复制。
  • 非商业
    作品可以被修改,分发,复制,但不能用于商业用途。但商业的定义有些模糊,比如,有的人认为非商业用途指的是不能销售,有的认为是甚至不能放在有广告的网站,也有人认为非商业的意思是非盈利。
  • 不能衍生新作品
    你可以复制,分发,但不能修改,也不能以此为基础创作自己的作品。

这些许可形式可以结合起来用,其中最严厉的组合是“署名,非商用,不能衍生新作品”,意味着,你可以分享作品,但不能改动或以此盈利,而且必须为原作者署名。在这种许可模式下,原始作者对作品还拥有完全的控制权,而最宽松的组合是“署名”,意味着,只要为原始作者署名了,就可以自由处置。

—————–
因为在此之前,我用了国内的一些开源程序,但是呢这些程序都是需要商业授权的,不知道能不能免费的自己搭建起来给企业用。比如说shopex,康盛的产品, PHPCMS等等。。。。
如果真用了,他们会找上门来问你要版权么?

firefox-chrome-ie

firefox-chrome-ie

有道 “Firefox在速度上暂时落后于chrome safari和opera。原因并不是Mozilla技术差,而是因为其他浏览器支持的javascript,只是Firefox的一个子集,有很多东西,被其他浏览器忽略了。
1)只有Firefox支持E4X:
E4X是一个javascript的附加标准,用于在javascript里简便快速的操作XML。有多方便?
2) 只有Firefox在逐步实现ECMAScript5:
ECMAScript5是下一代javascript标准,目前的Firefox已经包含了很多ECMAScript5的特性,而其他浏览器似乎并没有公布相关的计划。ECMAScript5是一个已经发布了的标准,和遥遥无期的HTML5比起来,实现ECMAScript5要务实得多。
3) Firefox在javascript和html的交互上更加优化:
HTML中部分属性,只有Firefox才能通过js去调用,其他浏览器只能写成静态html标签,目前浏览器脚本速度测试用的都是1999年的标准。10年前的标准不可能永远用下去。先实现标准,再进行速度优化,这才是正道。相信脚踏实地的Firefox可以走得更远。”

有说法:

1.HTML5不是遥遥无期,只是未到主流开发者使用。
话说DIV+CSS都不知道流行多少年了,但是好多网站还是用Table。也不怪得浏览器中IE使用率其高,因为Javascript 还不是用户浏览一般网站的核心障碍,开得舒心就行了,所以你们开发者就想着怎么给IE6 hack。是不是DIV+CSS?是不是XHTML Strict?是不是HTML5?关用户什么事。
应用比技术更重要一点。有了Gmail、Google Wave才用得着高速的Js解释功能,没有网银的话还是IE、Windows的世界。

2.为什么IE总是慢于其他浏览器:美国有多少人要求浏览器默认关闭javascript,再看看中国人,他妈连javascript是什么都不知道。

3.美国有多少人要求浏览器默认关闭javascript,再看看中国人,他妈连javascript是什么都不知道。

二月 23rd, 2010正则性能

正则表达式

正则表达式

1
2
3
var r = /^\w+?([\.]?[a-zA-Z0-9\-]+)*?@[a-zA-Z0-9]+([-.][a-zA-Z0-9]+)*\.[a-zA-Z]+$/;
var s = r.test('asdfasdfasdfasdfasdfasdfasdfasdfasdsdffgggasdfa');
alert(s);

这个正则表达式导致浏览器死掉,包括chrome。
先记录在这,回头看看正则的实现,感觉好像是和编译原理有关的东西,可惜大学时的这堂课没有学好啊!

十二月 13th, 2009javascript区别对象和数组

Javascript 语言精粹

Javascript 语言精粹

看《Javascript语言精粹》上看到的,挺有意思的,权当记录。

首先知道,我们的JavaScript中的数据很简洁的。只有 undefined, null, boolean, number,string,object。

Javascript中认为数组是一个对象,所以直接通过typeof是无法检测出是否是Array还是Object的,所以判断两者可以这样做:

1
2
3
var isArray = function(value){
return value && typeof value === 'object' && value.constuctor = Array;
}

但是在检测从不同的敞口(window)或 (frame)里构造的数组会有问题,douglas crockford给出了如下的解决方案:

1
2
3
var isArray = function(value){
return value && typeof value === 'object' && typeof value.length === 'number' && typeof value === 'function' && !(value.propertyIsEnumerable('length'));
}

所有的建议是如果你想要深入学习一门语言的时候,一定要看权威的著作!


© 到永远,就不让你轻拳 | 行骏-IT Player | Powered by Wordpress | 备案中 |