在网页设计中， Sticky footers 设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。
有的盆友就说了，我可以使用 position: fixed;bottom:0;
当然有些情况下是可以适用的，但是有些情况下并不适用，使用 fixed 不就反而更糟，再说了，像我们这样的喜欢新技（zhuang）术（B）的人，有使用新技（zhuang）术（B）的机会怎么能放过。
之前分享过一期网站 footer 沉底效果的解决方案，用的是 JS 或者采用 flex 布局，更利于 PC 端。今天分享下便于移动端的最佳套路。
当然市面上的一些解决方案，但多少都有些兼容性问题存在，这当然不是我们追求的，分享下实现的源码，有兴趣的私下里可以试一试。

阅读全文

方法一：使用replace正则匹配的方法
去除所有空格:

1

str = str.replace(/\s*/g,"");

去除两头空格:

1

str = str.replace(/^\s*|\s*$/g,"");

去除左空格：

1

str = str.replace( /^\s*/, "");

阅读全文

分享一下URL跳转后面拼接参数获取参数的方法：

之前一直用的是这个方法，不管URL后面有几个参数，一个个的去获取，感觉比较麻烦了，不实用了，所以区分了一下，
如果URL后面只跟一个参数的话，可以用这个方法获取

1
2
3
4
5
6
7
8
9
10
11

function getParamVal(type) {
  const { href } = window.location;
  let res = '';
  let startIndex = href.lastIndexOf(type);
  if (startIndex !== -1) {
    startIndex = href.indexOf('=', startIndex) + 1;
    const endIndex = href.indexOf('&', startIndex);
    res = endIndex !== -1 ? href.substring(startIndex, endIndex) : href.substring(startIndex);
  }
  return res;
}

阅读全文

相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。
typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。
细节：
(1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
(2)、typeof 来获取一个变量是否存在，如 if(typeof a!=”undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。

(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

阅读全文

sort()方法用原地算法对数组的元素进行排序，并返回数组，该排序方法会在原数组上直接进行排序，并不会生成一个排好序的新数组。排序算法现在是稳定的。默认排序顺序是根据字符串 Unicode 码点。

1

arr.sort([compareFunction]);

阅读全文

filter(过滤，筛选) 方法创建一个新数组,原始数组不发生改变。

1

array.filter(callback,[ thisObject]);

其包含通过提供函数实现的测试的所有元素。接收的参数和 map 是一样的，filter的callback函数需要返回布尔值true或false. 如果为true则表示通过啦！如果为false则失败，其返回值是一个新数组，由通过测试为true的所有元素组成，如果没有任何数组元素通过测试，则返回空数组。

来个例子介绍下，现在有一个数组 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]，我们想要生成一个新数组，这个数组要求没有重复的内容，即为去重。

阅读全文

reduce() 方法对数组中的每个元素执行一个提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。传递给 reduce 的回调函数（callback）接受四个参数，分别是累加器 accumulator、currentValue——正在操作的元素、currentIndex（可选）——元素索引，但是它的开始会有特殊说明、array（可选）——原始数组本身，除了 callback 之外还可以接受初始值 initialValue 值（可选）。

1. 如果没有提供 initialValue，那么第一次调用 callback 函数时，accumulator 使用原数组中的第一个元素，currentValue 即是数组中的第二个元素。在没有初始值的空数组上调用 reduce 将报错。

2. 如果提供了 initialValue，那么将作为第一次调用 callback 函数时的第一个参数的值，即 accumulator，currentValue 使用原数组中的第一个元素。

例子，现在有一个数组 [0, 1, 2, 3, 4]，需要计算数组元素的和，需求比较简单，来看下代码实现。

阅读全文

map() (映射)方法最后生成一个新数组，不改变原始数组的值。其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

1

array.map(callback, [thisObject]);

callback(回调函数)

1
2
3

[].map(function (currentValue, index, array) {
  // ...
});

阅读全文

时隔一个多月没更新博客了，前段时间家里出了点事情处理了一下，上班后项目太忙一直加班没时间跟精力在这方面，今天项目提测，忙里偷闲，更新一下。

首页改版完成后，自己测试了下IE兼容性问题时，新闻模块出现bug，设计师要求最多显示4个文字，所以我给了溢出隐藏属性，但是在IE和火狐下会出现这种情况：

尝试解决没有实质性进展，都想自己重构写个tab页了，想着试着改下标签，抱着试试的想法，把span标签改为div标签，dispaly:inline-block删除，就正常了。。。。

排查一下，应该是dispaly:inline-block这个属性导致的。

很多网站设计一般是三个部分组成，header + content + footer，header 里面展示着网站头部的导航 logo 等信息，content 里面装的是网站主体内容，footer 里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现两种情况：

一、由于主体内容太少的原因，你会看到底部模块没有固定在底部而是往上跑了，跟在主体内容后面。

二、主体内容较长时，底部模块跟在内容后面滑动，这就正常的情况下。

在 PC 端这种问题还是很常见的，今天总结了一下实现这种布局的几个方法。

阅读全文