2017年10月_chiuwingyan

原创浮动和绝对定位对布局的影响

http://blog.csdn.net/cxl444905143/article/details/17361045

2017-10-25 19:13:03 1672

原创原生JS实现无缝轮播图

效果图：其实左右还有两个箭头按钮可以切换图片，不过是鼠标移到轮播图那个区域才显示出来。点击下面的小圆点可以切换到相应的图片，有定时器可以自动轮播。html：要点：要给最前面添加最后一张图片作为附属图，在最后面添加第一张图片作为附属图，实现无缝轮播。给小圆点绑定一个自定义属性index用于标记当前index

2017-10-25 12:10:12 5884

转载 vue的nextTick()

https://segmentfault.com/a/1190000008570874

2017-10-23 11:02:43 321

原创饿了么webapp之块级盒子垂直相邻margin重叠

效果图：我这里设想四周margin都是一样的值，然后商品之间的分隔线是通过伪元素after添加border-bottom进去的，但是发现实际效果是：这是由于块级元素相邻会造成margin重叠，本来上下都有margin，被重叠只剩下一个margin，具体原因见http://www.cnblogs.com/zhangmingze/articles/4664074.html

2017-10-22 23:08:18 273

转载 display:table的用法

http://www.jianshu.com/p/8aa3f1030908

2017-10-22 20:51:49 259

原创饿了么webapp之css footer的实现

效果图：如果内容的高度没有屏幕大小这么高，关闭按钮在底部这个位置。如果内容高度超过屏幕大小，会有会有滚动条并且关闭按钮始终位于页面最顶部。实现方法 none .detail position:fixed z-index:100 top: 0

2017-10-21 21:22:20 819

原创前端面试题总结（二）

1、实现水平垂直居中的方法我一直以为设置父相子绝，然后子元素设置left:50%;top:50%;就可以了，然而今天面试时被面试官问我才发现不可以，当时也不知道为什么，唉想哭。回去试了一下，真的不可以，只有在水平方向上可以居中，在垂直方向上不能。因为我没有给父元素设置高度，那么父元素的高度就会自动和子元素的一样，而子元素又是根据父元素定位的，因此垂直方向上没有效果。方法一：要设置

2017-10-21 19:59:37 217

转载 js的闭包

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

2017-10-20 20:19:45 128

转载 Javascript面向对象编程（三）：非构造函数的继承

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

2017-10-19 22:02:57 157

转载 Javascript面向对象编程（二）：构造函数的继承

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

2017-10-19 18:30:41 110

转载 Javascript 面向对象编程（一）：封装

转载：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

2017-10-19 18:14:10 118

原创 css清除浮动的几种方法

我一直以为产生浮动要我们给元素设定float，例如这里提到的：http://www.jianshu.com/p/09bd5873bed4今天我发现如果父盒子高度不定，子元素没有设置浮动，如果父盒子高度变为0，那么里面的子元素会浮动，代码：.parent{border: 1px solid red;height: 0;}.child{border: 1px s

2017-10-19 16:49:01 754

原创饿了么webapp之header的背景

效果图：就是把header的背景图实现以上效果，模糊效果，在遮盖罩下方，图片和商家头像图片一样。我一开始的想法是直接给header设置背景图片，但是图片是商家头像，数据是通过后端获取的，那么css可以使用js的数据吗？网上查了一下，答案是可以的。我们知道CSS里是可以控制某些HTML元素的属性的，譬如background-image等等，而在URL里添加Javascri

2017-10-19 13:50:33 1656

原创前端面试题总结（一）

1、如何实现移动端一物理像素这道题就是之前写过的饿了么之1px像素实现，然而，我忘记了这个DPR，毕竟dpr我的第一反应是英语dpr...然后我就用很僵硬的文字描述，后来发现，是设置缩放scaleY，我却写出border...想死啊2、div+css的布局相比table布局的优点这道题我只想到更加灵活，其他优点是：1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，

2017-10-18 23:07:48 192

原创 js普通函数加括号与不加括号的区别

1、JS中函数名后面的括号加与不加的区别和作用？emo1 demo2实际上是指针，你只需要记住，函数名就是指针就可以了。function fun(){return 5}var a=funvar b=fun()JS中我们把以上代码加粗的部分叫做函数，函数是一种叫做function引用类型的实例，因此函数是一个对象。对象是保存在内存中的，函数名则是指向这

2017-10-18 22:24:00 1816 1

转载 js中变量提升

转载至：http://www.jb51.net/article/30719.htm一。案发现场我们先看一段很简单的代码：复制代码代码如下:var v='Hello World'; alert(v); 这个没有疑问吧，弹出“Hello World”。OK，我们继续。我们在看一段Code：复制代码代码如下:

2017-10-18 21:29:19 204

原创 js中this关键字详解

首先，js对于this，我们有一个原则，那就是this指向的是调用该函数的对象。下面分四种情况：情况一：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global，也就是指向windows请看下面这段代码，它的运行结果是1。复制代码代码如下:　　function test(){ 　　　　this.x = 1

2017-10-17 14:51:36 745

原创饿了么webapp之数据二级访问

效果图：父组件代码：子组件代码：问题在于：子组件获取seller.supports[0]时一定要通过v-if判断有无seller.supports，否则会报错，这是为什么呢？原因在于一开始传过去的seller.supports[0]是并没有这个属性，但是有seller.support和support.name等，因为这些可以说是直接属

2017-10-15 17:23:21 330

原创饿了么webapp之1px边框

效果图：关于像素和DPR：http://www.cnblogs.com/xiaohuochai/p/5494624.html因此，一般而言，移动端的像素是桌面端的两倍，即使css像素设置为1px，但在移动端设备显示是2px。例如以上tab切换栏的下边框，如何解决呢？1.先给tab设置下边框的样式border-1px($color) position: relati

2017-10-14 22:34:32 674 1

原创 js事件的捕获和冒泡

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。这是HTML结构

2017-10-13 13:49:12 192

转载 vue中的event bus非父子组件通信

http://blog.csdn.net/qq_24122593/article/details/53787504

2017-10-13 11:14:48 213

转载 vue中v-model和value的区别

情景【Situation】：编写通用的输入组件时，子组件要绑定到父组件的某个变量上dataA，当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA，而是父组件可以直接this.dataA就可以取到当前子组件最新值。任务【Task】：实现在父组件直接this.dataA就可以取到当前子组件最新值。行动【Action】：

2017-10-05 21:48:29 27860

转载 vue中computed和watch区别

http://www.jb51.net/article/120073.htm

2017-10-05 21:05:47 578

chiuwingyan的博客