工作问题记录总结2021--1

1

问题：在ios设备，怎么判断玩家是从通过浏览器进入，还是通过主屏幕点击进来的？

解决方法：

通过判断 window.navigator.standalone ||window.matchMedia("(display-mode: standalone)").matches 

2

问题：设置背景图片相关效果

background-image: url(/static/img/20210127233613.398ded8.png);

height: 100vh;

background-size: cover;

position: relative;

background-position: bottom;

3

问题：怎么在网页使用回车换行

解决方法：在该div内添加该css即可

white-space: pre-wrap;

4

问题：怎么使一个盒子，上下左右居中

解决方法：使用定位。上下左右0，margin:auto;

position: absolute;

bottom: 0;

left: 0;

top: 0;

right: 0;

margin: auto;

或者父元素

 display: -webkit-box;

 display: -moz-box;

 -webkit-box-align: center;

 -moz-box-align: center;

 -webkit-box-pack: center;

 -moz-box-pack: center;

5

问题：怎么在移动端使用弹框UI组件

解决方法：

使用layer.js vue版本，相关使用教程可自行百度

6

问题：怎么在vue项目中使用axios？

解决方法：

百度有相关教程，但需要注意的是，post请求传入的参数是data,而get请求传入的参数为params

7

问题;怎么在项目中解决开发跨域问题

解决方法

1 使用vue的proxy代理，需要注意的是，proxy代理的原理是，是向本地生成的临时服务器，进行请求，由本地服务器再想目标服务器进行请求，这样服务器与服务器之间的请求就不存在跨域问题，所以，使用proxy的时候，他发出去的请求域名是本地的域名，这个是重点

2 使用jsonp

3 后端使用ngx处理

8

问题; 对ast语法树的理解

1 ast语法树，能把代码分解为若干个子节点，使用相关工具，可以生成语法树，和根据语法树转化成可执行的js代码

2 相关工具为：

esprima---把正常的js代码，转化成ast语法树，主要api为

esprima.tokenize(program)

esprima.parse(program)

estraverse-----对ast语法树进行解析

escodegen-----根据ast转化成可以执行的js代码

9

问题：页面在弹框时，有遮罩，但让可以滑动遮罩后面的dom，怎么避免这个情况？

使用下面的属性对dom进行配置即可

设置弹框时禁止页面滚动

catchtouchmove='true' 设置弹框时禁止页面滚动 在对应的弹框Dom进行设置

10

问题：在移动端，有时候点击弹框，页面会自动被放大，怎么规避这个问题？

解决方法：

在index.html文件中，添加以下代码

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

11

问题：怎么输入框2端的空格

解决方法：

 function trim(str){ //删除左右两端的空格

     return str.replace(/(^\s*)|(\s*$)/g, "");

}

12 js高效修改对象数组里的对象属性名

问题：有些时候，我们前端从后端拿过来的JSON对象数据，某些字段并不是前端想要的，需要对一些字段名进行重命名。怎么处理比较高效？

解决方法：

一般修改对象数组的对象属性名，最简便的就是通过遍历对象数组的方法进行修改，但是用这个方法，如果处理的数据量很大，它的执行效率是非常低的。

下面介绍一个更高效的方法，即通过正则的方法进行过滤修改。

 //data为数组，title为修改前，name为修改后

JSON.parse(JSON.stringify(data).replace(/title/g, 'name'))   

说明：

1）JSON.stringify()把json对象转成json字符串；

2）使用正则的replace()方法替换属性名；

3）JSON.parse()把json字符串又转成json对象。

13

问题：怎么对数组进行过滤？

解决方法：

使用Array.filter方法，返回一个过滤后的新数组

let newArr = orglist2.filter((item, index, arr) => item.children.length!==0)

14

问题：怎么对用户输入的密码进行隐私保护

解决方法:

可以使用 CryptoJS 对用户的输入的密码进行加密，相关代码如下

import CryptoJS from 'crypto-js'

// 采用ECB模式进行密码加密处理

let key = '30313233343536373839414243444546'

key = CryptoJS.enc.Hex.parse(key)

// 加密

export function encryption(pass) {

const enc = CryptoJS.AES.encrypt(pass, key, {

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

})

return enc.ciphertext.toString()

}

// 解密

export function decrypt(pass) {

const dec = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(pass), key, {

// iv:iv,

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

})

return CryptoJS.enc.Utf8.stringify(dec)

}

15

问题：有什么好看些的阴影效果

