一些在项目中积累的工具方法

作者: SHpoi | 来源:发表于2018-12-17 22:29 被阅读0次

一些在项目中积累的工具方法
Jmeter - 录制脚本的两种方式
阅读积累
如何发布自己的npm包
PPT之唯快不破
kubernetes/openshift 应用异常诊断指南_上
kotlin - 顶层函数
Guava概览
JAVA小项目-管家婆记账本介绍（1）
spring中无法使用 @Autowired注解注入静态变量的原

移动端input聚焦光标移到最右

网上搜到的有些方法很多，但为了让android、ios、pc都能适用需要做一下整合

$('body').on('focus','input[type=text],input[type="password"],input[type=number],textarea',function(event){
    var val = $(this).val()
    var self=this;
    window.setTimeout(function() {
        moveEnd(self)
    },100);
});
//光标移到最右三端兼容
function moveEnd(obj){/*绑定在onfocus事件上*/
    obj.focus();
    var len = obj.value.length;
    if (document.selection) {
        var sel = obj.createTextRange();
        sel.moveStart('character',len);
        sel.collapse();
        sel.select();
    } else if (obj.hasOwnProperty('selectionStart') && typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
        obj.selectionStart = obj.selectionEnd = len;/*平时所见的光标其实是由两部分组成的，即selectionStart和selectionEnd，一般时候这两个是想等的，但在选中一段文字，全选时，他们的差值就是所选文字的个数。并且android 下number类型的input框 直接访问obj.selectionStart会报错*/
    } else{ //android下input[number]兼容
        var $obj=$(obj);
        var val = $obj.val();
        $obj.val('');
        $obj.val(val);
    }
}

js 的 amd、cmd、script引入写法

一开始接触我们项目发现js全是靠函数一层层调用，有好了几千行，变量全是全局的，要不是我定力过人早就疯了。后来为了规范，在写另外一个页面用了requirejs，但是组件应该是需要共用的，所以这个方法就有了用武之地。

//amd cmd window 引入写法
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    暴露公共方法
    return {
        test: function(){
            console.log('test')
        }
    }
}));

ionic内嵌的jquery页面如何解决键盘遮挡问题

好好用ionic不好吗，为啥还要把jquery页面嵌进去。
可能会有项目使用这种架构，为了照顾只会jquery的后端工程师，人家在pc写jquery，在app就要学框架，直接复制粘贴pc代码不是更好QwQ
一开始怎么试都不知道怎么解决这键盘遮挡问题，用了cordova的插件。

//ionic 代码
import {Keyboard} from "ionic-native";

// 此方法调用在页面dom加载完毕后，即是angular的ngAfterContentInit
bindKeyBoardEvent() {
        this.keyboardShow=Keyboard.onKeyboardShow().subscribe((e) => {
            try{
                console.log('keyboardShow')
                let win=window.frames[0];
                eval("win.doKeyboardShow")(e.keyboardHeight);
            }catch(e){
            }
        })

        this.keyboardHide=Keyboard.onKeyboardHide().subscribe((e) => {
            try{
                console.log('keyboardHide')
                let win=window.frames[0];
                eval("win.doKeyboardHide")();
            }catch(e){
            }
        })
    }

然后在嵌套进去的jquery页面的js里写上，urlFrom是判断android还是ios的变量

var winHeight=$(window).height(),isKeyBoardShow=false;
var doKeyboardShow=function(keyHeight){
    if("IOS"!=urlFrom){
        var focusInput=$('body').find('input[type=text]:focus,textarea:focus,input[type=password]:focus,input[type=number]:focus');
        if(focusInput.length==0) return;
        var currentTop=focusInput.offset().top;
        if( (currentTop+focusInput.outerHeight()+10) < (winHeight-keyHeight)){
            return;
        }
        var dis=100+keyHeight-winHeight+currentTop;
        $("#content").css({
            "transform":"translateY(-"+dis+"px)"
        });
    }
}

function doKeyboardHide(){
    if("IOS"!=urlFrom ) {
        $('input[type=text]:focus,textarea:focus,input[type=password]:focus,input[type=number]:focus').blur();
        $("#content").css({
            "transform": "translateY(-0px)"
        });
    }
}

js算法bug解决

0.1+0.2 == 0.3 就不用我说了吧，别说加减了，连乘法都会有bug，摘抄了网上大佬的四个方法，做了下自己的适配，输入数字或字符串都可以算

