对象化调用的组件共享倡议，抛砖引玉.

[chenzengxi]

我是这样想的，大家把平时工作中积累的常用代码，好的代码，写成对象化的调用模式，这样就会形成一个很好的库，对提高大家的工作效率会有大幅提高。

强调对象化主要是为了形成真正有用的通用模块库，大家一起来，让js有些质的变化,不再是凌乱的代码，要有很好的可读性，可扩展性,希望有高手参与。

偶先贴几个自己写的东东，大家提提意见，抛砖引玉。

[chenzengxi]

这是一般用于文件上传的东西。

<SCRIPT LANGUAGE=javascript>
onload=function(){
var lofile = new upfile();
}

function upfile(aoP){
var loThis = document.createElement("SPAN");
var lsuniqueID = loThis.uniqueID;
loThis.innerHTML = '<select style="width:200"></select><button onclick="'+lsuniqueID+'.Del()">删除</button><span><span><input style="width:10" type="file" onpropertychange="'+lsuniqueID+'.Add(this)"></span></span>';
if (aoP==null){
document.body.appendChild(loThis);
}else{
aoP.appendChild(loThis);
}
var loSelect = loThis.children[0];
var loFiles = loThis.children[2];
loThis.Add = function(aoFile){
if ((aoFile==null)||(aoFile.value=="")) return;
var loOpts = loSelect.options;
var lsfilename = aoFile.value.substring(aoFile.value.lastIndexOf("\\")+1);
loOpts[loOpts.length] = new Option(lsfilename,aoFile.uniqueID);
loSelect.value = aoFile.uniqueID;
aoFile.parentElement.style.display = "none";
var loObj = document.createElement("span");
loObj.innerHTML = '<input style="width:10" type="file" onpropertychange="'+lsuniqueID+'.Add(this)">';
loFiles.insertBefore(loObj);
}
loThis.Del = function(){
loEL = document.all(loSelect.value);
if (loEL!=null){
loEL = loEL.parentElement;
loFiles.removeChild(loEL);
}
var loOpts = loSelect.options;
if(loOpts!=null&&loOpts.length>0){
loSel = loOpts[loSelect.selectedIndex]
loOpts.removeChild(loSel);
}
}
loThis.AddName = function(asName){
if ((asName==null)||(asName=="")) return;
var loOpts = loSelect.options;
loOpts[loOpts.length] = new Option(asName,null);
}
loThis.getNames = function(){
var loOpts = loSelect.options;
var lxNames = new Array;
for (var i=0; i<loOpts.length; i++){
lxNames[lxNames.length] = loOpts[i].innerText;
}
return lxNames;
}
return loThis;
}
</SCRIPT>

[chenzengxi]

这是一个用于日期选择的东东

<SCRIPT LANGUAGE=javascript>
onload=function(){
var lodate = new dateSelect();
lodate.setDate("2003-01-01");
}

