Potato

Potato 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Potato 提出了问题 · 11月11日

antd 表单 可以只红色高亮不提示错误信息吗?

image.png
这种表格的校验 希望只红色高亮就可以,不提示错误信息。怎么设置呢?
antd 有相关api可以设置吗?

关注 2 回答 2

Potato 发布了文章 · 9月12日

新氧医美和当当网怎么选择?

岗位:web前端
薪资:一样(22k*14)
哪家对自己未来发展相对比较好呢?

查看原文

赞 0 收藏 0 评论 0

Potato 收藏了文章 · 8月26日

记2020前端面试之路

2020从我第一份简历投递出去已经将近两个月了,虽然暂时没画句号,但我想先记录一下,你们裸面的,裸辞的都慎重一下。

下面写的都是真实面试过的,真的会考的。包括腾讯,阿里,头条,滴滴,美团,好未来,真融宝,快手,贝壳等,对问的题目进行了分类。

题主中途也心理崩溃过,好在有靠谱领导和小伙伴分析,靠谱老公支持,最终抗到了现在。

  1. 日常问题

    1. 自我介绍(99%会问,最好还是准备一下)
  2. html篇

    1. meta一般有什么属性?
  3. css篇

    1. flex 弹性布局了解吗?用过哪些?
    2. flex布局??怎么让它一个居左一个居右?
    3. positon说一下类型;absolute父级没有relative针对什么定位
    4. 左右布局有几种方式
    5. 标准盒模型和怪异盒模型的区别
    6. BFC解释一下
    7. 元素居中的方法
  4. js基础篇

    1. 闭包、原型链(手写闭包)
    2. javascript继承
    3. 原型链说一下,字符串有原型吗(有,__propto__指向Object),所有对象都有原型吗
    4. 理解事件循环机制(会问你详细怎么走的,必须得无理解了才能完全hold住);async与await是什么任务;为什么是微任务

      示例题1
      console.log('script start');
      setTimeout(function()  {
      console.log('setTimeout');
      },  0);
      Promise.resolve().then(function()  {
      console.log('promise1');
      }).then(function()  {
      console.log('promise2');
      });
      console.log('script end');

      示例2:输出什么,为什么?
      image.png

      示例3
      async function async1(){
          console.log('async1 start')
          await async2()
          console.log('async1 end')//w1
      }
      async function async2(){
          console.log('async2')
      }
      console.log('script start')
      setTimeout(function(){// h1
          console.log('setTimeout')
      },0)  
      async1();
      new Promise(function(resolve){
          console.log('promise1')
          resolve();
      }).then(function(){
          console.log('promise2')//w2
      })
      console.log('script end')
      示例4任务队列理解
      setTimeout(()=>{
          console.log(1);
          Promise.resolve().then(()=>{
              console.log(2);
          });
      }, 0)
      
      setTimeout(()=>{
          console.log(3);
          Promise.resolve().then(()=>{
              console.log(4);
          });
      }, 0)
    5. DOM操作——怎样添加、移除、移动、复制、创建和查找节点
    6. cookie、localStorage、sessionStorage 区别和使用场景
    7. 跨域相关问题,怎么解决?几种方式?
    8. 跨域的方法
    9. 为什么会跨域,跨域到后端了吗
    10. 为什么会跨域,跨域的实现;option在什么情况会发
    11. 跨域,cookie允许跨域的配置withCredentials: true
    12. 缓存有哪些
    13. 缓存有哪些,协商缓存返回状态是什么,强缓存返回状态是多少
    14. 缓存:强缓存,协商缓存,seestion,localstorge,cookie
    15. 刷新列表会造成数据丢失怎么办
    16. cookie,localstorge,sessionStorge区别
    17. cookie怎么带给后端(withcans)
    18. call,apply,bind的区别
    19. ajax原生怎么写?get与post的区别?post的参数放在哪里的?
    20. post/get的区别,contentType的类型
    21. js实现深度复制(手写代码)
    22. js的基本数据类型;怎么判断数据类型(必须答出对象原型才肯罢休);symbol怎么声明
    23. [1,2,3].toString()和{a:10}.toString分别打印什么,为什么
    24. 邮箱的正则怎么写?
    25.  写一个正则匹配/<script/>内的内容
       const str = 
       /<script\>....</script>
       /<div\></div>
       \<label text="aa"/></label>
    26. 垃圾回收机制,闭包应用场景
    27. 事件循环原理
    28. 判断是否是数组--instanseof ,是否是它的实例
    29. 浏览器缓存
    30.  判断下面的对象是如何成环的
       var a = {
           b: c
       }
       var c = {
           d: d
       }
       var d = {
           a: a
       }
  5. ES6篇

    1. promise 实现原理
    2. promise的实现(手写代码)
    3. 怎么判断5个全对
    4. promiseAll --->原生实现
    5. promise结合try catch

      try{
          Promise.reject(2)
          .catch((e)=>{
              console.log(e) 
              throw new Error(3)
          })
      }catch(e){
          console.log(e) 
      }
      try{ 
          const data = await Promise.reject(2);
           console.log(data);
           console.log(4);
           throw new Error(3);
      }catch(e){ 
           console.log(e) 
    6. async await
    7. js实现继承,ES6实现继承,es6有用吗?ES6 class有用吗?babel把es6转为ES5?ES5实现继承?
    8. set map/weakmap区别
    9. map和forEach的区别
    10. Es6 commonJS的区别
    11. es6和ts
    12. function 和尖头函数的区别

          m:function(){
              console.log(this)
          },
          n:()=>{console.log(this)}
      };
      a.m();
      a.n();
      var x=a.m;
      var y=a.n;
      function f(){
          x();
          y();
      }
      x();
      y();
    13. 解构

       const obj = { 
              a: { b:1, }, 
              c:2
              } 
              const obj1 = {...obj}; 
              const obj2 = {...obj1}; 
              obj.a.b = 3;
              obj.c = 4; 
      
              obj1.a.b  
  6. Vue篇

    1. vue的组件间怎么通信?父子间怎么通信?父组件调子组件的方法怎么调用?
    2. vuex
    3. vue生命周期;beforeCreated created之间的区别;created和 beforeMouned之间的区别;如果父组件和子组件,生命周期又是怎样的
    4. SPA,vue单页面如何在后退时返回到上次滚动位置(考vue-router)
    5. vue双向绑定的原理。那是怎么向订阅者发送消息的呢?
    6. vue data 到view的过程(要答出Vdom哦,没问你也要答,不然扣分~~~)
    7. vue-router路由:hash# history;history主要的API;pushState replaceState 区别
    8. vue 模版,虚拟Dom 到真实Dom的转换过程
    9. vue MVVM驱动的原理是什么
    10. 详细说一下vue的周期,平时用什么哪些周期多一些?他们的应用场景
    11. nextTick,他的原理是什么
    12. vue.nextTick(()=>{})是怎么实现的,以及下面的输出

      data: {
         a: 1
       }
       vue.nextTick(()=>{
           this.a = 2
           console.log(this.a)
       })
       Promise.resolve().then(()=>{
           this.a = 3;
       })
       console.log(this.a)
    13. vue-router路由,默认的是什么【hash】
    14. vue路由的钩子函数----没答上来
    15. 组件的通信方法
    16. vuex的数据流向,vuex的原理
    17. vue过滤器有哪些,数字格式化{{ num | formatAmount(0)}} 它的原理
    18. vue使用use的使用的发生了什么
    19. computed计算属性的原理
    20. vuex为什么这么设计,为什么要采用传参数的方式
    21. vue-router
    22. vue函数式组件和非函数式组件
    23. 登录 权限 content 路由导航
    24. vuex说一下
    25. event.bus (知识)//new Vue(),自定义事件
    26. v-model的双向绑定原理
    27. object.property的缺点,为什么不能监听
    28. vue3.0的改进proxy
    29. vue的原理
    30. jquery和vue的区别
    31. vue获取元素的方法
    32. nextTick,原理
    33. created和mounted的区别
    34. computed和watch的区别,哪种效率高一些
    35. data 为什么是一个函数
    36. data的函数可以改成箭头函数吗
    37. vue3.0 为什么使用proxy
    38. 数据新增对象怎么让它可以更新到组件上-vue.set
  7. webpack篇

    1. webpack打包用过吗?
    2. webpack loader(module)和plugin用了哪些
    3. webpack的loader和plugin的区别,为什么要使用loader,各个loader的作用
    4. 为什么webpack4可以再命令行直接执行
    5. 用过哪些webpack的高级属性
    6. 热重载是怎么做的
    7. 不同环境怎么区分打包(packge.json)
    8. webpack的构建过程
    9. 热更新的原理-------》不知道
    10. 自定义插件的流程
    11. require的原理,es6转es5原理
    12. tree shaking的原理以及如何充分利用tree shanking
  8. npm篇

    1. npm发布了几个包?打包出来的格式?
    2. npm install发生了什么
  9. http篇

    1. http缓存?
    2. http缓存,这两个缓存的关联关系是怎么样的,是怎么转换的
    3. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
    4. HTTP/2 和 HTTP 1.1 有什么区别?
    5. http状态码有哪些?
    6. 浏览器输入地址发生了什么
    7. http2.0了解吗
    8. http请求成功的状态码有哪些
    9. http2.0的改进
  10. 移动端

    1. 移动端怎么做适配?
    2. rem和em的区别;
    3. 如果要在chrome上显示10px的字怎么办
    4. rem是基于什么布局的一个方式?
    5. hybrid开发?
    6. 怎样实现 微信开发的登陆与分享 ?
    7. 遇到过哪些移动端的一些坑
    8. PC和移动怎么自适应怎么做
    9. 手机调试问题
    10. 移动端设置
    11. Pc和移动开发的区别
  11. 性能优化篇

    1. 如何优化和减少页面的加载时间。
    2. 性能优化相关?
    3. 项目中做了哪些性能优化
    4. cdn有哪些优化静态资源加载速度的机制
    5. 设计AutoComplete组件(又叫搜索组件、自动补全组件等)时,需要考虑什么问题?
    6. 浏览器第一次访问,第二次访问,第三次访问的区别
    7. DOMContentLoad 与ttfb区别
    8. ready与onload区别,哪个先执行
    9. 错误监控
    10. DNS解析
    11. CDN的理解
    12. 常见的性能
    13. 防抖
    14. 函数节流,函数防抖实现
  12. 服务端篇

    1. koa2中间键用了哪些
    2. nodejs?了解哪些部分?
    3. node的进程管理
    4. koa2节点管理
    5. node了解多少
    6. node了解多少
  13. 手写代码和算法篇

    1.    请用js实现将一个二维数组转换成树结构
         例如:将下面数据
         [
             ["a", "aa", "aaa", "aaaa"],
             ["b", "bb", "bbb"],
             ["a", "ab", "aba"],
             ["a", "aa", "aab"]
         ] 转为:
         [
             {
                 "name" : "a",
                 "child" : [
                     {
                         "name" : "aa",
                         "child" : [
                             {
                                 "name" : "aaa",
                                 "child" : [
                                     {
                                         "name" : "aaaa",
                                         "child" : []
                                     }
                                 ]
                             },
                             {
                                 "name" : "aab", "child" : []
                             }
                         ]
                     },
                     {
                         "name" : "ab",
                         "child" : [
                             {
                                 "name": "aba",
                                 "child" : []
                             }
                         ]
                     }
                 ]
             },
             {
                 "name": "b",
                 "child" : [
                     {
                         "name" : "bb",
                         "child" : [
                             {
                                 "name" : "bbb",
                                 "child" : []
                             }
                         ]
                     }
                 ]
             }
    2.    `fn = f(n-1) + f(n-2)
         f0 = 0
         f1 = 1
         n >=0 正整数
         fn`
    3. 数组拍平(手写代码)
      image.png
      image.png
    4. 嵌套数组拍平

      [1,2,3,4,[5,6,[7]],8]
      [1,2,3,4,5,6,7,8]
      除了常规方法,还有奇葩方法,全转字符串再把中括号删掉
    5. image.png
    6. query解析

      ?a=0&a=1&a=2&c&url=url内容#333
      转成
      {
          query:{
              a:[0,1,2],
              url:'url内容'
          },
          hash:''
    7. 手写

       var data = { a: { b: { c: 'ScriptOJ' } } }
      console.log(safeGet(data, 'a.b.c')) // => scriptoj
      console.log(safeGet(data, 'a.b.c.d')) // => 返回 undefined
      console.log(safeGet(data, 'a.b.c.d.e.f.g')) // => 返回 undefined
      console.log('ScriptOJ') // => 打印 ScriptOJ
    8. 手写阶乘 5*4*3*2*1
    9. 拖拽
    10. 写一个函数,计算两个矩形是否碰撞
    11. 实现函数,功能是给数组打乱顺序,要求不能用sort进行打乱
    12. 手写快速排序
    13. 手写promise的实现
    14. 浅拷贝
    15. 深拷贝
    16. 怎么让0全部到最后去的方法
    17. 二叉树
    18. [1,2,5,3] 得到10的函数
    19. 两个有序数组(升序)排序组合成1个有序数组(升序)
    20. 二分查找算法
    21. 5000 → 5,000,5430342 → 5,430,342
    22. var list = [{age: 1}, {age:13}, {age:8}],按照 age的值 将list从大到小排序
    23. var list = [{age: 1}, {age:13}, {age:8}],输出重复次数最多的age?重复了多少次?(此问题和第一问无关系)
    24. 函数柯里化

       请实现方法`curry(Function) => Function`,传入一个多参函数,返回单参函数
       example:
       const sub = function(a, b, c, d) {
           return a+b+c+d;
       }
       const subCurry = curry(sub);
       sub(1,2,3,4) = subCurry(1)(2)(3)(4)
       sub(1,2,3,4) = subCurry(1,2)(3)(4)
  14. 项目流程篇

    1. 前端上线流程是怎么样的
    2. 怎么保障你的代码质量
    3. 代码上线了有问题怎么办
    4. 部署是怎么样的过程,上线的过程是怎么样的?他是怎么被用户访问到的?
    5. 如何保证代码质量
  15. 开放性问题

    1. 目前你对什么Web技术最感兴趣
    2. 最近了解前端的什么技术?
    3. 你有什么想问我的吗
    4. 你遇到的一些难点
    5. 介绍一个你的一个项目
    6. 说一下你的用户体验怎么优化的
    7. 你最近在学习什么
    8. 技术的积累沉淀有哪些
    9. 你为什么要离职
    10. 了解为微应用吗
    11. 你是如何设计组件的,如何设计一个dialog,要考虑哪些问题
    12. 你平时是怎么学习
    13. 你想做什么工程
    14. 你有什么想问我的
    15. 技术管理有什么想法
    16. mock方法
    17. 组件怎么封装
    18. 你的兴趣爱好
    19. 最骄傲的一件事
    20. 你的优点和缺点
    21. 你有什么要问我的
    22. 开发组件的注意事项
查看原文

Potato 关注了专栏 · 7月25日

前端小站

web, 前端, javascript, nodejs, electron, babel, webpack, rollup, react, vue ...

关注 2136

Potato 收藏了文章 · 3月7日

Vue+Element前端导入导出Excel

1 前言

1.1 业务场景

由前台导入Excel表格,获取批量数据。

根据一个数组导出Excel表格。

1.2 Demo 地址

https://xrkffgg.github.io/Kvue/#/Js/003

2 实现原理

2.1 引入工具库

file-saver、xlsx、script-loader

npm install -S file-saver xlsx

npm install -D script-loader

2.2 导入Excel

2.2.1 Element 上传控件

image

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :file-list="fileListUpload"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
</el-upload>

limitUpload = 1限制只能上传1个文件

accept为默认打开的可上传的文件格式

handleChange(file, fileList){
    this.fileTemp = file.raw
},

handleRemove(file,fileList){
    this.fileTemp = null
},

fileTemp这里定义了一下变量,指向最新上传的附件,起始定义为null。

这里发现控件file.raw是我们要用的File类型。

2.2.2 导入判断

if(this.fileTemp){
    if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){
        this.importfxx(this.fileTemp)
    } else {
        this.$message({
            type:'warning',
            message:'附件格式错误,请删除后重新上传!'
        })
    }
} else {
    this.$message({
        type:'warning',
        message:'请上传附件!'
    })
}

2.2.3 导入函数

importfxx(obj) {
    let _this = this;
    // 通过DOM取文件数据
    this.file = obj
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for(var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        var XLSX = require('xlsx');
        if(rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(binary, {
                type: 'binary'
            });
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
            this.da = [...outdata]
            let arr = []
            this.da.map(v => {
                let obj = {}
                obj.code = v['设备ID']
                obj.type = v['设备型号']
                arr.push(obj)
            })
            return arr
        }
        reader.readAsArrayBuffer(f);
    }
    
    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
},

arr就是我们要的结果,是一个数组。每一个值是个对象,包含了codetype两个属性。

excel中格式为横向 设备ID 和 设备型号。

2.3 导出Excel

2.3.1 引入JS文件

可参考下载地址:- github

将其中的2个JS文件放入到自己的工程中。

2.3.2 修改JS文件中地址

image
打开Export2Excel.js,会出现如上图所示。由于本人将Blob.jsExport2Excel.js放到了同一级,这里引入是这样的。

这几个文件不支持import引入,所以需要script-loader来将他们挂载到全局环境下。

2.3.3 导出函数

getExcel(res) {
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../introduce/Export2Excel.js')
        const tHeader = ['姓名', '年龄']
        const filterVal = ['name', 'age']
        const list = res
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '导出列表名称')
    })
},

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
},