//解决算法bug
function f_add(arg1,arg2){
    if(arg1==undefined || arg1==null || arg2==undefined || arg2==null) return;
    if(typeof arg1 =='number') arg1=arg1+'';
    if(typeof arg2 =='number') arg2=arg2+'';
    var r1,r2,m;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    var m =Math.pow(10,Math.max(r1,r2));
    var m1=Math.pow(10,Math.max(r1,r2)-r1);
    var m2=Math.pow(10,Math.max(r1,r2)-r2);
    var r1_integer=Number(arg1.toString().replace(".",""))*m1;
    var r2_integer=Number(arg2.toString().replace(".",""))*m2;
    return (r1_integer+r2_integer)/m;
}

//减法
function f_sub(arg1,arg2){
    if(arg1==undefined || arg1==null || arg2==undefined || arg2==null) return;
    if(typeof arg1 =='number') arg1=arg1+'';
    if(typeof arg2 =='number') arg2=arg2+'';
    var r1,r2,m,n;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    var m =Math.pow(10,Math.max(r1,r2));
    var m1=Math.pow(10,Math.max(r1,r2)-r1);
    var m2=Math.pow(10,Math.max(r1,r2)-r2);
    var r1_integer=Number(arg1.toString().replace(".",""))*m1;
    var r2_integer=Number(arg2.toString().replace(".",""))*m2;
    n=(r1>=r2)?r1:r2;
    return Number(((r1_integer-r2_integer)/m).toFixed(n));
}

//乘
function f_mul(arg1,arg2)   {
    if(arg1==undefined || arg1==null || arg2==undefined || arg2==null) return;
    if(typeof arg1 =='number') arg1=arg1+'';
    if(typeof arg2 =='number') arg2=arg2+'';
    var m=0,s1=arg1.toString(),s2=arg2.toString();
    try{m+=s1.split(".")[1].length}catch(e){}
    try{m+=s2.split(".")[1].length}catch(e){}
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}

//除
function f_div(arg1,arg2){
    if(arg1==undefined || arg1==null || arg2==undefined || arg2==null) return;
    if(typeof arg1 =='number') arg1=arg1+'';
    if(typeof arg2 =='number') arg2=arg2+'';
    var t1=0,t2=0,r1,r2;
    try{t1=arg1.toString().split(".")[1].length}catch(e){}
    try{t2=arg2.toString().split(".")[1].length}catch(e){}
    r1=Number(arg1.toString().replace(".",""));
    r2=Number(arg2.toString().replace(".",""));
    return (r1/r2)*Math.pow(10,t2-t1);
}

mobiScroll 双日期框联动使用


/**
 *
 *自定义开始结束日期限制
 * @param {*} params
 *  startEle
 *  endEle
 *  endOpt
 *  startOpt
 */
function setStartEndDateCustomerLimit(params){
    initDateTime(params.startEle,
        $.extend({
            onBeforeShow: function (inst) {
                params.startEle.mobiscroll('option', {
                    max:new Date(params.endEle.val()|| new Date('2099-12-31'))
                });
            }
        },params.startOpt||{})     
    );
    var endOpt=$.extend({
        onBeforeShow: function (inst) {
            params.endEle.mobiscroll('option', {
                min:new Date(params.startEle.val()|| new Date())
            });
        }
    },params.endOpt||{})
    initDateTime(params.endEle,endOpt);
}


//初始化时间控件
function initDateTime(elem,myOpt){
    var opt={};
    opt.default = {
        nowText: "今天",
        display: 'bottom',
        lang:'zh',
        theme: 'android-holo-light', //皮肤样式
        startYear:(new Date()).getFullYear() - 10, //开始年份
        endYear:2099,//结束年份
        dateOrder: 'yymmdd',
        dayText: '日',
        monthText: '月',
        yearText: '年', //面板中年月日文字
        setText:"确定",
        cancelText:"取消",
        dateFormat: 'yy-mm-dd',
        showNow: true,
    };
    var e;
    if(elem.is('input[dataType=date]')){
        e=elem;
    }else{
        e=elem.find("input[dataType=date]");
    }
    e.each(function(){
        $(this).mobiscroll('destroy');
        $(this).mobiscroll().date($.extend(opt['default'],myOpt));
        if( $(this).attr('disabled')){
            $(this).mobiscroll('disable')
        }
    });

}

mobiScroll使用再加一个，联动使用并且只能选每月最后一天