function dateSelect(aoP){
var loD = document.createElement("SPAN");
if (aoP==null){
document.body.appendChild(loD);
}else{
aoP.appendChild(loD);
}
loD.onSelectDate = function(){};
loD.getDate = function(){
var loChilds = this.all.tags("SELECT");
var lsDate = "";
for (var i=0; i<loChilds.length; i++){
var li = parseFloat(loChilds[i].value);
if (li<10) li="0"+li;
lsDate+=li;
if (i<2) lsDate+="-";
if (i==2) lsDate+=" ";
if (i>2&&i<loChilds.length-1) lsDate+=":";
}
return lsDate;
}
loD.setDate = function(asDate){
this.innerHTML = "";
var liSpaceYear = 20;
var loNowDate = new Date();
var liYear = loNowDate.getYear();
var liMonth = loNowDate.getMonth()+1;
var liDay = loNowDate.getDate();
var liHour = loNowDate.getHours();
var liMinute = loNowDate.getMinutes();
if (asDate!=null&&asDate!=""){
var lxDate = asDate.split(" ");
if (lxDate.length>0){
var lxUp = lxDate[0].split("-");
if (lxUp.length>0) liYear = parseFloat(lxUp[0]);
if (lxUp.length>1) liMonth = parseFloat(lxUp[1]);
if (lxUp.length>2) liDay = parseFloat(lxUp[2]);
}
if (lxDate.length>1){
var lxDown = lxDate[1].split(":");
if (lxDown.length>0) liHour = parseFloat(lxDown[0]);
if (lxDown.length>1) liMinute = parseFloat(lxDown[1]);
}
}
var loYear = document.createElement("SELECT");
loYear.onchange = new Function(''+this.uniqueID+'.setDate('+this.uniqueID+'.getDate())');
loYOpts = loYear.options;
for (var i=liYear-liSpaceYear; i<liYear+liSpaceYear; i++){
loYOpts[loYOpts.length] = new Option(i,i);
if (i==liYear) loYOpts[loYOpts.length-1].selected=true;
}
this.insertBefore(loYear);
var loFont = document.createElement("FONT");
loFont.innerHTML = "年";
this.insertBefore(loFont);

var loMonth = document.createElement("SELECT");
loMonth.onchange = new Function(''+this.uniqueID+'.setDate('+this.uniqueID+'.getDate())');
loMOpts = loMonth.options;
for (var i=1; i<=12; i++){
loMOpts[loMOpts.length] = new Option(i,i);
if (i==liMonth) loMOpts[loMOpts.length-1].selected=true;
}
this.insertBefore(loMOpts);
var loFont = document.createElement("FONT");
loFont.innerHTML = "月";
this.insertBefore(loFont);
var loDay = document.createElement("SELECT");
loDay.onchange = new Function(''+this.uniqueID+'.onSelectDate()');
loDOpts = loDay.options;
var liMaxDay=getMaxDay(liYear,liMonth);
for (var i=1; i<=liMaxDay; i++){
loDOpts[loDOpts.length] = new Option(i,i);
if (i==liDay) loDOpts[loDOpts.length-1].selected=true;
}
this.insertBefore(loDay);
var loFont = document.createElement("FONT");
loFont.innerHTML = "日";
this.insertBefore(loFont);
var loHour = document.createElement("SELECT");
loHour.onchange = new Function(''+this.uniqueID+'.onSelectDate()');
loHOpts = loHour.options;
for (var i=0; i<=23; i++){
loHOpts[loHOpts.length] = new Option(i,i);
if (i==liHour) loHOpts[loHOpts.length-1].selected=true;
}
this.insertBefore(loHOpts);
var loFont = document.createElement("FONT");
loFont.innerHTML = "时";
this.insertBefore(loFont);
var loMinute = document.createElement("SELECT");
loMinute.onchange = new Function(''+this.uniqueID+'.onSelectDate()');
loMiOpts = loMinute.options;
for (var i=0; i<=59; i++){
loMiOpts[loMiOpts.length] = new Option(i,i);
if (i==liMinute) loMiOpts[loMiOpts.length-1].selected=true;
}
this.insertBefore(loMinute);
var loFont = document.createElement("FONT");
loFont.onchange = new Function(''+this.uniqueID+'.onSelectDate()');
loFont.innerHTML = "分";
this.insertBefore(loFont);
loD.onSelectDate();
function getMaxDay(aiYear,aiMonth){
var loDay = [0,31,28,31,30,31,30,31,31,30,31,30,31];
if (aiYear%4==0) loDay[2] = 29;
return loDay[aiMonth];
}
}
return loD;
}
</SCRIPT>

[wangxj0600]

顶一下

[chenzengxi]

