前端扫盲 - 之打造一个自动化的前端项目

前言

作为一名前端开发者，刀耕火种的年代随着 NodeJS 等工具的出现，已经一去不复返了。如果你还停留在写着冗长的HTML代码，不断重复着复制粘贴，那么你应该继续学习了。

之所以写这篇文章，是源于前段时间我的一个Github个人主页项目。因为是要放在Github上的，所以只能是静态站点，那么所有静态页面如果一个一个手写的话，是很痛苦的。没有了后台程序，如何去定义模板文件？总不至于每个页面中都写上相同的 header 和 footer 吧。可以使用 Sass 去写 CSS 吗？可以使用 CoffeeScript 去写 JavaScript 吗？可以使用 Markdown 去写HTML内容吗？可以使用 Jade 去写HTML结构吗？

带着这些疑问，我将一步一步实现一个自动化的前端静态站点项目。

环境准备

Mac 或 Linux，不推荐Windows下开发，因为你会遇到很多蛋疼的问题，从本质上来说，你应该开始在Linux下做开发了。

如果你像我一样还在使用 Windows，可以安装一个Ubuntu虚拟机，然后通过 Samba 共享文件，用 SSH 和 Windows做连接，最终就能实现在你熟悉的 Windows下做开发（编辑文件），而运行环境却是 Linux。

1、创建项目

不管做什么开发，我们都应该遵循一定的规范，创建项目同样要注意文件夹的名字和结构。首先创建一个如下的基础项目结构，暂且就将项目命名为 auto-web：

简单解释一下：

• /src 源文件所在地。开发过程中的各种CSS和JS源文件都往这里面放。
• /dist 目标文件所在地。上线前通过工具生成的CSS和JS目标文件都输出到这里。
• /images 图片文件。
• /vendor 第三方的 CSS、JS 和字体文件都存放到这里。
• /views HTML 视图文件。

当然目前我们是手动创建的，可以设想一下，利用NodeJS，我们是完全可以做到一条命令创建出这样的文件夹结构。

2、从 index.html 开始

首先我们习惯性地创建一个 index.html 页面

  
    
    Hello world
  

  
    
这是我的个人主页
  

3、我想用 Jade

什么是 Jade ? - Jade 是 Node 的一个模板引擎，一句话就是让我们能够更快更简便地写HTML，大家可以去 Jade 的 官网，由于其主要是靠缩进来定义结构，所以一般都能够很快地学会这种写法。

类似的模板引擎在 Rails 里面也有一个叫 Slim 。当然有很多开发者是不喜欢用类似的方式去开发，不过我们这里仅作为一个示例，具体用还是不用取决于你自己。

OK，咱们来将 index.html 换成 Jade。

首先，咱们在 /views 文件夹下创建一个 index.jade 文件，然后输入下面的内容：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world  

  body
    h2 这是我的个人主页

这和上面的 index.html 是完全一样的。那么我们可以对比一起两种写法：

在 HTML 代码量越大的情况下，Jade 的写法就越有优势了。当然还是那句话，用与不用都取决于你自己的爱好。

OK，到此为止，我们已经写好了一个 HTML的模板引擎。

直接点击 index.jade 能运行吗？肯定是不行的。在这里我得强调一下，我们所要做的额外的工作，不是为了运行项目，而是为了开发项目。就好比我们都要去北京，只不过你是走路去的，而我是坐飞机去的，目的一致，优化了开发流程而已。

明白了这一点，我们就知道，应该将 index.jade 转换成 index.html 了。

该如何转换呢？这必然得用上工具了，咱们需要一门后台语言的命令行工具，Ruby？Python？ 对，他们都能完成这份工作。但我们是前端，自然最佳选择就是 NodeJS 了。

4、该 NodeJS 出场了

相信大家也都对 NodeJS 有过一定的了解，咱们先不要求精通，只要知道怎么使用即可。

首先咱们去 NPM 中查找要用到的 jade 包，找到 mmand Line 命令行，首先按照文档说的安装（必要时前面加上 sudo）：

$ npm install jade -g

这里的 npm 是 Node 的一个包管理器，也就是通过类似上面的命令去安装程序中需要用到的包。

然后通过 jade --help 可以看到如何将一个 Jade 文件转换成 HTML：

