William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

JavaScript Tips

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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: