刚面完腾讯前端一面,记一下自己没答出来的东西。基础这方面还是太差了一些,学校学的完全不够这些公司招聘的笔面,趁着记忆还热乎,写一下。

阅读全文 »

本来是一时兴起做的一个快速开发挑战,没想到这个挑战从1天完工一个页面拉长到了一周的时间,把需求扩展到了全端适配,而且细做了样式。

这个项目是基于已有的Pixivic.com这个网站,利用他们现成的后端(API公开且后端代码开源),做一个前端的程序,实现更加优雅地P站看图体验。

目前第一阶段开发已经结束,项目已经上线到了pwp.app:

https://pixivc.pwp.app

这个第一阶段的开发对我的开发能力是有不小的锻炼,所以对整个这个阶段做一个记录。

项目构建

最开始是以高速开发一个图站为目标做的这个项目,所以还是启用了Vue + Element,虽然上次提过不想再用,但是在熟悉React之前对我来说最速方案仍然是这一套。

(有一说一,Element现在还停在2.13.0,明明有很大的问题还是不更新,为了解决这个版本的既有问题还是用自己编译的版本替换了官方的正式版)

这一次项目在构建上有三个改变,第一是样式不再写到Vue文件内,因为整个项目是更加侧重与样式,样式的成分很重,所以所有的less都剥离出去了。

第二是时间方面的处理类库不再使用moment,moment体积比较大,考虑到需求不是很复杂,换用dayjs。

第三是没有必要拆出来放组建的就不做组件了,其实这样反而更好开发。通信方面都是靠父子组件或者store,尽量避免了使用vue-bus。

项目重点

项目侧重于样式,主要是使用了一下mixin,然后了解了一下瀑布流的布局在响应式下怎么写(我用的是封装好的vue-mansory,自己写的话CSS可以写列排瀑布流,行排需要用JS,到时候另开一篇笔记吧)。

动画方面主要用JS + transition控制的,没有做key + frame的纯CSS动画。

样式的难点主要在于各个页面做响应式这方面,使它在全端都能用,这一部分样式调整还是调了很长时间的,让我在样式这一方面获得了一些新技能新经验。

然后用到的依赖方面,这一次是多了解了一下无限滚动和Lazyload的一些相对复杂的用法,瀑布流 + LazyLoad还有详情页图片翻页这一块需要做一定的宽高计算,还要考虑到设备的情况,算是这个阶段的难点吧,调了很长时间才调好。

项目未来

这个新坑后面有更多精力会进一步改进一步维护,为了防止别人的后端出现大改或者是其他的变化,我自己Fork了一份后端。考虑到这个后端运行成本很高,如果现在这个借用的后端不可用了,那么这个项目将会停止,代码归档。

有精力的情况下主要是会进一步调优移动端的东西,然后把现在功能上的缺失补上去。

Pixivc
GitHub Repo

JavaScript的浅拷贝深拷贝一直都是很常见的基础问题,一般相关的问题可以直接用jQuery、lodash这样的库一行解决,但是学会了用还是要懂它背后的基础原理。

特别用这一篇笔记整理一下JavaScript浅拷贝、深拷贝的知识。

什么是浅拷贝、深拷贝

浅拷贝、深拷贝是在数组和对象下才存在的概念。浅拷贝指只拷贝了数组或对象的引用,并没有完全拷贝整个对象为一个独立的新对象,而深拷贝则是构建一个和原有对象完全一样的新对象,且它相对于新对象是独立的。

下面来举个实际的例子。

1
2
3
4
5
6
7
var obj = {
a: {
d: 1
},
b: 2,
c: 3
}

如果是浅拷贝,那么代码可能会类似于这样:

1
2
3
4
5
6
7
function simpleCopy(obj) {
let new_obj = Array.isArray(obj) ? [] : {};
for (let i in obj) {
new_obj[i] = obj[i];
}
return new_obj;
}

我们实际用这个代码在V8下对上面定义的obj进行一个浅拷贝,并且对拷贝后得到的对象进行修改:

1
2
3
var obj_2 = simpleCopy(obj);
obj_2.a.d = 99;
console.log(obj);

这个时候我们得到的结果是obj的a.d被也被更改成了99,所以这里浅拷贝拷贝到的实际上是引用,obj_2和obj并不是独立的。

但是对于表层的数据,浅拷贝拷贝出来的并非是引用,比如接着执行下面的代码:

1
2
obj_2.b = 99;
console.log(obj);

obj.b是不会发生变化的,因为我们的代码是把obj.b的值赋给了obj_2.b,对于number这个类型,obj_2.b得到的是真实值,但是对于object(object包括数组),obj_2这边的得到就是一个引用,我们对引用内的对象做修改自然会同时修改到源对象。

如果要做深拷贝的话,我们在拷贝的方法里不能简单用“=”赋值。

深拷贝的方法

要实现深拷贝,最简单的方式是递归:

1
2
3
4
5
6
7
function deepCopy(obj) {
let new_obj = Array.isArray(obj) ? [] : {};
for (let i in obj) {
new_obj[i] = typeof obj[i] == 'object' ? deepCopy(obj[i]) : obj[i];
}
return new_obj;
}

这是一个相当简单的深拷贝,我们用这个方法来重新创造一个obj_2:

1
2
3
var obj_2 = deepCopy(obj);
obj_2.a.d = 99;
console.log(obj);

在深拷贝下,原先的obj就没有发生变化。这里的深拷贝是一个非常简单的深拷贝,更加好的深拷贝需要考虑到环引用、继承/原型链、symbol等很多问题,具体可参考lodash的实现。

参考

《内功修炼之lodash—— clone&cloneDeep(一定有你遗漏的js基础知识)》
lodash源码

对于C/C++这一块,因为只有上课的时候姑且用了一下,平日里开发基本上不会接触到C/C++,所以这一块相对而言有很多知识是不知道的,但是考虑到在找工作的过程中会遇到,所以针对性的补一些基础的。

这一篇主要是对C里面的union做一些笔记。

Keyword: C, union

阅读全文 »

今天做卷子遇到了一个关于TCP的基础问题,是TCP的端口状态,这个问题还是有点棘手的,特别写一篇笔记记一下TCP端口状态。

阅读全文 »

在金山办公的前端卷子里遇到了这个问答,感觉触到了知识盲区,此前却是没有了解过JavaScript的装箱和拆箱,专门写个笔记记录一下。

Keyword: JavaScript,装箱/拆箱

阅读全文 »

又刷了一份金山办公的卷子,金山的东西是真的简单,前端题两道题目触及到了我的知识盲区,每个盲区都写一篇笔记来记一下。

这篇笔记主要是对应的这个卷子的算法题,是我一下没有想到的操作,觉得有点意思。

阅读全文 »

小米这边的卷子全是选择题,不定项和单选混着来,也不知道他们真实的卷子是不是这样的。

这里再记两个关于JavaScript的问题。

Keyword: Array,Number

阅读全文 »

明天要做米哈游的校招笔试,可能是综合卷也可能不是,前端这边先刷了点题。

在美团前端2020校招笔试的卷子里面碰到两个比较生疏的前端题,拿出来记录一下。

Keyword: 堆内存/栈内存,bind与this

阅读全文 »