box-shadow: 2px 2px 2px 2px #ddd;

box-shadow:0 0 15px #eee;

16

问题：怎么把div变成可编辑div盒子

解决方法：

在div内添加以下标签，就可以把div变成可以编辑

contenteditable="plaintext-only"

变成可以编辑的标签

17

问题：在vue里怎么使用失去光标事件？

解决方法：

@blur

18

问题：怎么判断一个对象是否为空对象？

解决方法：

1.将json对象转化为json字符串，再判断该字符串是否为"{}"

var data = {};

var b = (JSON.stringify(data) == "{}");

alert(b);//true

2.for in 循环判断

var obj = {};

var b = function() {

for(var key in obj) {

return false;

}

return true;

}

alert(b());//true

3 使用ES6的Object.keys()方法

var data = {};

var arr = Object.keys(data);

alert(arr.length == 0);//true

19

问题：怎么对数组和字符串进行相互转化

解决方法：

重点：

数组转字符串，用join

字符串变数组，用split

以下是代码

数组变字符串　　var a,b;     //两变量 一个数组a  一个字符串b

a=new Array{0,1,2,3,4,5};

b=a.join(“-”);   //b="0-1-2-3-4-5"                     

    js里面数组变成字符串用的是 数组名.join("-")；

字符串变数组　　var b="0-1-2-3-4-5"；

var a=b.split("-"); //在-分解                               

 js里面字符串变数组用的是 字符串.split("-");

20

问题：在vue中怎么进行深度监控？

解决方法：需要加deep，设置为true,

深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

深度监控：

watch: {

vests: {

handler(n,) {

// console.log(n, '我是新值')

this.vest.name = n[1].nickname

},

deep: true

}

},

21

问题：对vue中api的$set的理解 $set

 // 调用方法：Vue.set( target, key, value )

 // target：要更改的数据源(可以是对象或者数组)

// key：要更改的具体数据（不要在数据回来后直接加，而是在点击的时候加新数据）

// value ：重新赋的值

22

问题：怎么看数组是存在值，并返回下标？

解决方法：

使用indexOf，如果存在则返回下标，不存在则返回-1

还有一个是使用Array.includes()，方法，判断数组内是否存在某个值，返回布尔值，存在则返回真，否则返回假

23

问题：怎么使用正则全局匹配某个字符串。进行全局替换

解决方法：

① 替换字符串方法：

replace,第一个参数是需要替换的值，第一个参数是替换后的值

② 具体方法为：

string.replace(new RegExp(key,'g'),"b");

24

问题：css怎么控制文字不能被选中

解决方法：

使用 user-select: none;

25

问题： for循环中。break和continue 的作用分别是什么？

解决方法：

1.break：跳出当前循环体，也称结束当前循环体

2.continue：跳出此次循环，继续执行下一次循环

26

问题：如果要使用watch监控对象的单个值的变化，需要怎么做？

解决方法：

1 先在computed中，取出该值，

2 然后，在watch中监控computed的值，这样就可以监控到对象的值是否发生了改变

27

问题：父组件怎么触发子组件的方法

解决方法：

通过使用ref获得dom,然后通过dom就可以使用子组件的方法

this.$refs.mychild.parentHandleclick("嘿嘿嘿");

28

问题：怎么进行对象的深度克隆

解决方法

先通过JSON.stringfly转化成字符串。再通过JSON.parse转化成对象

29

问题：vue中子组件怎么调用父组件的方法

解决方法：

有三种方法提供参考

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

event 指的是方法名

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

这个方法存在一个问题，就是子组件无法得到改方法的返回值

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

跟传对象一样

props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod(); } } }

30

问题：vue指令有哪些？对应的作用是什么

解决方法：

v-model 双向绑定

v-show

v-if

v-else

v-bind

v-for

v-pre 原样输出，变量的值不会进去

v-cloak 必须渲染完成后，才显示DOM

v-once DOM只完成一次渲染，后续的数据变化不再跟他有关系

31

问题：vscode常用插件有哪些

解决方法：

Bracket Pair Colorizer -- 代码颜色

Chinese (Simplified) Language Pack for Visual Studio Code--中文

Live Server -- html变服务器

Path Autocomplete -- 路径提示

Vetur -- vue代码提示

Element UI Snippets -- elemtui代码提示

Prettier - Code formatter -- 代码格式化工具

Reactjs code snippets -- react代码提示工具

auto rename tag -- 标签重合