函数处理不定数目的参数

Posted by admin | Posted in javascript | Posted on 05-07-2011

0

function format(string) {
    var args = arguments;
    var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
    return String(string).replace(pattern, function(match, index) {
       return args[index];
    });
};
format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

上面的脚本就会返回”And the papers want to know whose shirt you wear” 。

xml和json传输格式的一些分析

Posted by admin | Posted in javascript | Posted on 13-07-2010

0

XML
优点:

  1. 格式统一, 符合标准
  2. 容易与其他系统进行远程交互, 数据共享比较方便
  3. 调用将 XML 用作传输的现有服务
  4. 使用 XSLT 可以动态转换 XML

缺点:

  1. XML文件格式文件庞大, 格式复杂, 传输占用带宽
  2. C/S端都需要花费大量代码和时间来解析XML
  3. 客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码

JSON
优点:

  1. 数据格式比较简单, 占用带宽小,浏览器解析快
  2. 易于解析, 客户端可以简单的通过eval()进行JSON数据的读取
  3. 支持多种语言,便于服务器端的解析

缺点:

  1. 没有XML那么通用性
  2. 推广还属于初级阶段

由一篇文章想到的

Posted by admin | Posted in Cascading Style Sheets, javascript | Posted on 21-04-2010

0

今天看到一篇文章说到美国的硅谷,作者的几个观点觉得挺有意思的总结一下分享给大家:

硅谷的社交生活大多数都发生在Palo Alto市大学街的咖啡馆和餐馆。你很可能会在里面遇到创业者和投资者。分辨他们的一个诀窍是,创业者的坐姿往往前倾,面露渴求,而投资者的坐姿往往后仰,面色凝重。

由于Palo Alto的房价不断上涨,所以越来越多的创业公司搬到了山景城(Mountain View),只在与投资者见面时才去Palo Alto,而卡斯特罗街是山景城最主要的商业街。不过,街上只有一家咖啡店:Red Rock。

很多创业公司不去创业园区,而是待在咖啡馆和人流密集的地方。因为这使得人们在下班后更愿意留下来,而不是马上就想离开。他们可以一起在外面吃饭、过夜生活、讨论创意,一旦想到什么,就立刻走回办公室把它做出来。

—————————————
总结,如何写一片有价值的文章:

多方学习求证,反复地自我否定,寻找真正有价值的问题,提出鲜明的观点。如果你的观点是市场上大量存在的,不够令人兴奋的,那么就必须重新寻找角度

图片上传显示

Posted by admin | Posted in javascript | Posted on 03-02-2010

0

javascript:

	 var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
	 var preivew = function(file, container){
		 try{
			var pic =  new Picture(file, container);
		 }catch(e){
			 alert(e);
		 }
	 }
	 //缩略图类定义
     var Picture  = function(file, container){
		 var height	= 0, 
			 widht 	= 0, 
			 ext	= '',
			 size	= 0,
			 name   = '',
			 path  	=  '';
		 var self 	= this;
		 if(file){ 
		     name = file.value;
			 if (window.navigator.userAgent.indexOf("MSIE")>=1){ 
				 file.select(); 
				 path = document.selection.createRange().text; 
			 }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
				 if(file.files){ 
					 path =  file.files.item(0).getAsDataURL(); 
				 }else{
					 path = file.value;
				 }
			 } 
		 }else{
			 throw "bad file";
		 } 
 
 
		 ext = name.substr(name.lastIndexOf("."), name.length);
 
		 if(container.tagName.toLowerCase() != 'img'){
			 throw "container is not a valid img label";
			 container.visibility = 'hidden';
		 }
		 container.src = path;
		 container.alt = name;
		 container.style.visibility = 'visible';
		 height = container.height;
		 widht  = container.widht;
		 size   = container.fileSize;
 
 
		 this.get = function(name){
			 return self[name];
		 }
 
		 this.isValid = function(){
			 if(allowExt.indexOf(self.ext) !== -1){
				 throw 'the ext is not allowed to upload';
				 return false;
			 }
		 }
	 }

html:

<form name="form" id="form" method="post" action="#">
 <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
<img id="img"  style="visibility:hidden" height="100px" width="100px">
 
</form>

整理了一下平时做页面的东西

Posted by admin | Posted in javascript | Posted on 16-10-2009

0

今天整理了下平时做页面用到的一些东西,内容不多。

附上这个文件夹的目录树

├─css
│ global.css.csn
│ module.css.csn

