zoukankan      html  css  js  c++  java
  • CoffeeScript学习(1)——Quick Start

    什么是CoffeeScript

    CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.
    CoffeeScript 的指导原则是: "她仅仅是 JavaScript". 代码一一对应地编译到 JS, 不会在编译过程中进行解释. 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然. 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.

    这是CoffeeScript中文网上,对CoffeeScript的介绍。我接下来的学习,基本是基于此的。有兴趣看更多详情的同学可以直接进入:CoffeeScript

    安装使用

    其实Coffee并不需要安装,但我们需要有一个编译器来对xxx.coffee进行编译,转化成xxx.js
    所以,我们需要先全局安装一个命令行工具。

      npm install coffee-script -g
    

    安装完之后,我们就可以使用coffee -c xxx.coffee来对coffee文件进行编译。它会在本地对应生成一个xxx.js。更多方法可以登陆到之前的那个网站进行查阅。这里我仅会分析,coffee是编译到js是怎样的。

    快速入门

    下面我们举几个小例子,让大家尽快的感受到coffee的感觉。首先,要强调的是,你要有原生Javascript的基础。其次,CoffeeScript的块级分层,是通过缩进来体现的。在比较深层次的嵌套里,这是非常关键的!请统一你的缩进,是tab或者space,请不要混用。

    变量赋值
    name = 'Yika'                           #基本变量
    age = '20'
    friends = ['kitty', 'macy', 'ivan']     #数组
    
    obj =                                   #对象
      name: 'yika',
      age: '20',
      friends: ['kitty', 'macy', 'ivan']
    ----------编译后----------
    (function() {
      var age, friends, name, obj;
    
      name = 'Yika';
    
      age = '20';
    
      friends = ['kitty', 'macy', 'ivan'];
    
      obj = {
        name: 'yika',
        age: '20',
        friends: ['kitty', 'macy', 'ivan']
      };
    
    }).call(this);
    

    我们来分析一下。首先,整个代码是被一个立即执行的匿名函数包住的,这样可以有效解决全局变量污染的事。相信大家也是了解过的,所以接下来显示编译后的代码时,我不会再将匿名函数显示出来。

    其次就是coffee会为我们自动定义var操作符,让我们省去烦恼,也不会担心一旦忘记了var而造成全局污染的危险。但是变量还是有一些需要注意的地方的,我会在下一篇《变量篇》进行说明。

    数组和对象是可以和原生保持一致的。当然对象可以去掉大括号和逗号,用缩进来控制层次。我个人在对象定义上,是保持了逗号,并去除了大括号的。

    函数

    Coffee是用箭头来定义函数的,直接来看看

    greeting = () ->
      console.log('hello world')
    ----------编译后----------
    var greeting;
    
    greeting = function() {
      return console.log('hello world');
    };
    
    

    使用的是表达式函数。Coffee并不支持声明式的函数,因为声明式的函数会自动进行变量提升,对没有块级作用域的Js来说,像个定时炸弹。所以我们要养成先定义,后使用的好习惯。

    循环

    循环一般来说,用得多的有数组循环和对象循环。

    arr = ['a', 'b', 'c', 'd', 'e']
    ARR = []
    
    obj = 
      a: 'a',
      b: 'b',
      c: 'c',
      d: 'd',
      e: 'e'
    OBJ = {}
    
    for word in arr
      ARR.push(word.toUpperCase())
    
    for key, val of obj
      OBJ[key] = val.toUpperCase()
    ----------编译后----------
      var ARR, OBJ, arr, i, key, len, obj, val, word;
    
      arr = ['a', 'b', 'c', 'd', 'e'];
    
      ARR = [];
    
      obj = {
        a: 'a',
        b: 'b',
        c: 'c',
        d: 'd',
        e: 'e'
      };
    
      OBJ = {};
    
      for (i = 0, len = arr.length; i < len; i++) {
        word = arr[i];
        ARR.push(word.toUpperCase());
      }
    
      for (key in obj) {
        val = obj[key];
        OBJ[key] = val.toUpperCase();
      }
    
    

    关于前面的不用多看,直接看看两段关于循环的那一块儿。coffee提供的语法,可以使我们不再需要自己写for循环,并改成了使用for xxx in aa这种方式。xxx指的是数组每一次循环的那一个值,可以自行定义名称。需要注意的是,for..in..在coffee里,不再是对象循环的意思了。

    而对象循环,则更名为for..of..的形式。我们可以用两个名字来代表,每一次对象循环的key和value。这样的使用会让我们操作Object迭代更加灵活。

  • 相关阅读:
    vue项目打包后css背景图路径不对的问题
    Vue项目图片剪切上传——vue-cropper的使用
    Vue项目使用AES做加密
    VUE滚动条插件——vue-happy-scroll
    自实现jQuery版分页插件
    HTML5中的Web Notification桌面通知
    img标签实现和背景图一样的显示效果——object-fit和object-position
    自实现PC端jQuery版轮播图
    web前端几个小知识点笔记
    限制可编辑div只能输入纯文本
  • 原文地址:https://www.cnblogs.com/YikaJ/p/4320785.html
Copyright © 2011-2022 走看看