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

陈发良 等级 348 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代码提示

收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
2020 Javascript 明星项目
{{{width200}}} 译者:@Angelo Zuo 原文(https://risingstars.js.org/2020/zh) 欢迎来到
对 JavaScript 中事件循环的理解​
一、是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加