前端日常

@ 文件下载

export default function (options) {
    let config = options;
    let $form = document.createElement('form');
    $form.target = "";
    $form.method = "POST";
    $form.action = config.url;
    $form.type = 'hidden';
    for (let key in config.data) {
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = config.data[key];
        $form.append(input);
    }
    document.body.append($form);
    $form.submit();
    document.body.removeChild($form)
}

@正则——正负数，小数位

 

var res = new RegExp("^[\-|0-9]+(\\.[0-9]{0,"+ n +"})?$");

@判断变量是否是数组

var a = [1,2,3]

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

 

@对象数组合并

Array.prototype.unique3 = function(){
    var res = [];
    var json = {};
    for(var i = 0; i < this.length; i++){
        if(!json[this[i].a]){
            res.push(this[i]);
            json[this[i].a] = 1;
        }
    }
    console.log(res);
    return res;
}
var a = [
    {a:22},
    {a:33}
]
var b = [
    {a:22},
    {a:44},
    {a:55}
]
var c = a.concat(b)
c.unique3()

 

@ js加法运算小数位问题

functionaccAdd(arg1,arg2){

varr1,r2,m;

try{

r1=arg1.toString().split(".")[1].length

}catch(e){

r1=0}try{

r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2))

return(arg1*m+arg2*m)/m

}

 

乘法：

functionaccMul(arg1,arg2){

varm=0,s1=arg1.toString(),

s2=arg2.toString();

try{

m+=s1.split(".")[1].length}catch(e){}

try{

m+=s2.split(".")[1].length}catch(e){}

returnNumber(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m

)}

除法：

functionaccDiv(arg1,arg2){

vart1=0,t2=0,r1,r2;

try{

t1=arg1.toString().split(".")[1].length}catch(e){

 }try{

 t2=arg2.toString().split(".")[1].length}catch(e){}

 with(Math){

 r1=Number(arg1.toString().replace(".",""))

 r2=Number(arg2.toString().replace(".",""))

return(r1/r2)*pow(10,t2-t1);

}

}

 

@ iOS输入框输入获取焦点或者输入时，白屏的问题

给父元素添加position：relative

@ 安卓手机输入框被虚拟键盘遮挡的问题

不要给内容区添加定位，比如：position:absolute等；

@ Swiper上拉加载，下拉刷新（3.0版本）

var mySwiper = new Swiper('.swiper-container', {
    scrollbar: '.swiper-scrollbar',
    direction: 'vertical',
    slidesPerView: 'auto',
    mousewheelControl: true,
    freeMode: true,
    onTouchEnd: function(swiper){
        console.log(swiper.translate)
        if(swiper.translate>60){ //判断下拉刷新
            $(".swiper-wrapper").empty();
            nums = 0;
            render(nums)
        }
        else if(swiper.translate<-40){ //判断上拉加载新数据
            if(mySwiper.isEnd){
                render(nums)
            }
        }
    }
});

 

@ 判断js是否加载完成

function loadScript(url,callback){
　　var script=document.createElement('script');
　　　　script.type='text/javascript';
　　　　script.async='async';
　　　　script.src=url;
　　　　document.body.appendChild(script);
　　　　if(script.readyState){   //IE
　　　　　　script.onreadystatechange=function(){
　　　　　　　　if(script.readyState=='complete'||script.readyState=='loaded'){
　　　　　　　　　　script.onreadystatechange=null;
　　　　　　　　　　callback();
　　　　　　　　}
　　　　　　}
　　　　}else{    //非IE
　　　　　　script.onload=function(){callback();}
　　　　}
}

 

@ git远程覆盖本地

git fetch --all  
git reset --hard origin/master 

git pull

 

@ 保留几位小数

processRes: function (e,n) {
    var thisDom = $(e.currentTarget);
    var val = thisDom.val();
    // var res = /^[0-9]+(\.[0-9]{0,n})?$/;
    var res = new RegExp("^\[0-9]+(\\.[0-9]{0,"+ n +"})?$");
    var quit = 1;
    if(n == 0){
        quit = 2;
    }
    var isTrue = res.test(val);
    if (!isTrue) {
        if(!val){
            thisDom.val("");
            return false
        }
        if(String(val).split(".")[1].length >= (n+1) ){
            thisDom.val(val.substr(0, val.length - quit));
        }
    }
},

@、webpack + react/vue/jquery

 

 

 

    https://github.com/xiaoyann/webpack-best-practice

    https://segmentfault.com/a/1190000005969488

@、对象数组排序封装

 

var a =[
    {
        name:"北京分公司",
        bugCut:22,
        bugTime:333,
        needCut:44,
        needTime:444,
        totalTime:666
    },
    {
        name:"广州分公司",
        bugCut:11,
        bugTime:111,
        needCut:22,
        needTime:222,
        totalTime:123
    },
    {
        name:"东北分公司",
        bugCut:66,
        bugTime:321,
        needCut:2311,
        needTime:434,
        totalTime:5633
    }
];
function defineSoft(data,field,type) {
    function arrSoft(obj1,obj2) {
        var val1 = obj1[field];
        var val2 = obj2[field];

        if(val1 < val2){
            if(type == "SToB"){
                return -1
            }else{
                return 1;
            }
        }else if(val1 > val2){
            if(type == "SToB"){
                return 1
            }else{
                return -1;
            }
        }else{
            return 0
        }
    }
    return data.sort(arrSoft)
}
defineSoft(a,"needTime");

@//react-webapck脚手架

转载：http://blog.csdn.net/adzcsx2/article/details/52993633

npm install -g yo

npm install -g generator-reactpackage

yo reactpackage

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

