1. HTML5新增的表单输入类型有哪些
number <input type=”number” />只能输入数字
tel <input type=”tel” />电话
range <input type=”range” min=”20” max=”100”value=”30” step=”” />特性范围内数值选择器，其中step是指每移动一次的步数
email <input type=”email” />邮箱，验证规则：只识别英文和@。
url <input type=”url” />会在提交时对url字段集进行验证，只识别全程http://baidu.com
search <input type=”search” />搜索框
color <input type=”color” />拾色器
date <input type=”date/month/week” /> 年月 日 / 年月 / 年 周
time <input type=”time” />时间，时与分
datetime-local <input type=”datetime-local” />当地时间，年月 日 时 分 秒
2.HTML 本地存储分别有哪几种方式
cookies
localstorage sessionstorage (getItem //取记录 setIten//设置记录 removeItem//移除记录)
application cache
IndexedDB
3.JS的基本数据类型有哪些
Number,,Boolean,String Undefined,Null symbol ( symbol 不可强制转换 )
4. CSS实现隔行换色代码
div:nth-of-type(odd){ background:#00ccff;}
div:nth-of-type(even){ background:#ffcc00;}
/
div:nth-child(2n){
background-color: red;
}
div:nth-child(2n+1){
background-color: yellow;
}
5. DOM事件流的模型包括哪几种？
捕获和冒泡（ie用的是事件冒泡）
6. 流行的构建工具有哪几种
Grunt Gulp Browserify Webpack
7.实现浏览器多个标签页的通信有哪几种方式
localstorge、cookies
8.substr和substring
substr（startIndex,lenth） startIndex 支持负数
substring（startIndex, endIndex） startIndex 不支持负数（视为0 ， str.substring(0)）
9.写一个正则表达式允许所有数字、小数点、下划线
/[0-9.\_]/g.test(2)
10. JS实现继承的方式有哪几种
父类
function Animal (name) { this.name = name || 'Animal'; this.sleep = function(){ console.log(this.name + '正在睡觉！'); } } Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); };
10.1 原型链继承：将父类的实例作为子类的原型
function Cat() { } Cat.prototype = new Animal() Cat.prototype.name = "cat" var cat = new Cat(); console.log(cat.name) console.log(cat.eat('fish')) console.log(cat.sleep()) console.log(cat instanceof Animal) // true console.log(cat instanceof Cat) // true
10.2 构造继承 ： ：使用父类的构造函数来增强子类实例
function Cat(name){ Animal.call(this); this.name= name || 'Tom'; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); //false console.log(cat instanceof Cat); // true
10.3 实例继承：父类实例添加新特性，作为子类实例返回
function Cat(){ var instance = new Animal(); instance.name = name || 'Tom'; return instance; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // false
10.4 拷贝继承
function Cat(name){ var animal = new Animal(); // 遍历拷贝属性 for(var p in animal){ Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || 'Tom'; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true
10.5 Class 继承
class Cat extends Animal { constructor(name){ super(name);<br> this.name= name || 'Animal'; } } var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); //true
11.对象A直接调用对象B的某个方法，实现交互逻辑。但是导致的问题是A和B紧密耦合，修改B可能导致A调用B的方法失效。2、为了解决耦合导致的问题，我们可以设计成：对象A生成消息 -> 将消息通知给一个消息处理器（Observable）-> 消息处理器将消息传递给B具体的调用过程变成：A.emit(‘message’,data); B.on(‘message’,function(data){});请实现这一事件消息代理功能//请将事件消息功能补充完整function EventEmitter(){}
function EventEmitter() { this.eventFunctionMap = {}; } EventEmitter.prototype.emit = function(eventName, data){ this.eventFunctionMap[eventName].call(this, data); } EventEmitter.prototype.on = function(eventName, callback) { this.eventFunctionMap[eventName] = callback; }
12.闭包是什么？有什么好处和坏处？
闭包：能够读取其他函数内部变量的函数。（应用场景：顺序加载，依次输出）
闭包的优点：1.能够读取函数内部的变量 2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收
闭包的缺点：正所谓物极必反，由于闭包会使函数中的变量保存在内存中，内存消耗很大，所以不能滥用闭包，解决办法是，退出函数之前，将不使用的局部变量删除。
13.移动开发点透是什么原因？如何防止透传
什么条件发生点透 （移动端click还有延迟200-300ms的关系）
A z-index大于B，即A显示在B浮层之上
A发生touch， A touch后立即消失， B事件绑定click
阻止click事件发生
A.addEventListener('touchend', function(e) { e.preventDefault(); });
/ 统一用touch事件代替 click 事件
14. JS WebSocket API主要有哪几个？分别有什么用
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
var ws = new WebSocket(“ws://echo.websocket.org”);
ws.onopen = function(){ws.send(“Test!”); };
ws.onmessage = function(evt){console.log(evt.data);ws.close();};
ws.onclose = function(evt){console.log(“WebSocketClosed!”);};
ws.onerror = function(evt){console.log(“WebSocketError!”);};
15. MVVM模式是什么？你知道哪些框架是MVVM模式（vue react angular）
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
哪些操作会造成内存泄露：意外的全局变量引起的内存泄露、闭包引起的内存泄露、没有清理的DOM元素引用、被遗忘的定时器或者回调
解决之道：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用
如何分析内存的使用情况：Google Chrome浏览器提供了非常强大的JS调试工具，Memory 视图 profiles 视图
怎样避免内存泄露：
减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
注意程序逻辑，避免“死循环”之类的 ；
避免创建过多的对象 原则：不用了的东西要及时归还。
17.call和apply的含义和区别
调用一个对象的一个方法，用另一个对象替换当前对象
call可以传入多个参数；
apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入
18.RequireJS的核心是什么？如何实现动态加载的
requirejs 加载模块的核心思想是利用了动态加载脚本的异步性以及 onload 事件使用回调函数来解决模块加载的问题。
requireJS是使用创建script元素，通过指定script元素的src属性来实现加载模块的（缓存src属性）
19. 用户登录界面有用户名、密码、验证码三个字段，请使用面向对象的方式设计一个业务组件，实现登录、校验、显示、隐藏等，实现方式不定，描述主体部分即可
var datas=['user','pwd','code']; function Field(val){ this.val=val; this.show=function(){}; this.hide=function(){}; this.init(); } Field.prototype={ init:function(){ if(this.test()){ this.success() return true; }else{ this.failed() return false; } }, test:function(){}, success:function(){}, failed:function(){} } function Action(datas){ datas.forEach(function(item,index){ if(!new Field(item).init()){ break; } }) } new Action(datas);
20.设计一个简单的前端缓存方案，实现前端组件和样式等变动较少的文件实现前端缓存，同时能够在组件改变时进行升级。
比如有样式文件cmsui.css和业务组件login.js 需要从v1版本升级到v2版本并删除原有低版本组件，其他组件不变。
请说明你准备采用的存储方式和设计思路，并用伪代码描述缓存方案的核心部分
？
合并文件、增加随机数、设置缓存头
<script type="text/javascript">
var timestamp = new Date().getTime();
var versionStamp = sessionStorage.version;
if (versionStamp == null || (timestamp - versionStamp) > 1800000) {
sessionStorage.version = timestamp;
}
document.write("<script type='text/javascript' src='js/index_tool.js?v="+sessionStorage.version+"'><"+'/'+"script>");
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+sessionStorage.version+"'>"); </script>');
</script>