11
2014
06

JavaScript代码重构系列-重构基础知识

说到重构,我们先来明白下面几个问题。

什么是重构? 

在不改变现有程序功能的情况下,对代码结构及写法进行调整。


重构目的是什么? 

11
2014
06

JavaScript代码重构系列-开篇

JavaScript是一门弱式语言,同时也是一门非常强大而有趣的语言。而随前端开发工种的不断发展,对前端同学些JavaScript代码的要求也在不断升高。很多在后端语言的手段也在不断向前端衍生,JavaScript重构也在不断深入前端同学的日常编码中。

这两年阅读了这些书籍《重构-改善既有代码的设计》,《代码整洁之道》,《编写高质量的JavaScript》,《JavaScript语言精粹》,《JavaScript模式》,子曰:学而不思则罔,看了这些书,总得有些心得。同时也写了这么多年JavaScript代码,也需要做些总结。希望自己能坚持写下该系列,为初学的同学带来些帮助。

06
2014
05

自适应网页设计中的字体单位选择

在做手机web或app的时候,为适应不同屏幕,你可能需要写很多针对不同屏幕大小的css代码,那么这个时候我们如果用固定大小去设置字体的大小就要些很多代码了。这个时候我们需要使用相对大小了,这样该其他我们之需要修改指定根元素的值了。css3中也出现新的字体单位rem,在几乎所有的自适应网页设计的书籍及文章中都推荐使用em作为字体单位,甚至推荐你使用em来作为你所有设置size部分的单位。那么em和px如果转换呢?

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

06
2014
03

Windows7安装Phonegap3.4

Phonegap一个可以利用单纯的HTML,CSS,JavaScript制作手机APP的工具,或则说框架。最重要的是他还能完成多平台开发,看看他的平台支持,你就能发现他有多强大http://docs.phonegap.com/en/3.3.0/guide_support_index.md.html#Platform%20Support 。


现在进行安装,先如今phonegap也支持Nodejs环境下运行了,只需要npm就能进行在线安装。再Windows环境下cmd.exe中输入下面命令就可以了。

C:\> npm install -g phonegap

以android为例在安装之前请确认已经安装了下列环境:

  1. 已经安装NodeJS(加NPM,一般再安装nodejs的时候自带安装)。

  2. 已经安装Java SDK,并配置好环境变量

  3. 已经安装Apache ANT,并配好环境变量

  4. 已经安装好Android sdk,并配好环境变量(直接安装adt再配好环境变量就行)

  5. 上面步骤完成好确保这些命令在cmd.exe中可以运行“node -v”,“npm -v”,“ant -v”,“adb”,“avd”。

这样就可以运行下面命令了:

$ phonegap create my-app
$ cd my-app
$ phonegap run android
26
2014
02

CentOS上安装Node.js

Node.js和npm再 Fedora Extra Packages for Enterprise Linux (EPEL:https://fedoraproject.org/wiki/EPEL  ) 仓库中,如果不能确认是否已经打开EPEl请现在系统打开EPEL。检查机器仓库中是否存在EPEL, 运行下面命令

yum repolist

如果没看到epel, 那么你需要从via RPM安装。运行下面代码。

rpm -Uvh http://download-i2.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm

然后你运行yum repolist,可以看到以下界面,可以找到epel。

1.jpg

接着用以下命令来安装node和npm:

sudo yum install npm --enablerepo=epel

如果上面代码不工作,可以用下面的命令重新安装:

sudo yum install nodejs npm --enablerepo=epel
25
2014
02

VirtualBox安装CentOS及网络配置

VirtualBox安装CentOS及网络配置


开始学习Linux,为了更了解NodeJs和更好的前端开发而学习,这似乎有些矛盾。换个说法似乎更合理,由于Nodejs在window上跑的不是太顺利,而Nodejs对于前端开发人员现在已经非常重要,它能实现你整个前端开发自动化等...巴拉巴拉这么多,最重要的还是需要学习Linux,Linux的选择从Ubuntu到Centos,很难选择,一个是社区最受欢迎的Ubuntu,一个是应用最广的Centos。虽然大多相通,但系统间还是有些差异,不是专家不评论,网上搜索“Ubuntu Centos”可以搜到很多答案。最后选择了Centos开始学习,原因很简单,大学的时候上了一年的RedHat Linux的课程,虽然课程结束后还给老师,但总得稍微有些印象,Centos从Redhat过来的,总算半个熟人,开始吧。

学习从系统安装开始,从VirtualBox安装CentOS,CentOS系统安装从网上搜教程,非常多这里不说,主要就安装后的问题做一下记录。

21
2014
02

打造纯CSS箭头,兼容所有主流浏览器

箭头再UI设计时会经常用到,小的如一个小箭头标示符,大的如一个弹出框都会用到箭头。用的最多的是截取一张各个方向的截图,然后再用css控制位置。这样稍显麻烦,如用纯CSS打造箭头会方便不少。今天研究bootstrap的时候看到了popover的箭头是用纯CSS打造的,然后就对此研究了一下,由于bootstrap的箭头不支持IE6,IE7,自己重修做了个能适应不同浏览器的纯CSS箭头,记录下来。


纯CSS箭头最终效果

popover-arrow.jpg

14
2014
02

非处方心灵鸡汤N则

中午看了些新华网的非处方漫画,对于这些心灵鸡汤系列的漫画挺有感触的,把其中的真言记录下来。茶语饭后阅读一番,既能励志还能疗伤;既能指导人生还能走出困惑;总之看完收益良多,能遵循各八九,事业定能平步青云,生活定能无限美好,人生当然会充满幸福的欢笑。


十三招自警提升个人能力

  1. 每天读书。

11
2014
02

box-sizing的使用及浏览器盒子模式回顾

box-sizing是一个CSS3中的属性,他的出现让传统的盒子模式有所改变,算是一个非常重要的属性,一个可以让你回到浏览器怪异模式的时代。先回顾下盒子模式。


盒子模式( 标准模式和IE的怪异模式的区别)

盒子模式在各浏览器分为两种: 标准模式和IE的怪异模式(quirksmode),两种模式的区别和简单就是区域的宽度高度换算方法。从一个简单的例子来看这两模式的区别。

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}


08
2014
02

CSS hacks和IE hacks写法总结

这是个很常见的问题,而且让人烦躁的主题,css hacks! 你漂亮整洁代码的破坏者,维护成本提高的老鼠屎。好吧,但不得不说他存在时必要的,作为前端开发者如果你一直做的是新项目可能会用的比较少,但对于维护老项目的同学来说,hacks是解决浏览器必不可少的杀器之一。很久以前写过该方面的文章:

浅谈CSS hack区别IE6.IE7.FireFox的几种CSS HACK写法 ,IE的if条件注释Hack