js 编程技巧

本篇用于记录日常编程技巧，以供日后查询
Created by RuiLin
2017/12/10

• jQuery 遍历对象属性

  each() 方法为每个匹配元素执行指定函数,返回 false 可用于及早停止循环。

eg:
//index：当前元素的index值  val:当前元素值可用【即$(this)值】
$("li").each(function(index,val){
    alert($(this).text())
  });

//遍历对象属性
(function($){
 test();
 var testObj={}；
  function test(){
    $.each(testObj,function(key,val){
       console.log('key'+key+'val'+val);
 })
  }
 })(jQuery)

//原生js方法
for(var key in testObj){
      console.log('key'+key+'val'+testObj[key]);
    }

• jQuery常用插件开发模式之 $.extend() 合并defaults对象与options对象

(function($){
  function test(options){
    var defaults={
      validate: false, limit: 5, name: "foo" 
    }
    /*合并默认值和选项，不修改默认对象。*/
    var settings = $.extend({},defaults, options); 
  }
  test({
    validate: true, 
    name: "bar" 
  })
 })(jQuery)

• 防抖：防止事件频繁触发

/**
             * 【防抖】 防止事件连续触发
             * @param  func ：将要执行的方法
             * @param  wait ：事件触发后，多久执行
             * @param  immediate：是否需要立即执行
             */
            function debounce(func, wait, immediate) {
                var timeout, result;
                return function() {
                    var self = this;
                    var argu = arguments;
                    clearTimeout(timeout);
                    if(immediate) {
                        var callNow = !timeout;
                        timeout = setTimeout(function() {
                            timeout = null;
                        }, wait)
                        if(callNow) {
                            func.call(self, argu);
                        }
                    } else {
                        timeout = setTimeout(function() {
                            result = func.call(self, argu);
                        }, wait);
                    }

                }
            }

            function test(argu) {
                console.log(this);
                console.log(argu[0].type);
            }

            $(function() {
                $("#js-test").click(debounce(test, 1000, true));
            })