2015年4月

前端布局杂谈

作为一个前端er,掌握布局,绝对比你学习花俏的样式来的实在。

网站的维护与升级离不开开发人员的辛勤劳动与精诚合作,在项目运营中,假如我负责了前端,那么我不仅需要对亲手写出来的代码负责,还需要对后续维护它的人负责,虽然CSS是一门标记语言,但是代码优劣的区别还是非常大的,虽然东拼西凑写一个主题不难,但初学者和老手的区别除了花费时间的差距之外,还有兼容性,自适应,性能,可维护性,二次开发等问题存在。

最近接了一个私活,说的好像有公活似得,需要对一个网站进行响应式布局,使之具备移动兼容性,在我看过网站之后还未拿到源码之前,我在本地写好了几个模块的重构代码,心想,这简单,拿到源码之后套入容器就可以了,当我真正拿到源码的时候,整个人都不好了,因为代码比较老,甚至还不是 HTML5 规范,嵌套标签多的超乎我想象,冗余随处可见,然后傻傻的看着并不规范的样式代码发呆...

看过源码之后,这份差事已经从响应式布局变成了页面重构,我需要整理一大坨代码,这好比将碎纸机撕碎的纸屑重新拼凑回去成为完整的一张纸,心想,算了吧,这差事不适合我。重新讨论了酬劳之后,我还是决定接下这份差事,并不是因为酬劳有多高,而是在于这对我来说是一个挑战,当我再次看到网站源码时,带上不那么消极的情绪,硬着头皮完完全全整个分析了一遍,因为代码比较老,可读性很差,我决定将她改头换面,抛弃原有的样式,净化冗余的标签,进行新一轮开发。

改头换面的第一件事就是布局,之前研究过弹性盒 Flexbox ,虽然功能强大但是兼容性不咋地,心想这是一份差事,客户对浏览器的兼容性会有要求,就放弃了这个想法,而采用传统的布局方式进行布局,为加速开发,我使用了预处理器 Sass 的工具 susy,这对提高效率帮助非常大,这也是前端er的一个必备技能,她所带来的灵活与洒脱绝对超乎想象,随便一搜就可以搜到很多实用的变量,一键加速开发周期。

当我写好界面的响应布局时,客户电话打来,说推荐我用框架去写,整个人再次不好了,我说用框架对兼容性有一点影响,他说没关系,因为用框架以后的开发人员可以更好的去维护,我瞬间明白,网站就像房子,并不是搭好了之后就可以放任不管了,随着时间的推移,不仅会变得脏乱,甚至还可能会脱瓦,漏雨,或者需要重新装潢一番,网站也一样,所有的更新、维护和升级都需要接下去的开发人员站在当前的代码之上而付出努力,在一个项目中,我写的代码可能会影响到接下去更多的人,所以对自己的代码负责,对后续维护的人负责是一个优质开发者的责任。

前端开发,布局为大,刚才我把网站比作房子,我认为房子的根基就是布局,将会影响到整个生存周期,好好学习布局吧,这将会非常有用,在前面我也有写过 CSS书写规范编写高质量JS的基本要点 的博文,顺便分享几篇谈布局的好文

Read More »

理解闭包

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.
闭包是指函数有自由独立的变量。换句话说,定义在闭包中的函数可以“记忆”它创建时候的环境。

闭包是一种特殊的对象,它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

1.变量作用域

我们知道,JS中有变量的作用域,包括全局变量和局部变量,全局变量在全局作用域中可以直接访问,而局部变量只在局部作用域中才能访问

全局变量

var n = 1 ;
(function(){
    console.log(n); //1
})()

局部变量

var x = 1;
(function(){
    var y = 2;
})()

console.log(x); //1
console.log(y); // ReferenceError: n is not defined 

函数内部可以访问全局变量,在函数外部无法访问函数内部的局部变量

闭包提供的功能就是 让我们可以在全局作用域下去操作局部变量

Read More »

Flexbox Layout (1)

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒改进了盒模型,既不使用浮动,也不会在弹性盒容器与其内容之间合并外边距。

许多设计师会发现弹性盒容易上手。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。

弹性盒概念

弹性盒布局的定义中,它可以自动调整子元素的高和宽,来很好的填充任何显示设备中的可用显示空间,收缩内容防止内容溢出。

不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

弹性盒布局名词

虽然弹性盒布局的讨论中自由地使用了如水平轴、内联轴和垂直轴、块级轴的词汇,仍然需要一个新的词汇表来描述这种模型。参考下面的图形来学习后面的词汇。图形显示了弹性容器有一个值为row的属性flex-direction,其意义在于包含的子元素相互之间会根据书写模式和文本流方向在主轴上水平排列,即从左到右。

Flexible boxes盒子按照宽和高分出了 main axis (主轴) 和 cross axis (纵轴),盒子的上边称为 cross start,下边称为 cross end,左边称为 main start,右边称为 main end。

Read More »

用 rem 设置响应式字体

响应式字体

每个人的阅读习惯不同,有的人喜欢稍大一点的字号,稍小一些,看着就不太舒服,眼睛也会比较吃力,而有的人喜欢稍小一些的字体,稍大一点看着也会不舒适,影响阅读体验,这样一来,设计师就不能选定一个 "适中" 值来设计符合所有用户的阅读习惯的字号,响应式字体应运而生,所以说,响应式的网页不仅仅是响应不同的设备,还更要响应不同的用户差异化需求

浏览器有其默认的字体大小,这个大小是可以通过设置来修改的,三种常用浏览器的字体修改方式如下:

  1. IE浏览器

rem1.png

Read More »

JSONP 跨域原理

什么是跨域?

ky1.jpg

测试: 很明显 127.0.0.1 和 localhost 是两个不同的域,假如我在 http://localhost/kuayu.html 下发起对 http://127.0.0.1/kuayu.php 的 GET 请求,就会发生错误,提示你进行了跨域请求,违背了同源策略,出于安全因素,这是不允许的

ky2.jpg

Read More »