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)效果
  • 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

项目经验

  • 选择你最引以为傲的项目,细细聊。