ECMAScript6新特性及ES5对比整理

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

1.const 常量定义

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

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

ES5定义如下:

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

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

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

自己动手开发UI组件库(VanUI)

为了初步统一H5项目里面的UI样式,也为了提升团队的开发效率,自己向优秀的UI开源项目学习,结合实际情况,模仿开发了这套UI样式库。这个项目本身来讲没什么太深的技术,但是对于我个人来说确实一个新的起点,使用了很多开源框架和组件,随着不断学习深入,也应该朝着独立开发UI组件的方向继续前行。通过对WeUI(微信团队开源的样式库)的学习模仿修改,形成了现在的VanUI。确实学习WeUI对我帮助很大,基于npm来构建项目,使用less来高效开发css,通过合理目录划分来方便团队协同开发。总之收益匪浅,VanUI遵循MIT协议。 继续阅读“自己动手开发UI组件库(VanUI)”

zepto.js源码小摘抄

这里我不是要去解读源码,是在看zepto源码的过程中,把我觉得有用的地方记录下来,毕竟zepto直接面向了现代浏览器,够轻量,够高效。就像读了一篇非常优秀文章,写点摘要吧!

1.命名规范:构造函数pascal命名,变量驼峰,正则已RE结尾

2.声明一个emptyArray = [],在使用数组原型上的方法时,用变量代替[](相当于new Array()),提高了性能。

3.判断是否为数组方法

isArray = Array.isArray || function(object){ return object instanceof Array }

继续阅读“zepto.js源码小摘抄”

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代码重用及常见设计模式”