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

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

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

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

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