精简和优化常用逻辑，开发工具优化

精简和优化常用逻辑，开发工具优化

格式化日期，时间函数

/**
 * [fromatDate 格式化日期，时间函数]
 * @param  {[type]} timestamp [时间戳]
 * @return {[type]}           [根据具体需求自己封装，拒绝冗余]
 */
function fromatDate(timestamp){
    var sDate = new Date(timestamp);//日期
    var sYear = sDate.getFullYear();//年
    var sMonth = sDate.getMonth()+1;//月
    var sDay = sDate.getDate();//日
    var sHour = sDate.getHours();//小时
    var sMinute = sDate.getMinutes();//分钟
    var sSecond = sDate.getSeconds();//秒
    var mSecond = sDate.getMilliseconds();//毫秒
}

/**
 * [evenNum 单数格式化为双数]
 * @param  {[type]} n [数字]
 * @return {[type]}   [数字的双数格式]
 * 例子：0-9，转化成00-09
 */
function evenNum(n){
    return n<10?'0'+n:''+n;
}

请求客户端参数

三个是全局方法，只要通过安卓端（暂时没有ios）就可以获得
无需通知客户端给某个页面传递参数值

// 从安卓获取相关数据
var baseKey = window.$CooHua&&window.$CooHua.getBaseKey?window.$CooHua.getBaseKey():console.log('客户端未提供获取key方法');
var coohuaId = window.$CooHua&&window.$CooHua.common_getCooHuaId?window.$CooHua.common_getCooHuaId():console.log('客户端未提供获取id方法');
var Version = window.$CooHua&&window.$CooHua.common_getVersionCode?window.$CooHua.common_getVersionCode():console.log('客户端未提供获取版本方法');
var Online = window.$CooHua&&window.$CooHua.is_online_environment?window.$CooHua.is_online_environment():console.log('客户端未提供获取环境方法');

测试环境动态显示版本号

// true代表是线上环境，fales代表是测试环境
if(!Online&&Online!=undefined){
    document.title = document.title+'-2.0';
}

检测后台返回数据类型string/json，统一在前台转换成json格式

var data = typeof(data)==='string'?JSON.parse(data):data;
var data = Object.prototype.toString.call(data)==="[object String]"?JSON.parse(data):data;

SublimeText插件Emmet自定义模板

工具栏打开Preferences -> Package Settings -> Emmet -> Setting - Default
参考这个来进行自定义模板
用户配置文件中修改：我们打开Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代码：

{
    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        "html": {
            "abbreviations": {
                "example": "<div class='example' title='Custom element example'>",
                "viewport":"meta[name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no']",
                "telephone":"meta[name='format-detection' content='telephone=no']",
                "doc": "html>(head>meta[charset='utf-8']+viewport+telephone+title{${1:怪诞咖啡}}+style{\n${1:body{margin:0;padding:0;font-family:'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', Microsoft YaHei, SimSun, sans-serif;line-height:1;}}\n})+body",
                "!": "!!!+doc[lang='zh-CN']"
            }
        }
    }
}

酷划打点使用代码（老打点系统）

// 引入一个js文件：`des.js`
// 打点专用
/**
 * [remoteLog 进行打点，就是给数据组发送数据]
 * @param  {[type]} action [产品给的资料]
 * @param  {[type]} url    [固定地址+部分参数拼写]
 * @return {[type]}        [description]
 */
// 活动页面pv：double-dan_pv  按钮点击pv：double-dan_button_pv
remoteLog('double-dan_pv');//活动页面pv
function remoteLog(action) {
    var ua = navigator.userAgent.toLowerCase();
    var url = "http://log.coohua.com/domain_click.txt";
    var uid = 0;
    if (url.indexOf("?") == -1) {
        url += '?src=new&action=' + action + '&time=' + new Date().getTime() + '&cid=' + coohuaId + '&uid='+ '&url=' + strEnc(window.location.href, 'coohua@#2014') + '&ch=' + getParam("ch") + '&next_url='+strEnc(window.location.href, 'coohua@#2014');
    } else {
        url += '&src=new&action=' + action + '&time=' + new Date().getTime() + '&cid=' + coohuaId + '&uid='+ '&url=' + strEnc(window.location.href, 'coohua@#2014') + '&ch=' + getParam("ch") + '&next_url='+strEnc(window.location.href, 'coohua@#2014');
    }
    $.ajax({
        url: url,
        type: 'GET',
    }).done(function(data) {
        console.log(data);
    }).fail(function(xhr,text) {
        console.log(text);
    });

}
function getParam(param) {
    var url = "http://log.coohua.com/domain_click.txt";
    var r = new RegExp("\\?(?:.+&)?" + param + "=(.*?)(?:[\?&].*)?$");
    var m = url.match(r);
    return m ? m[1] : "";
}

