Things you better know before you write JS code.
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();
$("#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(); });
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"); });
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){ /* .... */ } }
var k = 1; function test(){ console.log(k); //expect 1 but print undefined , var k = 5; console.log(k); } test();
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"); }
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}; }
(function($,/*...*/,undefined){ var k = 1; })(jQuery,/*other global objects*/); console.log(k);//You can't access k here.
(function($,undefined){ var user = ""; //scope is protected in local window.item = ""; //global variable })(jQuery);
console.log(user);// undefined , you can't access it here.
window.User = { name : "Tony" , State :"Logined" };
window._user ={ name : "Tony" , State :"Logined" }; window.getUser = function(){ return this._user; }
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(""));
(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);
<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>';
<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 } );
//as same as $(document).ready(function(){}); $(function(){
alert("hi");
});
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/