关于sort()函数排序问题的解决

发表于 2017-08-23 |

sort() 方法用于对数组的元素进行排序。

问题：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序

比如：[‘1’,’41’,’4’,’10’]

排序的结果为：[‘1’,’10’,’4’,’41’]

他是按照字母顺序进行排序，所以会出现这个问题

在 W3C上有这么一句话：

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

var arr = ['1','10','4','41'];
function sortNumber(a,b){
  return a-b
}

arr.sort(sortnumber);

另外还有一种数组对象的进行按字段排序：

var arr =[
  {name:'lee',age:32},
  {name:'wang',age:30},
  {name:'zhang',age:21},
  {name:'xiao',age:45}
]
/**
* array[数组]
* key[string] 通过什么字段进行排序
* order[number] 1从大到小，-1或者不传 从小到大
*/
function sortByKey(array,key){
   if(!order || order == -1){
      return array.sort(function(a,b){
        var x=parseInt(a[key]);
        var y=parseInt(b[key]);
        return ((x<y)?-1:((x>y)?1:0));
     });
    }else if(order == 1){
      return array.sort(function(a,b){
        var x=parseInt(a[key]);
        var y=parseInt(b[key]);
        return ((x>y)?-1:((x<y)?1:0));
     });
  }
}

var newArr = sortByKey(arr,'age')

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

通过递归的方式解决ajax循环请求的问题

发表于 2017-07-24 |

问题描述

最近在做音乐类型的H5页面，音乐数据后台发布只提供了ID，然后针对ID进行发送ajax请求，往往我们在做H5应用的时候，ID都是一个列表，要展示一个列表的音乐，这个时候遇到了一个问题 :

问题：

ajax请求还没返回数据，循环已经完成，导致在我们绑定DOM事件的时候DOM还没生成无法绑定事件。

开始的代码：

var dataArry = [1111,2222,3333,4444,5555]
function loopDate(){
  var h = '';
  $.map(dataArry, function(item, index) {
    $.get("loadAjax", { item:item }, function (d) {
       h+='<span></span>'
    });
    $('#music-info').html(h);
    $('span').on('click',function(){
      //TODO
    })
  });
}
loopDate()

阅读全文 »

关于Flex布局在开发过程中使用的总结

发表于 2017-06-26 |

Flex（弹性布局）最近工作重心全部转移到了APP内H5开发，关于在H5开发过程中有很多的东西需要去总结，比如和原生的交互，字体布局对rem的使用，布局过程中大量支持的Flex布局的运用。在之前的开发过程中，大多数的使用都是在PC网站上由于要兼容IE等多浏览器的版本，不能用上Flex布局！在App中我们采用了统一的webkit版本，这样我们就能放心的使用Flex布局了。

下面记录下我在flex布局使用最多的几个属性，只用于记录，不用于探讨

Flex能够给任何一个容器（不管是块级还是行内都OK）

开发过程中常用的属性：

display:flex : 给容器添加flex布局
justify-content ：用于左右对齐方式
1. flex-start ：默认值。项目（子元素）位于容器的开头。
2. flex-end：项目（子元素）位于容器的结尾。
3. center：项目（子元素）位于容器的中心。
4. space-between: 项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾不填充空白
5. space-around：项目（子元素）位于各行之间留有空白的容器内。各个项目之间的空白距离相等。首尾填充空白空白
align-items :用于上下对齐方式
1. stretch: 默认值。项目被拉伸以适应容器。
2. center: 项目位于容器的中心。
3. flex-start: 项目位于容器的开头。
4. flex-end：项目位于容器的结尾。
5. baseline：项目位于容器的基线上。
flex-flow ：flex-direction flex-wrap 的简写flex-direction定义弹性盒子元素的排列方向。flex-wrap 控制flex容器是单行或者多行。
1. row wrap: 以行进行展示并且自动换行
flex-direction ：
1. row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
2. row-reverse：对齐方式与row相反。
3. column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
4. column-reverse：对齐方式与column相反。
flex-wrap：
1. nowrap : flex容器为单行。该情况下flex子项可能会溢出容器
2. wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
3. wrap-reverse：反转 wrap 排列。

以上就是在APP H5过程中使用Flex布局的时候使用到的一些属性。

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

关于获取DOM绑定的事件方法

发表于 2017-05-16 |

最近在手机上H5开发时遇到一些问题，在点击按钮时无法触发click事件，这事我想到底是到底事件绑定上没有（当然仔细检查代码也能解决，但是有些时候不一定都能检查出来）

下面给出直接获取dom事件绑定获取方法

原生的：

1 2	window.getEventListeners(document.getElementById('pay-button'))

或者jQuery的：

1 2	$._data($('#abc')[0], 'events');

通过上面2种方法我们就可以看看我们绑定的事件到底是否绑定上!可以排除我们代码中的一些问题

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

jquery-Validator校验正则记录

发表于 2017-03-28 |

最近在做项目的时候，有很多表单验证的内容，在此进行记录以下

在校验表单的时候主要使用了Jquery validator插件其中自定义校验如下

手机号

jQuery.validator.addMethod("isMobile", function(value, element) {
  var length = value.length;
  var mobile = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
    // /^1\d{10}$/  /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/
  return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");

阅读全文 »

关于Form的一些问题总结

发表于 2017-03-20 |

在最近做登录注册的时候发现一些问题进行总结

一、当刷新时form表单重新提交

解决方法利用html5 history api的replaceState

replaceState可以重置初始化浏览状态信息，可以清空之前保存的表单数据，但是仅局限于支持HTML5的浏览器

1	history.replaceState(0,1)//重置了浏览器状态，防止刷新重新提交

二、关于input标签使用disable属性后，不能提交当前input数据

Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

所以在我们需要提交数据的时候不能使用disable 要使用 input 专有禁用属性 readonly

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

JavaScript中判断对象类型的种种方法

发表于 2017-03-01 |

我们知道，JavaScript中检测对象类型的运算符有：typeof、instanceof，还有对象的constructor属性： 1) typeof 运算符 typeof 是一元运算符，返回结果是一个说明运算数类型的字符串。
如：”number”，”string”，”boolean”，”object”，”function”，”undefined”（可用于判断变量是否存在）。但 typeof 的能力有限，其对于Date、RegExp类型返回的都是”object”。如：


typeof {}; // "object"
typeof []; // "object"
typeof new Date(); // "object"

阅读全文 »

手机端页面自适应解决方案

发表于 2017-02-27 |

该方案使用相当简单，把这段原生JS 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);</script>

阅读全文 »

CSS五种方式实现Footer置底

发表于 2017-02-23 |

实现方法

1. 将内容部分的底部外边距设为负数

这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。


<body>
  <div class="wrapper">

      content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* 等于footer的高度 */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

这个方法需要容器里有额外的占位元素（如.push）

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。

阅读全文 »

使用事件代理来优化dom事件的绑定

发表于 2017-02-22 |

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

我们有下面的一个场景:当点击li输出相应的值


<ul class="list-item">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
</ul>

阅读全文 »

LEE

毕业后先后从事测试和前端开发工作！

GitHub