JavaScript
文章平均质量分 76
tomorrownan
Hello,tomorrownan.
展开
-
javascript:在当前页面URL后追加参数并获取相关属性
往往单点登录和一些表单回显涉及到操作页面的URL。这里为了是第三方访问我司的项目时自动回显查询条件,因此需要在浏览器url处追加一些参数,然后再从URL中取出相关属性用于表单的回显和接口的请求。如下:追加参数var url_p = window.location.origin+window.location.pathname+'?campusId=2&managerid=B716B...原创 2020-04-08 15:41:58 · 5301 阅读 · 0 评论 -
forEach中执行return无法跳出函数的解决方案
遇到一个很奇葩的问题,只怪自己基础不牢靠。在写提交函数时对字段是否填入做一个判断。要求每一个字段都填如以后才可以触发保存函数,否则不执行保存函数。按照自己的习惯,我就顺手写了forEach循环,代码如下:handleSub() { this.fields.forEach((v) => { if (v.orderid === 0) { this.$message.err...原创 2020-03-05 15:04:46 · 3595 阅读 · 0 评论 -
el-input和input输入框只允许输入数字小数点或某些字符
在表单验证中常常会有el-input和input输入框只允许输入数字小数点或某些制定字符的需求。实现方式也多种多样,element自带的表单验证和自定义验证器都可以实现,这里使用javascript的oninput事件,然后配上正则表达式,只需要一行就可以实现需求了。原理:oninput 事件在用户输入时触发。该事件在 <input> 或 <textarea> 元素的值...原创 2020-01-14 20:35:56 · 10767 阅读 · 0 评论 -
不用防抖节流解决表单连续点击提交
背景:前端的表单提交功能,理论上是点击一次请求一次接口也就提交一次,无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据,前端也会显示多个提交成功的提交。影响体验。测试提出要一段时间内只可以提交一次。直接使用状态判断。解决:在全局data函数中定义一个状态变量,如下:在提交函数中通过变换subFlag变量的状态控制提交测次数。如下:submitSetting() { if (th...原创 2019-12-26 15:12:38 · 773 阅读 · 2 评论 -
根据日期获取对应的是星期几、判断数组类型
背景:前端有一个需求是展示日期和星期,ui设计如下:而后端接口只返回了日期,所以前端要根据日期得到该日期对应的星期。封装函数如下:getWeek(t) { const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] // Date.parse(t):转化成时间戳 // new Date(Date.parse(t)): ...原创 2019-12-26 14:26:27 · 974 阅读 · 0 评论 -
封装函数:按数组中对象某字段的值从小到大排列
// 从小到大排列compare (item) { return (a, b) => { const val1 = a[item] const val2 = b[item] return val1 - val2 }},例如: data中定义的对象如下:data () { return { funnelData: [] } },...原创 2019-12-12 21:59:55 · 346 阅读 · 0 评论 -
封装函数:按照需要格式格式化时间
背景:后端返回的时间是时间对象,格式不是yy-mm-dd hh:mm:ss或者yy-mm-dd hh-mm-ss时间格式的,所以前端要对拿到的数据做一些处理才可以展示到页面上。这里将处理方式记录下来,方便以后直接拿来使用。如下:// 格式化时间,一位数不足两位 format(t) { if (t < 10) { return '0' + t } else { ...原创 2019-12-12 21:45:09 · 225 阅读 · 0 评论 -
封装函数:数组对象中去除相同ID的项、递归找到所在ID的所有父级元素
记录下项目开发中遇到的两个实际需求。1.数组对象中去除相同ID的项从后台接口拿到的数据格式是数组对象,但是会存在前后调用同一个接口数据项重复的现象。导致页面中数据显示有重复的。所以在从接口取到数据以后,去除数组中有相同项的对象。比如我从接口拿到的数据如下:list: [ { mapcode: 7, name: '快鱼', price: 2 }, { mapcode: 8, na...原创 2019-11-05 21:23:54 · 2158 阅读 · 0 评论 -
我们一起写算法08
已知有一个字符串foo='get-element-by-id',请写一个function将其转化为驼峰表示法getElementById。思路:首先根据’-'分割字符串为单个单词。从第二个单词开始将首字母转为大写。再将单词拼接用到的js方法:toUpperCase:字母转为大写。substr:在字符串中抽取从 start 下标开始的指定数目的字符。charAt() ...原创 2019-08-01 20:58:49 · 355 阅读 · 0 评论 -
函数节流与防抖实现
问题引出:什么是函数节流?什么是函数防抖?1. 函数节流函数节流:一个函数执行一次后,只有大于设定的时间周期才会执行第二次。场景:有个需要频繁触发的函数,出于性能优化角度,在规定的时间内,只让函数触发的第一次生效,后面的不生效。代码实现: /* 节流函数:throttle fn: 要被节流的函数 delay:规定的时间 */ function throttle(fn,d...原创 2019-08-03 18:12:48 · 5128 阅读 · 3 评论 -
前端面试必备总结:页面布局5种解决方案
在一面或者二面中,页面布局是经常问到的点,昨天在慕课网听了老师讲的课,今天自己敲下代码整理下。主要解答三栏布局下面两题目,两栏布局与三栏布局相似。1.高度已知,左右宽度固定,使中间自适应。2.上下高度固定,使中间自适应1.左右宽度固定,中间自适应float解决方案css实现:html *{ padding: 0px; margin: 0px;}.box div{ min-...原创 2019-07-12 14:43:01 · 1946 阅读 · 0 评论 -
JavaScript高频易错题目三道(4)
题目1getName七问七答,下面代码,输出结果分别是?function Foo(){ getName=function(){ console.log(1); } return this}Foo.getName=function(){ console.log(2);}Foo.prototype.getName = function() { // body... co...原创 2019-06-11 17:46:22 · 422 阅读 · 0 评论 -
JavaScript高频易错题目三道(3)
题目1如下代码输出的结果是什么?console.log(1+"2"+"2");console.log(1+ +"2"+"2");console.log("A"-"B"+"2");console.log("A"-"B"+2);console.log(1+ -"1"+"2");console.log(+1 +"1"+"2");A 122 122 NaN NaN 112 112B 1...原创 2019-06-11 11:57:47 · 484 阅读 · 4 评论 -
JavaScript高频易错题目三道(2)
题目1现有如下HTML结构:<ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li></ul>运行如下代码:var elements = document.getE...原创 2019-06-10 17:27:36 · 573 阅读 · 0 评论 -
JavaScript:常用基础
JavaScript用于制作web页面交互效果,例如:轮播图、Tab栏(选项)、地图和表单验证等。1.web前端三层w3c的规范:行内样式(淘汰)结构层:HTML 从语义角度描述页面的结构。样式层:CSS 从审美的角度美化页面。行为层:JavaScript 从交互的角度提升用户体验。2.JavaScript书写与执行规则1.javascript与html,css一样,对...原创 2018-11-04 21:45:34 · 820 阅读 · 0 评论 -
JavaScript进阶:变量提升、函数提升、js解析机制
对变量提升、函数提升和js解析机制的理解。什么是变量提升呢,如果不能很好的理解变量提升,程序就容易出现一些问题。理解变量提升,也可帮助我们很好的弄懂js的解析机制。1.什么是变量提升?变量提升定义变量提升就是将变量声明提升到它所在作用域的最开始的部分。变量提升的理解理解一:该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去。理解二:变量可以先使用再声明。...原创 2018-12-05 21:12:59 · 668 阅读 · 0 评论 -
JavaScript进阶:严格模式及其限制效果
js严格模式可以消除代码运行的一些不安全之处,保证代码运行的安全,消除Javascript语法的一些不合理、不严谨之处。同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下可能不能运行。理解严格模式,有助于更细致深入地理解Javascript。Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 S...原创 2018-12-06 16:21:55 · 602 阅读 · 0 评论 -
JavaScript进阶:创建对象与原型链
适逢传说中的金三银四,最近在阅读掘金和GitHub的时候看多多次各路大牛出的关于原型链的题目,如果没有深刻的理解,过一段时间就会又不知所云。我也是在做过此类题目一段时间后又模糊了其含义。因此特意在笔记本上画了原型对象与原型链的示意图来帮助理解。提到这,我个人还是比较喜欢使用纸质笔记本记录知识,平时看到一个小的知识点就可以随手记录下来。本文涉及点:1.面向对象三大特性2.继承3.构造函数...原创 2019-03-21 20:28:25 · 783 阅读 · 2 评论 -
通过一次成功的Ajax前后台通信学习Ajax
看论坛帖子,初次测试ajax功能时大多会遇到Ajax跨域问题导致的无法正常实现ajax通信。1.问题呈现报错如下:原因:报次错原因就是由于ajax涉及到跨域问题导致的。没有在服务器环境里运行含有ajax方法的页面,而是直接通过浏览器打开文件。(类似file:///的访问形式,即file协议) 。解决策略:ajax()请求本地页面,须通过服务器环境运行。2.一次成功的本地测试ajax...原创 2019-04-17 14:44:49 · 730 阅读 · 0 评论 -
你会制作点赞吗?(含动图)
像常见的QQ空间点赞、微信点赞、各种论坛和微博都会有点赞的功能,其实现也是比较容易。用到的css处理知识如下:jquary的$(‘tag’).append()setInterval()定时器css样式透明度opacity定位position字体大小、位置实现代码实现代码如下:<!DOCTYPE html><html lang="en"><he...原创 2019-05-21 11:24:56 · 1144 阅读 · 0 评论 -
js实现图片懒加载原理
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。...原创 2019-05-24 17:21:47 · 125045 阅读 · 42 评论 -
JavaScript高频易错题目三道(1)
前言以前刷过一遍html、css、JavaScript题目,错误率也很大,特别是JavaScript,如果不理解其考察的知识点精髓所在,遇到的错题再次遇到还会错,所以在这里将曾经做错的题目记录下来,并附上解析和答案,希望自己可以掌握这些题目考察的知识。题目1有如下代码,请问执行后输出的值是?var name = "World"(function(){ var name; if (ty...原创 2019-06-06 17:37:21 · 483 阅读 · 0 评论 -
Easy Mock全解及使用
一、什么是Easy MockEasy Mock 是一个可视化的能快速生成模拟数据的持久化服务。在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用JavaScript拦截请求或者利用 Charles、Fiddler等代理工具拦截请求,这样的开发效率比较低,并且产生的数据是写死的,不能去按照一定的规则去变化,并且浪费了非常多的时间,因此有了这个产品的出现,我们可以容易的访问数据,而且...转载 2019-06-14 10:11:35 · 50440 阅读 · 5 评论 -
WEB响应式布局之BootStarp
1.Bootstrap:概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。好处:定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到...转载 2019-06-03 10:53:43 · 313 阅读 · 0 评论 -
JavaScript进阶:作用域、作用域链、闭包
要想弄清楚变量、函数等的生命周期就要先弄清楚作用域。要理解变量提升也要先弄明白作用域。今天看了作用域、作用域链、闭包方面的内容,整理出来,加深记忆。什么是作用域?作用域是可以访问变量、对象、函数的集合,指一个变量的作用范围。它相对于上下文对象是静态的, 在编写代码时就确定了。作用域非常重要,它控制着变量与参数的可见性与生命周期。作用域的作用是什么?隔离变量,不同作用域下同名变量不...原创 2018-12-04 14:48:15 · 613 阅读 · 0 评论