Weitere ähnliche Inhalte
Ähnlich wie CoffeeScript - A Rubyist's Love Affair (20)
Kürzlich hochgeladen (20)
CoffeeScript - A Rubyist's Love Affair
- 13. Heredoc
html = """
<div class="comment" id="tweet-#{tweet.id_str}">
<hr>
<div class='tweet'>
<span class="imgr"><img
src="#{tweet.profile_image_url}"></span>
<span class="txtr">
<h5><a href="http://twitter.com/#{tweet.from_user}"
target="_blank">@#{tweet.from_user}</a></h5>
<p>#{tweet.text}</p>
<p class="comment-posted-on">#{tweet.created_at}</p>
</span>
</div>
</div>
"""
- 14. var html;
html = "<div class="comment" id="tweet-"
+ tweet.id_str + "">n <hr>n <div
class='tweet'>n <span class="imgr
"><img src="" + tweet.profile_image_url +
""></span>n <span class="txtr">n
<h5><a href="http://twitter.com/" +
tweet.from_user + "" target="_blank">@"
+ tweet.from_user + "</a></h5>n <p>"
+ tweet.text + "</p>n <p class=
"comment-posted-on">" + tweet.created_at
+ "</p>n </span>n </div>n</div>";
- 15. Ranges
# 1, 2, 3, 4, 5
[1..5]
# 1,..., 4
[1...5]
#1,...,500
[1..500]
#5, 4, 3, 2, 1
[5..1]
#500,...,1
[500..1]
- 16. var _i, _j, _results, _results2;
[1, 2, 3, 4, 5];
[1, 2, 3, 4];
(function() {
_results = [];
for (_i = 1; _i <= 500; _i++)
{ _results.push(_i); }
return _results;
}).apply(this, arguments);
[5, 4, 3, 2, 1];
(function() {
_results2 = [];
for (_j = 500; _j >= 1; _j--)
{ _results2.push(_j); }
return _results2;
}).apply(this, arguments);
- 17. Ruby Style
Conditionals
Unless
In-line Conditionals
- 19. if (!a) {
console.log("a is false");
}
if (!a) {
console.log("a is false");
}
- 22. var p;
p = function(name) {
return console.log("hello: " + name);
};
p('mark');
- 24. Regular Functions
p = (name)->
console.log "hello: #{name}"
CoffeeScript
p 'mark'
p = ->(name) {
puts "hello: #{name}"
}
Ruby 1.9
p.call 'mark'
- 25. Bound Functions
class Person
def initialize(name)
@name = name
end
def bind
binding
end
end
p = Person.new('mark')
eval "puts @name", p.bind
- 26. Bound Functions
fetchData: =>
url = "http://search.twitter.com/search.json?
q=#{encodeURIComponent(@hash_tag)}&rpp=#{@max_results}&callba
ck=?"
$.get url, {}, @handleData, 'json'
handleData: (data) =>
if data['error']?
@handleError()
if data.results.length is 0 and @fall_back
@handleEmptyData()
else if data.results.length > 0
setTimeout (=> @fetchData()), 10000
@render data
- 27. var __bind = function(fn, me){ return function(){ return fn.apply(me,
arguments); }; };
({
fetchData: __bind(function() {
var url;
url = "http://search.twitter.com/search.json?q=" +
(encodeURIComponent(this.hash_tag)) + "&rpp=" + this.max_results + "&callback=?";
return $.get(url, {}, this.handleData, 'json');
}, this),
handleData: __bind(function(data) {
if (data['error'] != null) {
this.handleError();
}
if (data.results.length === 0 && this.fall_back) {
return this.handleEmptyData();
} else if (data.results.length > 0) {
setTimeout((__bind(function() {
return this.fetchData();
}, this)), 10000);
return this.render(data);
}
}, this)
});
- 29. ({
createElement: function(name, attributes) {
var key, obj, val;
if (attributes == null) {
attributes = {};
}
obj = document.createElement(name);
for (key in attributes) {
val = attributes[key];
obj.setAttribute(key, val);
}
return obj;
}
});
- 30. Splatted Arguments
splatter = (first, second, others...) ->
console.log "First: #{first}"
console.log "Second: #{second}"
console.log "Others: #{others.join(', ')}"
splatter [1..5]...
- 31. var splatter;
var __slice = Array.prototype.slice;
splatter = function() {
var first, others, second;
first = arguments[0], second = arguments[1], others = 3 <=
arguments.length ? __slice.call(arguments, 2) : [];
console.log("First: " + first);
console.log("Second: " + second);
return console.log("Others: " + (others.join(', ')));
};
splatter.apply(null, [1, 2, 3, 4, 5]);
- 33. var arr, num, _i, _len;
arr = [1, 2, 3, 4, 5];
for (_i = 0, _len = arr.length; _i < _len; _i++) {
num = arr[_i];
console.log(num);
}
- 34. Hash Loop
for key, val of attributes
console.log "key: #{key}"
console.log "val: #{val}"
- 35. var key, val;
for (key in attributes) {
val = attributes[key];
console.log("key: " + key);
console.log("val: " + val);
}
- 37. Classes
class Employee
constructor: (@name, @options = {})->
job: ->
@options.job
mark = new Employee('Mark', job: 'Developer')
mark.job() # => 'Developer'
mark.name # => 'Mark'
- 38. var Employee, mark;
Employee = (function() {
function Employee(name, options) {
this.name = name;
this.options = options != null ? options : {};
}
Employee.prototype.job = function() {
return this.options.job;
};
return Employee;
})();
mark = new Employee('Mark', {
job: 'Developer'
});
mark.job();
mark.name;
- 39. Extending Classes
class Manager extends Employee
job: ->
"$$$ #{super}"
steve = new Manager('Steve', job: 'CEO')
steve.job() # => '$$$ CEO'
steve.name # => 'Steve'
- 40. var Manager, steve;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
function ctor() { this.constructor = child; }
ctor.prototype = parent.prototype;
child.prototype = new ctor;
child.__super__ = parent.prototype;
return child;
};
Manager = (function() {
__extends(Manager, Employee);
function Manager() {
Manager.__super__.constructor.apply(this, arguments);
}
Manager.prototype.job = function() {
return "$$$ " + Manager.__super__.job.apply(this, arguments);
};
return Manager;
})();
steve = new Manager('Steve', {
job: 'CEO'
});
steve.job();
steve.name;
- 41. @
class User
constructor: (@name)->
@new_record = true
@find: (id)->
# do some work
- 42. @
class User
constructor: (name)->
@name = name
@new_record = true
@find: (id)->
# do some work
- 43. var User;
User = (function() {
function User(name) {
this.name = name;
this.new_record = true;
}
User.find = function(id) {};
return User;
})();
- 44. Thank You
@markbates
http://www.markbates.com
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n