最近在学移动端web开发,很多概念、技术学起来模糊不清,特地查资料并梳理对比一下,以供以后再来复习。

自适应和响应式

  • 自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,但是这样的话会出现问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看内容过于拥挤。响应式正是为了解决这个问题而衍生出来的概念。响应式是为了解决如何才能在不同大小的设备上呈现内容相同排版却不同的网页。
  • 简单来说,自适应改变元素大小,响应式改变元素排版。
  • 明白了自适应和响应式的区别后,如何应用就很明显了。我们在做移动端web开发的时候,先做自适应,如果感觉内容过于拥挤,我们再局部使用响应式。(为什么不上来直接使用响应式?因为响应式的开发和维护成本太高,所以我们能不用尽量不用。)

meta标签中的viewport

  • 移动设备上浏览器的可视区域叫viewport,可以通过document.documentElement.clientWidth来获取。
  • 我们经常在移动端页面的头部看到这样的代码
1
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

Read more

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。

什么是jQuery插件?

jQuery插件开发就是扩展jQuery原型对象的方法,简单来说就是jQuery插件是jQuery对象的方法。

  1. 为什么是扩展jQuery原型对象而不是jQuery全局对象?

    因为我们知道jQuery的大部分内容都是围绕DOM操作,所以插件开发当然也是围绕jQuery对象的DOM操作。

  2. jQuery原型对象是什么?jQuery插件开发是如何扩展jQuery原型对象的?

    • 我们知道每个jQuery对象都会包含jQuery原型对象中定义的DOM操作方法。
    • 那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery对象就可以通过原型继承这些方法。
    • jQuery的DOM操作方法都是在jQuery.fn对象上定义的,那么,所谓的jQuery插件开发即是扩展jQuery.fn对象的方法。

Read more

我在重新梳理JS闭包的时候又发现一些概念模糊的地方,在此记录一下我的总结以及引发的思考,方便以后review。讲闭包之前,得先复习下其他几个概念。

函数作用域

在一些类似 C 语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的,我们称为块级作用域(block scope)。而 JavaScript 中没有块级作用域,JavaScript 取而代之地使用了函数作用域(function scope)。比如:

1
2
3
4
5
6
7
function test() {
    console.log(k); // undefined
    for (var k = 0; k < 10; k++) { // k在函数体内是有定义的,不仅仅是在循环内
        console.log(k); 
    }
    console.log(k); // 10
}

Read more

总结一下前端学习中遇到的小知识、小技巧以及整理收藏的书签

  1. 图片压缩

    智图

    TinyJpg

  2. Github学习

    版本控制入门 – 搬进 Github

Read more