Archive for the ‘前端技术’ Category

有关JS的继承

星期五, 三月 23rd, 2012
    在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的,需要采取一系列措施。
 
    Js的继承在很多书里面细致的分了很多种类型和实现方式,大体上就是两种:对象冒充、原型方式。这两种方式各有优点和缺陷。
对象冒充继承:
【优点】可以实现多重继承;
【缺点】无法继承prototype域的变量和方法;
        所有的成员方法都是针对this而创建的,所有的实例都会拥有一份成员方法的副本,属于深copy,比较浪费资源
 
原型继承:
【优点】所有实例共用一个pototype域,性能好些;
【缺点】不能传递参数;
        注意 constructor 会指向父对象;

(更多…)

cookie的大小的数量限制

星期日, 二月 19th, 2012
 
cookie的总数量没有限制,但是每个域名的COOKIE数量和每个COOKIE的大小是有限制的!
一、浏览器答应每个域名所包含的cookie数:
  microsoft指出internetexplorer8增加cookie限制为每个域名50个,但ie7似乎也答应每个域名50个cookie
  firefox每个域名cookie限制为50个。
  opera每个域名cookie限制为30个。
  safari/webkit貌似没有cookie限制。但是假如cookie很多,则会使header大小超过服务器的处理的限制,会导致错误发生。
  注:“每个域名cookie限制为20个”将不再正确!

(更多…)

利用windows桌面小工具开发的目标提醒组件

星期二, 一月 3rd, 2012
新年新气象,2012的计划大家写了没有,没有的赶快哈!
有条件的可以和我一样,利用windows桌面小工具开发一个专属于自己的目标提醒组件,功能任意哈,有什么想法都可以加进组件。
参考资料:http://apps.hi.baidu.com/share/detail/19091126
很简单,只需要HTML、CSS、JavaScript基础就可以开发。

 

下面是我画的一个简单的工具:
利用windows桌面小工具开发的目标提醒组件
希望大家有更好的发挥,将windows的东东利用起来。

关于多域增加浏览器并发来提高网页打开速度的话题

星期四, 十二月 8th, 2011

了解过网站速度优化的同学可能会了解到,浏览器是有并发数限制的:
下面是主流浏览器在单个主机下的并发连接数:

Browser      HTTP/1.1    HTTP/1.0

IE 6,7                2                 4

IE 8                  6                 6

Firefox 2          2                 8

Firefox 3          6                 6

Safari 3,4         4                 4

Chrome 1,2      6                  ?

Chrome 3         4                 4

Chrome 4+      6                  ?

iPhone 2          4                  ?

iPhone 3          6                  ?

iPhone 4          4                  ?

Opera 9.63,10.00alpha         4          4

Opera 10.51+                       8           ?

我们更多关注HTTP/1.1,因为1.0已经过时了,哈哈!
    HTTP 1.0 规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个 TCP 连接,服务器完成请求处理后立即断开 TCP 连接,服务器不跟踪每个客户也不记录过去的请求。
    HTTP 1.1 支持持久连接,在一个 TCP 连接上可以传送多个 HTTP 请求和响应,减少了建立和关闭连接的消耗和延迟。
    HTTP 1.1 还允许客户端不用等待上一次请求结果返回,就可以发出下一次请求,但服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果,以保证客户端能够区分出每次请求的响应内容,这样也显著地减少了整个下载过程所需要的时间。
关于HTTP/1.1和HTTP/1.0更多信息参考:http://blog.csdn.net/mqboss/article/details/5158858

下面一个测试并发速度的页面:
http://stevesouders.com/hpws/parallel-downloads.php

上面的数据自网络。

其实在我们的SNS【有料】项目中也采用了这个增加并发的相关方法,其中我们就采用了image.u.china.com域来加载部分资源文件。

但有不足的地方,这里提出几点个人意见:
1、首先根绝我们有料个人首页的加载量,本人认为同时启用3个与为最佳,如果能确定3个域的解析速度一样快,随便选两个在首屏中加载文件,如果不确定,尽可能的选两个解析较为稳定的放在首屏加载文件;
2、这点是比较重要的,我们的有料就犯了这样的错误,启用增加并发的域时请尽量启用新的顶级域【主域cookie污染太严重】,然后不管需要划分多少个域,只需要开设新顶级域的二级域即可。