查询字符串转化成对象的属性

/**
 * [getQueryStringArgs 查询字符串转化成对象的属性]
 * @return {[type]} [Object]
 */
function getQueryStringArgs(){
    // 取得查询字符串并去掉开头的问号
    var qs = (location.search.length>0?location.search.substring(1):""),
    // 保存数据的对象
    args = {},
    // 取得每一项
    items = qs.length?qs.split("&"):[],
    item = null,
    name = null,
    value = null,
    // 在for循环中使用
    i = 0,
    len = items.length;
    // 逐个将每一项添加到args对象中
    for(i=0;i<len;i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}

操作cookie

js-cookie

jquery使用`$.extend()`进行方法扩展

$.extend({
    "MaxNum":function(a,b){
        return (a>b)?a:b;
    }
});

把对象序列化编码的`jquery`工具类函数

$.param(obj);

动画库

tweenMax

ajax通过header传递参数

两种传递方式

headers:{
    "base-key":baseKey
},
beforeSend: function(XMLHttpRequest) {
    XMLHttpRequest.setRequestHeader('base-key', baseKey);
},

axios使用总结

发送`GET`请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

发送`POST`请求

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

一次性并发多个请求

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))

数字使用各三个加逗号

'1234567890'.replace(/(\d)(?=(\d{3})+$)/g, "$1,");

获取当前指定的前几天的日期

function getBeforeDate(n){
    var n = n;
    var d = new Date();
    var year = d.getFullYear();
    var mon=d.getMonth()+1;
    var day=d.getDate();
    if(day <= n){
            if(mon>1) {
               mon=mon-1;
            }
           else {
             year = year-1;
             mon = 12;
             }
           }
          d.setDate(d.getDate()-n);
          year = d.getFullYear();
          mon=d.getMonth()+1;
          day=d.getDate();
     s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
     return s;
}
getBeforeDate(8);//2018-01-02

增强可访问性

为了增强可访问性，让自己不忘给图片标签加上 alt 属性，有人在项目中加入了如下的全局 CSS 样式，值得学习

/* you forgot the `alt` attrubute */
img[alt=""],
img:not([alt]){
    border:5px dashed #c00;
}

常见的左边定宽，右边自适应的 Flex 布局会出现一个奇怪的现象，就是右边会因为不间断的英文单词被撑开超出容器的宽度

.right {
    word-wrap: break-word;
    overflow: auto
}

想知道页面中的元素结构是怎么渲染的吗？

* { outline: 4px solid yellow; }

如何修改 placeholder 的文字颜色？

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

对于常见的左边自适应右边定宽这样的布局来说，如果我们用 flex 来实现的话，完整的代码应该是

.left {
  flex-grow: 1
}
.right {
  width: 200px;
  flex-shrink: 0;
}

注意这里的 flex-grow 定义了内部元素未达到容器宽度时的处理方式，flex-shrink 则定义了超过外部容器宽度时内部元素的宽度处理方式。而且缺一不可，否则会在特殊情况下表现出错误的效果

Linux打开文件夹命令

$ open d_name

函数排序sort()

默认是按照字母顺序进行排序
添加比较函数才能按照数字大小进行排序

// 比较函数
function compare(value1, value2){
    return value1 - value2;
}
var arr = [11, 4, 3, 2, 1];
console.log(arr.sort(compare));//[1, 2, 3, 4, 11]

对象去重