npm run dev //项目开发过程使用，启动服务，实时刷新

npm run build //开发完成之后打包文件（js、css分开打包）

 

判断android ios

<script type="text/javascript">

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android：'+isAndroid);

alert('是否是iOS：'+isiOS);

</script>

 

检测自定义类型，用instanceOf

 

检测字符串、数字、boller、undefiend都用typeof

Typeof name === “string”

检测函数

Typeof  mfFun === “function”

 

检测数组

Function isArray(value){

Return  Object.prototype.toString.call(value) == “[object Array]”

}

 

 

@ 禁止点击

.box { pointer-events: none; }

 

@ 使用对象的hasOwnProperty()方法。

该方法只能判断自有属性是否存在，对于继承属性会返回false。

var o={x:1};

o.hasOwnProperty("x");    　　 //true，自有属性中有x

o.hasOwnProperty("y");    　　 //false，自有属性中不存在y

o.hasOwnProperty("toString"); //false，这是一个继承属性，但不是自有属性

 

 

@ 清除浮动

.fix{zoom:1;} .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

 

 

 

@ Checkbox监听选中事件

$('.check').change(function () {    if($(this).is(':checked')){        console.log(333)    } })

 

 

@ Select对齐方式

select {

    direction: rtl; 右对齐

}

select option {

    direction: ltr;

}

 

@ fastClick 锁住输入框。

在ios中，会出现几秒的输入框没有反应，开始也怎么想不明白，各种尝试，推测，搜索发现原来是使用的轻框架中用到了fastClik引起的，解决的办法就是加上一个样式。

  <div id="content" class="inputcontent needsclick" ></div>

 

1、 for属性可以关联click事件    点击button可以使得div发生点击事件

2、 Math.round(11.3)=12

Math.round(-11.3)=-11

3、input边框变蓝色

Outline:none;

4、

$("input [name='sex']:checked").val()

 男 <input type=radio name=sex value="男">

女<input type=radio name=sex value="女">

@ 动态添加元素绑定事件

$("body").delegate(".listdata","click",function(){    console.log(22);})

 

@ 正则验证手机号和固话

(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\(\d{3}\))|(\d{3}\-))?(1[358]\d{9})$)/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/

/^1[0-9]{10}$/

 

@ 正则验证汉字和字母

var reg = '/^([A-Za-z]|[\u4E00-\u9FA5])+$/';

 

验证整数或小数^[0-9]+(\.[0-9]+)?$

 

验证数字格式，可以是小数，负数，整数

^-?(0|[0-9]*)+(.[0-9]*)?$

 

 

@ IOS   惯性滑动   

overflow:scroll

-webkit-overflow-scrolling : touch;

 

@ Tittle小图标

<link rel="shortcut icon" href="your_ico.ico" type="image/x-icon">

2 <link rel="icon" href="your_ico.ico" type="image/x-icon">

 

@ 字体多次点击会变蓝色

-moz-user-select: none; /*火狐*/

-webkit-user-select: none; /*webkit浏览器*/

-ms-user-select: none; /*IE10*/

-khtml-user-select: none; /*早期浏览器*/

user-select: none;

@ 使用 JS 阻止整个网页的内容被选中

document.body.onselectstart = function () {

    return false;

};

 

// 或

document.body.onmousedown = function () {

    return false;

}

 

阻止特定区域的内容被选中

var elem = document.getElementById('elemId');

elem.onselectstart = function () {

    return false;

};

@ 数组合并

1. // 第一种  

2. var mergeTo = [4,5,6],  

3.       mergeFrom = [7,8,9];  

4.   

5. mergeTo = mergeTo.concat(mergeFrom);  

6. mergeTo; // is: [4, 5, 6, 7, 8, 9]  

7.   

8. or  

9. var a = [1,2], b = [3,4], c = a.concat(b);  

10.   

11.   

12. // 第二种  

13. var mergeTo = [4,5,6],  

14. var mergeFrom = [7,8,9];  

15.   

16. Array.prototype.push.apply(mergeTo, mergeFrom);  

17.   

18. mergeTo; // is: [4, 5, 6, 7, 8, 9]  

@ 数组排序

var arr= [1,3,2,5,1]arr.sort(function (a,b) {     return b-a;});console.log(arr)

@ 页面跳转方式：

第一种： 

复制代码代码如下:

<script language="javascript" type="text/javascript"> window.location.href="jb51.jsp?backurl="+window.location.href; </script> 

第二种： 

复制代码代码如下:

<script language="javascript"> alert("返回"); window.history.back(-1); </script> 

第三种： 

复制代码代码如下:

<script language="javascript"> window.navigate("jb51.jsp"); </script> 

第四种： 

复制代码代码如下:

<script language="JavaScript"> self.location='jb51.htm'; </script> 

第五种： 

复制代码代码如下:

<script language="javascript"> alert("非法访问！"); top.location='jb51.jsp'; </script> 

第六种：网址从传参获得并转向 

复制代码代码如下:

<script language="javascript" type="text/javascript"> function request(paras){ var url = location.href; var paraString = url.substring(url.indexOf("?")+1,url.length).split("&"); var paraObj = {} for (i=0; j=paraString[i]; i++){ paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length); } var returnValue = paraObj[paras.toLowerCase()]; if(typeof(returnValue)=="undefined"){ return ""; }else{ return returnValue; } } var theurl theurl=request("url"); if (theurl!=''){ location=theurl } </script> 

 

@ jQuery插件支持的转换方式

 

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 

 

2. 浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串 

注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。 

3. Javascript支持的转换方式

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。 4 .JSON官方的转换方式： 

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法； 可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。