2012年11月29日星期四

阮一峰的网络日志

阮一峰的网络日志


Compass用法指南

Posted: 29 Nov 2012 01:02 AM PST

几个月前,我介绍了Sass的用法。

Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。

本文介绍Compass的用法。毫不夸张地说,学会了Compass,你的CSS开发效率会上一个台阶。

本文假设你已经掌握了CSS的主要用法,如果你还懂Sass,那就更好了。但是不懂Sass,一样可以阅读本文。

一、Compass是什么?

简单说,Compass是Sass的工具库(toolkit)。

Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

二、安装

Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby。

假定你的机器(Linux或OS X)已经安装好Ruby,那么在命令行模式下键入:

  sudo gem install compass

如果你用的是Windows系统,那么要省略前面的sudo。

正常情况下,Compass(连同Sass)就安装好了。

三、项目初始化

接下来,要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:

  compass create myproject

当前目录中就会生成一个myproject子目录。

进入该目录:

  cd myproject

你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。

接下来,就可以动手写代码了。

四、编译

在写代码之前,我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件,只有编译成css文件,才能用在网站上。

Compass的编译命令是

  compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。

默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。

  compass compile --output-style compressed

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。

  compass compile --force

除了一次性编译命令,compass还有自动编译命令

  compass watch

运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。

更多的compass命令行用法,请参考官方文档

五、Compass的模块

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

  * reset
  * css3
  * layout
  * typography
  * utilities

下面,我依次介绍这五个内置模块。它们提供Compass的主要功能,但是除了它们,你还可以自行加载网上的第三方模块,或者自己动手编写模块。

六、reset模块

通常,编写自己的样式之前,有必要重置浏览器的默认样式。

写法是

  @import "compass/reset";

上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码

七、CSS3模块

目前,该模块提供19种CSS3命令。在这里,我介绍其中的三种:圆角、透明和行内区块。

7.1 圆角

圆角(border-radius)的写法是

  @import "compass/css3";

  .rounded {
    @include border-radius(5px);
  }

上面的@include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径。

编译后的代码为

  .rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
  }

如果只需要左上角为圆角,写法为

  @include border-corner-radius(top, left, 5px);

7.2 透明

透明(opacity)的写法为

  @import "compass/css3";

  #opacity {
    @include opacity(0.5);
  }

编译后生成

  #opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
  }

opacity的参数0.5,表示透明度为50%。

完全透明的写法是

  @include opacity(0);

完全不透明则是

  @include opacity(1);

7.3 行内区块

行内区块(inline-block)的写法为

  @import "compass/css3";

  #inline-block {
    @include inline-block;
  }

编译后生成

  #inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }

八、layout模块

该模块提供布局功能。

比如,指定页面的footer部分总是出现在浏览器最底端:

  @import "compass/layout";

  #footer {
    @include sticky-footer(54px);
  }

又比如,指定子元素占满父元素的空间:

  @import "compass/layout";

  #stretch-full {
    @include stretch;
  }

九、typography模块

该模块提供版式功能。

比如,指定链接颜色的mixin为:

  link-colors($normal, $hover, $active, $visited, $focus);

使用时写成:

  @import "compass/typography";

  a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
  }

十、utilities模块

该模块提供某些不属于其他模块的功能。

比如,清除浮动

  import "compass/utilities/";

  .clearfix {
    @include clearfix;
  }

再比如,表格

  @import "compass/utilities";

  table {
    @include table-scaffolding;
  }

编译后生成

  table th {
    text-align: center;
    font-weight: bold;
  }

  table td,
  table th {
    padding: 2px;
  }

  table td.numeric,
  table th.numeric {
    text-align: right;
  }

十一、Helper函数

除了模块,Compass还提供一系列函数

有些函数非常有用,比如image-width()image-height()返回图片的宽和高。

再比如,inline-image()可以将图片转为data协议的数据。

  @import "compass";

  .icon { background-image: inline-image("icon.png");}


编译后得到

  .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

(完)

文档信息

2012年11月17日星期六

阮一峰的网络日志

阮一峰的网络日志


中国医疗改革的失败原因

Posted: 16 Nov 2012 06:01 AM PST

中国的医疗改革,公认是失败的。

高昂的医疗费、稀缺的医疗资源、紧张的医患关系,严重影响人民的生存质量,使得普通老百姓"望医却步"。

