JavaScript Tips
Blogs20132013-12-31
JavaScript Tips
A good book:Learning JavaScript Design Patterns, http://dixitruth.com/test/initializr/index.html
Some Summaries of tools sites
json formatter and validator
CSS processor
HTML-lpsum.com
css-tricks.com/css3-button-maker
spritebox.net
css3menu.com
50 web developing tools
addyosmani.com/resources/essentialjsdesignpatterns/book/JS advanced codes
//1. namespace
var NS = NS || {
Utils: {},
Models: {},
Views: {}
};
//2. Revealing Module Pattern:
NS.App = (function() {
var init = function() {
NS.Utils.log();
this.welcome = new NS.Views.WelcomeScreen();
this.welcome.showWelcome();
this.news = new NS.Views.News();
NS.Models.News.getNews();
};
return {
init: init
};
}());
NS.App.init();
(function($) {
var m = 'private message';
NS.Views.WelcomeScreen = function() {
this.welcome = $('#welcome');
};
NS.Views.WelcomeScreen.prototype = {
showWelcome: function(){
this.welcome.html(m);
}
};
}(jQuery));
$(function() { NS.App.init(); });
// Observer pattern: pubsub
NS.Models.News = (function() {
var url = '/some/news/';
var getNews = function() {
$.ajax({url:url,....success: newsRetrieved});
};
var newsRetrieved = function(news){
AmplifyJS.publish('news-retrieved', news);
}
return {
getNews: getNews
}
}());
(function(){
NS.Views.News = function(){
this.news = $('#news');
amplify.subscribe('news-retrieved', $.proxy(this.showNews));
};
NS.Views.prototype.showNews = function(news) {
var self = this;
$.each(news.function(article) { self.append(article); });
}
}());
//3. compressors:
Grunt
Google Closure
JSMin
YUI Compressor
AMD: Asynchronous Module Definition