├─html
│ │ forms.csn
│ │ module.csn
│ │ tab.csn
│ │ title&more.csn
│ │ tList.csn
│ │
│ ├─布局-容器
│ │ clearfix.csn
│ │ east.csn
│ │ midland.csn
│ │ west.csn
│ │ wrapper.csn
│ │
│ ├─文本-列表
│ │ ├─列表-换行
│ │ │ list_listU_noBr(ol)_-_0.csn
│ │ │ list_listU_noBr(ul)_-_1.csn
│ │ │ list_listU_noBr(ul)_-_2.csn
│ │ │ list_listU_noBr(ul)_-_3.csn
│ │ │ list_noBr(ol)_-_1.csn
│ │ │ list_noBr(ol)_-_2.csn
│ │ │ list_noBr(ul)_-_1.csn
│ │ │ list_noBr(ul)_-_2.csn
│ │ │
│ │ └─列表-标题截断
│ │ list(ol)_-_1.csn
│ │ list(ol)_-_2.csn
│ │ list(ul)_-_1.csn
│ │ list(ul)_-_2.csn
│ │ list_listU(ol)_-_0.csn
│ │ list_listU(ul)_-_1.csn
│ │ list_listU(ul)_-_2.csn
│ │ list_listU(ul)_-_3.csn
│ │
│ ├─文本-图文
│ │ allList_-_1.csn
│ │ allList_-_2.csn
│ │ allList_-_3.csn
│ │
│ └─表单-数据录入
└─js
├─应用层
│ └─原生
│ Cookie-设置.csn
│ Cookie-返回.csn
│ CSS-addClass.csn
│ CSS-样式表加载.csn
│ CSS-样式表设置.csn
│ CSS-设置函数.csn
│ CSS-设置透明值.csn
│ frame-为某节点建立框架.csn
│ frame-为某节点销毁框架.csn
│ frame-自动高度.csn
│ js开始.csn
│ tab切换.csn
│ 事件标准化函数.csn
│ 关键字切换.csn
│ 加载类.csn
│ 图片自动缩小_点击放大.csn
│ 时间.csn
│ 选择器-查找ID.csn
│ 选择器-查找tagName.csn
│ 链接跳转.csn
│ 高亮当前栏目导航.csn
│ 鼠标x,y位置获得函数.csn

├─底层
│ 选择器+事件.csn

└─组件层
└─框架_-_jquery
│ JQUERY_1.2.3.csn
│ _folderinfo.txt

└─应用
滚动-jCarouselLite.csn

下载地址

常用的几个js代码

Posted by admin | Posted in javascript | Posted on 27-05-2009

1

一、滚动
———————————————————————————

javascript:

var scroll = document.getElementById('scroll');
var lis = scroll.getElementsByTagName('li');
var ml = 0;
var timer1 = setInterval(function() {
    var liHeight = lis[0].offsetHeight; //获取单元高度
    var timer2 = setInterval(function() {
        scroll.scrollTop = (++ml);
        if (ml == liHeight) {
            clearInterval(timer2);
            scroll.scrollTop = 0;
            ml = 0;
            lis[0].parentNode.appendChild(lis[0]);
        }
    },
    10);
},
2000);

css:

#scroll {
	overflow:hidden;
	height:150px;
}

html:

<ul id="scroll">
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

二、全选&反选
———————————————————————————
javascript:

function checkAll(form) {
    var c = 'checkBox';
    for (var e = 0; e &lt; form.elements.length; e++) {
        var v = form.elements[e];
        v.checked = form.elements[c].checked;
    }
}

html:

<form id="ads" method="post">
<input id="checkBox" onclick="checkAll(this.form)" name="checkBox" type="checkbox" value="checkbox" /><label for="checkBox">全选</label>
<input name="ids[]" type="checkbox" value="checkbox" />
<input name="ids[]" type="checkbox" value="checkbox" />
<input name="ids[]" type="checkbox" value="checkbox" />
<input name="ids[]" type="checkbox" value="checkbox" />
<input name="ids[]" type="checkbox" value="checkbox" />
</form>

三、时间处理
———————————————————————————
javascript:

setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000);

css:

#linkweb {
	font-size:14px;
	color:#F00;
}

html:

<div id="linkweb "></div>

四、显示&隐藏
———————————————————————————
javascript:

function showHide(objname) {
    var obj = document.getElementById(objname);
    if (obj.style.display == "none") obj.style.display = "block";
    else {
        obj.style.display = "none";
    }
}

css:

dt {
	cursor:pointer;
}
dd {
	display:none;
}

html:

<dl>
<dt onclick="showHide(&quot;items0&quot;)">标题一</dt>
<dd id="items0">
 
下级子类1
 
下级子类2
 
下级子类3
</dd>
<dt onclick="showHide(&quot;items1&quot;)">标题二</dt>
<dd id="items1">
 
下级子类1
 
下级子类2
 
下级子类3
</dd>
</dl>

5、运行时间测试
———————————————————————————
javascript:

var evalTime = function(func, times, obj, args) {
    times = times || 100000; //默认执行100000次
    obj = obj || null;
    args = args || [];
    var old = new Date();
    for (var i = 0; i < times; i++) {
        func.apply(obj, args);
    }
    var etime = (new Date()) - old;
    if (window.console && console.info) {
        console.info(etime);
    }
    document.writeln(func + "<p>函数执行" + times + "次消耗时间为:" + etime + "ms。</p>");
    return etime;
};

使用范例

var temp = 0;
evalTime(function() {
    temp = new Date();
});
evalTime(function() {
    temp = new Date() * 1;
});
evalTime(function() {
    temp = new Date().valueOf();
});
evalTime(function() {
    temp = new Date().getTime();
});

ajax起手式

Posted by admin | Posted in javascript | Posted on 25-05-2009

0

简洁处理

var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

面向对象的方法

var xmlhttp = false;
//检查是否使用的是IE.
try {
	//如果javascript的版本大于5.
	xmlhttp = new ActiveXObject ("Msxml2.HMLHTTP");
	alert ("You are using Microsoft Internet Explorer6.0.");
} catch (e) {
	//如果不是,则使用老版本的ActiveX对象.
	try {
		//如果使用的是IE浏览器.
		xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
		alert ("You are using Microsoft Internet Explorer5.0");
	} catch (E){
		//否则肯定使用的是非IE 浏览器.
		xmlhttp = false;
	}
}
//如果使用的是非IE 浏览器,则创建一个该对象的javascript实例.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
	xmlhttp = new XMLHttpRequest();
	alert ("You are not using Microsoft Internet Explorer.")
}

什么是闭包

Posted by admin | Posted in javascript | Posted on 13-04-2009

0

闭包简单的解释是,ECMAScript允许inner functions(嵌套函数)可以定义在另外一个函数里面。这些内部的函数可以访问outer function(父函数)的local变量、参数、其它内部函数。当内部函数被构造,并可以在函数外被获得(函数当成返回值),这个内部函数被在 outer function返回后被执行(在outer函数外执行),那一个闭包形成了。(简单的理解,function被当成数据类型传递或动态执行)。 inner function还有权利访问 那些outer function(父函数)的local变量、参数、其它内部函数。那些outer function(父函数)的local变量、参数、其它内部函数在outer function返回前就有值,并返回的inner function需要改变这些值。

浏览器的判断

Posted by admin | Posted in javascript | Posted on 13-04-2009

0

    浏览器判断一般是:基于功能(Feature-Based),基于内核(Trident, Gecko, Webkit, Opera),safari和chrome都是webkit内核。

     浏览器是不断升级的,互相之间会有互相学习;虽然基于功能更容易判断出浏览器,但是考虑长远一点,这个方法并不是最佳选择,所以我认为采取基于内核来判断是最好。

方法一:

var gsAgent = navigator.userAgent.toLowerCase();
var gfAppVer = navigator.appVersion.toLowerCase();
var gIsOpera = gsAgent.indexOf("opera") > -1;
var gIsKHTML = gsAgent.indexOf("khtml") > -1 || gsAgent.indexOf("konqueror") > -1 || gsAgent.indexOf("applewebkit") > -1;
var gIsSafari = gsAgent.indexOf("applewebkit") > -1;
var gIsNS = !gIsIE && !gIsOpera && !gIsKHTML && (gsAgent.indexOf("mozilla") == 0) && (navigator.appName.toLowerCase() == "netscape");
var gIsIE = ( gsAgent.indexOf("compatible") > -1 && !gIsOpera ) || gsAgent.indexOf("msie") > -1;
var gIsFF = gsAgent.indexOf("gecko") > -1 && !gIsKHTML;
var gIsTT = gIsIE ? (gfAppVer.indexOf("tencenttraveler") != -1 ? 1 : 0) : 0;
//本来想写马桶的,不过最近她从良了,新版本用的是webkit引擎。
var gIsAgentErr = !( gIsOpera || gIsKHTML || gIsSafari || gIsIE || gIsTT || gIsFF || gIsNS );
document.write(gIsFF);

方法二:

function getBrowser()
{
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
var m = ua.match(re);
Sys.browser = m[1].replace(/version/, "'safari");
Sys.ver = m[2];
return Sys;
}
var sys = getBrowser();
document.write(sys.browser + "===" + sys.ver);

几个javvscript封装函数的理解

Posted by admin | Posted in javascript | Posted on 20-03-2008

0

定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号

var Prototype = {
  Version: '@@VERSION@@'
}

创建一种类型,注意其属性 create 是一个方法,返回一个构造函数。
一般使用如下
var X = Class.create(); 返回一个类型,类似于 java 的一个Class实例。
要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 Class.newInstance()方法。