这是一个仿outlook或者QQ的菜单:

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<style type='text/css'>
.folder1 {text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}
.folder2 {text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
.foldercont{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
</style>

<SCRIPT LANGUAGE=javascript>
onload=function(){
var lstr = ""
for (var i=0; i<30; i++) lstr+= "haha..<br>";
var lofolder = new outlookfolder(null,335,100,15);
lofolder.addfolder("菜单1","1..<br>2..");
lofolder.addfolder("菜单2",lstr);
lofolder.addfolder("菜单3");
lofolder.addfolder("菜单4");
lofolder.addfolder("菜单5");
lofolder.showfolderX(0);
}
//[容器,高,宽,展开速度]
function outlookfolder(aoP,aih,aiw,ait){
if (aih==null) aih=200;
if (aiw==null) aiw="100%";
if (ait==null) ait=10;
var loMain = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
var lsUniqueID = loMain.uniqueID;
var loSlide = document.createElement("span");
loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
var liContH = aih;
if (aoP==null){
document.body.appendChild(loMain);
document.body.appendChild(loSlide);
}else{
aoP.appendChild(loMain);
aoP.appendChild(loSlide);
}
//增加一个目录[名字,内容]
loMain.addfolder = function(str,cont){
var loPar = document.createElement("SPAN");
loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
this.appendChild(loPar);
loPar.children[0].innerHTML = (str==null?"　":str);
loPar.children[1].innerHTML = (cont==null?"　":cont);
liContH -= parseInt(loPar.children[0].offsetHeight);
}
//打开／关闭第x个目录夹
loMain.showfolderX = function(aix){
loMain.showme(loMain.children[aix].children[0])
}
//打开/关闭当前obj所在的目录
loMain.showme = function(obj){
if (loMain.moving) return;
loMain.moving = true;
if (obj.bOpen){
obj.bOpen = false;
loMain.closefolder(obj.parentElement.children[1]);
obj.className = 'folder1';
}else{
obj.bOpen = true;
loMain.openfolder(obj.parentElement.children[1]);
obj.className = 'folder2';
var lxfolders = loMain.children;
for (var i=0; i<lxfolders.length; i++){
var loChild = lxfolders[i].children[0];
if(loChild.uniqueID!=obj.uniqueID){
lxfolders[i].children[1].style.height=1;
loChild.bOpen = false;
loChild.className = 'folder1';
}
}
}
loMain.SlideItemsAction(obj.parentElement.children[1]);
}
//为目录内容设置Slide
var loSlideItem = null;
var lbSlideing = false;
loMain.SlideCilckdown = function(){ //向下滚动
loSlideItem.scrollTop += 2;
if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
}
loMain.SlideCilckup = function(){ //向上滚动
loSlideItem.scrollTop -= 2;
if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
}
loMain.SlideClickStart = function(){ //允许开始滚动
lbSlideing=false;
}
loMain.SlideClickStop = function(){ //强制停止滚动
lbSlideing=true;
}
loMain.SlideItemsAction = function(obj){
var loUp = loSlide.children[0];
var loDown = loSlide.children[1];
if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
loUp.style.display="none";
loDown.style.display="none";
}else{
loSlideItem = obj;
var lxOffset = getTrueOffset(obj);
var lileft = lxOffset[0]+obj.offsetWidth-20;
var litop = lxOffset[1]+obj.offsetHeight+5;
with(loUp.style){
display="";
left=lileft;
top=litop;
}
with(loDown.style){
display="";
left=lileft;
top=litop+liContH-40;
}
}
}
//逐渐关闭obj所在的内容显示
loMain.closefolder = function(obj,ai){
if (ai==null) ai=liContH;
if (ai<ait){ obj.style.height=1; ai=1}
if (ai>1){
obj.style.height = ai;
ai -= ait;
setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
return;
}
loMain.moving = false;
}
//逐渐打开obj所在的内容显示
loMain.openfolder = function(obj,ai){
if (ai==null) ai=1;
if (liContH>ai){
obj.style.height = ai;
ai += ait;
setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
return;
}
loMain.moving = false;
}
function getTrueOffset(e){
var x=0; var y=0;
if(!e)return [x,y];
while(e){
x+=parseInt(e.offsetLeft);
y+=parseInt(e.offsetTop);
e=e.offsetParent;
}
return [x,y];
}
return loMain;
}
</SCRIPT>

[airlulu]

支持一下拉

[gage]

GOOD

[loveisbug]

thanks

[shanhe]

最好找一个站点，大家写js库，上串后演示。51js好像有吧

[wangxj0600]

以前的51js上有的,不过现在新的上面还没有,大家可以将自己的写在上面

[chenzengxi]

多谢支持!

大家来点东西啊，鼓励原创代码。偶贡献了几个，大家也来嘛 :)

同时欢迎大家修改，和提出自己的方法。

[chenzengxi]

好像没人支持啊，大家可以提些建议什么的啊，打击偶的积极性啦，:(

[wanghr100]

好家伙～

大家努力啊～

[llrock]

双手赞同楼主提议

[koolfoo]

写什么组件，用htc不就得了，全都搞在一起，小心把ie给弄死了
要是功能强，代码又太多，不得其解
看来最好的办法还是用scriptlet最好，不过怎样把它注册到用户的机子里去却是个问题，小心用户告你侵犯隐私。

[llrock]

制定JS编写的规范，比如如何自定义对象，比如类似C++,然后全部使用方法和属性代替函数和变量。

规定一段特殊的字符来代表下面为public部分，如
function Human(name){

/*JS-Object Private*/
{
....
}
/*JS-Object Public*/
{
this.walk=Human_walk;
...
}
}
Xiaohua=new Human("XiaoHua");
这样的话就容易看懂了，当别人祝需要调用你public的方法就可以工作了,而不需要太关心Private中的东西。如果大家都用相同的规范来编写JS，那么我们就可以做一 Visual Javascript Tool了，就简称VJT吧，哈哈好像真的似的。

[llrock]

题外话
=================================
可惜js语法过于松弛，导致人们随心所欲的书写，其实完全可以用C#代替js，差不多了，C#更强大了，微软的东西就是好，单元.NET和JAVA大战中，.NET取胜，JAVA慢呀，真的好慢。做做广告。

[emu]

其实完全可以用C#代替js?
单元.NET和JAVA大战是怎么回事？
.NET取胜？怎么取胜的？
JAVA慢，跟谁比，怎么比的？

[llrock]

emu(ston)

java 不慢么？你做一个需要实时数据的Program，虽然java仍旧编译，但是解释器机制慢，.net好多了，同样的平台无关特性，.net性能好多了，我也没有实际经验，看了很多书籍，很多书是这么说的。呵呵。

[llrock]

photoshop有没有java版本的？难道只是因为重写代码库的问题么?我在其它论坛看到过很多人java开发GIS，那肯定是个错误，更多的人使用C++，vb等，呵呵。

[llrock]

不说了，再说就跑题了!
我支持楼主的想法