AYABALA博客

Category: 前端开发 (page 1 of 4)

Object.defineProperty()方法详解

Object.defineProperty

顾名思义,为对象定义属性。在js中我们可以通过下面这几种方法定义属性

3种定义对象属性的方法

var someOne = {};
// (1) define someOne property name
someOne.name = 'cover';
//or use (2) 
someOne['name'] = 'cover';
// or use (3) defineProperty
Object.defineProperty(someOne, 'name', {
    value : 'cover'
})

使用Object.defineProperty定义对象属性看起来很麻烦,但是这种方式是十分强大的

我们可以通过Object.defineProperty这个方法,直接在一个对象上定义一个新的属性,或者是修改已存在的属性。最终这个方法会返回该对象。

继续阅读

Vue源码学习笔记(一)

前言


百度前端技术学院课程在今年春天全面升级,其中学院公开课里面的任务我觉得都非常好,涉及前端方面的知识很广而且十分具有难度。其中百度糯米前端技术学院中有5个关于Vue源码的学习任务我觉得很不错,现在网上关于Jquery源码的分析有很多,但是关于Vue这个新兴框架的源码分析却少之又少。希望通过这五个任务让我们对Vue内部的实现有一个了解,学习其中的思想

【css】opacity:0,visibility:hidden,display:none的区别

1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样

【css】line-height中百分比和倍数区别

line-height:300{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5} 先计算后继承
line-height:3 先继承后计算,行高随字体大小改变

【转载】IE下hack注释

<!–[if lte IE 6]>
<![endif]–>
IE6及其以下版本可见
<!–[if lte IE 7]>
<![endif]–>
IE7及其以下版本可见

继续阅读

【js】js设置样式优先级的问题

在用js去设置css样式的时候:在同一个代码块中,有些css样式的设置的权限要高于其他的样式

这样是先设置position再设置left和top,所以无法读取初始的left和top:

for (var i=0; i<aLi.length; i++) {
        //在用js去设置css样式的时候:在同一个代码块中,有些css样式的设置的权限要高于其他的样式
        aLi[i].style.left = aLi[i].offsetLeft + 'px';
        aLi[i].style.top = aLi[i].offsetTop + 'px';
        aLi[i].style.position = 'absolute';
}  //这样是先设置position再设置left和top,所以无法读取初始的left和top

解决方法:分成两个代码块

for (var i=0; i<aLi.length; i++) {
        aLi[i].style.left = aLi[i].offsetLeft + 'px';
        aLi[i].style.top = aLi[i].offsetTop + 'px';
}
for (var i=0; i<aLi.length; i++) {
        aLi[i].style.position = 'absolute';
}

【html】词汇断行word-break:break-all word-wrap:break-word 区别

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

继续阅读

【ps】PSD测量注意事项

文字右方和下方会有1像素的默认间隙;

ctrl+shift+alt+E:合并可见图层

【html】图片格式

JPG:不支持透明半透明,所有空白区域填充白色

GIF:支持透明,不支持半透明

png8:支持透明,不支持半透明

png24:支持透明,也支持半透明

 

JPG:网页中的大图,高清图(体积大);

GIF:网页中的小图标(动画图片);

PNG8:网页中的小图标;

PNG24:图像中存在半透明效果的图片;

【html】Input的size与maxlength属性的区别

maxlength=”5″,则input输入框中只能够输入5个字符

size=”5″,表示input输入框只显示5个字符,但是可以输入更多

Copyright © 2019 AYABALA博客

Theme by Anders NorenUp ↑