jquery reminder

Things you better know before you write JS code.

unorganized code is hell

Always use global objects

God object

GOD OBJECT
var Comment = {  
	usercomment: {
		edit: function(str){
			$("#item"+this.current_id).text(str);
			Comment.usercomment.update();
		},
		init:function(){
			$("#btn").click(function(){ 
				Comment.tablecomment.show();
			});
		},
		list:function(){ /* ....... */}
	}, 
	tablecomment: {
		show:function(){/* ....... */} 
	}, 
	/* ...... */
};

Comment.usercoment.init();

one operation in multiple event.

$("#btn").click(function(){
	var $target = $("#target");
	$target.find(".view").hide();
	$target.find(".edit").show();

});
$("#target").find(".edit .submit").click(function(){
	//validation
	//submit
});
$("#target").find(".edit .cancel").click(function(){
	$target.find(".view").show();
	$target.find(".edit").hide();
});

one operation in multiple event

var $target = $("#target");
$target.on("edit",function(){
	var $this = $(this);
	$this.find(".view").hide();
	$this.find(".edit").show();
});
$target.on("submit",function(){
	//validation
	//submit	
});
$target.on("cancel",function(){
	$target.find(".view").show();
	$target.find(".edit").hide();
});

$("#btn").click(function(){ $target.trigger("edit"); });
$target.find(".edit .submit").click(function(){ 
    $target.trigger("submit"); 
});
$target.find(".edit .cancel").click(function(){  
	$target.trigger("cancel"); 
});

Variable name conflict

var item = $(".item");
for(var i = 0 ,len = item.length ; i < len ; ++i){
    /*........*/
	var details = item.eq(i).find(".details");

    for(var i = 0 , len = details.length; i<len; ++i){
    	/* .... */
    }

}

VARIABLE NAME CONFLICT

var k = 1;
function test(){
	console.log(k); //expect 1 but print undefined ,
	var k = 5;
	console.log(k);	
}
test();

Scope

var item = $(".item");
for(var i = 0 ,len = item.length; i<len ;++i){
	item.eq(i).click(function(){
		alert(i);
	});
}
//When it got trigger , i is always item.length

test(); //expect error but it print "hi"

function test(){
	console.log("hi");
}

Null issue

function test(options){
	//oops , options is undefined
	var k = options.position.x;
}

function test(options){
	options = $.extend({},options);
}

function test(options){
	options = options || {};
}

function test(options){
	if(options != null && options.position != null){
		var k = options.position.left;
	}
}

function test(options){
	var position = (options && options.position) 
		|| {left:null,top:null};
}

scope protection

(function($,undefined){

   var user = ""; //scope is protected in local
   window.item = ""; //global variable

})(jQuery);

console.log(user);// undefined , you can't access it here.

SCOPE PROTECTION

Scope Protection

window.User = {  
	name : "Tony" , 
	State :"Logined" 
};

window._user ={
	name : "Tony" , 
	State :"Logined" 
};
window.getUser = function(){
	return this._user;
}

Pub-sub pattern

Prevent Browser Repaint 

var users = ["user1", /*.......*/ ,"user999"],
	table = $("#table");
for(var i= 0 ,len = user.length ; i < len ;++i){
	table.append("<tr><td>"+user[i]+"</td></tr>");
}

var users = ["user1", /*.......*/ ,"user999"],
	table = $("#table"),
	out = [];
for(var i= 0 ,len = user.length ; i < len ;++i){
	out.push("<tr><td>"+user[i]+"</td></tr>");
}
table.append(out.join(""));

Plugin template

(function ($,undefined) {  
    $.fn.myplugin = function (opts) {
        // default configuration
        opts = $.extend({},opts);
        // main function
        var init = function (obj) {
        };
        // initialize every element
        this.each(function () {
            init($(this));
        });
        return this;
    };
    // auto start
    $(function () {
        $('.myplugin').myplugin();
    });
})(jQuery);

Template Issue

<script type="text/template" id="user-tmp"></script>

<textarea id="user-tmp">(htmlescaped content) </textarea/>

var js = (json_encode content);

var js = '<div> '+myobj.name + '</div>';

AMD (RequireJS)

<script src="jquery.js"></script>
<!-- <script src="jquery.min.js"></script>-->
<script src="jquery.ui.js"></script>
<script src="jquery.form.js"></script>
<script src="jquery.validations.js"></script>
<script src="page.js"></script>

<script src="require-jquery.js" main="page"></script>
require(["jquery","jquery.ui","jquery.form","jquery.validations"],
	function($){
	   //content of page js
	}
);

Promise Pattern

PROMISE PATTERN

//as same as $(document).ready(function(){});
$(function(){ 
       alert("hi");
}); 

PROMISE PATTERN

function countdown(ms){
    var time = $.Deferred();
    setTimeout(function(){
        time.resolve();
    },ms);
    return time.promise();
}
countdown(5000).done(function(){
     alert("5 seconds, timeout!");
});

http://jsfiddle.net/vsNnq/

Q & A 

Thanks