摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. html : Emmet,jade,haml,slim http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html 二. css : less,sass,stylus http://www.zhihu.com/question/2030038…

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意思的地方在于,它喜欢在画布上面做文章,正常的思路,如果要画一条倾斜45度的直线,一般会先用数据计算拿到起始点与末点的坐标,先定位到起点画线到末点:如何在画布上面做文章呢,它先把画布旋转45度,然后直接在中间画一条竖线,再把画布复原,这样直线也跟着倾斜45度了.就按这思路定时在Canvas上画点.线.…

在上篇Angular遇上CoffeeScript – NgComponent封装中,我们讲述了CoffeeScript这门小巧的语言,摒弃JavaScript中糟粕(“坑”)部分,并将JavaScript中精粹部分发挥到淋淋尽致.虽然笔者更喜欢ES6 + Babel或者TypeScript这类鲜明特性的JavaScript语法.但是CoffeeScript也不失为一门不错的JavaScript扩展语言,特别在Ruby社区仍然是一个很好的选择. 在本节中,我们将会利用CoffeeScript来模拟…

CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或者Nodejs平台.JavaScript由于商业原因10天时间就匆忙诞生,所以存在很多弊病.但如<JavaScript精粹>一书中所说:JavaScript也存在着一颗华丽的心脏,如果我们能避开JavaScript中的“坑”,使用其精华的部分,这将是一门令人爱不释手的语言. 而CoffeeScript则是尝试使用这部分简洁的方式展示JavaScript的这部分优秀的精华,…

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.［引自coffeescript深入浅出］ class Shape constructor: (@width) -> computeArea: -> throw new Error 'I am an abstract class!' class Square extends Shape computeArea: -> Math.pow @width, 2 class Circle…

只是在看深入浅出coffeescript中感觉真的很好,不光是coffe写法简单,生成的js也值得学习,废话不多说了,直接抄个书上的例子 class Pet constructor: -> @isHungry = true eat: -> @isHungry = false class Dog extends Pet eat: -> console.log '*crunch,crunch*' super() fetch: -> console.log 'Yip yip' @isHu…

在CoffeeScript中定义类 在CoffeeScript中,使用class定义类,使用关键字new实例化对象. 给类绑定方法 class Airplane takeOff: -> console.log 'Vrroom!' plane = new Airplane() plane.takeOff() CoffeeScript如何构建Javascript类 CoffeeScript中的类型系统基于JavaScript的原型继承实现.上面的代码生成的JavaScript代码为: var Air…

字符串插值 CoffeeScript提供了一种更好的构建字符串的解决方案.在双引号字符串(单引号无效)中使用#{}包含一个动态的值. str = 'Hello, CoffeeScript.' console.log "#{str + ':)'}" # 输出:Hello, CoffeeScript:) 定义函数 CoffeeScript引入lambda表达式的形式来定义函数. 函数定义: # 定义有参函数并调用 sayHello = (name)-> return "He…