> 前端开发面试题中，关于this指向的问题非常常见，也是大家面试中经常被问到的，今天就来给大家整理一份非常好的前端面试题this指向问题的答案 ## this可以区分环境的，nodejs和js（浏览器端）this指向是不一样的 > nodejs 中this 指向和 浏览器端this指向是不同的，面试过程中可以重点区分一下 * nodejs 全局中this指向：module.exports * 在构造函数中this指向的是它的实例，而不是global * 在函数中this指向的是global ## 重点是js中this指向问题 ### 指向window **单独的this，指向的是window这个对象**，比如： ```js alert(this) ``` **全局函数中的this，指向的是window** ```js function fn() { console.log(this); // this -> window } fn(); ``` > **在严格模式下，this是undefined**

> webpack 工具安装依赖分析文件 > /bin/webpack.js ```js #!/usr/bin/env node // @ts-ignore process.exitCode = 0; // nodejs 表示执行成功，回调函数的err 将为null /** * 用来运行命令行命令的函数 * @param {string} command process to run * @param {string[]} args commandline arguments * @returns {Promise<void>} promise */ const runCommand = (command, args) => { const cp = require("child_process"); return new Promise((resolve, reject) => { const executedCommand = cp.spawn(command, args, { stdio: "inherit"

### 入口 npm run setup > 这个 setup.js 文件的作用是：检测是否安装npm yarn 等包管理工具，检测本地是否有 `node_modules` 文件，如果没有就进行安装，有就下一步 ```js "use strict"; const fs = require("fs"); const path = require("path"); const root = process.cwd(); // node_modules 依赖 const node_modulesFolder = path.resolve(root, "node_modules"); // 依赖中的webpack文件 const webpackDependencyFolder = path.resolve(root, "node_modules/webpack"); function setup() { return checkSymlinkExistsAsync() .then(hasSymlink => { if (!hasSyml

> 官方网站：https://www.lodashjs.com/ ### 安装 #### npm 安装 ```bash $ npm i -g npm $ npm i --save lodash ``` #### nodejs ```js // Load the full build. var _ = require('lodash'); // Load the core build. var _ = require('lodash/core'); // Load the FP build for immutable auto-curried iteratee-first data-last methods. var fp = require('lodash/fp'); // Load method categories. var array = require('lodash/array'); var object = require('lodash/fp/object'); // Cherry-pick methods fo

https://github.com/yaoyongmin/testRN.git

### v-if 和 v-show 区分使用场景 v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。 所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 ### computed 和 watch 区分使用场景 computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed  的值； watch：更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作 运用场景： 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 c

### vue 3.0 六大亮点 * Performance：性能更比Vue 2.0强。 * Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。 * Composition API：组合API * Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念” * Better TypeScript support：更优秀的Ts支持 * Custom Renderer API：暴露了自定义渲染API ### Vue 3.0 项目初始化 第一步，安装 vue-cli： ```bash npm install -g @vue/cli ``` 注意以下命令是错误的！ ```bash npm install -g vue npm install -g vue-cli ``` 安装成功后，我们即可使用 vue 命令，测试方法： ```bash $ vue -V @vue/cli 4.3.1 ``` 第二步，初始化 vue 项目： ```bas

Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsoft/MyLinearLayout 简介 MyLayout是一套iOS界面视图布局框架。其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的。MyLayout功能强大而且简单易用，它集成了iOS Autolayout和Size Classes、android的5大布局体系、HTML/CSS的浮动定位技术以及flex-box和bootstrap框架等市面上主流的平台的界面布局功能，同时提供了一套非常简单和完备的多屏幕尺寸适配的解决方案。MyLayout还提供了Swift版本TangramKit MyLayout的优势 MyLayout的实现内核是基于frame的设置，而不是对AutoLayout的封装。因此在使用上不会受到任何操作系统版本的限制。 有文章表明用frame进行布局的性能要高于用AutoLa

我们在微信小程序开发过程中经常遇到一些文字显示不完整的情况，这个时候可能后面需要展示省略号，也就是： * 单行显示 * 两行显示 * 多行显示 下面是代码，只需要写在 app.wxss 中作为全局样式，用的时候，引用clss即可 ```css /* 单行 */ .oneLine { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 2行 */ .twoLine { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 4行 */ .fourLine { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4;

Vue 允许注册自定义指令，自定义指令包含全局指令和局部指令 #### 全局指令 案例： 注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点 ```js <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script> 使用的时候 v-focus ``` #### 局部指令 ```js <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input

