10.14 百丽集团面试经历

一面

1. 自我介绍

2. jQuery的选择器

jQuery的选择器与css中的选择器很类似，经过使用css中的选择器来选取HTML节点

1. #id     
用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"

2. Element 
用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,因此element其实就是html已经定义的标签元素,例如div, 
input, a等等.

3. class          
用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(由于在同一html页面中
class是能够存在多个一样值的)

4. *          
用法: $("*")      返回值  集合元素
说明: 匹配全部元素,多用于结合上下文来搜索

5. selector1, selector2, selectorN      
用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每个选择器匹配到的元素合并后一块儿返回.你能够指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class="myClass"

其次可使用属性选择器，例如input中的name，type属性等

一、[attribute]
用法: $("div[id]") ;  返回值  集合元素
说明: 匹配包含给定属性的元素。例子中是选取了全部带”id”属性的div标签。

二、[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);    返回值  集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了全部 name 属性是 newsletter 的 input 元素。

三、[attribute!=value]
用法: $("div[title!='test']").css("background","yellow");   返回值  集合元素

说明: 匹配全部不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于:not此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。以前看到的:not 派上了用场。

四、[attribute^=value]
用法: $(”input[name^=‘news’]“)  返回值  集合元素 
说明: 匹配给定的属性是以某些值开始的元素.,咱们又见到了这几个相似于正则匹配的符号。

五、[attribute$=value]
用法: $("input[name$='letter']")  返回值  集合元素 
说明: 匹配给定的属性是以某些值结尾的元素。

六、[attribute*=value]
用法: $("input[name*='man']")   返回值  集合元素
说明: 匹配给定的属性是以包含某些值的元素。

七、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']")  返回值  集合元素
说明: 复合属性选择器,须要同时知足多个条件时使用.又是一个组合,这种状况咱们实际使用的时候很经常使用.这个例子中选择的是全部含有 id 属性,而且它的 name 属性是以 man 结尾的元素。

其余具体能够查看 JQuery_九大选择器

3. 如何寻找子元素a的父元素中带class="abc"的兄弟节点

<div>
    <div class="abc">
        <div>
            <div class="abc">
                <div>
                    <a href="#">点击我！！！</a>
                </div>
            </div>
            <div class="abcs"></div>
            <div class="abcs"></div>
        </div>
    </div>
    <div class="abcs"></div>
    <div class="abcs"></div>
</div>

个人想法是首先寻找a标签的所有祖先元素 $("a").parents()，而后找到其中 class="abc"的元素 $("a").parents().filter(".abc")，最后再找到这些节点的兄弟节点便可 $("a").parents().filter(".abc").siblings()

4. 写一个简单的jQuery插件（打印"Hello World"）

这个主要有两种方法

1. 类级别开发插件
2. 对象级别开发

// 1、类级别开发插件
// 1. 直接给jquer添加全局函数
jQuery.printHelloWorld = function(){
    console.log("Hello World!!!");
}
// 2. 用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object
$.extend({
    printHelloWorld:function(){
        console.log("Hello World!!!");
    }
})

// 3. 使用命名空间(若是不使用命名空间容易和其余引入的JS库里面的同名方法冲突)
jQuery.test = {
    printHelloWorld: function () {
        console.log("Hello World!!!");
    }
}

// 调用
$.printHelloWorld();
$.test.printHelloWorld();

// 2、对象级别开发
// 第一行的;必定要写
;(function($){
    $.printHelloWorld  = function(){
        console.log("Hello World!!!");
    }
}(jQuery))

// 调用
$.printHelloWorld();

5. 跨域的解决方法

经典问题，具体参考 深刻理解前端跨域问题的解决方案

6. ES6有了解吗

首先回答了 let与 const

let定义变量，相对于var，它修复了一些问题，好比变量提高、重复定义等问题，而且const 和let的定义具备块级做用域；

const定义常量，可是const定义的常量只是值不可变，即基本数据类型不可变，对于引用类型，由于它创建的是引用，因此即便使用const定义的对象，其属性仍是可变的（这个当时在论客科技的时候就有被追问到）；

而后就说到Promise相关

7. Promise解决了什么问题

1. Promise主要解决了回调地狱的问题；
2. 除了解决回调地狱，还能够为了咱们的代码更加具备可读性和可维护性，咱们须要将数据请求与数据处理明确的区分开来。

8. 你以为Promise能解决回调地狱吗？

当时面试官问这个问题的时候，我认为他问的是怎样正确使用才能够正确解决回调地狱的问题。有一种状况就是即便使用了Promise也一样会出现回调地狱，这是由于使用方法错误了，以下：

// 当时因为刚开始接触Promise仍是下意识的使用这种回调方法，致使产生了回调地狱
modifyInfoData().then(function (res) {
   let info_id = res.body.data;
   modifyInfoPic(info_id).then(res => {
       modifyInfoFile(info_id).then(res => {
           _this.$message({
               message: '提交成功',
               type: 'success'
           });
       })
   });
});

// 应该修改成
modifyInfoData().then(function (res) {
   let info_id = res.body.data;
   modifyInfoPic(info_id);
}).then(function (res) {
   let info_id = res.body.data;
   modifyInfoFile(info_id);
}).then(res => {
    _this.$message({
        message: '提交成功',
        type: 'success'
    });
});

9. 如今有两个字符串var a = "aaa"和var b = "bbb如何不借助任何函数和中间变量交换他们

这里只写一个相对比较万能的方法，其余能够参考 JavaScript交换两个变量值的七种解决方案

var a = "aaa";
var b = "bbb";
a = [b, b=a][0];
// 根据运算符优先级，首先执行b=a，此时的b直接获得了a的变量值，而后一步数组索引让a获得了b的值

10. vue中vuex的action和mutation区别

1. 只有Mutation能够直接修改State，而Action只能经过Mutation间接的修改State。
2. Action 能够包含任意异步操做，而Mutation 必须是同步函数。(Mutation 的同步主要是为了能够方便咱们在devtools中检测到状态的变化)
3. 在组件中Action是使用dispatch分发，如：this.$store.dispatch("updateUserInfo", 'nick');; Mutation使用commit，如：this.$store.commit("increment", 'nick');
4. Action中的方法和 Mutation 同样，最多只有两个形参，第一个为 context，能够为payload，须要传多个参数的时候能够以对象的形式传参。

11. localStorage和SessionStorage区别

1. localStorage的生命周期是永久性的; sessionStorage 的生命周期是在浏览器关闭前

12. 有一个数据，应该在vue中的哪一个钩子函数中执行？

vue有8大生命周期，用的最多的就是 created和 mounted，因为在 created阶段中已经完成了data的初始化，因此我认为是能够在这个阶段就向后台请求数据，绑定到data中。
当我回答后，面试官就接下来问了我下一个问题……

13. 若是数据量很大，在created执行会不会很慢？

当时我是这样回答的：若是数据量很大，向后台请求速度很慢，我会采用异步加载的方式，在获取数据的时候给页面加载一个loading，使得交互尽可能的良好吧。

这两个问题回答的不是很是的好，但愿有人能够帮忙解答一下吗？

14. 有了解过多页面吗？有处理过自适应呢？

15. 为何想作前端？

16. 自我驱动？数据驱动？

二面

1. 暑假实习过？

2. 实习主要工做内容？

3. 有作过前端的相关的插件或组件吗？

4. 怎么理解Vue开发？

5. 实习的时候作怎样的系统？

6. 怎么理解Vue开发？