var newShowArr =
[{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '1' },
{ year: '2013-2014', term: '2' },
{ year: '2013-2014', term: '2' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' },
{ year: '2014-2015', term: '1' }];

var unique = {};
newShowArr.forEach(function(item) {
    unique[JSON.stringify(item)] = item
});
newShowArr = Object.keys(unique).map(function(uitem) {
    return JSON.parse(uitem)
});
// [{"year":"2013-2014","term":"1"},{"year":"2013-2014","term":"2"},{"year":"2014-2015","term":"1"}]

JSON.stringify()字符串缩进

JSON.stringify({"name":"怪诞咖啡","age":18,"job":"攻城狮"},null,4)

动态处理查询字符串

/**
 * [addQueryStringArg 处理查询字符串]
 * @param {[type]} url   [要追加查询字符串的URL]
 * @param {[type]} name  [参数名]
 * @param {[type]} value [参数值]
 */
function addQueryStringArg(url, name, value){
    if(url.indexOf("?")==-1){
        url += "?";
    }else{
        url += "&";
    }

    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

数据类型判断

字符串

Object.prototype.toString.call(something)==='[object String]'

数值

Object.prototype.toString.call(something)==='[object Number]'

布尔值

Object.prototype.toString.call(something)==='[object Boolean]'

Undefined

Object.prototype.toString.call(something)==='[object Undefined]'

Null

Object.prototype.toString.call(something)==='[object Null]'

Symbol

Symbol()

Object.prototype.toString.call(something)==='[object Symbol]'

Object

Object.prototype.toString.call(something)==='[object Object]'

Array

Object.prototype.toString.call(something)==='[object Array]'

Function

Object.prototype.toString.call(something)==='[object Function]'

Date

Object.prototype.toString.call(something)==='[object Date]'

RegExp

Object.prototype.toString.call(something)==='[object RegExp]'

Math

Object.prototype.toString.call(something)==='[object Math]'

字符串转base64，base64转字符串

var base64 = {
    encode(str){
        // 对字符串进行编码
        var encode = encodeURI(str);
        // 对编码的字符串转化base64
        var base64 = btoa(encode);
        return base64;
    },
    decode(base64){
        // 对base64转编码
        var decode = atob(base64);
        // 编码转字符串
        var str = decodeURI(decode);
        return str;
    }
};
// 字符串转base64
console.log(base64.encode('怪诞咖啡'));//JUU2JTgwJUFBJUU4JUFGJTlFJUU1JTkyJTk2JUU1JTk1JUEx
// base64转字符串
console.log(base64.decode(base64.encode('怪诞咖啡')));//怪诞咖啡

柯里化理解-类型判断

函数设计的时候，必须抽象，要抽象变化
其实变化也分为两种，一种是一次性变化，一种是调用一次变一次
我们要把这种一次性变化抽离出来，想办法把它变成定量；这样可以降低程序的理解度
函数式编程大部分都在干生成函数，写一个函数式为了生成一个更加简单的函数；而把一次性变化的东西抽象到定量里面去
柯里化就是去掉一次性变化的变量

普通方法

function isType(type,obj){
    return Object.prototype.toString.call(obj)==='[object '+ type +']';
}
console.log(isType('Number',11))//true

柯里化

function isType(type){
    return function(obj){
        return Object.prototype.toString.call(obj)==='[object '+ type +']';
    }
}
isNumber = isType('Number');
console.log(isNumber(11))//true

精简和优化常用逻辑，开发工具优化

格式化日期，时间函数

请求客户端参数

测试环境动态显示版本号

检测后台返回数据类型string/json，统一在前台转换成json格式

SublimeText插件Emmet自定义模板

酷划打点使用代码（老打点系统）

查询字符串转化成对象的属性

操作cookie

jquery使用$.extend()进行方法扩展

把对象序列化编码的jquery工具类函数

动画库

ajax通过header传递参数

axios使用总结

发送GET请求

发送POST请求

一次性并发多个请求

数字使用各三个加逗号

获取当前指定的前几天的日期

增强可访问性

常见的左边定宽，右边自适应的 Flex 布局会出现一个奇怪的现象，就是右边会因为不间断的英文单词被撑开超出容器的宽度

想知道页面中的元素结构是怎么渲染的吗？

如何修改 placeholder 的文字颜色？

对于常见的左边自适应右边定宽这样的布局来说，如果我们用 flex 来实现的话，完整的代码应该是

Linux打开文件夹命令

函数排序sort()

对象去重

JSON.stringify()字符串缩进

动态处理查询字符串

数据类型判断

字符串

数值

布尔值

Undefined

Null

Symbol

Object

Array

Function

Date

RegExp

Math

字符串转base64，base64转字符串

柯里化理解-类型判断

jquery使用`$.extend()`进行方法扩展

把对象序列化编码的`jquery`工具类函数

发送`GET`请求

发送`POST`请求