百度前端技术学院-task2.18-2.19源码以及个人总结

Posted 2020-07-04 huansky

源码：http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551

1、感觉在写js的时候，最好先理清思路，先干什么，在干什么，不要想到哪里写到哪里；

2、一定要学会调试js，不然你哗哗写了好多，结果一运行，却不知问题出到哪里，那就是浪费时间；

3、正则表达式的写法，以及如何运用，有两种方式，分别采用test()和match();

var pattern=/^[+,-]?\d+$/;
    iptValue=ipt.value.trim();
    if(!pattern.test(iptValue)){
        alert("请确认输入的是数字？");
        return;
    }

if(!city.match(/^[A-Za-z\u4E00-\u9FA5]+$/)){
        alert("城市名必须为中英文字符！")
        return;
    }

4、事件的绑定，IE和其他浏览器的区别，这段代码可以保存起来，用到的概率很大

//绑定事件函数
function on(element,eventName,listener){
    if (element.addEventListener){
        element.addEventListener(eventName,listener,false);
    }
    else if (element.attachEvent){
        element.attachEvent(‘on‘+eventName,listener);
    }
    else
        element[‘on‘+eventName]=listener;
}
on(mybt,‘click‘,addBtnHandle);

5、就是如何获取事件对象和目标

//获取事件对象和事件的目标
var EventUtil={
    getEvent:function(event){
        return event ? event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    }
}

6、事件委托实现。将事件绑定在多个兄弟元素的父元素上，再通过target.id来确定是那个元素是目标id了;部分代码摘入如下。

 event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    var tt;
        switch(target.id){//
        case "l-input":
            if (validate()){
                t.unshift(ipt.value);
            }
        break;
        case "r-input":
            if (validate()){
                t.push(ipt.value);
            }
       break;

7、下面两段涉及到很多知识，包括removeChild, target.tagName.toLowerCase(), target.dataset.num,(e.g. data-num="2"); parseInt；parentNode等等。

event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
        if (target.tagName.toLowerCase() === ‘span‘) {//记得要转化为小写;
            numUl.removeChild(target);
            var tt=target.dataset.num;//如何获取自定义元素的值;
            removeData(tt);
            alert("移除"+target.innerhtml);//innerHTML也可以用来读;
    }


//第二段代码
event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    var tt=target.parentNode.dataset.num;//父节点的获取
    tt=parseInt(tt);
        if (target.parentNode.tagName.toLowerCase() === ‘span‘) {
            numUl.removeChild(target.parentNode);
            alert("移除"+removeData(tt));
    }

8、排序，冒泡排序也不会写了....我就是个坑。

每次比较相邻的两个数，一次循坏结束，最后一个就是最大或者最小的，因此，第二次循坏比较的时候，要减少一次比较的次数，这样一直比较下去。

 for(var i=0;i<length-1;i++){
        for(var j=0;j<length-i-1;j++){
            if (t[j]>t[j+1]){
                tem=t[j];
                t[j]=t[j+1];
               t[j+1]=tem;
            }
        }
    }

9、在你用js将text输入到htmL的时候，可以添加class,自定义属性，id等等，这样就可以在设置css的时候，或者js中派上用场。

10、如何创建一个元素，并向其中加入子元素和内容等。还有为其设置style属性。

var newSpan = document.createElement(‘span‘);
        var newSpanText = document.createElement(‘div‘);
        newSpan.style.position = ‘relative‘;
        newSpanText.innerHTML = numbers[i];
        newSpanText.style.position = ‘absolute‘;
        newSpanText.style.bottom = ‘-1.5em‘;
        newSpan.style.width = ‘20px‘;
        newSpan.style.height = numbers[i] + ‘px‘;
        newSpan.appendChild(newSpanText);
        switch (method) {
            case ‘leftIn‘:
                result.insertBefore(newSpan, spans[0]);
                break;
            case ‘rightIn‘:
                result.appendChild(newSpan);
                break;
        }

未来路还很长，继续加油。