金蝶考前收集试题

实现一个自定义事件Event对象的接口，继承该对象都拥有on 、off、emit三个方法

用ul渲染十万行li，点击每个li标签，弹出对应的index，要求不能卡界面，大概图形是下面的：

0
1
方法：事件委托
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素

题设：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有。。。个 li

解决方案：
jQuery进行事件委托

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});

更多方法看这里-参考文档

局限性：
比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；
mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；

文库笔试题

笔试记录

实现一个自定义事件Event对象的接口，继承该对象都拥有on 、off、emit三个方法

class EventEmitter {
    constructor() {
        this._events = {};
    }
    on(event,callback) {
        //监听event事件,触发时调用callback函数
        let callbacks = this._events[event] || [];
        callbacks.push(callback);
        this._events[event] = callbacks;
        return this;
    }
    off(event,callback) {
        //停止监听event事件
        let callbacks = this._events[event];
        this._events[event] = callbacks && callbacks.filter(fn => fn !== callback);
        return this;
    }
    emit(event, ...args) {
        //触发事件,并把参数传给事件的处理函数
        const callbacks = this._events[event];
        callbacks.forEach(fn => fn.apply(null,args));
        return this;
    }
}

调用：
//实例化
const eve = new EventEmitter();

//定义事件
function myEvent1(data) {
    console.log('事件1触发了');
    console.log(data);
}
//监听
 eve.on('myEve1',myEvent1);

//移除
eve.off('myEve1',myEvent1);

//触发
eve.emit('myEve1',['哈哈','嘻嘻']);

选择题：

应该选： 标签是没有语义的，它的作用就是为了设置单独的样式用的。

2:if(x ====1 ){} 会抛出Uncaught SyntaxError: Unexpected token '=
3:如果没有显式的用return,函数调用时会返回什么

function foo() {}
console.log(foo())
//undefined

注：如果你使用一元对于 undefined 值，否定运算符两次，您将获得 false 。
4: 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，要在 DOM 加载完成后才可以对 DOM 进行操作。我们需要将代码写在特定的函数中，有以下两种写法。

$(document).ready(function(){
    //your code
});
js原生:
window.onload = function () {
    //your code
};

jq方法中 $(window).load() 与 $(document).ready() 的区别::
一： ready()方法 是针对dom结构加载完触发.ready事件可以加在任意元素上，比如：

$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。

ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。
二： load()方法 :load事件主要就是用来代替原生的window.onload.它只能用在两个场景下：

· window对象上。比如$(window).load(fn);。

　　· 带有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。

除此之外，任何元素都没有load事件，比如：$(document).load(fn);这是错误的写法，根本不会执行。
　　load是需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。

5 :0.1+0.2 === 0.3

false
我们知道浮点数计算是不精确的，上面的返回式实际上是这样的：
0.1 + 0.2 = 0.30000000000000004

var x = "foo"
undefined
var x = "foo"; x = !!x;
//true

7，ajax长轮询的目的是什么？
定时就是发送请求,响应请求,客户端接收到响应后,继续发送请求,从而达到不间断.大概是：与服务器保持连接。
长轮询的详细内容

补充：Ajax轮询——“定时的通过Ajax查询服务端”
但是一般来讲，请求服务器，还是使用websocket建立长轮询
8,

var x = "hello";(function() { x = "goodbye";}()); console.log(x);
//goodbye
undefined

面试：行内块和行内元素的区别，为什么行内块会有间隙 ,
display:none和visibility:hidden两者的区别，
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

css选择器的优先级，
两个超出边界的数字想加求和，怎么实现

function add(a,b){
    // 保存最终结果
    var res='';

    // 保存两位相加的结果 和 进位值
    var c=0;

    // 字符串转数组
    a = a.split('');

    while (a.length || b.length || c){
        // ~~ 用来把String类型 转为 Number类型
        // 把两位相加的结果 和 进位值相加
        c += ~~a.pop() + ~~b.pop();

        // 取余，把余数拼接到最终结果中
        res = c % 10 + res;

        // 保存进位，true 或者 false
        c = c>9;
    }
    return res;
}
add('11111111111111111','22222222222222222');

，笔试题的最后一题，十万行li怎么加载，localstorage,sessionstorage,cookie区别，es6了解吗，
事件代理和事件委托的区别，
事件代理和事件委托实际上说的是同一件事，只是站在不同的角度来说的。比如说元素A把事件处理委托给自己的父元素B去处理，那么A就是事件委托方，而B就是事件代理方，两者参与的实际上是同一件事。
箭头函数和普通函数的区别
箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
普通函数的this指向调用它的那个对象
箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不绑定arguments，取而代之用rest参数…解决
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
箭头函数没有原型属性
箭头函数不能当做Generator函数,不能使用yield关键字