jade views/index.jade -o ./

这样就能在我们的项目根目录下生成一个 index.html 了，而且它的内容是压缩过的。

好像还不错，咱们可以书写 *.jade 文件，然后通过命令生成 *.html 。

5、母版页

网站不可能只有一个页面，但是我们肯定会有公共的头部和底部，不可能每个页面都去写一遍。

有两种方式达到这种目的，一种是母版页，通过占位符和填坑的方式实现，也就是接下来我们要讲的。还有一种是在每个页面中去引入公共部分。当然得根据自己的需要来决定了。

首先我们在 views/ 下创建一个 layouts/layout.jade 母版页：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

注意这里的 block con 是关键，意思是创建一个标识为 con 的坑，等着其它具体页面来填内容。

那么该怎么填内容呢？我们来改写views/index.jade 文件

extends ./layouts/layout.jade

block con
  div 这是主页

首先是通过 extends 引入模板文件，然后再在 block con 下面去填充首页的具体内容。

这样，以后添加任何新页面都可以通过上面的格式来了，不用去管公共部分。

6、该写 CSS 了

页面没有样式是不行的，那么我们接下来就来写样式文件。不过我们这里希望用 Sass 来写。

Sass 是一个 CSS 预处理器，简单点说就是用另外一种方式去书写 CSS（增加了包括变量、嵌套等等新写法），最终同样通过工具转换成原始的 CSS文件。不了解的同学可以大致看一下 官网，也都是很容易学会的。

好了，咱们在 /src/sass 中创建一个 main.scss 文件：

body{
  background-color: #EEE;
  h2{color: Red}
}

作为演示，咱们这只用到了其中的嵌套规则。

上面说到，*.scss 也是不能直接引用的，需要先转换成 *.css。怎么转换呢？首先还是安装 Sass：

npm install sass -g

然后执行下面的命令将 /src/main.scss 输出到 /dist/css/main.css 中

sass src/sass/main.scss dist/css/main.css

大家可以看到，在 /dist/css/ 中实际上生成了 main.css 和 main.css.map 两个文件，当然咱们可以不用管 main.css.map 这个文件，因为我也没去看到底这个文件有什么作用。

OK，大功告成。接下来我们就在 views/layouts/layout.jade 中将 main.css 引入。

修改 views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

然后重新执行

jade views/index.jade -o ./

打开新生成的 index.html 文件，是不是应用上了我们的样式了？

7、该写 JavaScript 了

同样滴，JavaScript 也有自己的预处理，那就是 CoffeeScript 了。这样你就可以写 JavaScript 写得很爽了。不了解的同学可以看看 教程 很简单。

类似上面的 CSS，首先在 src/coffee 下创建一个 main.coffee 文件，然后写上测试代码：

hello = ()->
  console.log("your coffee is work")
hello()

然后

npm install -g coffee-script

