yellowlemon

yellowlemon 查看完整档案

成都编辑成都东软学院  |  软件技术 编辑成都我趣科技有限公司  |  前端 编辑 blog.lemonss.net 编辑
编辑

做一个没有拖延症的程序猿

个人动态

yellowlemon 赞了回答 · 2017-03-10

解决这段JS代码的作用域为什么是window了?

首先我觉得这是一道人为构造的“戏过了的”JS题目,涉及到函数声明提升、this指向、函数表达式、逗号表达式,但是日常谁写出这样类似的代码肯定是活不久了的,下面尝试分解一下:

首先有一个知识点是声明提升,这里有一个全局作用域下的f()函数,这个会被提升到顶端,所以你原来的代码实际上执行起来是这样的顺序:

//这个函数声明提升啦
function f(){ console.log(3); }

var a=1;
var b={
  a:2,
  b:function(){
    console.log(this.a);
  }(), 
  f:this.f=function(){
    console.log(this.a);
  }
};
//function f(){ console.log(3); }
f();
b.f();
(b.f)();
(0,b.f)();

而在对象b中的属性f中,是一个函数表达式,b.f:this.f=function(){...}相当于b.f=this.f=function(){...},这个赋值是立即发生的,只是函数体内不立即执行,所以也就是说,b.f和this.f都指向了这个匿名函数,而这个this是window,变成了b.f=window.f=function(){...},于是这个window.f覆盖了由于声明提升到顶的那个f(那个f也是在window下的),明白了这个再看:

  1. 第一个“1”,题目理解没错,是因为b.b是个立即执行的函数,输出的

  2. 第二个“1”,是f()的输出,也就是window.f(),这个根据上面的分析,看到由于声明提升和对象内覆盖赋值,这个执行的是console.log(this.a);函数体,this指向window,所以是1;

  3. 第三个“2”,是b.f()的输出,因为b.f也是指向了那个函数体,但此时this指向调用这个函数的对象b,所以是输出2;

  4. 第四个“2”,无非是上面的那个变成了函数表达式,b.f还是对原来函数的引用,this的值得到维持,没啥,还是一样的;

  5. 第五个“1”,在执行函数之前括号里是一个逗号表达式,我们知道逗号表达式,是取最后一项的值作为整个表达式的值,但是这个时候,this的值不能得到维持,因为这个逗号表达式相当于把原来的函数体赋值给了整个表达式做表达式的值,这时候的this就变成了window,所以输出1

为了说明这个坑爹的结果,尤其是第5个值的输出,我去翻了《JS高程》:

clipboard.png

关注 5 回答 2

yellowlemon 回答了问题 · 2017-03-09

看看下面代码怎么转化成JSON格式

你这个并不是一个规范的JSON格式,规范的格式应该是:

var obj = '{"name":1}';

这样的话可以运用:

JSON.parse(obj)

将字符串转化为一个对象。
如果你不能改变你的字符串,就只能用正则去取了。。

关注 6 回答 6

yellowlemon 提出了问题 · 2017-03-09

解决这段JS代码的作用域为什么是window了?

var a=1;
var b={
  a:2,
  b:function(){
    console.log(this.a);
  }(), 
  f:this.f=function(){
    console.log(this.a);
  }
};
function f(){ console.log(3); }
f();
b.f();
(b.f)();
(0,b.f)();

有这样一段代码,答案是1、1、2、2、1,第一个答案是1是因为b.b是个立即执行函数,但是为什么后面的答案是1221了??

关注 5 回答 2

yellowlemon 回答了问题 · 2016-12-13

父元素为浮动,为啥子元素也要设置浮动才能垂直居中?

对于文字的垂直居中,可以使用vertical-align: middle;来实现。

只是在使用是需要注意一下只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。

对于vertical-align的理解,可以看看张鑫旭大神的理解:
我对CSS vertical-align的一些理解与认识(一)

另外,也可以使用line-height来实现垂直居中的效果

关注 3 回答 2

yellowlemon 关注了问题 · 2016-12-13

父元素为浮动,为啥子元素也要设置浮动才能垂直居中?

1.搜索子元素不设置浮动无法实现垂直居中的功能。

2.

.m-topnav .u-snav{
    display:inline-block;
    height: 90px;
    float: right;
    font:16px/90px "微软雅黑";
}
 .u-stt{
    display: inline-block;
    margin: 0 27px;
    color: #000000;
}
div .u-stt:hover,div .u-stt:focus{
    color: #21a557;
}

.u-snav .u-sch{
    display: inline-block;
    **float: right;**
    width: 20px;
    height: 20px;
    margin:35px 0;
    background: url(chaos-sprite.png) -300px -20px no-repeat;
}
.u-sch:hover,.u-sch:focus{
    background: url(chaos-sprite.png) -300px 0 no-repeat;
}

3相应的需要实现的效果
图片描述

实际上实现的效果
图片描述

关注 3 回答 2

yellowlemon 关注了问题 · 2016-12-12

推荐个前端数据表格插件

有没有好用的基于jquery的数据表格插件,功能包含分页,全选一些基本功能即可,无需太复杂.

关注 9 回答 10

yellowlemon 回答了问题 · 2016-12-12

推荐个前端数据表格插件

这种数据的插件挺多的,社区文档比较丰富的有这两个:
echarts
Highcharts

