你真的理解JSON.stringify()吗

创建于

ECMAScript 5定义了JSON对象,对JSON的行为进行了规范,这个对象有两个方法:stringify()parse()
先看下面这个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let people = {
name: 'YY',
age: 20,
gender: 'male',
address: {
city: 'xxx',
street: 'linyindadao'
},
skill: ['JavaScript', 'PHP', 'Python', undefined],
phone: undefined
}
JSON.stringify(people, function (key, value) {
if (typeof value !== 'string') {
return undefined
}
return value
})
// 返回值undefined

上面这块代码的本意是只想序列化出值为字符串的属性,但是返回的值是undefined。接下来让我们一探究竟。首先来详细了解一下JSON.stringify()这个方法。

Hello Stage

创建于

Refreshing and comfortable theme for Hexo.
Yeah,she looks good.em…

CentOS 7上搭建LAMP

创建于

之前在Windows上用过wamp,很简单跟其他的软件一样只要安装下一步下一步即可。当然,很早就知道LAMP这个组合了,今天刚好有需要,就按照网上的教程搭建了一番,也是很简单。另外想说下,很感谢互联网,感谢这些开源的软件,让更多的人都能够学习。LAMP顾名思义,指的是Linux,Apache,MySQL,PHP,在Linux上不像windows上有那种集成的软件,需要一一安装。

总结一些网站的性能优化

创建于

总结一下工作中开发时可能用到的性能优化

  • 能压缩的压缩,能合并的合并(当然,现在一些工具好像帮我们做了这些事情)。
  • js中尽量少用for循环或者去遍历对象。
  • 可以提前算好的尽量提前算好。
  • CDN
  • 响应式图片,图片压缩。
  • 内容静态化:url静态化,文本内容尽量不要js动态加载,不要以图片形式展示文字内容。
  • 加载速度尽量不要超过3秒:数据请求次数减少,数据包尽量小,注意数据本地缓存,使用canvas、svg、IconFont代替图片。
  • 避免权重过于分散:页面层次不宜过深,尽量不超过4层(2-3层最好),在url中体现。
  • 对蜘蛛友好:sitemap.xml写进robots.txt内;设置更新板块(如产品动态、业内动态等),提高蜘蛛的来访频率,提高页面抓取录。
  • 页面TDK与页面内容相关度要高(title,description,keywords)
  • 图片加title、alt属性
  • 避免权重流失:尽量避免重定向
  • 设置好404页面(减少网站跳出率,引导用户去其他页面)
  • 持续更新

git常用命令

创建于
  1. git add 文件名 => 添加文件到暂存区
  2. git commit -m 描述内容 => 添加文件到git仓库
  3. git status => 查看状态
  4. git log => 查看提交历史
  5. git log --pretty=oneline => 以单行查看历史提交状态
  6. git reset --hard HEAD^ => 回退到上一个版本/HEAD^^||HEAD~100/
  7. git reset --hard commitID => 回退到某一个版本

前端常用布局:左边固定,右边自适应

创建于

左侧固定,右边自适应是PC端和移动端常见的页面布局,那么实现这个效果的方式也有很多种。比如说给定义两个盒子,左边的盒子写个固定的宽度,定位到页面的最左端,右边的盒子加一个margin=左边盒子的宽度,这样就实现了上面的布局方式。这次用一个很巧妙的方式实现上面的效果。
页面基本布局

1
2
3
4
5
6
<div class="box1"></div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate veritatis
ipsa expedita suscipit laboriosam illum asperiores maxime iste vel temporibus
ipsum quo reprehenderit, minus mollitia, autem, impedit fuga sint corporis.
</div>

实现效果样式:

1
2
3
4
5
6
7
8
9
.box1{
width:150px;
height:800px;
background:lightcoral;
float:left;
}
.box2{
overflow:hidden;
}

在这里巧妙的利用了浮动和overflow:hidden实现最终效果,在页面大小改变的时候或者说在不同的设备上,左侧保持不变,右侧随着屏幕的大小进行改变。

匪夷所思的可耻

创建于

随着黑色渐渐被白色吞噬,生活在这里的他们开始在活动了。差点忘了,它也是其中一个。它是一个奇怪的物种,有时呻吟,有时号叫,有时蠕动,有时也一动不动。渐渐的,黑色渐渐褪去,就只剩下白色了,很明显,新的一天开始了。

这个奇怪的物种开始挣扎了,它的大脑在离开它的巢穴前几分钟高速的运转,但肯定达不到计算机编译的速度。它在思考,或许在这巢穴多呆几分钟便可以入列仙班,脱离这有时令它厌烦的凡间;或者在这巢穴中一动不动,做着它每晚都做的白日梦。很可惜的是,它并没有那样,所以说它奇怪嘛,它就只会想象,渐渐的,四肢软弱无力的挣扎着离开了自己的巢穴,开始了一天浑浑噩噩的生活。

JS中注册事件的兼容性封装

创建于

在JS中,提供了三种注册事件的方式:
1.对象.事件类型 = function(){};
2.对象.addEventListener(事件类型,事件处理函数,useCapture); //useCapture默认为false
3.对象.attachEvent(事件类型,事件处理函数);
但是上面的三种注册事件的方式都存在瑕疵:第一种对于同一个对象绑定相同的事件类型,后者会覆盖前者,而后两种则存在兼容性问题。

JS中缓存的简单使用

创建于

想必开发人员都知道斐波那契数列,并且也都会用相应的程序语言编写斐波那契数列。斐波那契数列也成黄金分割数列,在在很多领域都有直接的应用。那么在JavaScript中,斐波那契数列的写法也是很简单。

取消jQuery Mobile中Footer toolbar切换时页面刷新效果

创建于

这几天在用jQuery MobilePhoneGap做一个APP,但是在做的过程中遇到了很多问题,从刚开始只是听说过这个概念到最后把页面做出来,可以说是并未一帆风顺,还好都通过在网上查找相关资料将问题解决。这次说一下关于Footer toolbar的问题。

jQuery Mobile,预定义了很多组件。在用底部的navbar时,首先时默认的外观自己不太满意,通过层叠默认的样式解决了这个问题。但是接下来又遇到了新的问题,就是在点击底部的按钮切换页面时,页面有一个刷新跳动的过程,即切换时只想修改页面中间的内容,但是默认会修改整个page。对于有点轻微极致主义的我来说,有点难以忍受,这样的效果用户体验很差。最后在网上查找了相关问题的解决办法,在这里总结一下。