一些标记

小米渣
180 阅读5分钟

webpack

webpack是干啥的

webpack是一个模块打包工具，是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

常见的loader，解决的问题

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64的方式把文件内容注入到代码中去

source-map-loader：加载额外的 Source Map 文件，以方便断点调

image-loader：加载并且压缩图片文件

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

eslint-loader：通过 ESLint 检查 JavaScript 代码

有哪些常见的Plugin？他们是解决什么问题的？

define-plugin：定义环境变量 HotModuleReplacementPlugin：模块热替换插件 HtmlWebpackPlugin：用于生成html文件 webpack-dev-server：快速搭建本地运行环境的工具

webpack的构建流程是什么

1.初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

2.开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；

3.确定入口：根据配置中的 entry 找出所有的入口文件；

4.编译模块：从入口文件出发，调用所有配置的 Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

5.完成模块编译：在经过第4步使用 Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

7.输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

如何利用webpack来优化前端性

1.压缩代码。删除多余的代码、注释、简化代码的写法等等方式 2.利用CDN加速 3.删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉 4.提取公共代码

什么是bundle,什么是chunk，什么是module

bundle 是由 webpack 打包出来的文件，chunk 是指 webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

vue

MVVM是什么

Model-View-ViewModel 模式。

Model 层: 对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。

View 层:作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。

ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。

各个生命周期的作用

keep-alive

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

组件传值

父子组件传值：props和$emit+v-on

通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息

兄弟组件之间的传值：通过EventBus进行信息的发布与订阅

this.$root.bus.$emit('toLisenerHello', value)
this.$root.bus.$on('toLisenerHello', value => {
    this.value = value
})

vuex管理全局的数据流

computed和watch有什么区别

computed: 具有缓存性,适用于计算比较消耗性能的计算场景,当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed

watch:缓存性，页面重新渲染时值不变化也会执行,如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

Vue是如何实现双向绑定的

利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应

你是如何理解Vue的响应式系统的

任何一个 Vue Component 都有一个与之对应的 Watcher 实例。

Vue 的 data 上的属性会被添加 getter 和 setter 属性。

当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。

js

查找字符串中出现最多的字符和个数

let a = 'sdjksfssscfssdd'
let obj = {}
let num = 0
let value = ''
for (var i = 0; i < a.length; i++) {
    // 如果obj中不存在某个字符属性，就把它添加进去
    if (!obj[a[i]]) {
      obj[a[i]] = []
    }
    // 把值一一填入到obj[a[i]]中
    obj[a[i]].push(a[i])
    }
    // 找出最多项的那个
    for (let attr in obj) {
    if (num < obj[attr].length) {
      num = obj[attr].length
      value = obj[attr][0]
    }
}
console.log(value, num)

性能优化

1.图片懒加载方案

2.资源压缩

3.cdn

avatar
文章
阅读
粉丝