前台开发总结10——20170907

一、之前开发过程中经常遇到的情况是我需要该一个html节点的样式，不小心改了class类名。而js又恰恰使用了这个class操作了dom。这个时候页面运行的时候肯定会报错的，增加了项目的维护成本。

有以下两种方案可以有效的解决这种问题。
第一就是添加自定义属性，比如
<div class="section" node-type="pagesecond"></div>当我需要操作dom的时候就通过jQuery的属性选择器来操作这个dom而不会去使用class。这样在我调整样式、需要修改class名称的时候也不会影响js代码。
第二种就是根据大家经常说的使用-来做html 类名的连接符，而我们就规定一个规范就是使用下划线（_）来标记我要操作dom节点的名称，比如
<div class="section_pagesecond"></div>。

这两种方式，如果是在开发多人维护的项目是都是需要提前预定规范，我在项目中是使用的前者。

二、JS由三部分组成的，ECMAScript、DOM和BOM

三、Web前端学习推荐网站 https://github.com/baidu-ife/ife/tree/master/2015_spring/task

四、在盒模型中，元素height、width若使用百分比，则该百分比指的是其父元素的高、宽；
元素的padding和margin使用百分比，则该百分比只指的为父元素的宽。

五、ES5中只有全局作用域和函数作用域，ES6新增块级作用域，使用let和const声明变量

六、web1.0、2.0、3.0的区别
web1.0网络是信息提供者，单向性的提供和单一性理解；
web2.0网络是平台，用户提供信息，通过网络，其他用户获取信息；
web3.0网络成为用户需求理解者和提供者，网络对用户了如指掌，知道用户有什么、要什么以及行为习惯，进行资源筛选、智能匹配，直接给用户答案。

七、制作网页遮罩层
当需要制作遮罩层效果时，可以显示两个div，第一个显示遮层要显示的内容，第二个div设一个很大的height，覆盖整个页面，两个div都适用定位，通过z-index设置div覆盖的先后顺序

八、清除DOM冒泡，除了使用event.stopPropagation();还可以通过js代码消除冒泡

function ShowMenu(obj, noid) {
        window.h1 = obj; nowid = noid;   //window.h1指定为全局变量的h1，
    }
var h1,nowid;
function ma(item){
    do{
        if(item.id==nowid){
            return false;
        }
    }while(item=item.parentNode);
    return true;
}
window.onclick=function(e){
    var o=e.target || e.srcElement;  //获取被点击的元素,ie下支持e.srcElement，ff支持e.target
    if(o.tagName!='H1'&& h1 && ma(o)){   //点击的元素不为H1(目录)，存在h1(显示下拉框)，点击的元素是否为下拉框中的内容
        h1.click();  //触发上一次目录的点击事件
        h1=null;   //清空记录
    }
}


<h1 onClick="javascript:ShowMenu(this,'NO0')" class="noclass">Store</h1>

九、架构是对客观不足的妥协，规范是对主观不足的妥协。

秒客网

前台开发总结10——20170907

相关文章