0%

再一次折腾hexo博客,主要是升级脚手架和next主题。
升级的过程中发现 next的local_search不能用了,控制台也没有js的报错,于是我看到有一条对search.xml的请求。
直接打开xml页面在浏览器中显示了问题的原因

“Input is not proper UTF-8, indicate encoding !”

找到对应的行数之后,把对应的字符重新敲了一遍就好了。

最近在做公司的官网,首页用到了一些循环播放的动画,类似于轮播图。之前一般是直接套用插件,不常手动自己做这种,但是为了避免引入第三方库导致网页过于臃肿,所以就凭着自己掌握的 setTimeout 和 setInterval 的一些简单的知识就开始了制作。

要求:五个 div 依次切换。间隔3s

阅读全文 »

最近在学习慕课网一门课程,里面需要实现一个上拉加载更多的功能,最常见的做法就是监听scroll事件,比较滚动距离和窗口高度。于是代码是这样的:

1
2
3
4
5
6
7
8
function callback(){
const top = wrapper.getBoundingClientRect().top
const windowHeight = window.screen.height
if(top && top < windowHeight){
loadMoreFn()
}
}
window.addEventListener('scroll',callback.bind(this),false)

此时有一个问题就是,每次滚动都会调用callback,如果callback处理的比较复杂(常见的是导航栏的隐藏和显示)就会对性能和展示造成影响。

解决办法就是声明一个定时器,每次出发事件是就清空老的定时器,然后赋值新的定时器,当滚动结束的时候,定时器中的函数就会执行,时间间隔设置比较小,就不会造成明显的延时。
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let timeoutId
function callback(){
const top = wrapper.getBoundingClientRect().top
const windowHeight = window.screen.height
if(top && top < windowHeight){
loadMoreFn()
}
}
window.addEventListener('scroll',function(){
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(callback,50)

}.bind(this),false)

在使用远程服务器启动node项目时,发现无法访问其8080端口,经过查询资料,解决办法为:

1
iptables -I INPUT -p tcp --dport 80 -j ACCEPT

由于权限问题可能要加sudo

rem.js

1
2
3
4
5
6
7
8
9
10
11
12
/* rem.js文件内容 */
(function() {
var html = document.documentElement;

function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}

window.addEventListener('resize', onWindowResize);
onWindowResize();
})();

需要注意的是在html文件的head标签中需要加入一行:

1
<meta name="viewport" content="initial-scale=1.0,width=device-width">

指定页面宽度为设备宽度。

今天很有幸去一家很不错的互联网公司面试,在学校找工作两个月面试都不顺利。只靠自己的力量是不够的,在朋友帮忙推荐的情况下,我得到了这家公司的面试邀请(我自己之前竟然没有查到)。

面试分为五轮,没错,是五轮,从13:20分左右一直持续到16:30左右。下面是我对这次面试的总结:

阅读全文 »

基本类型和引用类型的值

基本类型值指的是简单的数据段:按值访问,可以操作保存在变量中的实际的值。
引用类型值指那些可能由多个值构成的对象:引用类型的值是保存在内存中的对象。JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。(说法不严密,当复制保存对象的某个变量时,操作的是对象的引用。但为对象添加属性时,操作的是实际的对象。)

动态属性

可以为引用类型可以添加属性和方法,也可删除其属性和方法。
给基本类型添加属性和方法虽然不会报错(严格模式会报TypeError),但是属性和方法不会被保存,也就是说访问不到。

阅读全文 »

学习css布局

一入前端深似海,从此节操是路人。

本文主要是重新系统学习css布局之后的笔记,学习时主要参考的网站是[学习CSS布局](http://zh.learnlayout.com/)。其实相当于转载了 :-D
阅读全文 »

原型

[[Prototype]]

JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时[[Prototype]]属性都会被赋予一个非空的值。
当你试图引用对象的属性时会触发[[Get]]操作,比如myObject.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。但是如果a不在myObject中,就需要使用对象的[[Prototype]]链了。

1
2
3
4
5
6
7
8
var anotherObject = {
a:2
};

//创建一个关联到anotherObject的对象
var myObject = Object.create( anotherObject );

myObject.a; //2
阅读全文 »