JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?

我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

2017年最佳JavaScript框架,库和工具

JavaScript框架,库和工具似乎比他们的开发人员多出很多。截至2017年5月,在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。npmjs.org 有 50 万个可用的软件包,每月下载量近100亿次。

2017.05.29:该文章已更新,以反映 JavaScript 生态的当前状态。

本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西,坚持一段时间。你需要知道的是:你最喜欢的选项终将被“更好”的东西取代,无论你选择什么! 继续阅读

打造一个自动化的前端项目

转载自:http://www.awesomes.cn/source/9

前言

作为一名前端开发者,刀耕火种的年代随着 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

awesomes-cn

简单解释一下:

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

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

CoffeeScript入门

原文 Learn X in Y minutes, where X = coffeescript

作者 Tenor Biel

译者 Xavier Yao


CoffeeScript是逐句编译为JavaScript的一种小型语言,且没有运行时的解释器。 作为JavaScript的替代品之一,CoffeeScript旨在编译人类可读、美观优雅且速度不输原生的代码, 且编译后的代码可以在任何JavaScript运行时正确运行。

参阅 CoffeeScript官方网站以获取CoffeeScript的完整教程。

CoffeeScript是一种很潮的编程语言,它紧随众多现代编程语言的趋势。 因此正如Ruby和Python,CoffeeScript使用井号标记注释。

# 这是注释

###
大段落注释以此为例,可以被直接编译为 '/ *' 和 '* /' 包裹的JavaScript代码。

在继续之前你需要了解JavaScript的基本概念。

示例中 => 后为编译后的JavaScript代码
###

赋值

1
2
number   = 42 #=> var number = 42;
opposite = true #=> var opposite = true;

继续阅读