抱歉没有看清,上面两个是数据图插件,表格插件的话,可以看看:
datatables

关注 9 回答 10

yellowlemon 关注了问题 · 2016-12-12

解决javascript里面的splice函数的用法求解

a=[1,2,3,4];
b=a;
c=b;
c.splice(3,1," ");
console.log(a);  //输出是[ 1, 2, 3, ' ' ]


e=2;
d=e;
f=d;
f=3;
console.log(e);//输出是2

为什么会这样?还有我怎么才能让c数组经过splice 后不影响数组a的值呢?

关注 6 回答 6

yellowlemon 回答了问题 · 2016-12-12

解决javascript里面的splice函数的用法求解

首先你要先了解一下splice方法,可以看看w3school的解释:JavaScript splice() 方法
需要特别注意一下:
clipboard.png

而你的b和c都是对a数组的内存引用,所以你想要的是一个深拷贝。
可以看看下面这两种方式:

1、js的slice函数
代码如下:

var arr = ["One","Two","Three"];

var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three

2、js的concat方法
代码如下:

var arr = ["One","Two","Three"];
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three

关注 6 回答 6

yellowlemon 关注了问题 · 2016-09-23

解决伪元素选择器优先级真的等同于元素的优先级吗?

伪元素选择器::first-line,::first-letter的优先级等同于元素的优先级吗?

clipboard.png

clipboard.png

clipboard.png

源码地址
https://github.com/yunkehe/le...

关注 4 回答 3

yellowlemon 回答了问题 · 2016-09-23

解决伪元素选择器优先级真的等同于元素的优先级吗?

推荐你看看这篇文章:
CSS选择器优先级与效率优化

另外,你的important写错了。。

color:green!important;

这样才对

关注 4 回答 3

yellowlemon 赞了回答 · 2016-09-19

这段代码,哪位大神,帮我解读下。谢谢

这是一段有问题的代码...
把empty()换成isset()...
否则会有notice...

关注 7 回答 7

yellowlemon 回答了问题 · 2016-09-19

解决css3轮换图片到第一张图片时都要闪一下怎么改进?

这种多张图片切换的方式可以合成一个雪碧图,然后使用css3逐帧动画来完成
CSS3动画之逐帧动画

关注 6 回答 5

yellowlemon 关注了问题 · 2016-09-19

解决css3轮换图片到第一张图片时都要闪一下怎么改进?

#lunbo{
    width: 1226px;
    height: 460px;
    /*background: url(imgs/lunbo1.jpg);*/

    animation: 16s lunbo ease-in infinite;
}
@keyframes lunbo{
    0%{background: url(imgs/lunbo1.jpg);}
    25%{background: url(imgs/lunbo2.jpg);}
    50%{background: url(imgs/lunbo3.jpg);}
    75%{background: url(imgs/lunbo4.jpg);}
    100%{background: url(imgs/lunbo5.jpg);}
}

关注 6 回答 5

yellowlemon 回答了问题 · 2016-09-19

解决php多维数组如何确定是否为空

可能是自己犯二了,也是被同事骗了。。其实isset和empty是可以判断的。。
我做了一个小小的测试,发现是不会报错的。

<?php
    $test = array(
        test1=>array(
            test2=>array(
                test3=>array(
                    test4=>123,
                ),
            ),
        ),
    );
    var_dump(isset($test['test1']['test2']['test3']['test4']['test4']['test4']['test4']));
    var_dump(!empty($test['test1']['test2']['test3']['test4']['test4']['test4']['test4']));
?>

关注 3 回答 3

yellowlemon 赞了回答 · 2016-09-19

解决php多维数组如何确定是否为空

isset判断一下不就行了.

$hasVideo = isset($details['data']['topic']['has_video']) ? $details['data']['topic']['has_video'] : $something_else;

关注 3 回答 3

yellowlemon 关注了问题 · 2016-09-19

解决经典前端面试题,难倒不少人,哪位大神帮我解释下后面call的答案啊

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        alert('1.' + this.name);
        return function(){
            return this.name;
        };
    }
};

var func = object.getNameFunc();
alert('2.' + func());
 alert('3.' + func.call(object));
alert('4.' + func.apply(object));

关注 9 回答 6

yellowlemon 提出了问题 · 2016-09-19

解决php多维数组如何确定是否为空

$hasVideo = $details['data']['topic']['has_video'];

例如这样一段代码,因为不知道之前的数组‘data’、‘topic’什么时候有值,需要判断有值时才进行赋值操作,如何才能简单的判断避免赋值时报错。
如果只用empty方法,好像需要这样一层一层的判断进去:

if(!empty($details)&&!empty($details['data'])&&!empty($details['data']['topic'])&&!empty($details['data']['topic']['has_video']))

有没有简便一点的方法?或者是自己写一个公共方法,能一次就判断是否能拿到值。

关注 3 回答 3

yellowlemon 回答了问题 · 2016-09-19

关于页面懒加载

1楼说的基本都差不多了,雪碧图的话,目的是减少请求数量,但是对于比较大的图片,最好还是img标签引入。
如果现在写的是背景,可以自己写一个懒加载的插件,通过改变背景图片的路径就可以了。
对于这个方式,你可以看看下面的文章:
图片延迟加载的实现

关注 7 回答 3