从写的一个form的JS引发的思考

前些天写了个from的JS.
http://wd1.osp.corp.hki.yahoo.com/user/F2E/Money%202.0/web/intlindex_compare.html
这里用到的都是from中非常典型的JS了。
我先贴出我的第一版JS.
YTWFI.Module.StockCompare = function (dModule) {
    var dRootNode = YUD.getElementsByClassName("expt-main")[0];
    var dInputs = dRootNode.getElementsByTagName('input');
    var dExed = document.getElementById("ex-selected");
    var dSubmit = YUD.getElementsByClassName("btn-g1-m",'input',dModule)[0];
    var dReelect = document.getElementById("reelect");
    var dTally = document.getElementById("numtxt");   
    var fnSubmit = function(e) {if (dExed.innerHTML == '') {alert('請選擇指數！');YUE.stopEvent(e);}} //未選指數狀況
        for(var i=0;i<dInputs.length;i++){
            dInputs[i].setAttribute('name','ipt'+i);
            dInputs[i].checked = false;
            var dTd1 = dInputs[i].parentNode.nextSibling;
            if(dTd1.nodeType == 3){dTd1 = dTd1.nextSibling;};
            var dTd2 = dTd1.nextSibling;
            if(dTd2.nodeType == 3){dTd2 = dTd2.nextSibling;};
           
            var fnReelect = function(e,params){
                dInputs[params[2]].checked = false;
                dExed.innerHTML = '';
                dTally.innerHTML = '(請選擇指數，尚有<em>8</em>項)';
                params[0].style.color = '#000';
                params[1].style.color = '#000';
            }
            YUE.on(dReelect,'click',fnReelect,[dTd1,dTd2,i,dInputs]);
                           
            var fnReport = function (e,params) {
                if(this.checked == true){
                    var iCount=7 - dExed.childNodes.length;
                    if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                    if(dExed.childNodes.length>7){alert("您已選擇8項上限!");YUE.stopEvent(e);return;}//尚有項數已滿
                    params[0].style.color = '#ff0000';
                    params[1].style.color = '#ff0000';
                    var dDiv = dExed.appendChild(document.createElement('div'));
                    dDiv.setAttribute('id','div_'+params[2]);
                    dDiv.i = params[2];
                    dDiv.innerHTML = '<span>' + params[1].firstChild.nodeValue + '</span>'+'<img src="i7/ico_iscf_delete.gif" />';
                    var dImg = dDiv.lastChild;
                    var fnCheckedFalse = function (e,i){
                        params[0].style.color = '#000';
                        params[1].style.color = '#000';
                        dImg.parentNode.parentNode.removeChild(dImg.parentNode);
                        dInputs[i].checked = false;
                        var iCount=8 - dExed.childNodes.length;
                        if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                    }
                    YUE.on(dImg,'click',fnCheckedFalse,dDiv.i);
                }
                else{
                    params[0].style.color = '#000';
                    params[1].style.color = '#000';
                    dExed.removeChild(document.getElementById('div_'+params[2]));
                    var iCount=8 - dExed.childNodes.length;
                    if(iCount >= 0){dTally.innerHTML = '(尚有<em>'+ iCount +'</em>項)';}
                }
            }
            YUE.on(dInputs[i],'click',fnReport,[dTd1,dTd2,i,dInputs]);
        }
        YUE.on(dSubmit,'click',fnSubmit);
       
};   
这是最终版：
YTWFI.Module.IntlStockCompare = function(dModule) {
    var dForm = dModule.getElementsByTagName('form')[0];
    var dParam = YUD.getElementsByClassName('ui-parameter','input',dModule)[0];
    var dInputs= dModule.getElementsByTagName('input');
    var dNum = document.getElementById('numtxt').getElementsByTagName('em')[0];
    var dPane = document.getElementById('ex-selected');
    // action
    var onSetInputStyle = function(oInput,bFlag) {
        var dTd1 = oInput.parentNode.nextSibling;
        if(dTd1.nodeType == 3){dTd1 = dTd1.nextSibling;};
        var dTd2 = dTd1.nextSibling;
        if(dTd2.nodeType == 3){dTd2 = dTd2.nextSibling;};
        dTd1.style.color = (bFlag)?'#ff0000':'#000000';
        dTd2.style.color = (bFlag)?'#ff0000':'#000000';
        oInput.checked = bFlag;
        return dTd2.innerHTML;
    };
    var onGetFormSetting = function() {
        var sParam = ','+dParam.value+',';
        var sHTML = '';
        var nNum = 0;
        for (var i=0,j=dInputs.length;i<j;i++) {
            if (dInputs[i].type != 'checkbox') {continue;}
            if (sParam.indexOf(','+dInputs[i].value+',')>-1) {
                dInputs[i].checked = true;
                sHTML = sHTML + '<div><span>' + onSetInputStyle(dInputs[i],true) + '</span> <img class="ico-delete" name="' + i + '" src="i7/ico_iscf_delete.gif" /></div>';
                nNum++;
            } else { if (dInputs[i].checked) {onSetInputStyle(dInputs[i],false);} }
        }
        dNum.innerHTML = 8 - nNum;
        dPane.innerHTML = sHTML;
    };
    var onSetFormSetting = function(oComponent) {
        var sParam = '';
        var sHTML = '';
        var nNum = 0;
        for (var i=0,j=dInputs.length;i<j;i++) {
            if (dInputs[i].type != 'checkbox') {continue;}
            if (dInputs[i].checked) {
                sParam = sParam + ',' + dInputs[i].value;
                sHTML = sHTML + '<div><span>' + onSetInputStyle(dInputs[i],true) + '</span> <img class="ico-delete" name="' + i + '" src="i7/ico_iscf_delete.gif" /></div>';
                nNum++;
            } else { if (dInputs[i]==oComponent) { onSetInputStyle(dInputs[i],false); } }
        }
        if (nNum > 8) {alert('您已選擇8項上限！');onSetInputStyle(oComponent,false);return false;}
        dNum.innerHTML = 8 - nNum;
        dPane.innerHTML = sHTML;
        dParam.value = sParam.substr(1);
    };
    // init
    onGetFormSetting();
    YUE.on(dForm,'submit',function(e){if (dParam.value == '') {alert('請選擇指數！');YUE.stopEvent(e);}});
    YUE.on(dForm,'click',function(e){
        var oComponent = YUE.getTarget(e);
        if (oComponent.type == 'checkbox') {onSetFormSetting(oComponent);}
        else if (oComponent.type == 'botton' && oComponent.className.indexOf('ui-cancel')>-1) {window.history.back();}
        else if (oComponent.className.indexOf('ico-delete')>-1) { onSetInputStyle(dInputs[oComponent.name],false); onSetFormSetting(); }
    });
    YUE.on('ui-reset','click',function(e){YUE.stopEvent(e);dParam.value='';onGetFormSetting();});
};

