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

陈发良 等级 589 1 1

1 问题:在ios设备,怎么判断玩家是从通过浏览器进入,还是通过主屏幕点击进来的? 解决方法:(不刷新页面,但是改变页面的url地址) 1 用户在第一次使用浏览器进入的时候,给url地址添加标记, 2 当用户添加到主屏幕的时候,就多了标记 3 网页打开的时候,判断是否有这个标记,如果有这个标记,就是通过主屏幕进入,如果没有这个标记,就是通过浏览器进入

主要的代码为: //不刷新页面,更改页面的url var originUrl=window.location.href; var valiable = originUrl.split("?")[0]; window.history.pushState(null, null, valiable+"?name="+self.dname+"&line="+type+"");

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;

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文件中,添加以下代码

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代码提示

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript中的“ new”关键字是什么?
### 问题: _The `new` keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming languag
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。 在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。 在执行
Node.js
1.Node来历 --------     2009年,正是推出基于Javascript语言和V8引擎的开源Web服务项目,命名为Node.js,Node.js是第一次把Javascript带到后端开发。全很很多开发人员都熟悉Javascript,所以Node.js一下子就火了。     Javascript语言本身是完善的函数式语言,在前端开发时,开发
Node.js 简单学习
明白 JavaScript 语言,你就会用 Node.js 了。最常见的运行 JavaScript 语言的地方就是用户的浏览器,几乎所有的浏览器上都有个 JavaScript 引擎,这个引擎负责运行在页面中嵌入的 JavaScript 代码。代码是在用户的浏览器上运行的,用户那头叫前端(Frontend),服务器这头叫后端(Backend)。Node.js
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"