zoukankan      html  css  js  c++  java
  • CoffeeScript简介 <一>

    介绍

    coffeeScript是一种轻量级的编程语言,可以用编译器生成原生javascript代码。它简化了许多javascript繁琐的方式,可以让你用简单的方式直接使用一行程序代表javascript多行代码,而且编译后还会根据最佳实践优化javascript代码。它的语法像是pythonruby的混合,不用括号控制排版,直接用缩进表示。建议初学者一边写coffeescript,一边对照生成的javascript代码,可以很快的了解coffeescript的意义。 浏览器最后执行的还是编译后的javascript代码。

    语法

    去掉多余的符号&&使用缩进

    首先来看一个 coffeescript demo:

    if elvis
      alert "oh no"
      elvis = 3
    

    编译成 javascript 代码之后:

    if (elvis){
      alert("oh no");
      elvis = 3;
    }
    

    看上面的coffee代码和js代码,js中的圆括号被去掉了,画括号也去掉了,分号;也去掉了。

    再比如:

    if elvis
      alert "oh no"
    elvis = 3
    

    编译成 javascript 代码之后:

    if (elvis){
      alert("oh no");
    }
    elvis = 3;
    

    最后一句代码缩进方式不同,导致最终编译的js也不一样,coffee就是根据tab缩进来进行排版的。

    函数

    声明函数时coffee默认会把最后一行作为函数的返回值,可以不加return,如果返回值为空,可以加上return

    例如:

    fill = (x) ->
      x * x
    

    编译后的js为:

    var fill;
    fill = function(x){
      return x * x;
    }
    

    字符串占位符

    这是coffe中最爱的一点,因为javascript中没有类似c#中的string.Format()方法,拼接很长的字符串时代码看起来可读性很差。

    # 这是cofee的注释
    eat = (x) -> alert "I eat #{x}!"
    eat food for food in ['toast', 'cheese', 'wine']
    

    编译后的js代码:

    var eat, food, _i, _len, _ref;
    
    eat = function(x) {
      return alert("I eat " + x + "!");
    };
    
    _ref = ['toast', 'cheese', 'wine'];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      food = _ref[_i];
      eat(food);
    }
    

    这里可以看出来使用coffee有多省事了吧。

    区间使用

    coffee有一个像java一样的...的语法:

    # ... 表示区间
    numbers = [0,1,2,3,4,5,6,7,8,9]
    copy = numbers[0...numbers.length]
    middle = numbers[3...6]
    

    关于 ==!= 之间的比较

    在coffee中没有==,一律使用===,所以也就没有!=,只有!==。javascript中=====的区别是:

    三等操作符===用来判断两个变量是否相等,相等的前提是同样的类型和同样的值。

    具体请参考我的另一篇文章

    对象判空

    coffee可以使用?来判断参数是否已定义或是null值,例如:

    if elvis?
      alert "oh no"
      elvis = 3
    

    编译后的js代码:

    var elvis;
    
    if (typeof elvis !== "undefined" && elvis !== null) {
      alert("oh no");
      elvis = 3;
    }
    
  • 相关阅读:
    Egret Inspector google 插件 浏览器报错的解决方案:
    egret 项目 支持 es6 解决方案
    promise-abortable
    BaseSocket
    【译】async/await 优点、陷阱以及如何使用 (经验总结)
    WebSocket 断线重连引入心跳的原因
    node js 项目: 采用typescript 编写的好文章
    创建Node.js TypeScript后端项目 demo
    vs code 提高工作效率的办法:
    cocos2d-x 贝塞尔曲线(Bezier)用法详解
  • 原文地址:https://www.cnblogs.com/fanyong/p/4008885.html
Copyright © 2011-2022 走看看