Giter VIP home page Giter VIP logo

fightingyi's People

Contributors

pambassador avatar ynchuan avatar

Watchers

avatar avatar

fightingyi's Issues

百度一面

  1. 两列布局，左边固定，右边自适应
  2. 实现水平垂直居中
  3. 说说flex布局，flex有哪些属性及其对应的值
  4. 事件机制，事件委托的作用
  5. 事件绑定和事件移除

hover图片显示大图bug

  • 链接不能点击了
  • 交互有问题，图片出来后不能看到原来的内容了，应该图片放右侧
  • hover态以后应该上一个hover图关闭

附修复参考代码：

//hover使用事件委托，只有当鼠标移除currentTargt元素外才会触发？？？
    toggleImg() {
        let prev;
        this.$result.on('mouseenter', '.img', function (event) {
            prev = $(this).parent().next().removeClass('hide');
        }).on('mouseleave', '.poster', function (event) {
            prev && prev.addClass('hide');
        }).on('click', '.close', function (event) {
            prev && prev.addClass('hide');
        });
    }

请关注代理事件参数的使用，建议把jquery 'on' API阅读并实践，思考如果你来实现这个api你会怎么做？

本次题目：请实现Delegate类并实现其中on API，结果下方贴代码即可

<!DOCTYPE html>
<html>

<head>
    <title>event test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
</head>

<body>
    <ul id='test1'>
        <li class="item">1</li>
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item">4</li>
    </ul>
    <ul id='test2'>
        <li class="item">1</li>
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item">4</li>
    </ul>
</body>

</html>
var delegate = new Delegate();
var dom1 = document.getElementById('test1');
var dom2 = document.getElementById('test2');
delegate.on(dom1, 'click', '.item', function (e) {
    console.log(e.target.nodeName);
});
delegate.on(dom1, 'click', '.item1', function (e) {
    console.log(e.target.nodeName);
});
delegate.on(dom1, 'mouseup', '.item', function (e) {
    console.log(e.target.nodeName);
});
delegate.on(dom2, 'click', '.item', function (e) {
    console.log(e.target.nodeName);
});

完美世界

一面：

  1. ess3新特性
  2. html语义化
  3. es6新特性
  4. flex弹性布局，会问具体属性和对应值
  5. 闭包，被闭包引用的变量不会被立即销毁还是该变量所在的整个作用域都不会被立即销毁
  6. 跨域的几种方式
  7. 原型链，原型链继承引起的与其他语言的不同
  8. 是否写过动画
  9. css层叠样式表，堆叠？
  10. 实习项目

阿里（阿里云）

电话面

  1. 瀑布流的实现
  2. forEach和map的不同
  3. 如何遍历对象
  4. 实现一个校验器，有基础校验规则，并且也可以自定义校验规则

视频面

  1. 实习内容及学到了什么
  2. 项目介绍
  3. 项目的异常处理
  4. 项目用的es6还是什么，
  5. 答：es5，追问es5相比于es2或者es3新增了哪些东西
  6. 项目用的vue版本
  7. 有没有发现vue存在的bug
  8. 平常有没有关注技术发展趋势等
  9. 在线写vue组件实例
  10. git命令，强行覆盖，git cherry-pick
  11. 说说自己的优点和缺点

快手一面

  1. 说说闭包，闭包访问与作用域链查找不同

  2. 原型链，自定义构造函数指向的是Object.prototype还是Function.prototype

  3. typeof(typeof(undefined))输出什么

  4. 跨域问题，在什么情况下会发生OPTIONS请求，ajax跨域会有几次http请求。

  5. JSONP跨域的原理具体实现过程

  6. 实现一个函数A(),满足：
    `A(1)() //1

    A(2)(3)() //5

    A(1)(2)(3)() //6`

字节跳动（效率工程）一面

1.屏幕中间有个元素A，随着宽度的增加，始终满足以下条件：
A 元素垂直居中屏幕**,A左右边距10px
A 元素里面的文字大小20px, 水平垂直居中
A的宽度随屏幕大小变化，铺满屏幕，A 元素的高度始终是自身宽度的50%
2.会问==的具体转换规则

