前端工作一年的你必须掌握的铁饭碗

我若亦如风
502 阅读6分钟

工作也有一段时间了，一直没有时间整理，前端的知识又是比较杂乱的，对于记忆力并不怎么好的笔者来说，无疑是残酷的。多次被“收拾”之后，算是长记性了，开始记录工作中一些常用知识，当作储备。以下为笔者不定期更新内容，感谢您的阅读！！！

HTML必备

1. 前端接触过的框架有哪些？

Bootstrap、Vue、Jquery、Element UI、uView等。

2. 行内元素、块元素、行内块元素，三者有什么区别，代表标签有哪些？

  • 行内元素：设置宽高无效；设置margin，左右生效，上下无效；设置padding上下左右都生效；在一行显示。主要标签有：a、b 、span、img、input、select、strong等。

  • 块元素：设置宽高生效；设置 margin/padding 上下左右都生效；多标签自动换行。主要标签有：div、ul、li、dl、dt、dd、h1-5、p等。

  • 行内块元素：设置宽高失效；设置margin/padding生效；不换行，从左向右排序显示。

三者转换：

  • display:inline; 转换为行内元素
  • display:block; 转换为块状元素
  • display:inline-block; 转换为行内块状元素

3. src与href有什么区别

  • src：替换当前元素。指向外部资源，将内容嵌入到当前标签所在位置。
  • href：建立链接。指向网络资源位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

玩转CSS/CSS3

1. css的加载方式有几种？优先级排序？

  • a.通过 @import 引入（外部样式）
  • b.通过 标签引入（外部样式）
  • c.通过 标签引入（内部样式）
  • d.在标签中通过style属性直接写入（内联样式）

优先级：d > c > b > c

2.实现文本超出显示省略号

实现单行文本超出显示省略号

 .ellipsis {
    width: 100px;
    height: 200px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

实现超出多行文本显示省略号

.ellipsis1 {
    width: 100px;

    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

说明：-webkit-line-clamp 的值决定要显示的文本行数。如：ebkit-line-clamp: 2; 超出2行显示省略号。

javascript 技术

1.js数组有哪些常用方法？

  • 返回新数组，不改变原数组
    • json 数组转字符串
    • concat 合并两个(多个)数组
    • slice 截取([))部分数组
    • map 遍历数组，与 forEach 都能实现遍历数组相同，不同之处在于 forEach 改变原数组值
    • every 检查数组中每一个元素是否都满足条件，全满足返回 true，有一个不满足返回 false
    • some 检查数组中是否有元素满足条件，有一个满足返回 true，全不满足返回 false
    • filter 返回数组中符合条件的元素
    • reduce 数组累加器，最终计算为一个值。 接收 (callbackfn, ?initialValue) 两个参数。
  • 返回新数组，该变原数组
    • pop 删除数组的最后一个元素，返回该元素
    • push 添加一个（或多个）元素到数组最后，返回添加后的数组长度
    • shift 删除数组第一个元素，返回该元素
    • unshift 添加一个（或多个）元素到数组开头，返回添加后的数组长度
    • reverse 倒序数组
    • sort 不稳定排序，根据Unicode编码，如：let arr = [1, 2, 12];console.log(arr.sort) // [1, 12, 2]
    • splice 向数组指定位置添加/删除多个元素

2.函数节流

函数节流（throttle）,在一定时间内只执行一次函数。最常用实例：实时搜索。

/**
 * 
 * @param {Function} callback 回调函数
 * @param {Number}   wait     间隔时间
 * 
 * @return {Function} 节流函数
 */
function throttle(callback, wait = 3000) {
    let timer = null;
    let startTime;
    return function () {
        const ctx = this;
        const args = arguments;
        const now = +new Date();
        if (startTime && now < startTime + wait) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                startTime = now;
                callback.apply(ctx, args);
            }, wait);
        } else {
            startTime = now;
            callback.apply(ctx, args);
        }
    }
}

