• Blogs (9)
    • 📱 236 - 992 - 3846

      📧 jxjwilliam@gmail.com

    • Version: ‍🚀 1.1.0
  • 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