前端常规面试题 - 初级开发01(含答案)

简介: 浅谈一下如何避免用户多次点击造成的多次请求

1.浅谈一下如何避免用户多次点击造成的多次请求。

答:我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这样,可以一定程度上防止用户重复提交导致应用程序上逻辑错误。

还有很多其他的方式进行防止重复点击提交,如


1> 定义标志位:

 点击触发请求后,标志位为false量;请求(或者包括请求后具体的业务流程处理)后,标志位为true量。通过标志位来判断用户点击是否具备应有的响应。


2> 卸载及重载绑定事件:

点击触发请求后,卸载点击事件;请求(或者包括请求后具体的业务流程处理)后,重新载入绑定事件。


3> 替换(移除)按钮DOM

点击触发请求后,将按钮DOM对象替换掉(或者将之移除),自然而然此时不在具备点击事件;请求(或者包括请求后具体的业务流程处理)后,给新的按钮DOM定义点击事件。

 

2.var 和 let 的区别

用var会导致变量提升,出现意想不到的错误,var会自动提升为全局变量,程序容易出错。

而let是es6的关键字,也是声明变量的作用,但是只在当前块内有效,大大提升的程序的安全性


3.对promise有没有了解,promise的作用主要是什么?

promise主要用来解决异步程序的多重回调问题,使得代码更加清晰。

用promise手写ajax

function getJson(url){
    return new Promise((resolve, reject) =>{
        var xhr = new XMLHttpRequest();
        xhr.open('open', url, true);
        xhr.onreadystatechange = function(){
            if(this.readyState == 4){
                if(this.status = 200){
                    resolve(this.responseText, this)
                }else{
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson, this)    
                }
            }
        }
        xhr.send()
    })
}
function postJSON(url, data) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open("POST", url, true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText), this)
                } else {
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson, this)
                }
            }
        }
        xhr.send(JSON.stringify(data))
    })
}
getJSON('/api/v1/xxx')    // => 这里面是就try
.catch( error => {
  // dosomething          // => 这里就是catch到了error,如果处理error以及返还合适的值
})
.then( value => {
  // dosomething          // 这里就是final
})

4. setInterval 和 setTimeout的区别?

都是定时器,前者循环触发,后者只触发一次。


5.Vue3.0和Vue2.0的区别?


Vue 3.0 使用的是Composition API,Vue 2.0使用的是 Optional API。这个是最大的不同。Composition API最大的好处是你可以根据需要决定你要不要import。例如computed这个方法,如果你的页面不需要,就不用import。


Vue 3.0的另一个提升就是完全拥抱ts。


总之一点,感觉越来越像一个简版的Angular。


默认进行懒观察(lazy observation)。

在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。



更精准的变更通知。

比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。

3.0 新加入了 TypeScript 以及 PWA 的支持

部分命令发生了变化:

下载安装 npm install -g vue@cli

删除了vue list

创建项目 vue create

启动项目 npm run serve

默认项目目录结构也发生了变化:

移除了配置文件目录,config 和 build 文件夹

移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件


6. Vue中父子组件怎么传参的,假如是两个完全不相干的组件,其中一个变化了,怎么影响另一个?


父 -> 子: 子组件用prop属性,然后用watcher观察。

子 -> 父:用$emit

假如是两个完全不相干的组件,其中一个变化了,怎么影响另一个? -- 可以使用总线模式,即new Vue(),然后手动注册Event,在需要的地方去触发事件即可。


7. 有没有用过Vuex,在项目中是怎么使用的?解决了哪些问题?

1.vuex是什么?怎么使用?哪种功能场景使用它?

答:vue框架中状态管理。在main.js引入store,注入。


新建了一个目录store.js,….. export 。


解决的问题:多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用


举例:用户信息,一些经常需要使用到的数据,比如数据字典等


2.vuex有哪几种属性?

答:有五种,分别是 State、 Getter、Mutation 、Action、 Module


state:存放公共数据的地方;


getter:获取根据业务场景处理返回的数据;


mutations:唯一修改state的方法,修改过程是同步的;


action:异步处理,通过分发操作触发mutation;


module:将store模块分割,减少代码臃肿;


3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。


如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。


4.页面刷新后vuex的state数据丢失怎么解决?

就是放在localStorage 或者就是sessionStorage ,或者借用辅助插vuex-persistedstate。


5.使用vuex的优势是什么?

其实vuex中的所有功能都能够通过其他的方式进行实现,只不过vuex对这些方法进行了整合处理,使用起来更加便捷,同时也便于维护。


8.你们的前端项目是怎么处理数据字典转换的,比如一个学生信息列表,假如后台给你的性别字段是1,你展示列表的时候怎么展示对应的中文?


elementUI 举例,在el-table-column中加上:formatter

然后,编写对应的格式化方法即可,数据字典可以写死,也可以后台取,还可以放到缓存中,用Vuex维护起来。


相关文章
|
5天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
2月前
|
存储 安全 Java
每日大厂面试题大汇总 —— 今日的是“美团-后端开发-一面”
文章汇总了美团后端开发一面的面试题目,内容涉及哈希表、HashMap、二叉树遍历、数据库索引、死锁、事务隔离级别、Java对象相等性、多态、线程池拒绝策略、CAS、设计模式、Spring事务传播机制及RPC序列化工具等。
58 0
|
2月前
|
存储 消息中间件 NoSQL
每日大厂面试题大汇总 —— 今日的是“京东-后端开发-一面”
文章汇总了京东后端开发一面的面试题目,包括ArrayList与LinkedList的区别、HashMap的数据结构和操作、线程安全问题、线程池参数、MySQL存储引擎、Redis性能和线程模型、分布式锁处理、HTTP与HTTPS、Kafka等方面的问题。
137 0
|
1月前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
64 4
|
2月前
|
负载均衡 前端开发 JavaScript
前端研发链路之开发
本文首发于微信公众号“前端徐徐”,作者徐徐。文章介绍了前端研发链路中的开发部分,重点探讨了开发服务器(dev-server)、热更新(hot-reload)、数据模拟(mock)和代理(proxy)等关键技术,帮助开发者理解其基本原理和应用场景,提升开发效率和代码质量。
39 2
前端研发链路之开发
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
48 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
|
2月前
|
前端开发 JavaScript 开发者
前端angularJs的开发过程
前端angularJs的开发过程
19 1
|
2月前
|
SQL 安全 关系型数据库
第三次面试总结 - 吉云集团 - 全栈开发
本文是作者对吉云集团全栈开发岗位的第三次面试总结,面试结果非常好,内容全面覆盖了Java基础、MySQL和项目经验,作者认为自己的MySQL基础知识稍弱,需要加强。
37 0
第三次面试总结 - 吉云集团 - 全栈开发

热门文章

最新文章