settimeout和promise的区别，
其实这里Promise是一个micro task,我们的主线程是一个task。micro task会在task后面执行，然后才会接着执行下一个task。而setTimeout的返回函数是一个新的task,所以这里Promise的执行会先于新task执行。根据HTML标准，一个task执行完后，UI会重渲染，所以micro task更新完数据后再渲染dom的操作要比setTimout的性能要好。如果使用setTimeout的话，会有两次ui重渲染
开发项目中遇到什么问题，怎么解决的，为什么要学前端，以后的安排，
原型链，原型链的继承，原型链的顶端，
原型链顶端的原型对象：Object.prototype
每个构造函数都一个prototype属性指向自身的原型，而由该构造函数创建的实例对象也都有一个__proto__属性指向该构造函数的原型，而构造函数的原型也是一个对象，它也会有一个__proto__属性指向自己的原型，这样层层深入，直到Object的原型，从而形成了原型链。
每一个javascript对象在创建的时候就会有一个与之关联的对象B产生，对象B就是所说的“原型”。
1）原型也是一个对象，其他对象可以通过原型实现属性继承，
2）js中的继承就是基于原型的继承；
3）所有对象在默认情况下都有一个原型，因为原型也是一个对象，所以每个原型自身又有一个原型，默认的对象原型在原型链的顶端；
要构造继承很简单，将子对象的原型指向父对象的实例（注意是实例，不是对象）但是构造器指向的对象更改了，这样就不符合我们的目的了，我们无法判断我们new出来的实例属于谁。因此，我们可以加一句话：
Dog.prototype.constructor = Dog;

知道哪些设计模式，为什么要有这些设计模式，用过哪些设计模式，
设计模式是为了解决现实的问题，是对某种问题的解决方案。
设计模式：在面向对象软件设计中针对特定问题的简洁而优雅的解决方案。

单例模式代理模式命令模式发布订阅模式 职责链模式设计模式参考
数组有哪些方法，怎么取得数组的第一个元素，都有哪些方法，
什么是单页面开发，平常关注什么网站，自己的学习方法，
jquery和angular的区别，了解vue吗？
angular和jquery的区别

angular中是尽量避免操作DOM, angular是基于数据驱动, 适合做数据操作比较繁琐的项目,angular适用于单页面开发,是一个比较完善的mvvm框架, 包含模板和双向数据绑定, 路由, 模块化, 服务, 过滤器, 依赖注入等所有功能,但是angular验证功能比较薄弱, 需要写很多模板标签, 而且ngview只能有一个, 不能嵌套多个视图,angular的兼容性比较好, jquery是基于操作DOM, 适用于操作DOM比较多的项目, jquery是一个库, 比较大,兼容大部分浏览器, 有丰富的插件, 可拓展性强, jquery不能向后兼容, 使用插件时,可能会有冲突,

angular和vue的差别

一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有多个vue实例
参考
前端和后端分离听过吗？自己用过吗。说话别紧张，对自己的学习过程，学习方法，目标规划有一个明确的认识。
函数的调用方法，参考
继承有哪几种，有没有看过源码，
DOM和bom的区别，
2.文档对象模型 （DOM）

处理网页内容的方法和接口

3.浏览器对象模型（BOM）

与浏览器交互的方法和接口

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)
4. DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作
怎么学习最新的前端技术，

用css画一个三角形。 参考
自我介绍
css中使元素垂直居中的几种方法
盒子模型是什么
有几种模型
js里的闭包是什么
js里的事件委托是什么
如何创建一个dom元素
打开一个网址，到关闭有哪些协议
有没有遇到跨域的问题
http状态码有哪几种
vue里父子组件是怎么通信的
客户端存储方式有几种，以及区别
cookie,sessionStorage和localStorage,application cache 离线缓存，从浏览器缓存中分出来的一块缓存区，想要在这个缓存区中保存数据，可以使用一个描述文件，列出要下载和缓存的资源。服务器需要维护一个manifast清单，html标签用manifast属性引入即可。
get和post区别
在ajax中，get比post更经常使用到，get方法是为了向服务器请求查询数据而存在，而post方法是为了向服务器传送数据而存在，post请求的主体可以包含非常多的数据，而且格式不限。
ajax的open()方法，如果使用get()，会将查询字符串参数追加到url的末尾（所有名称值对必须由&分隔）。
post（）请求消耗的资源更多，get速度可以达到post的2倍。
浏览器上：url：get（）可见。数据传输：get通过url，post通过body体。缓存性：get请求可以缓存，post不可以。书签：get可以保存为书签。后退页面的反应：post会重新提交请求，get不会。安全性：原则上post安全，只是在url可见性上，其他没多大区别。

金蝶实际面试题

css中有哪些单位，表示什么含义。
px 像素
em 相对文字大小的 父元素的1em = 1/font-size，浏览器默认文字大小是16px;如果自身设置了文字大小，是1/自身文字大小。
rem r是root的简写，相对根元素html文字大小。
vw 百分之一的视口宽度
vh 百分之一的视口高度