(图片说明:2012年8月22日的北京协和医院挂号大厅,来源《中国消费者报》

最近,我在阅读四卷本的《朱镕基讲话实录》

第二卷有一篇1997年10月27日的讲话,题为《基本医疗保障要低水平、广覆盖》

读了这篇讲话,我算是彻底明白了,中国医疗改革为什么会失败,一切都是因为15年前的决策。

一、关于医疗保障的总体水平

财政不宽裕,只能向人民提供低水平的医疗保障,这是可以理解的。但是没想到,这篇讲话明确说了,医疗保障只能是最低水平

  "在我国目前的国情下,任何社会保险制度都只能有一个最基本的保障水平,既不能向美国、欧洲看齐,也不能向一些东南亚国家看齐。我们没有这个能力,无论如何做不到。中国目前还建立不起一个完善的社会保障制度,没有钱呀!"

  "在我国建立社会保障制度最重要的一点就是要符合社会主义初级阶段的国情,只能确定一个最基本的、低标准的保障水平。"

  "标准搞高了,实际上落实不了,最后就会变成国家的负担,增加财政赤字。与其定一个比较高而实际上收不到钱的标准,还不如先不要提高这个标准。"

就是一句话,财政不能在医疗保障上多花钱。

二、关于大病支出

大部分的医疗费,都花在大病上面。作为对策,讲话也明确说了,大病支出是封顶的,财政不能多花钱。

  "大病花统筹基金要有个封顶线,原则是尽量保证不要超支。经过测算,确定了一个社会统筹医疗基金最高支付限额。要说明总共就这么多钱,每个人只能花一定的限额,超过这个限额,没有办法支付;否则,如果无限制地从统筹基金里拿钱,就会难以为继。封顶要讲出去,各地都要下这个决心; 否则,医疗保险搞不下去。有的地方不敢封顶,那就只能自己背包袱,中央财政没钱可补。"

三、关于低收入者的医疗保障

既然大病支出是封顶的,那么超支的部分只能自费。对于那些付不起的人,讲话也考虑到了。

  "亏损企业的职工超出基本医疗保障水平以外的医疗需求怎么办呢?只能通过社会救济。我们也要建立慈善机构,提倡搞社会捐赠。我们要号召那些收入较高的工商界人士,在力所能及的范围内搞一点捐献,参加一些慈善事业。"

四个字,"祝君好运"。

四、关于公务员的医疗保障

  "机关与企业的医疗保险相比要有不同的办法。当前机关干部的工资水平比较低,在制订医疗保险方案时,不能不考虑这个现实。机关与企业缴纳基本医疗保险金的标准应该一样,机关干部超出基本医疗保障水平以上的必需的医疗费用要由财政拿钱。以往国家为机关干部付出的医疗费用不能减少,而且还要逐步有所增加。"

财政可以为这部分人出钱。

五、关于卫生系统的改革

这是最匪夷所思的部分:医疗人员太多了,必须下岗一部分人。

  "卫生系统与国有企业一样,也存在人浮于事的情况。现在,城市里设了这么多的医疗机构(包括企业的医疗机构),供给大大超过需要,资源相对过剩,必须进行结构调整。要实施区域卫生规划,实现资源优化配置与合理利用,减人增效。多余的人员要下岗分流,否则,搞那么大的摊子,养那么多的人,医疗费用肯定贵得不得了。"

原来,医院是财政出钱的,少一点医生,财政可以少出一点钱。

六、关于医疗改革的前景

15年前决策者的预测,不评论了。

  "如果卫生系统减一点人,成本降低了,医疗费用就会下降,医疗保障水平也就提高了。"

(完)

文档信息

2012年11月14日星期三

阮一峰的网络日志

阮一峰的网络日志


高斯模糊的算法

Posted: 14 Nov 2012 01:39 AM PST

通常,图像处理软件会提供"模糊"(blur)滤镜,使图片产生模糊的效果。

"模糊"的算法有很多种,其中有一种叫做"高斯模糊"(Gaussian Blur)。它将正态分布(又名"高斯分布")用于图像处理。

本文介绍"高斯模糊"的算法,你会看到这是一个非常简单易懂的算法。本质上,它是一种数据平滑技术(data smoothing),适用于多个场合,图像处理恰好提供了一个直观的应用实例。

一、高斯模糊的原理

所谓"模糊",可以理解成每一个像素都取周边像素的平均值。

上图中,2是中间点,周边点都是1。

"中间点"取"周围点"的平均值,就会变成1。在数值上,这是一种"平滑化"。在图形上,就相当于产生"模糊"效果,"中间点"失去细节。

显然,计算平均值时,取值范围最大,"模糊效果"越强烈。

上面分别是原图、模糊半径3像素、模糊半径10像素的效果。模糊半径越大,图像就越模糊。从数值角度看,就是数值越平滑。

接下来的问题就是,既然每个点都要取周边像素的平均值,那么应该如何分配权重呢?

如果使用简单平均,显然不是很合理,因为图像都是连续的,越靠近的点关系越密切,越远离的点关系越疏远。因此,加权平均更合理,距离越近的点权重越大,距离越远的点权重越小。

二、正态分布的权重

正态分布显然是一种可取的权重分配模式。

在图形上,正态分布是一种钟形曲线,越接近中心,取值越大,越远离中心,取值越小。

计算平均值的时候,我们只需要将"中心点"作为原点,其他点按照其在正态曲线上的位置,分配权重,就可以得到一个加权平均值。

三、高斯函数

上面的正态分布是一维的,图像都是二维的,所以我们需要二维的正态分布。

正态分布的密度函数叫做"高斯函数"(Gaussian function)。它的一维形式是:

其中,μ是x的均值,σ是x的方差。因为计算平均值的时候,中心点就是原点,所以μ等于0。

根据一维高斯函数,可以推导得到二维高斯函数:

有了这个函数 ,就可以计算每个点的权重了。

四、权重矩阵

假定中心点的坐标是(0,0),那么距离它最近的8个点的坐标如下:

更远的点以此类推。

为了计算权重矩阵,需要设定σ的值。假定σ=1.5,则模糊半径为1的权重矩阵如下:

这9个点的权重总和等于0.4787147,如果只计算这9个点的加权平均,还必须让它们的权重之和等于1,因此上面9个值还要分别除以0.4787147,得到最终的权重矩阵。

五、计算高斯模糊

有了权重矩阵,就可以计算高斯模糊的值了。

假设现有9个像素点,灰度值(0-255)如下:

每个点乘以自己的权重值:

得到

将这9个值加起来,就是中心点的高斯模糊的值。

对所有点重复这个过程,就得到了高斯模糊后的图像。如果原图是彩色图片,可以对RGB三个通道分别做高斯模糊。

六、边界点的处理

如果一个点处于边界,周边没有足够的点,怎么办?

一个变通方法,就是把已有的点拷贝到另一面的对应位置,模拟出完整的矩阵。

七、参考文献

* How to program a Gaussian Blur without using 3rd party libraries

(完)

文档信息

2012年11月7日星期三

阮一峰的网络日志

阮一峰的网络日志


Javascript模块化编程(三):require.js的用法

Posted: 07 Nov 2012 02:06 AM PST

这个系列的第一部分第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。

我采用的是一个非常流行的库require.js

一、为什么要用require.js?

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。

  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script src="4.js"></script>
  <script src="5.js"></script>
  <script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

require.js的诞生,就是为了解决这两个问题:

  

  (1)实现js文件的异步加载,避免网页失去响应;

  (2)管理模块之间的依赖性,便于代码的编写和维护。

二、require.js的加载

使用require.js的第一步,是先去官方网站下载最新版本。

下载后,假定把它放在js子目录下面,就可以加载了。

  <script src="js/require.js"></script>

有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:

  <script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:

  <script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

三、主模块的写法

上一节的main.js,我把它称为"主模块",意思是整个网页的入口代码。它有点像C语言的main()函数,所有代码都从这儿开始运行。

下面就来看,怎么写main.js。

如果我们的代码不依赖任何其他模块,那么可以直接写入javascript代码。

  // main.js

  alert("加载成功!");

但这样的话,就没必要使用require.js了。真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。

  // main.js

  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    // some code here

  });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

