笔记(一)：做前端开发以来几乎每天用到的东西！

这些笔记算是我前端开发一直会用到的，虽然看着比较简单，但是对我的成长和解决问题却是非常重要的。花时间整理总结一下算是留个笔记日后万一用到。东西比较多，公众号一次放不了这么多，只能分开去放。

只是个人的笔记，大神路过，不喜勿碰。

Ajax（自前后端分离之后，Ajax这门技术可以说是浏览器获取数据的必选）

比较常规的

$.ajax({ 
    async: false, 
    type : "POST", 
    url : "xxx",
    success : function(data) {
        var list = data.data.list;
        var row = "";      
        $(selector).empty();
        $.each(data.data.list, function(index, item){
            row += '内容'        
        }); 
        $(selector).append(row);             
    },   
});

可以跨域的

第一种

$.ajax({
    type : "GET",
    url:"http://xxx.com/xx?xx=xx&callback=getcallback",
    dataType : "jsonp",
    cache:false,
    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"getcallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
    success : function(data){                            
    }
});
function getcallback(data){    //留空    
}

第二种

window.url_prefix = "http://xxx.com/index.php?r=";

    $.getJSON( window.url_prefix + 'xxxx&jsoncallback=?', {}, function(data){

        alert(data.error);

})

其实原理一样

第三种

就是服务器开启cors跨域，但是一般为了安全起见不会这么做。

jquery插件封装

(function($) {

    $.extend($.fn, {

        myplugin: function() {

            // your plugin logic

        }

    });

})(jQuery);

// 方法二

(function($) {

    $.extend($.fn, {

        myplugin: function() {

            // your plugin logic

        }

    });

})(jQuery);

数组排序

kdata.sort( function(a, b){

    return parseInt(a["value" ]) < parseInt(b["value" ]) ? 1 : parseInt(a[ "value"]) == parseInt(b[ "value" ]) ? 0 : -1;

});

闭包

    function create(){

        var arr = new Array();  

        for (var i=0; i<10; i++){

            arr[i] = function(num){

                return function(){

                    return num; 

                };

            }(i);   

        }

        return arr;

    }

    var c_arr = create();

    for(var i=0; i<c_arr.length;i++){

        document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    

    }    

浏览器语言判断

var type=navigator.appName;

if (type=="Netscape"){

    var lang = navigator.language;

}

else{

    var lang = navigator.userLanguage;

}

var lang = lang.substr(0,2);

if (lang == "zh"){

}else{    

}

判断是否在微信内打开(微信端开发H5必定用到)

 var is_weixn=function(){

        var ua = navigator.userAgent.toLowerCase();

            if(ua.match(/MicroMessenger/i)=="micromessenger") {

                return true;

            } else {

                return false;

            }

    }

判断图片是否加载完成

function loadImage(url, callback) {

    var img = new Image(); //创建一个Image对象，实现图片的预下载

    img.src = url;

    if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

        callback.call(img);

        return; // 直接返回，不用再处理onload事件

    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。

        callback.call(img);//将回调函数的this替换为Image对象

    };

};

获取url中参数

var queryUrl = function(url, key) {

    url = url.replace(/^[^?=]*\?/ig, '').split('#')[0]; // 去除网址与hash信息

    var json = {};

    url.replace(/(^|&)([^&=]+)=([^&]*)/g, function (a, b, key, value){

        try {

            key = decodeURIComponent(key);

        } catch(e) {}

        try {

            value = decodeURIComponent(value);

        } catch(e) {}

        if (!(key in json)) {

            json[key] = /\[\]$/.test(key) ? [value] : value;

        }

        else if (json[key] instanceof Array) {

            json[key].push(value);

        }

        else {

            json[key] = [json[key], value];

        }

    });

    return key ? json[key] : json;

}

用zepto中滑动事件

我的移动端项目一般都是引入zepto,如果做轮播等滑动操作，可以很方便使用这几个自带的方法，而不需要引入别的插件。

swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

$('#items li').swipeRight(function(){  //左滑动

//xxx 操作

})

$('#items li').swipeLeft(function(){ //右滑动

  //xxx操作

})

$('#items li').swipeUp(function(){  //上滑动

   //xxx 操作

})

$('#items li').swipeDown(function(){ //下滑动

  //xxx操作

})

先到这儿，后面的笔记后续再上。

欢迎订阅微信公众号:强哥带你学前端，您的关注是我的动力@！

原文：http://mp.weixin.qq.com/s/gjF-jsLMPHfzk_aVhXKwnA?ref=myread

如有侵权，请联系立马删除