// 调用
let throttling = throttle(() => console.log('br'))
setInterval(() => throttling(), 1000) // 每1s执行一次，但是打印 'br' 是每3s打印一次

3.函数防抖

函数防抖（debounce），在函数触发之后 n 秒后执行回调，如果在 n 秒内重新触发了操作，则清除之前操作，重新开始计时。

/**
 * 函数防抖
 * @param {Function} fn    回调函数
 * @param {Number}   wait  间隔时间
 * 
 * @return {Function} 
 */
function debounce(fn, wait = 1000) {
    var timer = null
    return function () {
        if (timer !== null) {
            clearTimeout(timer)
        }
        timer = setTimeout(fn, wait)
    }
}

// 调用
const handle = () => console.log('--')
window.addEventListener("resize", debounce(handle, 1000));
// 更改浏览器大小，停止推拽后1s输出信息

可以看出上面的防抖只能是被动触发（时间到了在触发），但是我们有一些场景确实需要先进行触发，在控制时间卡控。因此有 立即执行 和 非立即执行 。

/**
 * @desc 函数防抖
 * @param func 需要执行的函数
 * @param wait 延迟执行时间（毫秒）
 * @param immediate---true 表立即执行（第一次是否执行），false 表非立即执行
 **/
function debounce(func, wait, immediate) {
    let timer;

    return function () {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timer = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }
}

对比：

  • 函数节流：先执行回调，后控制n秒内不在请求
  • 函数防抖：先控制n秒内没有操作（如果有操作，清空重新开始计时），后执行回调

4.对比 session 和 cookie 的区别

5.http 和 https 在传输上有什么区别吗？

Vue

1.Vue 响应式原理是怎么实现的？

响应式的数据分为两类：

  • 对象，循环遍历对象的所有属性，为每个属性设置 getter、setter，以达到拦截访问和设置的目的，如果属性值依旧为对象，则递归为属性值上的每个 key 设置 getter、setter
    • 访问数据时（obj.key)进行依赖收集，在 dep 中存储相关的 watcher
    • 设置数据时由 dep 通知相关的 watcher 去更新
  • 数组，增强数组的那 7 个可以更改自身的原型方法，然后拦截对这些方法的操作 ○ 添加新数据时进行响应式处理，然后由 dep 通知 watcher 去更新 ○ 删除数据时，也要由 dep 通知 watcher 去更新

2.methods、computed 和 watch 有什么区别？

  • methods 和 computed：在一次渲染中，多个地方调用同一个methods或computed属性，methods会执行多次，computed只执行一次。
  • methods 和 watch：完全是两个东西，watch中的一些复杂逻辑可以抽离到methods中实现。
  • computed 和 watch：本质是一样的，内部都是通过 Watcher 来实现的。区别在于：1.使用场景上；2.computed是懒执行，且不可更改。

3.Vue 的初始化过程（new Vue(options)）都做了什么？

  • 处理组件配置项
    • 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上
    • 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
  • 初始化组件实例的关系属性，比如 $parent、$children、$root、$refs 等
  • 处理自定义事件
  • 调用 beforeCreate 钩子函数
  • 初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上
  • 数据响应式，处理 props、methods、data、computed、watch 等选项
  • 解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
  • 调用 created 钩子函数
  • 如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount
  • 接下来则进入挂载阶段

4.Vue 数据响应式的入口 initState 方法都做了什么？

可以看出，初始化分别处理 props、methods、data、computed、watch。

  • 优先级：props、methods、data、computed、watch， 其中 computed 中的 key 不能和 props、data 中的 key 重复，methods 不影响。

vue3

1.如何在 setup 中使用 store(vuex) ？

方法一： 通过从 vuex 引入 useStore

// 部分代码实现
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
    setup() {
        const store = useStore()
        console.log(store) // 返回 vuex对象
    }
})

方法二： 通过 getCurrentInstance 方法返回的数据中读取

import { defineComponent, getCurrentInstance } from "vue"
export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        // proxy.$root.$route
        // proxy.$root.$router
    }
})
avatar
文章
阅读
粉丝