看完代码，估计你们都这两段代码的写法肯定有你的想法（呵呵，当然要对YUI熟悉，否则都写不知道是什么东西）。我个人的观点是:第一段代码是以功能实现为目标的CODE。所以可读性差，重码率高。而第二段code则结构清晰，表现的实现和行为的实现分开，以后的可扩展性和可修改性也好很多。而且尽量想尽
现在google和yahoo率先采用一种叫scrum 的project方式。

Scrum的基本假设是：

开发软件就像开发新产品，无法一开始就能定义软件产品最终的规程，过程中需要研发、创意、尝试错误，所以没有一种固定的流程可以保证专案成功。Scrum 将软件开发团队比拟成橄榄球队，有明确的最高目标，熟悉开发流程中所需具备的最佳典范与技术，具有高度自主权，紧密地沟通合作，以高度弹性解决各种挑战，确保每天、每个阶段都朝向目标有明确的推进。

Scrum 开发流程通常以 30 天(或者更短的一段时间)为一个阶段，由客户提供新产品的需求规格开始，开发团队与客户于每一个阶段开始时挑选该完成的规格部分，开发团队必须尽力于 30 天后交付成果，团队每天用 15 分钟开会检查每个成员的进度与计划，了解所遭遇的困难并设法排除。

反映到F2E。那就要求我们的HTML,CSS,JS的code能力将非常地强，而且code的扩展性能也有非常的要求，不能为实现需求的功能而coding。在写code的过程时刻强调代码的可扩展性和灵活性。因为沟通的频率更高，所以要求code的可读性，语义化也同样更高。这是以后开发的一种趋势，所以掌握这种工作方法的核心非常重要！