function setStartEndDateLimit(startEle,endEle,notLastDay){
    //只取每月最后一天,这个自执行函数可以提取出来
    var monthLastDayArr=(function(){
        var nowYear=new Date().getFullYear();
        var FebLastArr=[];
        for(var i=nowYear;i<2099;i++){
            //平年
            if(i%4!==0){
                FebLastArr.push(new Date(i,1,28))
            }
        }
        var monthLastDayArr=['1/31','2/29','3/30','4/30','5/31','6/30','7/31','8/31','9/30','10/31','11/30','12/31'].concat(FebLastArr)
        return monthLastDayArr;
    })();

    initDateTime(startEle,{
        onBeforeShow: function (inst) {
            startEle.mobiscroll('option', {
                max:new Date(endEle.val())
            });
        }
    });
    
    var endOpt={
        onBeforeShow: function (inst) {
            endEle.mobiscroll('option', {
                min:new Date(startEle.val())
            });
        },
        invalid:['w0','w1','w2','w3','w4','w5','w6'],//所有日期全部禁用，能用的日期只有valid里面的
        valid:monthLastDayArr
    }
    if(notLastDay){
        endOpt.valid=null;
        endOpt.invalid=null;
    }
    initDateTime(endEle,endOpt)//看上面的一个mobiscroll 封装的
}

jquery Deferred 的使用

强烈推荐jquery的项目使用这个，我已经受够了回调地狱了。

function useDeferred(param) {
    var def = $.Deferred();
    var success = true;
    //这里省略的都是代码的业务逻辑
    if(success){
        def.resolve();
    }else{
        def.reject();
    }
    return def.promise();
}

如果使用两个或者三个promise呢

function getRecoverData() {
    var def = $.Deferred();
    $.when(useDeferred(1), useDeferred(2)).done(function (res, res2) {
        def.resolve();
    }).fail(function(res,res2){
        def.reject();
    })
    return def.promise();
}

如果还要有更多的promise呢，真有这种需求啊

var defArr = [], numArr = [1,2,3,4,5,6,7];
numArr.forEach(function (i) {
    defArr.push(useDeferred(i));
})
$.when.apply(this, defArr).then(function () {
    var arg = arguments;//里面的就是结果
});

formatDate日期格式化

var formatDate = function(date, format) {
    if (!date) return;
    if (!format) format = "yyyy-MM-dd";
    switch (typeof date) {
        case "string":
            date = new Date(date.replace(/-/, "/"));
            break;
        case "number":
            date = new Date(date);
            break;
    }
    if (!date instanceof Date) return;
    var dict = {
        "yyyy": date.getFullYear(),
        "M": date.getMonth() + 1,
        "d": date.getDate(),
        "H": date.getHours(),
        "m": date.getMinutes(),
        "s": date.getSeconds(),
        "MM": ("" + (date.getMonth() + 101)).substr(1),
        "dd": ("" + (date.getDate() + 100)).substr(1),
        "HH": ("" + (date.getHours() + 100)).substr(1),
        "mm": ("" + (date.getMinutes() + 100)).substr(1),
        "ss": ("" + (date.getSeconds() + 100)).substr(1)
    };
    return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function() {
        return dict[arguments[0]];
    });
};

一些在项目中积累的工具方法
移动端input聚焦光标移到最右网上搜到的有些方法很多，但为了让android、ios、pc都能适用需要做一下整...
Jmeter - 录制脚本的两种方式
第一种方法：通过badboy录制 1.打开人badboy工具，点击工栏目上的红色圆形按钮，在地址栏目中输入被测试项...
阅读积累
阅读、诵读可以帮助学生增强积累，但是还要指导学生用好积累工具，掌握积累方法。在积累的过程中，还要加强梳理，每隔一个...
如何发布自己的npm包
前景在最近的公司项目中，前端项目很多都需要一些类似功能的公共方法（工具方法）。于是我萌发了一个想法，自己建一个n...
PPT之唯快不破
启动方法1：文件 - 选项 - 加载项 - COM加载项(去除不常用的加载项) 方法2：开发工具 - 加载项 -...
kubernetes/openshift 应用异常诊断指南_上
原创：蔡峰同步发布于微信公众号：老菜分享一些本人在k8s openshift项目中积累的一些异常诊断方法。本文...
kotlin - 顶层函数
在 java 项目中，有很多的工具类，很多都是静态方法调用，而这个工具类，也是只当作一种容器，用来存放这些静态方法...
Guava概览
项目中经常用的一些guava的工具方法,抽了一些时间整体看了一下文档,全面的了解了一下guava的工具支持,这里记...
JAVA小项目-管家婆记账本介绍（1）
今日内容介绍1、管家婆项目 01项目训练目标 02项目中的功能模块 03技术的选择和相关jar包 04项目中的工具...
spring中无法使用 @Autowired注解注入静态变量的原
问题背景在项目中因为一些工具类是静态方法，所以必须需要使用静态变量才能使用，然而此时如果使用@Autowired是...