web前端知识点

最新推荐文章于 2021-11-23 21:23:45 发布

RoiRoc

最新推荐文章于 2021-11-23 21:23:45 发布

阅读量413

点赞数

本文链接：https://blog.csdn.net/RoiRoc/article/details/102702704

版权

知识点

html

html5新特性 https://blog.csdn.net/m0_37696296/article/details/81083402
websocket理解和使用 https://blog.csdn.net/jing_80/article/details/82111423
浏览器模型常见对象
window、history、xhr、location https://www.cnblogs.com/ceceliahappycoding/p/10672423.html
Cookie、sessionStorage、localStorage的理解和区别 https://blog.csdn.net/qq_29645505/article/details/88396944
页面dom渲染过程，重流和重绘https://www.cnblogs.com/duanlianjiang/p/5032286.html
文件上传实现
https://www.jianshu.com/p/5147e36cf19c

css

行内元素与块级元素区别
https://blog.csdn.net/weixin_30577801/article/details/95926107
flex布局
答：css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
https://blog.csdn.net/xuehangongzi/article/details/80785177
css预处理器less、sass
https://blog.csdn.net/ly2983068126/article/details/77737292
css3新特性
https://blog.csdn.net/lxcao/article/details/52797914
伪元素before和after的用法https://www.cnblogs.com/wonyun/p/5807191.html
display、float、position的关系https://www.cnblogs.com/fyxapril/p/3146360.html
盒模型
垂直居中方法：
margin 0 auto
margin和绝对定位计算
flex布局
https://blog.csdn.net/houyibing930920/article/details/99745669
https://blog.csdn.net/hai_qing_xu_kong/article/details/72672404
上下两个div设置margin为20px，两个div的间距是多少，为什么https://blog.csdn.net/qq_30541261/article/details/71440467

js

es6新特性
https://www.codercto.com/a/72590.html
promise异步和async/await
https://segmentfault.com/a/1190000016788484
浅拷贝和深拷贝的理解，实现深拷贝
https://www.cnblogs.com/caozhuzi/p/10962829.html
dom事件流，事件委托
https://blog.csdn.net/weixin_33928137/article/details/91370745
跨域的理解和解决方法
https://www.jianshu.com/p/79daa0d45aac
Array对象的一些常用方法https://blog.csdn.net/tangxiujiang/article/details/79612935
js数据类型：undefined、null、boolean、number、string、object、function、array
答：后面3个是引用数据类型，前面的是基本数据类型
jquery链式调用实现原理
https://blog.csdn.net/heyue_99/article/details/54918126
防抖节流，如：
监听一个输入框的文本变化，变化时调用接口，如何优化实现当输入停顿一段时间才调用接口https://www.cnblogs.com/momo798/p/9177767.html
如何判断一个变量是数组类型还是对象类型https://www.cnblogs.com/dreamingbaobei/p/9803491.html
for in for of forEach map的区别
https://blog.csdn.net/zl13015214442/article/details/90606961
模块机制，amd和commonjs
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html
this对象和bind,call函数使用
https://www.cnblogs.com/goloving/p/7259988.html
proptype原型对象的理解，实现一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回

spacify('hello world') // => 'h e l l o  w o r l d'
'hello world'.spacify();
String.prototype.spacify = function(){
  return this.split('').join(' ');
};

函数申明与函数表达式的区别

// 函数声明
    function funDeclaration(type){
        return type==="Declaration";
    }
// 函数表达式
    var funExpression = function(type){
        return type==="Expression";
    }

Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。

考察侯选人是否理解参数（arguments）对象。定义log，然后它可以代理console.log的方法。

function log(msg)　{
  console.log(msg);
}
function log(){
  console.log.apply(console, arguments);
};

上下文的理解,如何确保可以访问到count

var User = {
  count: 1,
  getCount: function() {
    return this.count;
  }
};

console.log(User.getCount());
var func = User.getCount;
console.log(func());
// 1和undefined。

var func = User.getCount.bind(User);
console.log(func());

函数式编程,实现函数multi(2)(3)(4)=24

function multi(n){
  var fn = function(x) {
    return multi(n * x);
  };
  fn.valueOf = function() {
    return n;
  };
  return fn;
}
multi(1)(2)(3)(4) == 24; // true

vue

vuex的原理
https://www.cnblogs.com/LittleStar-/p/9982606.html
vue-router传参和监听变化
https://blog.csdn.net/TJH000/article/details/86573405
过滤器和指令的使用，是否使用过全局过滤器
https://blog.csdn.net/rainbow8590/article/details/78330639
全局过滤器
https://www.jianshu.com/p/6ead0ed825da
组件通信方式了解几种？
props传递
event.emit,on
bus组件
vuex
https://blog.csdn.net/weixin_44547882/article/details/102496270
https://blog.csdn.net/wandoumm/article/details/80167526
计算属性compute和侦听器watch，可否修改compute里的值，怎么改
https://blog.csdn.net/mystric594/article/details/77849361
https://blog.csdn.net/eagle_88/article/details/72957496
slot插槽，slot-scope使用
https://blog.csdn.net/qq_40616529/article/details/94033417
this.$nextTick的用法
https://www.cnblogs.com/jin-zhe/p/9985436.html
https://blog.csdn.net/gaoxin666/article/details/96143571

