jquery优化02

缓存变量：DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

$element = $('#element');
h = $element.height();   //缓存
$element.css('height',h-20);

如果你打算对DOM元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。

使用var与匈牙利命名法，且避免全局变量 ；　　

优化选择符；避免多个ID选择符

ajax:

• 使用相关函数：

  $("#file").on("click","button",function() {
     $.ajax("confirmation.html",{
  	 data: {"confNum":1234},
  	 success: function(res) {},
  	 error: function(req,errorType,errorMessage) {},
  	 timeout:3000,
  	 beforeSend: function() {
  	     $(".confirmation").addClass('is-loading');
  	 },
  	 complete: function() {
  	     $(".confirmation").removeClass("is-loading");
  	 }
      })
  });

• 提交表单：

  $("form").on("submit",function(event) {
       event.preventDefault(); //submit will reflash the page
       var form = $(this);
       $.ajax("/book", {
       	type: "POST",
       	data: form.serialize(), //use this;
       	success: function(result) {
       	   form.remove();
       	   $("#vacation").hide().html(result).fadeIn();
       	}
       });
     });

• 优化操作：

  $.ajax('/test.html')
      .done(function(res) {console.log(res,'done1');})
      .fail(function(res) {console.log(res,'fail');})

• 要多个ajax共同使用的时候

  $.when($.ajax("test1.html"),$.ajax("test2.html"))
      .done(function(res) {console.log(res,'done');})
      .fail(function(res) {console.log(res,'fail');});
  
  //都成功才会执行done；返回第一个ajax的res;

写插件：

• html:

  <div class="container">
  	<div class="col-sm-12 top">
  		<button id="all" class="btn btn-primary col-sm-offset-10 show-price">show all</button>
  	</div>
  	<div class="jumbotron col-sm-3 vacation" data-price="110">
  		<h4>Hawaiian Vaction</h4>
  		<button class="click btn btn-info">SHOE PRICE</button>
  		<p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
  	</div>
  
  	<div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="150">
  		<h4>European Getaway</h4>
  		<button class="click btn btn-info">SHOE PRICE</button>
  		<p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
  	</div>
  
  	<div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="90">
  		<h4>Visit Japan</h4>
  		<button class="click btn btn-info">SHOE PRICE</button>
  		<p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
  	</div>
  </div>	

• js:

  $.fn.pricefy = function(options) {
        	this.each(function() {
            //使用$.extend添加属性；setting为要操作的数据集合
        		var settings = $.extend({
        			days: 3,
        			vacation: $(this),
        			price: $(this).data("price")
        		},options);
        		var show = function() {
        			var details = $("<p>Book" + settings.days +"days for $" + (settings.days * settings.price)+  "</p>");
        			settings.vacation.find(".click").hide();
        			settings.vacation.append(details);
        		};
        		var remove = function() {
        			settings.vacation.hide().off(".pricefy");
        		};
        		settings.vacation.on("click.pricefy","button",show);
        		settings.vacation.on("show.pricefy",show);
        		settings.vacation.on("click.pricefy",".remove-vacation",remove);
        	})
        };
  
        $(function() {
        	$(".vacation").pricefy();
        	$(".show-price").on("click",function(event) {
        		event.preventDefault();
        		$(".vacation").trigger('show.pricefy');
        	});
        });