]]>
]]>
]]>
]]>
]]>
/闭包执行一个立卛_义的匿名函数
!function(factory) {
//factory是一个函敎ͼ下面的koExports是他的参数
// Support three module loading scenarios
if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
// [1] CommonJS/Node.js
// [1] 支持在module.exports.abc,或者直接exports.abc
var target = module['exports'] || exports; // module.exports is for Node.js
factory(target);
} else if (typeof define === 'function' && define['amd']) {
// [2] AMD anonymous module
// [2] AMD 规范
//define(['exports'],function(exports){
// exports.abc = function(){
}
//});
define(['exports'], factory);
} else {
// [3] No module loader (plain <script> tag) - put directly in global namespace
factory(window['ko'] = {});
}
}(function(koExports){
//ko的全局定义 koExports是undefined 对应着上面的[3] q种情况
var ko = typeof koExports !== 'undefined' ? koExports : {};
//定义一个ko的方?/span>
ko.abc = function(s){
alert(s);
}
});
//[3]中情늚调用
ko.abc("msg");
!function(factory) {
//factory是一个函敎ͼ下面的koExports是他的参数
// Support three module loading scenarios
if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
// [1] CommonJS/Node.js
// [1] 支持在module.exports.abc,或者直接exports.abc
var target = module['exports'] || exports; // module.exports is for Node.js
factory(target);
} else if (typeof define === 'function' && define['amd']) {
// [2] AMD anonymous module
// [2] AMD 规范
//define(['exports'],function(exports){
// exports.abc = function(){
}//});
define(['exports'], factory);
} else {
// [3] No module loader (plain <script> tag) - put directly in global namespace
factory(window['ko'] = {});
}
}(function(koExports){
//ko的全局定义 koExports是undefined 对应着上面的[3] q种情况
var ko = typeof koExports !== 'undefined' ? koExports : {};
//定义一个ko的方?/span>
ko.abc = function(s){
alert(s);
}
});
//[3]中情늚调用
ko.abc("msg");
非常巧妙的闭包实C。三U方式的兼容。摘出来mark一下?br />
]]>
]]>
<script type="text/javascript">
function autoheight(){
this.height= this.scrollHeight+this.height+"px";
}
</script><textarea id="" rows="" cols="" onpropertychange="autoheight();" oninput="autoheight()" style="overflow:hidden;"></textarea>q个代码我没有运行，因ؓ一边写发C对劲Q在propertychange函数中改变property会再ơ触发propertychange事gQ结果就可想而知了。stack overflow?/p>
所以需要换一U思\Q新Z个textareaQ将同样大的文本攑ֈ属性一Ltextarea中计其高度Q然后把高度讄到目标textarea中?/p>
<script type="text/javascript">
//基本函数*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//新徏一个textarea用户计算高度
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//一处隐藏，必须的?/span>
$(elemid).style.resize="none";//Ltextarea能拖拽放?~小高度/宽度功能
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
//基本函数*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//新徏一个textarea用户计算高度
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//一处隐藏，必须的?/span>
$(elemid).style.resize="none";//Ltextarea能拖拽放?~小高度/宽度功能
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
搞清楚原理其实就单多了。要捕捉textarea的change事g在IE下可以用propertychange,?IE下可以用input?/p>
一些textarea资料做参考：
- textarea 的一些小技?http://css-tricks.com/textarea-tricks/
- 本文的直接资料来源：http://www.planeart.cn/?p=1489
]]>
]]>
]]>
]]>
alert(0=="");//true
alert(0=="0");//true
alert(0==="0");//false
alert(null==0);//false
alert(undefined==null);//true
alert(undefined === null);//false
alert("true==\"true\":"+(true=="true"));//false
alert("false==\"false\":"+(false=="false"));//false
NaN有点特例Q?br />
alert(NaN==NaN);//false
alert(NaN==undefined);//false
alert(NaN==null);//false
alert(NaN==undefined);//false
alert(NaN==null);//false
Ҏ(gu)下面q段介绍
== equality {同Q?== identity 恒等?/p>
==Q?两边值类型不同的时候，要先q行cd转换Q再比较?span class="Apple-converted-space">
==Q不做类型{换，cd不同的一定不{?span class="Apple-converted-space">
下面分别说明Q?span class="Apple-converted-space">
先说 ===Q这个比较简单。下面的规则用来判断两个值是?==相等Q?span class="Apple-converted-space">
1、如果类型不同，[不相{]
2、如果两个都是数|q且是同一个|那么[相等]Q?Q例?的是Q如果其中至一个是NaNQ那么[不相{]。（判断一个值是否是NaNQ只能用isNaN()来判断）
3、如果两个都是字W串Q每个位|的字符都一P那么[相等]Q否则[不相{]?span class="Apple-converted-space">
4、如果两个值都是trueQ或者都是falseQ那么[相等]?span class="Apple-converted-space">
5、如果两个值都引用同一个对象或函数Q那么[相等]Q否则[不相{]?span class="Apple-converted-space">
6、如果两个值都是nullQ或者都是undefinedQ那么[相等]?span class="Apple-converted-space">
再说 ==Q根据以下规则：
1、如果两个值类型相同，q行 === 比较?span class="Apple-converted-space">
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型{换再比较Q?span class="Apple-converted-space">
a、如果一个是null、一个是undefinedQ那么[相等]?span class="Apple-converted-space">
b?em>如果一个是字符Ԍ一个是数|把字W串转换成数值再q行比较?span class="Apple-converted-space">
c、如果Q一值是 trueQ把它{换成 1 再比较；如果M值是 falseQ把它{换成 0 再比较?span class="Apple-converted-space">
d、如果一个是对象Q另一个是数值或字符Ԍ把对象{换成基础cd的值再比较。对象{换成基础cdQ利用它的toString或者valueOfҎ(gu)?js核心内置c，会尝试valueOf先于toStringQ例外的是DateQDate利用的是toString转换。非js核心的对象，令说Q比较麻 烦，我也不大懂）
e、Q何其他组合，都[不相{]?span class="Apple-converted-space">
alert(parseInt("",10));//NaN
alert(0=="");//true
alert(0=="");//true
不管怎么?=="" true 是没有道理的。就因ؓq个问题让我׃好久去解bug?
]]>
<script type="text/javascript">
window.onbeforeunload=function()
{
alert("onbeforeunload event");
//return false;
}
</script>
<a href="#" onclick="return true;">试1</a><br/>
<a href="javascript:void(0)" onclick="return true;">试2</a><br/>
<a href="javascript:void(0)" onclick="return false;">试3</a><br/>
<a href="javascript:void(alert('test 4.'))" onclick="return true;">试4</a><br/>
<a href="javascript:void(alert('test 5.'))" onclick="return false;">试5</a><br/>
window.onbeforeunload=function()
{
alert("onbeforeunload event
");//return false;
}
</script>
<a href="#" onclick="return true;">试1</a><br/>
<a href="javascript:void(0)" onclick="return true;">试2</a><br/>
<a href="javascript:void(0)" onclick="return false;">试3</a><br/>
<a href="javascript:void(alert('test 4
.'))" onclick="return true;">试4</a><br/><a href="javascript:void(alert('test 5
.'))" onclick="return false;">试5</a><br/>
IE?"试4"Q?试5"会触发window.onbeforeunload事g。这是因?span style="font-size: 14px; line-height: 21px; font-family: verdana, sans-serif">Q点M件触发的时候（调用序Qonclick->window.onbeforeunload->hrefQ?/span>
实际使用的时候还是尽量避免用javascript:void(0)q样的写?可以使用 <a href="###"></a>可以防止锚点Q但是如果已l写了。可以用jQuery的liveҎ(gu)解决Q?/span>
jQuery 1.3中新增的Ҏ(gu)。给所有当前以及将来会匚w的元素绑定一个事件处理函敎ͼ比如click事gQ。也能绑定自定义事g?/p>
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup?nbsp;
q不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是Qlive()一ơ只能绑定一个事件?/p>
q个Ҏ(gu)跟传l的bind很像Q区别在于用live来绑定事件会l所有当前以及将来在面上的元素l定事g(使用委派的方?。比如说Q如果你l页面上所有的li用livel定了click事g。那么当在以后增加一个li到这个页面时Q对于这个新增加的liQ其click事g依然可用。而无需重新l这U新增加的元素绑定事件?/p>
.live()与流行的liveQuery插g很像Q但有以下几个主要区别：
- .live 目前只支持所有事件的子集Q支持列表参考上面的说明?
- .live 不支持liveQuery提供?#8220;无事?#8221;样式的回调函数?live只能l定事g处理函数?
- .live 没有"setup"?cleanup"的过E。因为所有的事g是委z而不是直接绑定在元素上的?
要移除用livel定的事ӞLdieҎ(gu)?/p>
具体的解决代码ؓQ?/p>
//IE javascript:void(0)会触发window.onbeforeunload事g
if(document.all){
$("a[href='javascript:void(0)']").live("click",function (e){
e.preventDefault();
});
}
if(document.all){
$("a[href='javascript:void(0)']").live("click",function (e){
e.preventDefault();
});
}
使用liveҎ(gu)对于新增?lt;a href="javascript:void(0)"></a>仍有效，使用例如jQuery datepick会动态的生成很多q样a标签Q用上q方法可以很好的解决q个问题
]]>
问题一Q要不要采用javascript框架Q?/p>
我刚到公司的时候，我们的技术架构师是不同意使用javascript 框架。理由很多，javascript 没有得到应有的重视是主要的原因，他一直强调我们做的是应用pȝ。所以他只在|上扑ֈ几个js攑֜目下面Q然后页面上很ؕQ要写一颗树展现真是ȝ又麻烦。而且大家的javascript水^都很一般，基本只是E微了解一炏V用的最多的q是数据校验Q写的方法还是document.form1.formname,document.add['id']之类的写法。这让我q个天天x界面的技术h?冒昧自称技术h员，其实只是在界面层上有点研I而已)真是抓狂。很讽刺的是Qؓ了用一个小H口弹出错误信息Q把jqeury+ui搬出来。整个项目也只有q么一个地方用到jquery,d的时候jquery的h气正在攀升。我来了之后Q由于自p分小Q在技术上说不上话Q后来大家界面上开发的时候遇到这个那个问题解决不了的时候，大家慢慢的认识到了我的h(hun)倹{新的项目领D我负责界面规范这块，公司也想把这个项目做成一个品。经q很多次“力荐”，我终于说服了大家Q我们不能再"IE only" 了?/p>
我认Z用的理由Q?一Q我们要有兼容各U浏览器的能力，现在新的览器大战正在打响，来的浏览器市场q很难说。在cssq方?我借鉴了ext 的兼Ҏ(gu)想Q在body标签上加上class "IE IE6",q样我们不要使用hack dҎ(gu)览器了。对于javascript上，基本上只有IE和非IE的差别了。主的javascript框架都提供了很好的浏览器支持。二Q用javascript框架的目的是提高开发效率。这与主的javascript不谋而合。三Qweb应用正在飞速发展，界面层应用越来越复杂Qjavascript不在一个校验数据的脚本了，ajax的应用能很好的提升用户体验，有些场合使用ajaxQ用h作更加方ѝD个很单的例子Q很多的记录需要排序，虽然在数据上来看Q只要改变排序D解决问题Q但在界面上Q难道要用户d写排序|q样用户会觉得很难操作，而用上sortableQ这个问题不仅简单，而且操作h不知道清晰多。我们从传统的c/s走到b/s不仅是因为b/s 不需要安装，升Ҏ(gu)。还是因为b/sh更前的表现力?/p>
当然Q反对用javascript框架的理׃很尖锐。一Q开发h员的水^很难以掌握现有的javascript框架。二Q大家坚持认为，其实现在用的javascript的地方还不是很多。从需求上屈指可敎ͼtree,borderlayout,grid,calendar?/p>
Ҏ(gu)Q我提出的想法就是，大家如果觉得难以使用的话Q我在javascript框架上做一ơ封装，降低使用隑ֺ。第二个理由更好_虽然现在使用的地方就那么几个Q那好，你能拿出更好的方案么。曾l架构师_我们希望每一个界面控仉是单独的Q能单独使用。当然现在的Ljavascript 都是q样的。这P我就在大家仍用怀疑的眼光注视我的时候开始了javascript框架之旅?/p>
问题二：用哪个javascript框架Q?/p>
q个问题不是在讨论或者争执哪个好哪个不好Q未免大家再又争执，我让他们自己找javascript框架Q甚臛_以把他们最熟?zhn)的拿出来使用。大伙都说没有时_q样我也不担心有后话了?/p>
我把目前L的javascript分ؓ三类?/p>
诸如Qprototype/jquery/mootoolsq样的javascript框架Q只能是javascript工具。他的优势就是扩展性强Q社区支持很好，其是jquery
W二cd是：yui/ext/dojo/qooxdooq样的框架。他们是一套全pd的纯客户端的ui解决Ҏ(gu)Q用方便，能满x们的需要。缺Ҏ(gu)入口很高Q适用于做富客L。虽然我们现在的应用q是很多Q但是还没有到那个地步?
q有一cd是与服务器端技术结合的ajax框架Q他只能叫ajax框架,他基本只做数据交换。事实上只要做一个简单的servlet(j2ee)或者HttpHanlder(.Net)再在客户端加以封装，使用h也是很方便的。所以这cajax框架我认Z需要考虑?
在我看来Qƈ不是那个框架l对的好坏，而是什么样的框架能最好的满你的需求?
Z人阅历上来讲Q三cȝ多个框架我都知道一二。但是我最喜欢jquery,所以用了jquery了，他的好处是轻量U，扩展性强Q现有的插g以满需要。代码非常简介而且执行效率高。于是我找了一大堆jquery插g。再自己装城稍微简单的Ҏ(gu)。本着不重复发明轮子的原则。很多的界面问题都能解决了?
问题三：真的是那样么Q?
时至2009,目完了Q到了需要再ơ封装城产品的时候，ȝ也就来了。我发现虽然jquery插g很多Q很全，但是׃是百花齐放，我就不想修改里面的代码。慢慢的使用发现很多插g不是很稳定，像jstree,jquery ui ׃先前用的版本比较低，D很有的bug自己写一些修正。现在回q头来看那时候做的东西，发现新的版本已经修复了这些功能。而换上新版本的jqueryQ变化还是蛮多，比如jquery.browser׃推荐使用了，怎么办?
来?
本文是在用jquery之后Q发现维护工作量也不的背景下写下来的。我不知道是不是我当初选择jquery是错误的。是不是应该选择ext 之类的有着更强表现能力Q更E_的框架么Q现在的代码q是不是那么理想。由于很多的历史原因Q大家还在用ecside Qjscalendar。用ecside是因为历史原因。用jscalendar是因为jqueryq没有一个日历控件能支持旉的。我一个h的精力有限，而且我很多的旉都在写项目代?说到底还是领g重视)。我担心我当时做的决定会对将来造成负面影响?
冒昧发在首页上，真诚的希望大家提q看法Q在企业U应用系l上界面层应该怎样做，文中的有些观点如有不对的地方q请大家指教
]]>