if([]==false) {console.log(1);}
if({}==false) {console.log(2);}
if([]) {(console.log(3)}
if([1]==[1]) {console.log(4)}

3.会问具体的异步任务队列执行过程

async function async1(){
    console.log('async1');
    await async2();
    console.log('async1 end');
}
function async2(){
    console.log('async2');
}
console.log('script start');
async1();
setTimeout(function(){
     console.log('settimeout');
},0);
new Promise(function(resolve,reject){
    console.log('promise');
    resolve();
}).then(function(){
    console.log('resolved');
});
console.log('script end');
function a(){
    new Promise(function(resolve,reject){
        console.log('a');
        reslove();
    }).then(function(){
    a();
    })
}
a();
setTimeout(function(){
    console.log('b')
},0);

5.用原生方法自己实现promise
6.实现函数节流，并举例具体调用过程
7.在用户输入搜获过程中，一帧内浏览器执行的事件及顺序
8.原生实现bind,，如a.bind(b,args);并使得b在a的原型链上。
9.一个无序不重复数组，在数组中找到n个数，使得这n个数的和为sum，找到第一个解即可，不用找到所有解。

funciton find(arr,n,sum){}

腾讯（微信）

一面（视频面）

  1. 在线写反转链表
  2. 自我介绍
  3. 项目介绍，项目中遇到的难点
  4. 对js的理解，为什么选择用js做前端
  5. js是针对浏览器设计的，拥有js渲染器之类的
  6. 请求头和响应头，及运行机制，如accept-encoding
  7. XHR对象的readyState属性，五个状态
  8. 异步机制
  9. 作用域链的理解
  10. 按钮的上下左右居中,在移动端的问题
  11. 实现响应式布局
  12. 对类class的理解

二面（电话面）
主要介绍项目，项目中的难点

三面（视频面）

  1. 抓包
  2. 一个页面打开时加载较慢出现空白的可能性有哪些，如何去排查问题的原因
  3. 打开一个url的过程发生了什么
  4. Http状态码
  5. 在线写快排（写的不熟练）
  6. 说说自己的优点和缺点

字节跳动-互娱

笔试题
简答题：1.box-sizing的理解
2. html语义化的理解
3.事件代理
编程题：
1.反转链表、
2.将DOM结构转化为JSON
输入：

<div>
    <span>
        <a></a>
        <a></a>
    </span>
    <span>
        <a></a>
        <a></a>
    </span>
</div>

输出：

tag: div,
children:[
{tag:span,
children:[
{
tag:a,
children:[]
},
{
tag:a,
children:[]
}]
},
{tag:span,
children:[
{
tag:a,
children:[]
},
{
tag:a,
children:[]
}]
}
]}

一面
1.数组去重、
2.排序算法（选择自己熟悉的一个写），
3.在数组中找到两个数之和等于给定的一个数
4.定宽定高水平垂直居中，
5.盒子模型，
6.BFC，
7.position属性，
8.html语义化，
9.闭包定义及原理
10.设计模式区别及原理

二面：
1.实习项目介绍及具体工作
2.webpack打包原理
3.设计模式
4.实现一个响应式布局
5.viewport
6.介绍常见布局及实现方法
7.判断链表是否环形链
8.extends继承

三面：
1.实现登录,并可以保持登录状态
2.http缓存
3.cookie属性，如http-only,secure
4.如果缓存过期请求流程，
5.原生实现路由的几种方式
6.vue-router如何实现重定向
7.hash和history的不同，为什么会有这两种模式
8.vue双向绑定的实现原理
9.跨域CORS的具体设置，以及跨域请求是在哪里被拦截的
10.offsetwidth
11.createdocumentfragment()
12.webpack有哪些功能
13.loader和plugin的区别
14.移动端响应布局，如一个按钮适配不同大小屏幕
15.原生实现弹窗，主要写html和css
16.实现弹出层从下向上滑出效果

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.