返回的构造函数会执行名为 initialize 的方法, initialize 是 Ruby 对象的构造器方法名字。
此时initialize方法还没有定义,其后的代码中创建新类型时会建立相应的同名方法。

如果一定要从java上去理解。你可以理解为用Class.create()创建一个继承java.lang.Class类的类。当然java不允许这样做,因为Class类是final的

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

创建一个对象,从变量名来思考,本意也许是定义一个抽象类,以后创建新对象都 extend 它。
但从其后代码的应用来看, Abstract 更多是为了保持命名空间清晰的考虑。
也就是说,我们可以给 Abstract 这个对象实例添加新的对象定义。

从java去理解,就是动态给一个对象创建内部类。

var Abstract = new Object();

获取参数对象的所有属性和方法,有点象多重继承。但是这种继承是动态获得的。
如:
var a = new ObjectA(), b = new ObjectB();
var c = a.extend(b);
此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是,c instanceof ObjectB 将返回false。

Object.prototype.extend = function(object) {
  for (property in object) {
    this[property] = object[property];
  }
  return this;
}

这个方法很有趣,它封装一个javascript函数对象,返回一个新函数对象,新函数对象的主体和原对象相同,但是bind()方法参数将被用作当前对象的对象。
也就是说新函数中的 this 引用被改变为参数提供的对象。
比如:

     <input type="text" id="aaa" value="aaa"/>
     <input type="text" id="bbb" value="bbb"/>
     .................
     <script>
         var aaa = document.getElementById("aaa");
           var bbb = document.getElementById("bbb");
           aaa.showValue = function() {alert(this.value);}
           aaa.showValue2 = aaa.showValue.bind(bbb);
     </script>

那么,调用aaa.showValue 将返回”aaa”, 但调用aaa.showValue2 将返回”bbb”。

apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。
该方法更多的资料参考MSDN http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp
还有一个 call 方法,应用起来和 apply 类似。可以一起研究下。

Function.prototype.bind = function(object) {
  var method = this;
  return function() {
    method.apply(object, arguments);
  }
}

和bind一样,不过这个方法一般用做html控件对象的事件处理。所以要传递event对象
注意这时候,用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参数形式的定义。
如同 java 两个过载的方法。

将整数形式RGB颜色值转换为HEX形式

Number.prototype.toColorPart = function() {
  var digits = this.toString(16);
  if (this < 16) return '0' + digits;
  return digits;
}

典型 Ruby 风格的函数,将参数中的方法逐个调用,返回第一个成功执行的方法的返回值

var Try = {
  these: function() {
    var returnValue;
 
    for (var i = 0; i < arguments.length; i++) {
      var lambda = arguments[i];
      try {
        returnValue = lambda();
        break;
      } catch (e) {}
    }
 
    return returnValue;
  }
}

一个设计精巧的定时执行器
首先由 Class.create() 创建一个 PeriodicalExecuter 类型,
然后用对象直接量的语法形式设置原型。

需要特别说明的是 rgisterCallback 方法,它调用上面定义的函数原型方法bind, 并传递自己为参数。
之所以这样做,是因为 setTimeout 默认总以 window 对象为当前对象,也就是说,如果 registerCallback 方法定义如下的话:
registerCallback: function() {
setTimeout(this.onTimerEvent, this.frequency 1000);
}
那么,this.onTimeoutEvent 方法执行失败,因为它无法访问 this.currentlyExecuting 属性。
而使用了bind以后,该方法才能正确的找到this,也就是PeriodicalExecuter的当前实例。

var PeriodicalExecuter = Class.create();
PeriodicalExecuter.prototype = {
  initialize: function(callback, frequency) {
    this.callback = callback;
    this.frequency = frequency;
    this.currentlyExecuting = false;
 
    this.registerCallback();
  },
 
  registerCallback: function() {
    setTimeout(this.onTimerEvent.bind(this), this.frequency  1000);
  },
 
  onTimerEvent: function() {
    if (!this.currentlyExecuting) {
      try {
        this.currentlyExecuting = true;
        this.callback();
      } finally {
        this.currentlyExecuting = false;
      }
    }
 
    this.registerCallback();
  }
}

这个函数就 Ruby 了。我觉得它的作用主要有两个
1. 大概是 document.getElementById(id) 的最简化调用。
比如:$("aaa") 将返回上 aaa 对象
2. 得到对象数组
比如: $("aaa","bbb") 返回一个包括id为"aaa"和"bbb"两个input控件对象的数组。

function $() {
  var elements = new Array();
 
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
 
    if (arguments.length == 1)
      return element;
 
    elements.push(element);
  }
 
  return elements;
}