关闭

前台开发总结10——20170907

121人阅读 评论(0) 收藏 举报
分类:
一、之前开发过程中经常遇到的情况是我需要该一个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> 


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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:148393次
    • 积分:2915
    • 等级:
    • 排名:第13770名
    • 原创:135篇
    • 转载:107篇
    • 译文:0篇
    • 评论:4条
    最新评论