前端面试知识点

2019-03-05  本文已影响0人  _旁观者_

html

css

JS

https://www.cnblogs.com/cxying93/p/6106469.html
https://www.zhihu.com/question/349080864

// 主要用于检测引用类型(左边是对象，右边是函数.根据对象的原形链往上找，如果原形链上有右边函数.prototype，返回true;否则返回false)
var obj = {}; obj instanceof Object; //=> true; 
var arr = []; arr instanceof Array; //=> true;
var fn = function() {}; fn instanceof Function; //=> true;

hasOwnProperty() obj对象自身属性中是否具有某个属性
isPrototypeOf()

// 用于测试一个对象是否存在于另一个对象的原型链上。在obj对象原型链上搜寻
    function VFrank() {}
    VFrank.prototype.name = "vfrank";
    VFrank.prototype.age = 29;
    VFrank.prototype.job = "Web Engineer";
    var person = new VFrank();
    console.log(VFrank.prototype.isPrototypeOf(person));// true

ES6

框架

/**
* 1 数据劫持 2 编译模板
* 1 数据劫持 就是 Object.defineProperty 方法，他有get set 方法，get取数据 set设置数据 更新数据了会重新编译数据模板
* 2 编译作用是把 vue 模板转为 浏览器的dom展示在页面上，主要做的那就是把模板上绑定的事件转化为一个个监听器，监视用户的动作，执行updata 方法
* 3 获取接口 重置 data时 就触发 数据劫持的set 方法， set 方法调用 监听器的 update 方法
* 4 页面用户输入 操作时 触发对应的事件，事件有对应的监听器 可以调用 监听器的 update 方法更新数据
*/

https://blog.csdn.net/weixin_45213848/article/details/93231307
https://www.cnblogs.com/yiyiyurou/p/9881156.html

a 触发 this.$emit 给父组件，父组件 用ref.子组件的方法

EventBus.$on(channel: string, callback(payload1,…))

EventBus.$off(channel, {})

前端优化

防抖:  规定一个期限时间，在首次触发事件时，不立即执行回调函数，而是在期限时间后再执行，如果期限时间内回调函数被重复执行，则期限时间重新计时。（100ms 内执行10次，按最后一次的的时间，在延时执行，函数执行需要 一段时间）
节流： 一段时间只执行一次，执行多次按最后一次计算（100ms 内执行10次，只执行最后一次）

https://www.jianshu.com/p/3b782abd27ed

babel

https://www.jiangruitao.com/babel/quick-start/

移动端

// border
:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
// 按钮边框
:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #cccccc;
      border-radius: 26px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }

参考

(function (doc, win) {
  // 以苹果6 375px为标准  1rem为10px
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 2 * (clientWidth / 75) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)


const str = navigator.userAgent.toLowerCase()
const ver = str.match(/cpu iphone os (.*?) like mac os/)
if (!ver) { // 非IOS系统
  // 引入fastclick 做相关处理
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body)
  }, false)
} else {
// 苹果版本 11 以上已经处理了延时
  if (parseInt(ver[1]) < 11) {
    // 引入fastclick 做相关处理
    document.addEventListener('DOMContentLoaded', function () {
      FastClick.attach(document.body)
    }, false)
  }
}

      setTimeout(() => {
        window.scrollTo(0, document.body.scrollTop + 1)
        document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
      }, 10)

// routerjs
const router = createRouter({
  // https://cli.vuejs.org/zh/config/#publicpath
  base: '/www/', // 这个是服务器的访问路径配置
  ...
  routes
})
export default router

// vue.config.js
module.exports = {
  // 安卓不能访问 带 # 号的url 改成 history模式了
  // 参考 https://www.cnblogs.com/tugenhua0707/p/8127466.html
  publicPath: process.env.NODE_ENV === 'develop' ? '/' : '/www/',
...
}

http

算法

面试题

打包工具

职业规划

http://www.cnblogs.com/lvshaonan/p/8693301.html

上一篇 下一篇

猜你喜欢

热点阅读