William Jiang

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

Tag Archives: javascript Patterns

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

JavaScript: 3 ways to implement Singleton

JavaScript: 2+1 ways of Singleton implementation

Here I list 2 ways of Singleton implementation, which refers to Stoyan Stefanov’s JavaScript Patterns.

//1. rewrite constructor function in a closure:
var Singleton = (function() {
  var instance;
  Singleton = function Singleton() {
    if(instance) {
      return instance;
    }

    instance = this;

    this.start_time = 0;
    this.others = "others";
  };
}());

// more directly:
function Singleton() {
  var instance = this;

  this.start_time = 0;
  this.others = "others";

  Singleton = function() {
    return instance;
  };

}

//2. pretty cool: use static attribute of constructor:
function Singleton() {
  if(typeof Singleton.instance === 'object') {
    return Singleton.instance;
  }

  this.start_time = 0;
  this.others = "others";

  Singleton.instance = this;
}

And, a parasitic constructor function mode:


function Singleton() {
  var o;
  //rewrite constructor,
  //so next time directly return Singleton instance.
  Singleton = function Singleton() {
    return o;
  }

  // for dynamic prototype mode
  Singleton.prototype = this;

  // o.__proto__=Singleton
  o = new Singleton();
  //
  o.constructor = Singleton;
  this.start_time = 0;
  this.others = "others";

  return o;  //not return this!
}