服务端和客户端的代码重用

问题

当你在 CoffeeScript 上创建了一个函数,并希望将它用在有网页浏览器的客户端和有 Node.js 的服务端时。

解决方案

以下列方法输出函数:

# simpleMath.coffee

# these methods are private

add = (a, b) ->

a + b

subtract = (a, b) ->

a - b

square = (x) ->

x * x

# create a namespace to export our public methods

SimpleMath = exports? and exports or @SimpleMath = {}

# items attached to our namespace are available in Node.js as well as client browsers

class SimpleMath.Calculator

add: add

subtract: subtract

square: square

讨论

在上面的例子中,我们创建了一个新的名为 “SimpleMath” 的命名空间。如果 “export” 是有效的,我们的类就会作为一个 Node.js 模块输出。如果 “export” 是无效的,那么 “SimpleMath” 就会被加入全局命名空间,这样就可以被我们的网页使用了。

在 Node.js 中,我们可以使用 “require” 命令包含我们的模块。

$ node

> var SimpleMath = require('./simpleMath');

undefined

> var Calc = new SimpleMath.Calculator();

undefined

> console.log("5 + 6 = ", Calc.add(5, 6));

5 + 6 =  11

undefined

>

在网页中,我们可以通过将模块作为一个脚本嵌入其中。

SimpleMath Module Example

jQuery(document).ready(function    (){

var Calculator = new SimpleMath.Calculator();

var result = $('

').html("5 + 6 = " + Calculator.add(5, 6));

$('#SampleResults').append(result);

});

A SimpleMath Example

输出结果:

A SimpleMath Example

· 5 + 6 = 11

比较范围问题如果你想知道某个变量是否在给定的范围内。解决方案使用 CoffeeScript 的连缀比较语法。maxDwarfism = 147minAcromegaly = 213height = 180normalHeight = maxDwarfism < height < minAcromegaly# => true讨论这是从 Python 中借鉴过来的一个很棒的特性。利用这个特性,不必像下面这样写出完整的比较:normalHeight = height > maxDwarfism && height < minAcromegalyCoffeeScript 支持像写数学中的比较表达式一样连缀两个比较,这样更直观。

嵌入 JavaScript

问题

你想在 CoffeeScript 中嵌入找到的或预先编写的 JavaScript 代码。

解决方案

把 JavaScript 包装到撇号中:

`function greet(name) {

return "Hello "+name;

}`

# Back to CoffeeScript

greet "Coffee"

# => "Hello Coffee"

讨论

这是在 CoffeeScript 代码中集成少量 JavaScript 而不必用 CoffeeScript 语法转换它们的最简单的方法。正如 CoffeeScript Language Reference 中展示的,可以在一定范围内混合这两种语言的代码:

hello = `function (name) {

return "Hello "+name

}`

hello "Coffee"

# => "Hello Coffee"

这里的变量 "hello" 还在 CoffeeScript 中,但赋给它的函数则是用 JavaScript 写的。

For 循环

问题

你想通过一个 for 循环来迭代数组、对象或范围。

解决方案

# for(i = 1; i<= 10; i++)

x for x in [1..10]

# => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

# To count by 2

# for(i=1; i<= 10; i=i+2)

x for x in [1..10] by 2

# => [ 1, 3, 5, 7, 9 ]

# Perform a simple operation like squaring each item.

x * x for x in [1..10]

# = > [1,4,9,16,25,36,49,64,81,100]

讨论

CoffeeScript 使用推导(comprehension)来代替 for 循环,这些推导最终会被编译成 JavaScript 中等价的 for 循环。

coffeescript html5,CoffeeScript语法相关推荐

  1. coffeescript html5,HTML5——前端预处理技术(Less、Sass、CoffeeScript)

    一.Less 1.1.概要 Less是一种动态样式语言,Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 将 C ...

  2. 【HTML5】HTML5基础语法汇总

    HTML 超文本标记语言(Hyper Text Markup Language,简称HTML)是一种构建网页的标准标记语言. 那么"超文本"和"标记语言"是什么 ...

  3. html5不支持的属性,HTML5 常用语法一览(列举不支持的属性)

    HTML头部标记 标记 描述 HTML5标准 定义页面中所有链接的基准URL 设定显示在浏览器左上方的标题内容 表明该文档是一个可用于检索的网关脚本 不支持 文档本身的元信息,例如查询关键词,有效期等 ...

  4. html5正则表达式语法,正则表达式 – 语法 | 菜鸟教程

    正则表达式 - 语法 正则表达式(regular )描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件的子串等. 例如: ...

  5. JavaScript新发展 CoffeeScript Dart Rust Node.js

    CoffeeScript http://coffeescript.org/ CoffeeScript (GitHub repo) 是一个使用纯Ruby编写的新编程语言,创建者 Jeremy Ashke ...

  6. CoffeeScript中的三元操作

    本文翻译自:Ternary operation in CoffeeScript I need to set value to a that depends on a condition. 我需要设置值 ...

  7. CoffeeScript入门

    官网文档传送门 CoffeeScript简介 CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. ...

  8. CoffeeScript 简介与安装步骤概览

    CoffeeScript 简介与安装步骤概览 一.关于CoffeeScript CoffeeScript是一门新兴的构建在JavaScript之上的预处理器语言,经过编译可以生成高效的JavaScri ...

  9. [CoffeeScript]咖啡,入门

     简介: 目前,大家对 CoffeeScript 狂热有加.CoffeeScript 是一种新的编程语言,构建于 JavaScript 之上.CoffeeScript 提供了一种简洁的语法,对 P ...

  10. coffee-script运行环境

    1.安装nodejs 2.nodejs 安装 coffee-script模块,npm install -g coffee-script 3.sublime 安装 better coffeescript ...

最新文章

  1. java 汉字 数字_java数字转汉字工具类详解
  2. Centos 6.5 监控路由器、思科交换机Nagios (三)
  3. 神奇的魔法数字0x61c88647
  4. 利好不断,跑步入场支持BCH
  5. python3 判断ip有效性 是否是内网ip
  6. java 自动封装_自动补全的java封装
  7. 牛客练习赛29 题解
  8. 【渝粤题库】广东开放大学 文化产业概论 形成性考核
  9. R7-3 极坐标->直角坐标 (10 分)
  10. 董明珠:10个亿不要了,还想再赌五年 雷军:可以试一下
  11. linux必须运行在enforcing,设置 Selinux环境为 Enforcing模式
  12. [CTO札记]李彦宏:《领导者的心态——Best of the best》
  13. 健康管理系统案列/APP/小程序/网站
  14. 分析Redis集群原理
  15. 微信公众号推送模板信息
  16. 2018杭州云栖大会主要演讲:新杭州故事,平头哥与新制造
  17. 机器学习 - Python Matplotlib 练习, 常见功能查阅
  18. 南卡NEO骨传导首发新机,超前无线充设计,树立行业标杆!!!
  19. 从反脆弱角度谈技术系统的高可用性
  20. 学习日志--1.html

热门文章

  1. 设计模式 装饰模式(decorate)
  2. 基于STM32的OLED 屏幕驱动
  3. jquery 抓取微博_使用jQuery和RegexJavaScript进行客户端网络抓取
  4. Spring 最新漏洞修复
  5. 如何查看自己网站的访问量
  6. oracle 乘法表,ORACLE SQl——9*9 乘法表的实现方法
  7. dlang语法的简单整理
  8. 微信发红包的测试用例功能点
  9. matlab zxing ean13,条形码研究-EAN13 条形码
  10. MarkDown 标题居中