vue 上传组件开发中遇到的坑 - 清楚文件 清空input标签 中file的值 ```html <input ref="fileupload" type="file" accept=".csv" /> ``` ```js // refs 操作 let input = this.$refs.fileupload if (input) { // vulue 为空即可 input.value = '' } ```

::: tip 我们开发过程中经常会出现代码提交错误，分支合并错误的情况，这个时候，代码回滚就非常重要。 ::: ### 回退命令 git reset --hard HEAD^ 回退到上个版本 git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前 git reset --hard commit_id 退到/进到，指定commit的哈希码（这次提交之前或之后的提交都会回滚） 回滚后提交可能会失败，必须强制提交 强推到远程：(可能需要解决对应分支的保护状态) git push origin HEAD --force

### 什么是事件委托 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件，通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件 ### 为什么要进行事件委托（优点） 事件委托可以提高性能： 在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间 事件委托可以减少工作量： 对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量 动态创建的元素，这样可以直接拥有事件： 给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托 ### 事件委托原理 事件委托就是利用事件冒泡原

Snipaste 是一个简单但强大的贴图工具，同时也可以执行截屏、标注等功能。 截图 + 贴图 免费. 免安装. 可个性定制 下载地址：https://www.snipaste.com

::: tip 本文章向大家介绍7种 JS 创建对象的经典方式，主要包括7种 JS 创建对象的经典方式使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 ::: 本篇文章给大家介绍7种非常经典的JavaScript创建对象方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。JavaScript创建对象的方式有很多，通过Object构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点。（内容主要来自于《JavaScript高级程序设计》，还参考了一下别人写的文章。 ### 一、工厂模式 ```js 1 function createPerson(name, job) { 2 var o = new Object(); 3 o.name = name; 4 o.job = job; 5 o.sayName = function() { 6 console.log(this.na

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。 ```js //全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {}, this.$store.st

Vue 组件中name作用其实是有的，但是大家开发中很多人基本都不会在意，今天就来介绍一下Vue组件中的name属性的一些作用 ### vue-devtool vuedevtool中看到的组件名称，其实就是我们name设置的 ### keep-alive Vue中keep-alive 可以针对组件 name 属性进行社会自己

阿里 使用过的Koa2中间件 Koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍Pm2 Master挂了的话Pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何配置React-Router 路由的动态加载模块 服务端渲染SSR 介绍路由的History 介绍Redux数据流的流程 Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 多个组件之间如何拆分各自的State，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块 使用过的Redux中间件 如何解决跨域的问题 常见Http请求头 移动端适配1px的问题 介绍Flex布局 其他CSS方式设置垂直居中 居中为什么要使用Transform（为什么不使用MarginLeft/Top） 使用过Webpack里面哪些Plugin和Loader Webpack里面的插件是怎么实现的 Dev-Server是怎么跑起来 项目优化 抽取公共文件是怎么配置的 项目中如何处理安全问题 怎么实现thi

::: tip Webpack 的运行流程是一个串行的过程，关键字如下： * nodejs 文件操作 * 读取配置 * 入口文件 * loader 和 plugins * 钩子函数 * 文件输入 ::: 从启动到结束会依次执行以下流程： 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件； 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理； 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系； 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会； 输出

### 问题描述 我们做前端微服务，多个服务加载的时候，由于每个项目都是 webpack 打包，偶发性出现加载A服务的文件，但是结果链接到B服务的js文件。 这个问题偶发性出现，也不是必先的。出现的逻辑一般是，先加载一个服务，然后在加载另一个服务，结果，就出问题了，一般问题定位报错都是在路由文件 在 new VueRouter 之前，这个地方，一般会报错。 就是因为多个微服务公用webpack打包方式，导致webpack加载文件，混乱了。 **问题根源是 webpack['webpackjsonp'] 这个属性的问题** ### 官方说法和解决方案 **output.jsonpFunction** 默认值：string = 'webpackJsonp' 仅在 target 设置为 'web' 时生效，通过使用 JSONP 来实现按需加载模块。 JSONP 函数用于异步加载 chunk，或者拼接多个初始 chunk(SplitChunksPlugin, AggressiveSplittingPlugin)。 如果使用了 out