暂时只想到了这两点,以后有别的想法时再补充。

Notepad++的FunctionList(函数列表)插件中文版下载

星期一, 十二月 5th, 2011
分享一款Notepad++的FunctionList(函数列表)插件,应该V5.×的都可以用。
 
 
 
2.下载上述文件后,将其中的FunctionList.dll解压到Notepad++安装路径的plugins目录下即可。
 
3.重新启动Notepad++,看一下是否在“插件”菜单下出现了“函数列表”的子菜单?选择“列表…”或点击工具栏上的红色小图标就可以显示函数列表了!而且是中文版的~
 
 
原文:http://apps.hi.baidu.com/share/detail/19755444

JavaScript 闭包(Closure)

星期三, 十月 12th, 2011
闭包的概念:
所谓闭包,即是由函数和与其相关联的引用环境组合而成的实体。
所谓引用环境是指在执行程序中的某个点所有处于活跃状态的约束所组成的集合。其中的约束是指一个变量的名字和其所代表的对象之间的关系。那么为什么要把引用环境和函数结合起来呢?这主要是因为在支持嵌套作用域的语言中,有时不能简单直接的确定函数的引用环境。这样的语言一般有如下特性:
    a、函数是第一阶值(First-class value),即函数可以作为另一个函数的返回值或参数,还可以作为一个变量的值。
    b、函数可以嵌套定义,即在一个函数内部可以定义另一个函数。
上面的叙述比较概念化,下面通过例子来解释闭包
//code1:
function makePowerFn(power){
 function powerFn(base){
  return Math.pow(base, power);
 }
 return powerFn;
}
var square = makePowerFn(2);
alert(square(3)); // return 9
 

(更多…)

JavaScript命名空间 || 名字空间

星期三, 十月 12th, 2011
命名空间 || 名字空间 :
javascript中的模块和名字空间是不可区分的内容。
JavaScript 的命名空间并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问。
 
作用:
这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.
 

(更多…)

将光标置于某表单元素的最后

星期五, 七月 29th, 2011

在工作中难免要对textarea动态插入一些内容,插入完成后又想让光标定位于textarea的最后,各浏览器对这个的解释有些差异,下面整理了一个兼容浏览器的方法 toTextEnd ,此方法接受一个参数,该参数为要定位光标的目标元素【可编辑表单元素】。

其实理论很简单,在IE中采用createTextRange方法,非IE中采用setSelectionRange方法进行光标定位。

代码中的cn.ie是进行IE检测,使用代码的朋友可以换成自己的方法才会起作用,否则会报错。

看代码:

function toTextEnd(elem){// 将光标置于某表单元素的最后
 if(cn.ie){
  var range = elem.createTextRange();
  range.moveStart("character", elem.value.length);
  range.collapse(true);
  range.select();
 }else{// 非IE情况下将光标置于文本框最后
  elem.setSelectionRange(elem.value.length, elem.value.length);
  elem.focus();
 }
};

 

限制表单输入长度 汉字为两个字符

星期三, 三月 23rd, 2011

 

该效果是继 检测表单输入长度 显示剩余可输入字数 之后,在他的基础上整合的小有差别的一个效果,希望方便朋友们使用。

 

将该效果整合成了一个函数,此函数接受3个参数:

第一个为textarea或其他text表单的ID;

第二个为显示输入内容的ID,可留空;

第三个为最多输入的字符,一个汉字为2个字符。

 

这只是一个基础效果,欢迎同学们进行优化和改进。

 

要获取代码请查看demo的源文件

 

 

 

“\v” != “v” 号称最简短的IE判断失效

星期三, 三月 23rd, 2011

“\v” != “v” 这个曾是最简短的判断是否为IE的方法,但是现在在IE9中失效了,请喜好这个的同学慎用。

“\v” != “v” 这个返回true,曾代表不是IE浏览器,但是现在IE9也返回true