javascript
- 有一个全局变量 a，有一个全局函数 b，实现一个方法bindData，执行后，a的任何赋值都会触发b的执行。
vue简单的双向绑定原理
function bindData(target, event){ for(var key in target) { if(target.hasOwnProperty(key)) { (function(){ var v = target[key]; Object.defineProperty(target, key, { get: function() { return v; }, set: function(_value) { v = _value; event.call(this) } }) })() } } } - 将数字转换成中文大写的表示，处理到万级别，例如 12345 -> 一万二千三百四十五 CodePen
- react生命周期 参考答案
- 闭包
- v8引擎区别浏览器做的优化
- 编译型和解释型语言的区别
- 跟缓存相关的配置
- 如何提高webpack打包的速度
- nginx 转发的配置
- node 的一些特点
- node对于字节流的控制
- 如何处理js的错误:eslint。
- node垃圾回收
- js内存溢出
- if([]) 是true，但是[]==false,因为任何类型跟bool比较都会先转化为数值型。[]是object ,if的时候不是false。
-
()=>{} 箭头函数的区别
- 更短的语法糖
- 不绑定this，没有自己的this
- 没有arguments
- 不可以作为构造函数，不能用new
- 没有prototype
- 实现一个function 输入字符串，验证其字符串是合法的html标签，只要开闭合理就可以。使用栈来解决。
- setTimeout(function(){},0)和process.nextTick()的区别
- 红黑树
- promise，原生写一个
- 取得body下所有元素的tagname，并去重输出。
- 前端国际化
- react组件，如何更换主题
- setImmediate
- flex布局 ie10 11不支持
- css选择器优先级：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
- 事件驱动
- viewport有几种
- prerender
- []==[] false 基本数据类型是值的比较，引用类型是地址的比较。
- proto和prototype
javascript
Object.prototype.__proto__=null
Object.__proto__=== Function.prototype
Function.__proto__===Function.prototype
Function.__proto__.__proto__=== Object.prototype - 事件过程 事件捕获-》目标-》事件冒泡
-
阻止冒泡方法
// 阻止冒泡 stopPropagation() //chrome event.cancelBubble() //IE // 阻止默认事件 preventDefault() //chrome event.returnValue() //IE //JQuery 提供了两种方式来阻止事件冒泡。 $("#div1").mousedown(function(event){ event.stopPropagation(); }); $("#div1").mousedown(function(event){ return false; }); - 断点续传，断点下载
- array的基本方法
- arguments转化为真正的数组Array.prototype.slice.call(arguments)
- js数组去重
//for循环时，每次取出一个元素与对象///进行对比，如果这个元素不重复，则把//它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。 Array.prototype.unique3 = function(){ var res = []; var json = {}; for(var i = 0; i < this.length; i++){ if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res; } var arr = [112,112,34,'你好',112,112,34,'你好','str','str1']; alert(arr.unique3()); - 深拷贝 CodePen
var clone = function(v) { var o = v.constructor === Array ? [] : {}; for (var i in v) { o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i]; } return o; } - 闭包
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
- 应用场景 设置私有变量和方法
- 不适合场景 返回闭包的函数是个非常大的函数
- 闭包的缺点 常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
- 为什么会出现闭包这种东西，解决了什么问题
受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。
- 交换两个变量的值，但不产生新的变量
var a=1; var b=2; a=a+b; b=a-b; a=a-b; - 函数防抖和函数节流
- 函数防抖 频繁触发的情况下，只有足够的空闲时间，才执行代码一次
var timer = false document.getElementById("debounce").onScroll = function() { clearTimeout(timer) timer = setTimeout(function(){ console.log(‘函数防抖’) }, 300) }- 函数节流 声明一个变量当标志位，记录当前代码是否在执行
var canScroll = true; document.getElementById('throttle').onScroll = function() { if (!canScroll) { return; } canScroll = false; setTimeout(function(){ console.log('函数节流'); canScroll = true; },300) } - js继承
理解JS的6种继承方式 -
call 和apply
详解call和apply -
node延迟函数执行顺序是什么？
setTimeout(()=>{ console.log(3) },0); setImmediate(()=>{ console.log(2) }); process.nextTick(()=>{ console.log(4) }) // 4 2 3 以上代码的执行顺序为： 1. process.nextTick 2. setImmediate 3. setTimeout - 严格模式: “use strict”
- 数据类型: 6种，Undefined,Null,Boolean,Number,String,Object.注意数据不是哈，数组被归于object
- 使用typeof操作符，可能返回以下六种结果:undefined,boolean,string,number,object,function.
- typeof null=object
- 函数不是一种数据类型。
- 虽然null==undefined ，但null指的是一个空的对象引用。undefined 表明变量没有被赋值或者未定义。
- 永远不要测试某个特定的浮点数
- NaN是一种数值，NaN与任何数都不等，包括他本身。
- Number() 可以转换任何数据类型，parseInt()和parseFloat()只能字符串转数值
- Number(true)=1,Number(false)=0,Number(null)=0,Number(“”)=0
- 其他类型转化为字符串，.toString()方法，String(),区别在于null和undefined没有toSting()方法，必须要用String()
- 判断一个值是哪种基本类型使用typeof ,是哪种引用类型用instanceof
- 让js启动变量的回收，var a=121,a=null
JavaScript的新标准
- await
- symbol
- async
- reflect
- proxy
webpack
- webpack babel配置中的stage-0是什么意思？
- webpack 打包构建速度优化
- 缩小文件的搜索范围
- 私用DllPlugin减少基础模块的编译次数
- 使用happyPack开启多进程Loader转换
- 使用ParallelUglifyPlugin开启多进程压缩JS 文件
- webpack 开发体验优化
- 监听文件修改并自动刷新
- 开启模块热替换HMR
- 优化输出质量，减小输出代码体积
- 区分环境，减小生产环境代码体积
- 压缩JS ES CSS
- 使用Tree Shaking 踢出JS死代码
- 优化输出质量，加速网络请求
- CDN加速
- HTTP2
- 公共代码提取
- 按需加载
- 提升代码运行效率
- 使用Prepack提前求值
- 使用Scope Hoisting，作用域提升
- 使用输出分析工具
- 官方工具Webpack Analyse
- webpack-bundle-analyzer
- 其他TIPs
- use: [‘babel-loader?cacheDirectory’]，缓存babel编译结果结果。
- profile:true 展示webpack构建性能信息
- cache:true 通过缓存提升构建速度
- 使用url-loader将小图片用base64加到css或者js中。
- 通过imagemin-webpack-plugin压缩图片，通过webpack-spritesmith制作雪碧图
- 开发环境下将devtool设置为cheap-module-eval-source-map，因为生成这种source map的速度最快，能加速构建。在生产环境下将devtool设置为hidden-source-map
模块化
- AMD requirejs 依赖前置
- CMD seajs 就近依赖
- commonjs node
- ES6模块化：export import
前端安全
- XSS（跨站脚本攻击）
- CSRF跨站请求伪造
> 伪造成合法用户发起请求。一个网站中有一个a标签href是删除用户信息的url，如果是post可以模拟表单提交。 - HTTP劫持，
- 界面操作劫持，
- 错误的内容推断（使用X-Content-Type-OptionsHTTP:nosniff）
- 保护cookies httpOnly为true，阻止js调用该cookies属性。
vue
- vue 更新机制，双向绑定。
- react 更新机制，diff算法。
- 事件机制 emit和 on实现。
React
- React高阶组件
HTML5离线存储和本地缓存
- 离线存储
- localStorage 和 sessionStorage方法
不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1
javascript
localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
css
- 实现图片边框和渐变边框
css
border-image:url() linear-gradient(red, yellow) 10; - 多背景设置
css
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); - 文字省略样式：
css
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap; - 文字波浪下划线
css
text-decoration:green wavy underline - 清除浮动方法 CodePen
-
等高布局 CodePen
- 最完美的解决方式：等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
- 盒子模型 box-sizing
content-box = width （content的宽） border-box = width + border + padding - 垂直水平居中 CodePen
- 自适应居中 CodePen
- css3实现正方形
- css3新特性（举几个例子）
- Text-decoration：文字和边界可以填充颜色
css
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度 - border-radius和rgba透明度支持
- Gradient 渐变效果
css
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); - 阴影（Shadow）和反射（Reflect）效果
- Text-decoration：文字和边界可以填充颜色
- flex布局
- Transitions, Transforms 和 Animation CodenPen
- css 预编译
- less
- stylus
- post css
- css module
正则表达式
-
写一个简单的模板引擎（字符串和正则）
var tem="我爱你，${0},${1}" var a="小吴" var b="小刘" function tempFunc(template){ var reps=template.match(/\${[\d]+}/g) for(let i=0;i<reps.length;i++){ var ar=arguments[i+1] if(ar){ template=template.replace(reps[i],ar) }else{ template=template.replace(reps[i],"") } } return template } var t=tempFunc(tem,a,b) - 12345678.22 转化为 12,345,678.22
javascript
'1234567891'.replace(/(\d+?)(?=(\d{3})+$)/g, '$1,') - 12,345,678.20 转化为 12345678.20
javascript
new Number(string.replace(/[^0-9.]/g,''))
网络
- DNS
- dig www.baidu.com 可以查看DNS解析过程
- 域名总长度则不能超过253个字符
- ICANN 管理 WHOIS 数据库
- http1和http2区别
- 新的二进制格式
- 多路复用
- header压缩
- 服务端推送：server push
- https 的过程和服务器搭建
- http 的无状态
web 新技术
- Web Assembly
- PWA
- Houdini：自定义css属性
- web socket
- service work
项目经验
- 选择你最引以为傲的项目，细细聊。