接着编译 src/*.coffee 到 dist/js/*.js：

coffee -c -o  src/coffee/main.coffee dist/js/

这里在测试中好像是不能输出来的，不过文档是这样写的，先不用管这个，暂时可以直接将其编译到当前目录下，然后手动复制到 dist/js/*.js 下面：

coffee -c   src/coffee/

接下来我们就在 views/layouts/layout.jade 中将 main.js 引入。 修改 views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
    script(src="dist/js/main.js")
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

然后重新执行

jade views/index.jade -o ./

打开新生成的 index.html 文件，F12看看是不是输出了 your coffee is work。

8、该创作了

估计很多同学都想利用 Github 个人主页（下面会讲到）来写博客，如果是有后台程序，那么一般是将博客内容存到数据库中，然后在一个指定的页面中读取显示出来。

那么全静态站点该如何做呢？我们没有数据库。的确，但是我们仍然可以把博客内容剥离出来，放到一个单独的文件中，然后通过命令去生成单个的博客页面。

这里我们使用 Markdown 格式来写内容，我们新建一个文件夹 views/blog/ 文件夹用于存放所有博客文件。首先我们新建一个 views/blog/index.jade 的页面用于显示文章：

extends ../layouts/layout.jade

block con
  article
    include:marked hello.md

注意这里是通过 include:marked 指令来将 Markdown 文件引进来并解析成 HTML，这是 Jade 为我们提供的功能。

然后创建一个 hello.md 的文章：

### 这是标题
这是内容
[链接文字](链接地址)

最后就会生成一个 blog/index.html。

这里我们是把 include:marked hello.md 写死了，事实上我们是要实现在 views/blog/ 下添加很多的 Markdown 格式的博客内容文件，然后执行 gulp 即可在 blog/下面生成对应的 HTML 文件。

大家可以思考一下这个问题，我这里就不做了，也许会在后面的文章中来进行补充。

到此为止，整个项目已经初具成效了。

那么我们每次修改内容的时候，都得去执行相应的命令，是不是有点繁琐呢？程序员一定要懒，能程序做的就别自己手动去做。那么有这种工具可以帮我们完成这一系列动作吗？

9、自动化构建

所谓的自动化构建就是将多个开发中的操作整理到一起，简化我们的整个开发过程。简单点说就是配置一系列的命令语句，然后一行命令就搞定所有的CSS、JavaScript等处理工作。

当然构建工具的选择还是蛮多的（查看 完整列表）。这里我们选择的是 gulp，因为使用和配置都比较简单。

首先是安装 gulp

npm install --global gulp

然后在你的项目根目录下创建一个 gulpfile.js 文件，内容如下：

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

然后执行

gulp

可以看到默认的任务执行了，只是没有做任何工作：

[14:18:31] Starting 'default'...
[14:18:31] Finished 'default' after 79 μs

下面我们就来配置 gulp 来完成我们的自动化任务，这里咱们先以编译 Sass 文件作为示例。

首先得引入 Sass 的处理包，注意这里不再是 sass ，而是 gulp 的 Sass 插件，可以在 npm 上面找到（点击这里）然后我们可以看看它的大致用法。

首先是引入：

var sass = require('gulp-sass');

然后是创建一个任务：

gulp.task('styles',function(){
  gulp.src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'))
})

这里我们通过 src 指定 *.scss 源文件的位置，然后传入 pipe（自动化流程中的处理管道）最后通过 dest 指定输出路径。整个过程其实是很好理解的。

完了你的 gulpfile.js 文件就会是这个样子：

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('styles',function(){
  gulp.src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'))
})

接下来同样需要安装 gulp-sass

npm install -g gulp-sass

最后，我们执行

gulp

可以看到，Sass 文件已经编译成功了。

对于 coffee 和 jade 文件，我们同样创建各自的任务和处理管道，这里就不重复说了，可以直接看代码。

这里还有一个 clean 任务，用于每次新编译的时候把老文件清空掉

gulp.task('clean',function(cb){
  del(['./dist'],cb)
})

因为执行 gulp 命令默认是取的 default 任务，所以我们需要创建该任务，并把其它任务都给加进去

gulp.task('default',['clean'],function(){
  gulp.start('styles','scripts','templates');
})

可以看到这里是保证在 clean 任执行完成后再去执行我们的 'styles','scripts','templates' 任务。

在实际的开发过程中，不管我们修改什么文件，只需要 gulp 一下即可，方便了很多。但是仍然每次修改都得执行一下。可不可以让 gulp 来监听我们的文件变化，然后自动重新执行编译任务呢？

答案是可以的。只需要将这些任务加入监控 watch 就行了：

gulp.task('watch',function(){
  gulp.watch('./src/sass/*.scss',['styles']);
  gulp.watch('./src/coffee/*.coffee',['scripts']);
  gulp.watch('./views/*.jade',['templates']);
})

然后执行

gulp watch

这样，gulp 就开始监听文件了，不管我们做了什么修改，都不用再次执行 gulp 了。

源码 中我用到了更多的包（压缩、合并、重命名等等）大家可以了解一下，不懂的可以去 npm 上查一下用法文档。

10、开发环境

如果要是在别人的环境中运行该项目，那么我们之前安装的包都得重新安装一遍，是不是很麻烦。别怕，我们有 package.json，用来管理我们这些包的依赖，换了环境只需要执行一下 npm install 即可将我们之前的包都给安装上了，相当省事。

需要手动创建 package.json 吗？NO，只需执行

npm init

接下来我们就可以按照提示创建自己的 package.json 了。 里面包含了该项目的一些信息，咱们找到 dependencies 这一行，这便是该项目要用到的包。正常情况下应该是这种格式：

"dependencies": {
  "gulp": "^3.9.0",
  "gulp-sass": "~2.0.4",
  ....
}

但是很遗憾，里面什么都没有，这意味着我们必须一个个手动往里面添加我们上面用到的包了。

心好累...

难道就不能自动给我们加上去吗？不能，不过我们如果在开始安装每个包的时候在命令结尾加上 -save 参数，那么后面这些依赖便可以自动加到 dependencies 下了，如：

npm install coffee-script -save

所以下次开发的时候，别忘了在安装包的时候加上这个参数。

11、版本控制

现在项目已经完成了，我们应该将它纳入版本控制了。什么叫版本控制呢？通俗点说就是充分管理你的代码日志，你对代码做的任何增删改，只要你提交过，就会记录下来，而且可以随时回退到之前的任何状态，从而保证整个开发过程不会断层。

目前我们基本上都会使用Git来完成版本控制，Git只是一种协议，而具体则有Github、Bitbucket、Gitlab之类的实现。而 Github 则是开源项目的不二选择。

1、首先我们在项目根目录下执行

git init

这里是初始化，会创建一个 .git 文件夹，里面包含了所有跟版本控制相关的数据。所以，如果你想把该项目和Git断开，直接删除该文件夹即可。

2、添加一个 README.md （可选）用于描述项目

touch README.md

注意这里是 Markdown 格式的。

3、忽略某些文件

在提交代码之前，我们需要将某些文件排除在外，比如由 npm 产生的 node_modules 文件夹，这是开发环境下用到的，可以通过 npm install 在新环境下安装依赖。所以理应不纳入版本管理，还有缓存之类的都应该排除掉。

那么我们就创建一个名为 .gitignore 的文件，内容就如下：

.DS_Store
node_modules
.sass-cache

上面只是一个大致的内容，实际开发的时候你得根据自己的需求去忽略某些文件。

4、提交代码到本地

git add .
git commit -m "init project"

注意，这里仅仅是将代码提交到了本地。

5、提交到 Github

首先我们在Github上创建一个项目 auto-web

Create repository 到下一个页面上，复制那句

git remote add origin git@github.com:awesomes-cn/auto-web.git

（这里是我的，你得复制你自己的） 然后回到项目根目录执行该命令。

最后执行提交

git push -u origin master

去你的 Github 上，可以看到该项目的所有文件已经传上去了，而那些忽略掉的文件则没有上去。

感兴趣的同学可以 cat .git/config 一下：

[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
[remote "origin"]
        url = git@github.com:awesomes-cn/auto-web.git
        fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
        remote = origin
        merge = refs/heads/master

这就是本地与远程连接的一个配置，由 remote 和 branch 组成，即通过【远端源+分支】来精确定位到最终提交的地址。如果我们直接修改这个文件，也会和用命令一样达到相同的配置效果。

起初是没有这些内容的，当我们执行 git remote add origin ... 时则添加了

[remote "origin"]
        url = git@github.com:awesomes-cn/auto-web.git
        fetch = +refs/heads/*:refs/remotes/origin/*

而 git push -u origin master 则指定了

[branch "master"]
        remote = origin
        merge = refs/heads/master

所以如果只有 master 分支，后面的提交就直接可以 git push 了。

如果这是你在公司做的，回到家了想继续开发，只需

git clone git@github.com:awesomes-cn/auto-web.git

cd auto-web
npm install
gulp watch

开发环境就绪，继续吧....

免费个人主页

如果你想把该项目作为一个个人主页项目，也就是直接浏览静态页面。Github 给每个用户提供了一个特殊的库，那就是 .github.io ，因为这个项目是可以直接在浏览器中浏览的。一般的前端库都会将文档页面或者演示页面放到该主页上，这样就没必要自己搭服务器来做了。

那么很简单，只需要把该项目的名字改成 .github.io 比如我的是 awesomes-cn.github.io。

然后就可以在浏览器中通过 http://.github.io 访问了。

如此，一个个人主页就诞生了，可以用来做个人简历和博客，完全不用服务器和数据库参与，而且不需要花一分钱的费用。

如果网站中有大量的资源图片，要是放在 Github 上势必会影响访问速度。所以可以将图片放到云存储上面，比如七牛云存储，个人最多有15G的免费流量，完全够用了。

总结

上面的每个部分，我讲得都不是很深入，如果按照我所说的，整个流程都走通了，那么你现在可以对自己感兴趣的部分去做深入了解和学习了。

当前的前端发展是很快的，但某些思想却是不变的，我们必须学会以不变应万变。打好基础，将来不管什么新的框架或者工具都可以快速上手。

附 Github 源码： github.com/awesomes-cn…

前段时间有微博用户发博称 Github 推出了 个人简历，于是就试了一把，只需输入自己的用户名即可生成自己的简历。

后来经提醒，这并非是Github官方推出的，这才引起我的注意，于是详细看了一下。

该 项目 其实只是一个 Github 上的名为 resume 的组织开发的，而且根据地址 http://resume.github.io/ 得知，这仅仅是 Github 提供的个人主页，而这里面能运行的只有静态页面。该项目的最后更新时间是在两年前，可见这并非是一个新项目，不过不影响我们对它的分析。

那么问题来了，既然是静态站点，为什么能获取每个用户的动态信息呢？只有一种可能，就是利用 JavaScript 去调用 Github 开放的 API。咱们来看看它的 源码。

要想做到每个用户得到自己的信息，那就得拿到用户的唯一标识（ Github 用户名）。我的简历地址是 http://resume.github.io/?awesomes-cn，所以路径规则也就是 http://resume.github.io/?Github用户名，怎么拿这个用户名呢？我们来看看 代码：

(function () {
    var e,
        a = /\+/g,  // Regex for replacing addition symbol with a space
        r = /([^&=]+)=?([^&]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
        q = window.location.search.substring(1);

    while (e = r.exec(q)) {
       urlParams[0] = d(e[1]);
    }
})();

这里最主要的一句是 window.location.search.substring(1) 该语句可以获取到 url 后面的参数，如访问 http://resume.github.io/?awesomes-cn 时执行

window.location.search   //-?awesomes-cn
window.location.search.substring(1)  //- awesomes-cn

拿到用户名后，接下来就会执行 run() 方法，该方法里面就是调用Github的API去获取信息了，比如其中有一个 github_user 方法：

var github_user = function(username, callback) {
    $.getJSON('https://api.github.com/users/' + username + '?callback=?', callback);
}

实际上就是利用 JSONP 从 Github 上去获取用户的基本信息。然后在回调中对数据进行处理

var res = github_user(username, function(data) {
  data = data.data;
   ...
}

大家可能会注意到，类似这样的调用还有很多（如 github_user_repos、github_user_orgs等）他们分别对应一个获取 Github API 数据的方法，而每个回调的最后都会有类似下面的代码：

$.ajax({
  url: resume,
  dataType: 'html',
  success: function(data) {
    var template = data,
        html = Mustache.to_html(template, view);
    $('#resume').html(html);
    document.title = name + "'s Résumé";
    $("#actions #print").click(function(){
        window.print();
        return false;
    });
  }
});

那么上面的代码有何作用呢？实际上是用到了 mustache.js 这个模板引擎，将处理好的数据最终渲染到页面上展示出来。

基本上整个流程就出来了，该项目目前已获得 19796 个 star。What ？一个并非多么牛逼的项目为什么能获得这么多 star 呢？想必大家也注意到了，如果没有 star 该项目，是展示不出自己的简历的。

难道它还能拦截未 star 的用户？答案是可以的，下面我们就来找找这段神奇的代码。

可以肯定的是，这段代码一定是在 githubresume.js 中，不过代码太多，不好找。那么咱们换一种方式，首先访问一下未 star 时的页面，上面显示着很大的一句

THIS USER HASN'T OPTED IN。

OK 将这段文字复制到 Github，在当前库中去搜索，最终可以找到 views/opt_out.html 这个文件，可以推测出这是一个模板文件，会在 githubresume.js 中去调用。

接下来我们再去 githubresume.js 中搜索 opt_out.html，然后终于揪出了这段代码：

if (! github_user_starred_resume(username)) {
  $.ajax({
    url: 'views/opt_out.html',
    dataType: 'html',
    success: function(data) {
      var template = data;
      $('#resume').html(data);
    }
  });
  return;
}

顺势找到

var github_user_starred_resume = function(username, page) {
  ...
  if (repos.length > 0) {
    star = github_user_starred_resume(username, page + 1);
  }
  return star;
}

意思是通过 github_user_starred_resume 去 Github 查看当前用户是否 star 了该项目，如果没有则渲染'views/opt_out.html' 这个模板。

真相大白，其实我们应该学会这种思考的方式，享受这种寻找原因的过程。

如何判断一个变量是否是数组，有同学会说，直接像下面这样不就行了：

typeof([]) === 'array'

很可惜，上面的代码会返回 false，typeof([]) 事实上是一个 object。

JavaScript 有 5 种简单的数据类型（undefined、null、string、number、boolean）和 1 种复杂数据类型（object），实际上调用 typeof 得到的结果如下：

typeof(1) //-number
typeof("1") //-string
typeof(1)  //-number
typeof(true)  //- boolean
typeof(undefined)  //- undefined
typeof(function(){})  //-function
typeof([]) //-object
typeof(new Date()) //-object
typeof(null)  //- object

所以是不能直接通过 typeof 判断出数组的。

那么咱们来看看 Underscore 是怎么实现的

var nativeIsArray =  Array.isArray
.....
 _.isArray = nativeIsArray || function(obj) {
    return toString.call(obj) === '[object Array]';
  };

首先会判断浏览器是否支持 Array.isArray() 这个方法，支持的话就直接用这个，比较省事。经测试IE下只能是IE9+才支持。所以为了兼容性的考虑，不能完全依靠这个方法。

接下来咱们看看 toString()，JavaScript 中的每个对象都有一个 toString() 方法，默认是从 Object 继承过来的，如果没有重写的话，会返回 "[object type]" 其中的 type 就表示该对象的类型了。

那么这就好办了，咱们来执行：

[1,2,3].toString()

结果并没有返回我们期望的 "[object Array]"，而是返回了 "1,2,3"，这是因为数组重写了 toString() 方法，从而导致上面的代码直接将数组元素转换成了字符串的形式。

OK，那得从上级里面找，然后通过 call() 去将上下文改成当前数组。

window.toString() //- "[object Window]"

满足我们的要求，省略掉 window，就能得出

toString.call([]) //- "[object Array]"

由上面的分析，我们可以得出，typeof() 能拿到其中 4 种基本数据类型和 object 和 function ，而 toString() 则能拿到更具体的类型。

在Underscore 1.1.7 中新增了一个 _.isObject 方法，用来判断是否为对象，代码如下：

_.isObject = function(obj) {
    return obj === Object(obj);
};

上面的代码是将传入的 obj 和 Object(obj) 进行全等的比较，Object(obj) 会将 obj 转换成一个对象，=== 则是对值和类型的两方面比较。

(function(obj) {
    return obj === Object(obj); //- 输出 true
})({})

只有当传入的是 对象、数组、函数 的时候才会返回 true。如果传入的是值类型（数值、布尔值、null、undefined）则会返回 false。

然而在 1.7.0 版本后，该方法又被改成了下面的 代码：

_.isObject = function(obj) {
   var type = typeof obj;
   return type === 'function' || type === 'object' && !!obj;
};

我们来理解一下，先通过 typeof obj 获取到变量的类型，然后再判断该类型是否为 'function' 或 'object'。

看上去好像已经足够了，那为什么还有后面的 && !!obj 呢？这里面有什么玄机吗？

我们先来看看，如果去掉 && !!obj 是否能满足需求。

typeof 方法有一个比较特殊的地方：

typeof(null)  //- 返回 object

为什么会这样呢？这是由于当初 JavaScript 设计的问题，咱们无需深究，只要知道 typeof(null) 会返回 object 而不是 null 即可。

 type === 'function' || type === 'object' 

自然对 null 也就束手无策了，所以有了 && !!obj。

那到第二个问题了，!!obj 能把 null 排除掉吗？答案是肯定的。

在 JavaScript 中，空字符串、数字0 和 NaN、null 或者 undefined 作为布尔值时都为 false，那么

!null //- true
!!null //- false

因此便把 null 给排除掉了。 JavaScript 中有很多类似的处理方式，通过两次“负负得正”的转换，利用其中的一些转换规则，来达到我们的目的，比如我们另一篇 文章 中讲到的 ~~。

不过我还没有搞清楚为什么会将 isObject 在两个版本中做这样的修改。有知道的同学可以说说。

更新：

经过 咨询 得知，对于 obj === Object(obj) V8 引擎有一个小bug，不过这并不是做此改变的原因，实际上只是一个 优化的选择。

如何将一个浮点数转换成整数呢？很多同学会说

parseInt(1.5)  //- 输出 1

还有其它方法吗？

在阅读了 smartcrop.js 的源码后，我发现整个代码中很多地方出现了类似这样的代码

options.cropWidth = ~~(options.width * scale);
options.cropHeight = ~~(options.height * scale);

那么这个 ~~ 有何妙用呢？

大家知道 ~ 表示按位取反

~1 //- 输出 -2

大致是先将十进制的 1 转换成二进制，然后将其中的 0 和 1 对换，再转换成十进制，就得到了 -2

那么对 1.5 取反呢？

~1.5 //- 输出 -2

仍然输出了 2，因为 ~ 只对整数有用，遇到浮点数则会先将其转换成整数。

那么我们完全可以利用这个特性来完成我们的转换目的了。

因为 ~ 是两个数直接的一个可逆的变换，就相当于正负号，所以负负得正

~1.5 //- 输出 -2
~-2 //- 输出 1

最终也就实现了将浮点数转换成整数了

~~1.5 //- 输出 1

那么既然已经有了 parseInt() 为什么还要用 ~~ 呢？

初步设想是性能上会有差别。

然后我就在浏览器中分别跑了下面的代码：

a=new Date()
var b;
for(i=0;i<10000000;i++){
   b = parseInt(1.5)
}
alert(new Date() - a)

平均耗时为 210

a=new Date()
var b;
for(i=0;i<10000000;i++){
   b = ~~1.5
}
alert(new Date() - a)

平均耗时为 40

可见在性能上 ~~ 是优于 parseInt() 的。

话说，这是属于前端的时代......

where={"name":"awesome"}

var Mem = Parse.Object.extend("Mem");
var mem = new Mem();

mem.set("name", "hxh");

var name = mem.get("name");

mem.save({
    age: 18
},{
  success:  function(mem){...},
  error: function(mem, error) {...}
})

mem.destroy({
  success:  function(mem){...},
  error: function(mem, error) {...}
})

mem.unset("age");

var query = new Parse.Query(mem);
query.get(,{
   success:  function(mem){...},
  error: function(mem, error) {...}
})

mem.fetch({
    success:  function(mem){...},
  error: function(mem, error) {...}
})

myComment.set("parent", myPost);

var post = myComment.get("parent");
post.fetch({
...
});

var Mem = Parse.Object.extend("Mem");
var query = new Parse.Query(mem);

query.equalTo("name", "hxh");

query.find({
    success: function(results) {...},
    error: function(error) {...}
})

query.first({
    success: function(results) {...},
    error: function(error) {...}
})

query.count({
    success: function(count) {...},
    error: function(error) {...}
})

query.notEqualTo("name", "awesomes");  //  不等于
query.greaterThan("age", 18); // 大于
query.lessThan("age", 50); //  小于
query.lessThanOrEqualTo("age", 50); //   大于等于
query.greaterThanOrEqualTo("age", 50); // 小于等于

query.containedIn("name",["hxh","awesome"]) //- 包含
query.notContainedIn("name",["hxh","awesome"]) //- 不包含


query.exists("age"); //- 存在
query.doesNotExist("age"); //- 不存在

// 字段类型为数组
query.containsAll("arrayKey", [2, 3, 4]); //- 包含数组值

// 字段类型为字符串
query.startsWith("name", "awe"); //- 以什么字符串开头

query.select("name", "age");

query.skip(5); //- 忽略前5个结果
query.limit(10); // 最多返回10个结果

query.ascending("age");  //- 升序
query.descending("name");  //- 降序

query.include("info");
query.find({
    success: function(mems) {
      var info = mems[0].get("info");
    }
})

...
var mainQuery = Parse.Query.or(query1, query2);
...

Node 给前端开发带来了很大的改变，促进了前端开发的自动化，我们可以简化开发工作，然后利用各种工具包生成生产环境。如运行 sass src/sass/main.scss dist/css/main.css 即可编译 Sass 文件。在实际的开发过程中，我们可能会有自己的特定需求，那么我们得学会如何创建一个Node命令行工具。

autogo demo

npm init

#! /usr/bin/env node
console.log("hello")

node bin/autogo.js

{
...
 "bin": {
    "autogo": "./bin/autogo.js"
  }
  ...
  }

npm link

autogo

-bash: /usr/local/bin/autogo: /usr/local/bin/node^M: bad interpreter: No such file or directory

sudo apt-get install dos2unix

sudo dos2unix bin/autogo.js

: No such file or directory

var Promise = require("bluebird"),
    fs = Promise.promisifyAll(require('fs-extra'));


function generateStructure(project){
  return fs.copyAsync('structure', project,{clobber: true})
    .then(function(err){
      if (err) return console.error(err)
    })
}


module.exports = generateStructure;

npm install bluebird --save
npm install fs-extra --save

#!/usr/bin/env node
var gs = require('../lib/generateStructure');

gs("demo");

autogo

autogo demo

$ npm install commander --save

#!/usr/bin/env node

var program = require('commander'),
    gs = require('../lib/generateStructure');

program
  .version(require('../package.json').version)
  .usage('[options] [project name]')
  .parse(process.argv);

var pname = program.args[0]

gs(pname);

autogo --version //- 返回1.0.0

autogo --help

  Usage: autogo [options] [project name]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

autogo    //- 返回  []
autogo demo  //-返回 ['demo']
autogo demo hello  //-返回 ['demo','hello']

var pname = program.args[0]
gs(pname);

autogo demo2

...
var pname = program.args[0]
if (!pname) program.help();
...

var Promise = require("bluebird"),
  fs = Promise.promisifyAll(require('fs-extra')),
  del = require('../lib/delFile');

var files =  ['/views/layouts/layout.jade','/views/index.jade'];
function jadeWithout(project){
  return Promise.all([del(project,files)])
    .then(function(){      
      return  console.log('remove jade success');
    })
}
module.exports = jadeWithout;

var Promise = require("bluebird"),
  fs = Promise.promisifyAll(require('fs-extra'));

function del(project,files){
  return files.map(function(item){
    return fs.removeAsync(project + item)
  }) 
} 
function delFile(project,files){
  return Promise.all([del(project,files)])  
}
module.exports = delFile;

var Promise = require("bluebird");

function deal(project,outs){
  return outs.map(function(item){
    var action = require('../lib/'+item+'Without');
    return action(project)
  }) 
}

function withoutFile(project,outs){
  return Promise.all([deal(project,outs)])
}
module.exports = withoutFile;

...
var gs = require('../lib/generateStructure'),
    wf = require('../lib/withoutFile');
...  
Promise.all([gs(pname)])
  .then(function(){
    return wf(pname,["jade",'sass'])
  })

autogo demo

generate project success
remove jade success
remove sass success

autogo --without jade demo

...
program
  .version(require('../package.json').version)
  .usage('[options] [project name]')
  .option('-W, --without ', 'generate project without some models(value can be `sass`、`coffee`、`jade`)')
  .parse(process.argv);
...

...
var outs = program.without ? [program.without] : []

Promise.all([gs(pname)])
  .then(function(){
    return wf(pname,outs)
  })
...

autogo --without jade demo

autogo --without [jade,sass] demo

autogo --without jade,sass demo

 program.without.split(',')

 ...
var outs = program.without ? program.without.split(',') : []

Promise.all([gs(pname)])
  .then(function(){
    return wf(pname,outs)
  })

 ...

 autogo demo --without sass,jade

npm login

npm publish

sudo npm unlink

npm install autogo -g

autogo demo

Unhandled rejection Error: ENOENT, lstat 'structure'
    at Error (native)

var root = __dirname.replace(/autogo\/lib/,'autogo/')

function generateStructure(project,outs){
  return fs.copyAsync(root + 'structure', project)
    .then(function(err){
      return err ?  console.error(err) : console.log('generate project success');
    })
}
...

autogo demo
cd demo
npm install
gulp watch

npm publish

npm unpublish autogo --force