20170913记录

1. 水平垂直居中

<div class="demo" style="width: 100px;height: 100px"></div>
// 方法1: 绝对定位1
// 方法2: 绝对定位2
// 方法3: flex
// 方法4: css3 transform transalte

2. display: none和visibility: hidden的区别

display在文档流中没有,visibility在文档流占据空间但不显示(隐形)

1. 是否继承 display不继承
2. 是否占据空间 display不占据空间
3. 页面属性更改是否重新渲染 display重新渲染

3. 忘了

4. 点击列表li显示相应内容

<ul id="ul">
    <li>内容1<li>
    <li>内容2<li>
    <li>内容3<li>
    <li>内容4<li>
    ...
    <li>内容1000</li>
</ul>
// 方法1:闭包
var lists = document.querySelectorAll("#ul li");
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].onclick = function () {
            alert(this.innerHTML);
        }
    })(i)
}
// 方法2:jquery on事件代理
var lists = document.getElementById("ul").children;
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].addEventListener('click', function (e) {
            alert(e.target.innerHTML);
        }, false); // 布尔值是否捕获
    })(i)
}

事件代理

原理:利用事件冒泡和事件源(target)

事件执行过程:

  • 事件捕获阶段(事件不执行)
  • 处于目标阶段(获取执行事件的目标源target并执行事件,此阶段被看作是冒泡的一部分)
  • 事件冒泡阶段

jQuery事件代理

delegate() 为指定元素(被选中元素的子元素)添加一个或多个事件处理程序

on() jquery中的事件绑定都是基于on方法的,所以那些方法都可以使用on方法来代替的

5. 输出日期格式xxxx-xx-xx,不足两位数的要补齐

// 1.默认情况 格式'YYYY-MM-DD HH:MM:SS'
function dateFormat (time, format) {
  // 2.默认格式转换机制
  var formatValue = format || 'YYYY-MM-DD HH:MM:SS' // 默认值设置
  var dateValue = new Date(time);
  return formatObj[formatValue](dateValue)
}

// 3.将格式统一转换成00
function fixed2 (str) {
  return str < 10 ? '0' + str : str
}

// 4.考虑所有格式情况的组合 根据题目要求只有四种组合情况
var formatObj = {
  'YYYY-MM-DD HH:MM:SS': function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + '-';
    D = fixed2(date.getDate()) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes()) + ':';
    s = fixed2(date.getSeconds());
    last = Y + M + D + h + m + s;
    return last;
  },
  'YYYY-MM-DD HH:MM': function (date) {
    var Y, M, D, h, m, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + '-';
    D = fixed2(date.getDate()) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes());
    last = Y + M + D + h + m;
    return last;
  },
  'YYYY-MM HH:MM:SS': function (date) {
    var Y, M, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes()) + ':';
    s = fixed2(date.getSeconds());
    last = Y + M + h + m + s;
    return last;
  },
  'YYYY-MM HH:MM': function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes());
    last = Y + M + h + m;
    return last;
  }
}
dateFormat(1350052653, 'YYYY-MM-DD HH:MM') // 1970-01-16 23:00:52
dateFormat(1350052653, 'YYYY-MM-DD HH:MM') // 1970-01-16 23:00
dateFormat(1350052653, 'YYYY-MM HH:MM:SS') // 1970-01 23:00:52
dateFormat(1350052653, 'YYYY-MM HH:MM') // 1970-01 23:00

6. 变量执行顺序和函数参数

function result (a, b, c) {
    arguments[1] = c;
    return b;
}
alert(result(1, 2, 3)); // 3
alert(result(daydao)); // undefined
var daydao = "理才网";

agrguments是一个类似数组的对象,对应于传递给函数的参数

参数也可以被设置:arguments[1] = 'new value'

7. js实现找出字符串中出现次数最多的字符,并输出这个字符出现的次数

https://segmentfault.com/q/10... 参考


解题思路:
- 切割字符串为数组
- 遍历产生字典
- 根据出现次数排序
- 输出出现次数最多的字符数组

function analysisString (str) {
    var str = str || '',
        arr = str.split(''),// 1.分割字符串为数组
        numMap = {}, // 记录所有字符的出现频次
        mostArray = []; // 记录所有出现次数最多的字符,保存在数组中
    // 2.遍历所有字符字典
    arr.forEach(function (item) {
        // 记录所有字符的出现频次,保存在对象中
        // 记录所有出现次数最多的字符, 保存在数组中
        numMap.increase(item);
        mostArray.add(item);
    });
    // 3.根据出现次数进行数组排序
    mostArray = mostArray.sort(function (a, b) {
        return numMap[b] - numMap[a]; // 从大到小排序
    }).filter(function (item, i) { // 过滤,当当前次数等于最大次数时添加在mostArray数组里
        if (numMap[item] === numMap[mostArray[0]]) {
            return item;
        }
    });
    // 4.返回出现字符次数最多的数组和最多次数
    return {
        mostArray: mostArray,
        freqNum: numMap[mostArray[0]]
    };

}
Object.prototype.increase = function (key) {
    var self = this,
        val = self[key]*1 || 0;
    self[key] = val + 1;
    return self;
};
Array.prototype.add = function (item) {
    var self = this;
    if (self.indexOf(item) < 0) { // 数组中没有这个字符
        self.push(item);
    }
    return self;
};
console.log(analysisString('hayleyliuhui'));

8. 正则实现将“<div>理才网<sapn>上线成功</span>!</div>”替换成“理才网上线成功!”

以下分别代表什么意思
+
*
?
*?
{}
[]
()
var str = '<div>理才网<sapn>上线成功</span>!</div>';
var reg = /<[/a-z]+>/;
<!--reg.exec(str);-->
<!--reg.test(str);-->
<!--str.match(reg);-->
<!--str.search(reg);-->
<!--str.replace(reg);-->
str.split(reg).join(''); // ["", "理才网", "上线成功", "!", ""]
str.join(''); // 理才网上线成功!

面试过程记录:

基本上问的问题都回答出来了,考察知识点主要是css布局、js事件代理、js函数、jquery、多个事件同步处理、css动画、vue

感受:

  • 主要考察css布局和js事件代理和数组操作
  • 职位是一个人负责某个项目的管理后台,项目组有20多个前端,平时有技术分享会
  • 技术栈jquery40%、vue60%

做的好:

  • 遇到问题会努力思考
  • 不懂的询问面试官、与面试官多讨论和交流
  • 没有冷场

不足:

  • 没有准备好自我介绍
  • 没有对面试公司提清楚自己的问题
  • 没有掌控面试的流程和主动权

继续准备:

  • 总结面试题
  • 再多看看jquery和css动画
  • 准备2面和3面(技术负责人、hr、技术总监分别准备)

你可能感兴趣的文章

墨眉 · 9月14日

刚毕业吧 兄弟,找工作嘛 我们公司招人唷

+2 回复

0

@墨眉 前辈,我也刚毕业呢,有什么技术要求呢。

小风也能吹走爱 · 9月14日
1

前辈不敢当=-= react和vue熟练一些就行

墨眉 · 9月14日
0

公司在哪?叫什么名字呢?

Hayley 作者 · 9月15日
彭宇 · 9月14日

哪个公司

回复

载入中...
Hayley Hayley

119 声望