文档章节

前端开发之路-coffeescript环境搭建

透笔度
 透笔度
发布于 2015/08/29 23:38
字数 1407
阅读 172
收藏 4
点赞 0
评论 0

coffeescript的地址:http://coffee-script.org/ 

nodejs的安装,我们在前面一篇博客已经介绍到,地址:http://my.oschina.net/u/2352644/blog/487488 

1.安装(无环境,不编程)

我们看到介绍,coffee就是尝试用简洁的方式展示 JavaScript 优秀的部分,是一个实用的 Node.js 工具. 不过编译器并不依赖 Node, 而是能运行于任何 JavaScript 执行环境,用过npm安装。

我们开始安装:我的是windows系统,nodejs通过上面咱们是要安装好的

1.win键+r 输入cmd 回车

2.我的nodejs安装目录 (d:nodejs ) 转到d盘 nodejs目录

d:
cd nodejs

3.node -v 确保nodejs安装

node -v

4.npm -v 确保npm安装,npm和nodejs已经集成

npm -v

5.npm install coffee-script  安装的coffee会在nodejs目录的node_modules下

npm install -g coffee-script

-g 的g是global意思,表示全局安葬,输入下面名利

coffee -v

输出coffee版本,表示安装成功!

我这里在nodejs的nodejs下已经看见了coffee模块了。我们下一步进行coffee的测试输出,类似hello world 的输出!

2.用法(等同于hello world 的输出

我们在用法上看到各种命令的介绍,好心烦,不看了,我们直接看给的例子,一个个命令行测试就好了!

我们在开始就知道,coffee是用简单的语法编译成js的,这一刻就可以这么理解

js 创建变量是 var aa=123;

coffee 创建变量可能这么写 v aa=123

的写法了,对js的语言进行了映射似的精简。

我们在官网的概述看见了coffee的代码写法,我们复制下来,保存成 start.coffee 文件,为进行的coffee实现!

我们在nodejs目录下创建coffee文件夹,下面创建start.coffee 文件。

我们通过任何编辑器打开.coffee文件,里面代码如下:

# 赋值:
number   = 42
opposite = true

# 条件:
number = -42 if opposite

# 函数:
square = (x) -> x * x

# 数组:
list = [1, 2, 3, 4, 5]

# 对象:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# 存在性:
alert "I knew it!" if elvis?

# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)

什么东西?我们根据教程,对这个文件编译处理。

我们转到放coffee文件的目录

cd coffee

执行coffee的编译命令

coffee -c start.coffee

-c表示编译coffee文件,后面就是我们创建的coffee文件。

编译后的代码如下:

// Generated by CoffeeScript 1.9.3
(function() {
  var cubes, list, math, num, number, opposite, race, square,
    slice = [].slice;

  number = 42;

  opposite = true;

  if (opposite) {
    number = -42;
  }

  square = function(x) {
    return x * x;
  };

  list = [1, 2, 3, 4, 5];

  math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
      return x * square(x);
    }
  };

  race = function() {
    var runners, winner;
    winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
    return print(winner, runners);
  };

  if (typeof elvis !== "undefined" && elvis !== null) {
    alert("I knew it!");
  }

  cubes = (function() {
    var i, len, results;
    results = [];
    for (i = 0, len = list.length; i < len; i++) {
      num = list[i];
      results.push(math.cube(num));
    }
    return results;
  })();

}).call(this);

对比概览发现多了东西如下,

(function() {

}).call(this);

我们测试一下这个作用吗,我们创建一个html页面,里面写入如下的js代码:

(function() {
    alert("我的外层干什么的?")
}).call(this);

html整个代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
 
</style>
<script src="js/jquery.js"></script>
<title>coffee</title>
</head>
<body> 


</body>
<script type="text/javascript">
(function() {
    alert("我的外层干什么的?")
}).call(this);

</script>
</html>

会执行alert,看来这个外层包裹和

(function() {
})();

同样的作用,都是立即执行的匿名函数,我们知道call是调用并且执行方法,里面的this是js的指针,指向的是window全局对象

if(this===window){alert(this)}

直接放在script下的this是指向window的,this作为上下文指针受环境影响作出不同指向。

coffee把编译的代码放在立即执行函数就是为了防止污染。

3.思考

我们看见上面的编译,瞬间就想到了less和sass,这两个技术不就是最后编译成css吗?css的动态预处理技术。同样coffee也是做了类似的工作,通过新的定义去书写,最后生成js文件。

less和sass里面支持css的写法,但是coffee里面不支持js的书写,不过有人说的很对,这三种可归为脱了裤子放屁!!!

less和sass是嵌入了语法的css,不过我觉得吧,就算你掌握的这种写法,也未必写的过用css的,页面是实现不单单是css的书写,还有对布局的掌握,就算这些不考虑?你确定能用less写的比我快?有人说修改维护快,自己写的不灵活赖我咯!哈哈哈!浪费时间是真的,你想想他学了less,浪费了很多的精力,但是在开发中并没有什么收益,还要有面子,所有你懂得他要怎么和你吹了!less和sass绝对的浪费时间和换取不到什么收益的东西,如果你用了,公司强制了,呵呵吧!

纯脱了裤子放屁的东西还要用,还要你花时间学,让你连搬砖都非得背个登山包能么么哒吗!

说说coffee吧!我都是实话实说,想用好,js必须过关,你js都只能写2行半,你还要简写你觉得你不是扯淡吗?为我们避免了很多js书写的不规范,!

4.语言

大家打开官网,语言手册左侧是coffee代码,右侧是js代码,会js的看起来不难,不会的就学完右侧的js再回来写coffee吧!









© 著作权归作者所有

共有 人打赏支持
透笔度
粉丝 65
博文 124
码字总数 235452
作品 0
朝阳
前端工程师
Atom飞行手册翻译: 3.1 ~ 3.2

现在是时候来介绍在这一Hackable的编辑器中,真正“Hackable”的部分了。像我们在整个第二章中看到的那样,Atom中很大一部分都由一大堆包组成。如果你想向Atom中添加一些功能,你必须要访问和...

apachecn_飞龙 ⋅ 2015/08/03 ⋅ 0

CoffeeScript 2.3.0 发布,JavaScript 转译语言

CoffeeScript 2.3.0 发布,此次更新信息如下: 将分析初始化移入 docs.coffee 更新 CodeMirror 样式 文档更好的布局,包括自动调整大小的侧栏和主栏 对 Edge 的一些样式进行小修改 更新断开的...

雨田桑 ⋅ 04/30 ⋅ 0

CoffeeScript 2.2.4 支持 ES2018 正则表达式 dotall 标志

CoffeeScript 2.2.4 (#5025) 发布。 下载地址 Source code (zip) Source code (tar.gz) 更新 修复#4877:指数运算符(#4881) 支持 ES2018 正则表达式 dotall 标志...

雨田桑 ⋅ 04/01 ⋅ 0

Atom飞行手册翻译: 2.13 基本的自定义

基本的自定义 在我们感受到Atom中所有东西的便利之后,让我们看看如何改进它。可能有一些快捷键你经常使用但是感觉很别扭,或者一些颜色不是十分适合你。Atom具有惊人的灵活性,所以让我们对...

apachecn_飞龙 ⋅ 2015/08/03 ⋅ 0

此生无悔入 TypeScript

↑ 编者按:本文由phodal公众号授权奇舞周刊转载。 想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。 平淡生活,我的意思是:生活可以从此...

奇舞周刊 ⋅ 04/26 ⋅ 0

一次与陌生男子结对编程3天的经历

最近,公司的事情越发忙碌起来了,除了需要不断梳理架构团队的规划和进度之外,还要经常北上杭三地跑,平常好不容易有个完整的周末,也都瘫软在沙发上,一动脑就脑壳痛。感觉这种状态很容易让...

小芋头君 ⋅ 05/27 ⋅ 0

java Web中的接口项目:浏览器访问接口地址后返回的是一串加密后的字符串,控制台显示:请求包为空,如何解决才能看到接口中显示的json数据信息?数据转换使用des进行加密和解密的。谢谢

java Web中的接口项目:浏览器访问接口地址后返回的是一串加密后的字符串,控制台显示:请求包为空,如何解决才能看到接口中显示的json数据信息?数据转换使用des进行加密和解密的。谢谢...

llddgg ⋅ 02/28 ⋅ 0

【CentOS 7Tomcat配置3】,配置tomcat监听端口为80#180120

hellopasswd --- 配置tomcat监听端口为80 vi /usr/local/tomcat/conf/server.xml Connector port="8080" protocol="HTTP/1.1"修改Connector port="80" protocol="HTTP/1.1" /usr/local/tomc......

hellopasswd ⋅ 01/20 ⋅ 0

世界AI人才储备战硝烟四起,中国能否抢占少儿编程先机?

在人工智能的发展过程中,人才储备无疑是重要的一环。人工智能应是一种可以深埋于任何产业中的底层技术,与医疗结合可以提升影像资料的检阅效率,与工业结合可以提升分拣速度……在未来,或许...

脑极体 ⋅ 04/18 ⋅ 0

被收购的背后:在GitHub工作是一种怎样的体验?

被收购的背后:在GitHub工作是一种怎样的体验? 2018-06-06 10:45编辑: 枣泥布丁分类:程序人生来源:程序师 收购微软Github工作体验 招聘信息: C++工程师 Cocos2d-x游戏客户端开发 iOS开发...

枣泥布丁 ⋅ 06/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 40分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 50分钟前 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 10

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部