下面,我们看一个实际的例子。

假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:

  require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

    // some code here

  });

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

四、模块的加载

上一节最后的示例中,主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为jquery.js,underscore.js和backbone.js,然后自动加载。

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

  require.config({

    paths: {

      "jquery": "jquery.min.js",
      "underscore": "underscore.min.js",
      "backbone": "backbone.min.js"

    }

  });

上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。一种是逐一指定路径。

  require.config({

    paths: {

      "jquery": "lib/jquery.min.js",
      "underscore": "lib/underscore.min.js",
      "backbone": "lib/backbone.min.js"

    }

  });

另一种则是直接改变基目录(baseUrl)。

  require.config({

    baseUrl: "js/lib",

    paths: {

      "jquery": "jquery.min.js",
      "underscore": "underscore.min.js",
      "backbone": "backbone.min.js"

    }

  });

如果某个模块在另一台主机上,也可以直接指定它的网址,比如:

  require.config({

    paths: {

      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

    }

  });

require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:

  // math.js

  define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });

加载方法如下:

  // main.js

  require(['math'], function (math){

    alert(math.add(1,1));

  });

如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

  define(['myLib'], function(myLib){

    function foo(){

      myLib.doSomething();

    }

    return {

      foo : foo

    };

  });

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

六、加载非规范的模块

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?

回答是可以的。

这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

  require.config({

    shim: {

      'underscore':{
        exports: '_'
      },

      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }

    }

  });

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

比如,jQuery的插件可以这样定义:

  shim: {

    'jquery.scroll': {

      deps: ['jquery'],

      exports: 'jQuery.fn.scroll'

    }

  }

七、require.js插件

require.js还提供一系列插件,实现一些特定的功能。

domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

  require(['domready!'], function (doc){

    // called once the DOM is ready

  });

text和image插件,则是允许require.js加载文本和图片文件。

  define([

    'text!review.txt',

    'image!cat.jpg'

    ],

    function(review,cat){

      console.log(review);

      document.body.appendChild(cat);

    }

  );

类似的插件还有json和mdown,用于加载json文件和markdown文件。

(完)

文档信息