各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)

width:内容宽度(标准盒模型),怪异盒模型下包含了border,padding

 

clientWidth:包含内容和padding的宽度

继续阅读“各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)”

vue2-slider(基于vue2.x的移动端焦点图组件)

焦点图或者说轮播图是非常常用的一个组件,自己也用过像swiper这样的插件,其实在H5里面使用的功能都是非常基本的,所以还是打算自己写一个最小化功能的焦点图组件。使用了vue2.0框架,功能包含:自动轮播,滑动,无限循环,点击跳转页面。源码地址:https://github.com/rt-zhangxuefei/vue2-slider

这也是我自己第一次发布到github上

其中遇到了父级添加了touchstart并且需要阻止默认时间,此时子元素里面的a标签不会触发。查阅很多,最终的处理方式是模拟去出发a标签的click事件,因为href是click点击触发跳转

ECMAScript6新特性及ES5对比整理

这里整理ES6新特性以及跟ES5的对比用法

1.const 常量定义

const URL="https://zhangxuefei.site";

定义的常量不能被直接赋值修改,但是如果a=URL,那么a的值是可以修改的,如果PI是一个引用类型,那么对a的修改也会影响到URL

ES5定义如下:

Object.defineProperty(typeof global==="object"?global:window,"URL",{
 value:"https://zhangxuefei.site",
 enumerable:true,
 writable:false, //不能赋值
 configurable:false //不能delete
 });

 URL=2;
 console.log(URL);//https://zhangxuefei.site

继续阅读“ECMAScript6新特性及ES5对比整理”

flex实现水平垂直居中效果及其它方式

这里实现一个带有遮罩层,垂直水平居中图片的效果,无论浏览器窗口如何调节都能居中显示。应用CSS3的flex属性版本如下:

<body>
 <div>Hello</div>
 <div class="wrap">
 <div class="div1"><img src="img/1.jpg" alt=""></div>
 </div>
</body>

继续阅读“flex实现水平垂直居中效果及其它方式”

less快速入门

前端的世界出了很多框架和工具,其实冷静的想想,思维方式与后端大同小异,less的出现为了提高写css的效率。其实如果没有less,我相信也会有人去弄一个类似的工具来提高开发效率。nodejs的出现让,npm的丰富,出现了很多工具,不要被这些工具的表象迷惑。有过服务器端开发经验的人都知道,思路就是那些,基本也成了套路。当然这些东西仍然有学习的必要,因为已经有很多人在用了,圈子成熟。不用重复造轮子。今天我借助less官网学习less,快速入门下,希望给路过的人一点点帮助。 继续阅读“less快速入门”

高效CSS3动画或transition避免reflow

CSS3提供了3D变换的属性,让我们可以操作网页内容在一个3维的空间。并且这些被投射到3D空间的元素也可以使用transition,keyframe实现动画效果。3D变换当然需要浏览器的支持。3D变换中一个关键的属性:Perspective,可以指定给元素,也可以作为transform的属性。Perspective:使用CSS长度表示(px,em,rem等等),它定义了从viewport到3D元素的距离

继续阅读“高效CSS3动画或transition避免reflow”

纯CSS3动效

首先,什么是CSS3不能做的目前?(①不能控制滚动条scroll ②渐变没有动画效果)

使用原则:渐进式增强以及优雅的降级,因为在目前的浏览器环境下,对CSS3的支持有一些差异。不过相信这些差异随着时间的推移可以忽略。现在我们需要考虑如果浏览器不支持当前的CSS3特性,网站是否可以正常使用(所谓优雅降级)。这里记录一些常见的动效,并使用纯css实现。 继续阅读“纯CSS3动效”

写好js代码DOM和浏览器模式

写高效js代码的一些最佳实践:分解关注点。HTML:内容构建  CSS:样式呈现  JavaScript:行为交互。DOM操作是非常耗性能的,尽量遵循以下原则:

DOM访问遵循:①避免在循环里面访问DOM  ②把DOM元素引用赋值给一个局部变量来使用  ③使用选择器API()  ④缓存HTML元素的length

DOM操作遵循:DOM增删改操作会触发浏览器重绘(渲染)和回流(布局),尽量批量操作,构建大的DOM树,先在内存构建好了在添加。 继续阅读“写好js代码DOM和浏览器模式”

写好js代码重用及常见设计模式

谈到代码重用,首先想到的就是继承,GoF有这样的建议:对象组合优于继承。js继承通过原型来实现,基本实现如:function inherit(C,P){C.prototype=new P();}

或function inherit(C,P){var F=function(){};F.prototype=P.prototype;C.prototype=new F();} 继续阅读“写好js代码重用及常见设计模式”