react

创建组件的方式
createClass、stateless function、extend Component/PureComponent
https://segmentfault.com/a/1190000008402834
redux工作流程
https://segmentfault.com/a/1190000018333262?utm_source=tag-newest
https://segmentfault.com/a/1190000020327447
组件生命周期
https://www.jianshu.com/p/5f51e0f9ad39
react-router-v4理解https://segmentfault.com/a/1190000010472619
https://segmentfault.com/a/1190000016250098
高阶组件https://www.jianshu.com/p/585f3dd49073

webpack

介绍一下webpack的工作原理
https://www.jianshu.com/p/8dd5885bfb66
简单介绍一下webpack里面的配置项
https://www.cnblogs.com/QxQstar/p/5961387.html
使用过哪些webpack的插件和loader
https://www.cnblogs.com/t-sun-j/p/10278376.html
https://juejin.im/post/5980752ef265da3e2e56e82e
webpack中如何配置实现多入口页面
https://blog.csdn.net/joyvonlee/article/details/96427591

小程序

谈谈你对小程序开发的理解
小程序点击按钮传参是怎么做的
小程序开发中是否用了框架，ui组件样式怎么写的

业务相关

项目文件结构，代码规范
权限控制如何实现，页面级和按钮功能级
登录流程
项目中有没有遇到特别困难的问题，是如何解决的
是否了解nodejs，是否使用过npm发布组件，描述过程

其他

前端性能优化
有哪些好的习惯或方法可以提高工作效率
前端开发的理解，职业规划，发展方向
开发中遇到过什么难点问题，项目上有什么对自己提升很大的心得体会
分享一个最近学习的新技术，平时是通过哪些途径来提升自己的技术水平
是否有封装过自己的函数库或组建
介绍一下上个团队的情况，自己在其中担当什么角色
为什么考虑离职，对公司或团队有什么改进建议或看法
你认为前端开发工程师的核心价值体现在哪里
是否采用前后端分离，前后端如何协调定义数据模型
工作中使用那些开发工具，git的使用
平时是否写博客，有没有给团队做过技术分享，有什么心得
你认为前端开发工程师的核心价值体现在哪里
是否采用前后端分离，前后端如何协调定义数据模型
工作中使用那些开发工具，git的使用
分享你最近在学习或想了解的新技术，你学习新知识的途径有哪些
你为什么从上家公司离职呢，对上家公司有什么不满意的地方
浏览器调试工具经常用到那些模块
console、element、sources、network、application（storage、cache）
封装一个时间轴的组件

image.png

// 线条样式
.timeline-item-line {
    position: absolute;
    left: 4px;
    top: .75em;
    height: 100%;
    border-left: 2px solid #e8e8e8;
}
// 圆圈项样式
.timeline-item-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    border: 2px solid transparent;
}
// 文本内容样式
.timeline-item-content {
    margin: 0 0 0 18px;
    position: relative;
    top: -6px;
}

封装一个弹出框组件

// 遮罩层样式
.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,0.8);
}

// 弹窗内容样式
.overlay article {
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
width: 400px;
height: 400px;
}

// 点击遮罩关闭弹窗，点击弹出内容冒泡导致关闭，防止事件冒泡
$(’.overlay’).click(function(e){
if (e.target == e.currentTarget)
closeOverlay();
});

笔试编程

给定一个数组，编写一个函数去除重复元素，如:
输入：arr=[1,2,3,2,3,4,5,2,3]
输出：uniq(arr) = [1,2,3,4,5]
实现一个flatten函数，将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。如：

flatten([1,[2],[3,[4]]]) = [1,2,3,4]

实现一个find函数，模拟原生的find函数，find(list, predicate)。

在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有元素通过检测则返回 undefined。如果找到匹配的元素，函数将立即返回，不会遍历整个list。

var even = find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// 2

实现一个parseQuery函数，能够解析location的search字符串(不包括'?')。

输入一个search，输出一个object，同名参数则是会成为数组。

let str = "http://localhost:3000/index.html？phone=12345678901&pwd=123123";
var result = parseQuery(str);
console.log(result) // { phone: '12345678901', pwd:'123123' }

将一个扁平数组转换成树状结构

function toChildrenStruct(pidArray, expandLevel) {
    // 将pid结构的树型数据转换成children结构
    const childrenArray = []
    const expandedItems = []
    const itemMap = {}
    if (!pidArray) {
      return childrenArray
    } else {
      for (const item of pidArray) {
        item.key = item.id
        item.value = item.id
        item.label = item.name
        itemMap[item.id] = item
      }
      for (const item of pidArray) {
        const parent = itemMap[item.parentId]
        if (typeof parent === 'undefined') {
          // pid不存在，是顶级元素
          childrenArray.push(item)
        } else {
          if (typeof parent.children === 'undefined') {
            parent.children = []
            if (expandLevel === -1) expandedItems.push(parent.id)
          }
          parent.children.push(item)
        }
      }
    }
    return childrenArray
  }

RoiRoc

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端知识点

知识点htmlhtml5新特性 https://blog.csdn.net/m0_37696296/article/details/81083402websocket理解和使用 https://blog.csdn.net/jing_80/article/details/82111423浏览器模型常见对象window、history、xhr、locationhttps://www.cn...
复制链接

扫一扫