这里的引用请根据自己的层级关系和文件夹命名require('../../introduce/Export2Excel.js')

res为传入的数组,格式如:res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]

tHeader为导出Excel表头名称,导出列表名称即为导出Excel名称

下载的Excel位置根据浏览器设置的下载位置而定

3 后记

感谢支持。若不足之处,欢迎大家指出,共勉。

如果觉得不错,记得 点赞 ,谢谢大家 😂

欢迎关注 我的:【Github】【掘金】【简书】【CSDN】【OSCHINA】【SF】

3.1 参考资料

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

出处为:https://github.com/xrkffgg/Tools

查看原文

Potato 关注了用户 · 3月7日

xrkffgg @xrkffgg

~

关注 13

Potato 关注了专栏 · 3月7日

前端技术

vue、css、html、js、canvas、echarts 一起学习,一起进步

关注 12

Potato 赞了问题 · 2019-10-17

解决`1 instanceof Number` 为啥是false?

如题:

1 instanceof Number //false

var a = new Number(1);
a instanceof Number // true

为啥 一个false 一个true?

关注 8 回答 7

Potato 收藏了问题 · 2019-10-17

`1 instanceof Number` 为啥是false?

如题:

1 instanceof Number //false

var a = new Number(1);
a instanceof Number // true

为啥 一个false 一个true?

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-10-17
个人主页被 77 人浏览