前端时间
文章平均质量分 87
恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网(原生)开发;着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ,欢迎star!
展开
-
为了验证某些事,我实现了一个toy微前端框架【万字长文,请君一览】
众所周知微前端是企业中前端发展的必经之路。我司搭建了自己的微前端脚手架工具,它将项目变成了“多页应用”,跳转方式由这类api进行。所以笔者之前在想:这种方式跳转能不能有动画效果呢?在“上层建筑”中进行“反直觉”的操作,结果当然是失败的。但是笔者又有了一个新想法:自己实现一个微前端框架,由通过劫持路由和history实现一些小操作!本文将我实现第一版微前端架子的步骤呈现给各位,希望对大家能有一些帮助。原创 2022-11-15 15:39:25 · 3299 阅读 · 2 评论 -
探究vue-router重复路由跳转问题
有时候你在vue项目中做路由跳转时,可能是比如elementUI的memn同级跳转,也可能是比如root.vue中做身份校验跳转,总之,可能会遇到这样的报错:Uncaught (in promise) NavigationDuplicated:...你说他难看吧,也确实难看。但要说是个错误吧,也不影响正常逻辑。但是有错误还是要解决的。这个问题其实是vue-router3版本更新后和老的写法之间的兼容问题。其实有三种解决方法。网上的解决方案几乎都是第一种,但这样是会出问题的!先说导致问题的原因:原创 2021-10-22 23:25:34 · 5468 阅读 · 0 评论 -
我看JavaScript之美妙的“继承”
继承在各种编程语言中都充当着及其重要的角色,由于JavaScript“天生”的灵活性,使得JS在一些场景下急需一种可复用、规范性的解决方法,继承就这么自然而然的出现在了大众的视野当中。随着不断的深入学习JavaScript,突然在某一天发现了好像很多人用于“继承”功能的代码是不同的,那么就有两个问题需要我们回答 ——JS 的继承到底有多少种实现方式?ES6 的 extends 关键字是用哪种继承方式实现的呢?横空出世:es6之extends在es6发布之后,Jser惊奇的发现JavaScri原创 2021-09-23 00:26:53 · 160 阅读 · 0 评论 -
前端监控之处理异常的正确姿势
前端异常一般来说,根据笔者的目前研究,前端异常大体上可以分为两类:由于对语法的不了解、机制的不清楚或是没有做好降级处理而“主动”造成的错误(多为js异常)和由于资源加载、第三方库、浏览器本身机制造成的“被动异常”。第二种异常的解决方式很多,通过各种手段也大多可以避免(比如更换源这种常用手段)。我们主要来说一下第一种!函数的常见处理我们知道,js中充斥着大量的函数,它们承担封装某个具体功能的作用。但是在看许多代码时,笔者发现了一个问题:我们总喜欢用 return false/true; 来表示该函数内原创 2021-08-01 20:33:33 · 2444 阅读 · 2 评论 -
小酌Object、Map和WeakMap
Object对于普通Object,它的优势在于存、取元素,使用非常方便,可直接用字面量方式创建;而且里面属性值可以是不同类型:let obj={};obj.name='mxc';obj.age=18;console.log(obj);但这不是今天的重点。对于 Object,删除其中的属性有两种方式:delete 操作符和 =undefined。delete:delete 会从某个对象上移除指定属性。成功为 true,否则为false:delete obj.age;但这有几点不足原创 2021-06-28 20:54:00 · 1911 阅读 · 1 评论 -
js中的回调函数,你有想过吗?
前言前段时间腾讯三面(没看清要求,好像那个岗也要了解后端知识比如Redis但是我不会,已挂),有一个前端知识把我问懵了:请讲一下js中的回调函数,回调函数是什么?讲真,一直在用回调但是却压根没有想过,确实是我本身的不足。正文回调函数就是一个通过函数指针调用的函数。如果你把函数的指针作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数的时候,我们就说这是回调函数。函数指针,也就是函数的地址,可以看做是指向函数的指针变量。函数指针有两个用途:调用函数和做(别的)函数的参数!官方对回调函数原创 2021-05-27 12:15:03 · 1414 阅读 · 3 评论 -
由两种实现new的方式引发的探究
当你 new 一个构造函数时发生了什么?“众所周知”的三步:创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回 this 指向的新对象,也就是实例。一般来说大概是这样的:function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return typeof res=="o原创 2021-05-05 16:34:03 · 4221 阅读 · 8 评论 -
JavaScript操作符in:由一个问题引发的探究
事情是这样的:大家都知道“内存泄露”这回事吧。它有几个常见的场景:闭包使用不当引起内存泄漏(未声明的)全局变量分离的DOM节点(随意的)控制台的打印遗忘的定时器循环引用其中第 3 点引起了我的注意 —— 我当然清楚地知道它说的是比如:“假设你手动移除了某个dom节点,本应释放该dom节点所占用的内存,但却因为疏忽导致某处代码仍对该被移除节点有引用,最终导致该节点所占内存无法被释放”的情况<div id="root"> <div class="child">原创 2021-04-12 21:55:12 · 5303 阅读 · 12 评论 -
我看es6之数据变化的玄妙
本文要说的就是跟「数据改变」有关的两个API —— 其中最先出场的当然是 Object.defineProperty ,它有着“悠久的历史”;而自es6后,Vue3的使用让 proxy 越来越火,他们之间也算各有优势吧:Object.defineProperty?其实这个API主要是用来设置对象属性的可访问性!现在常用的“添加/删除属性”就是基于“对象属性设置了可写可操作”的前提下。以前看过一道面试题,大意就是:“你能模拟let和const吗?他们有什么不同之处?” 它们有何不同?那无疑就是 变量是原创 2021-04-06 12:57:20 · 3589 阅读 · 8 评论 -
同源页面通信在网页登录方面的应用
为什么一个“普普通通”的网页登录要和“看似高大上”的同源页面通信联系了起来?可能你没有发现:往往如果你的登录页是从主页通过 window.open() 或 js-href 或 <a href="" target="_blank"> 另打开的一个tab,在你登录成功后,要么是重新打开一个主页的tab,要么就要你回到原主页tab刷新一下才可。可是这简简单单的“刷新”或“关闭原主页tab”带来的却是“用户体验”的低水平。如果我们能在登录后返回主页面时“自动同步信息”,会不会更好一点?事实上,比如「原创 2021-03-15 11:16:39 · 4390 阅读 · 14 评论 -
纯CSS实现页面中的列表收拉效果
你可能经常见到下面这样的效果:没错,就是页面上常用的“展开收起”交互形式,通常的做法就是控制display属性值在none和其他值之间切换,但是虽说功能可以实现,效果却非常生硬,所以就会有这样的一个需求 —— 希望元素在展开收起时能够有明显的高度滑动效果。以前的实现可以用jQuery的slideUp()/slideDown()方法,但是,在移动端,因为CSS3动画支持良好,所以移动端的JavaScript框架都是没有提供动画模块的。这里自然而然就想到了CSS3技术。笔者的第一反应就是用height原创 2021-02-28 12:17:52 · 9247 阅读 · 13 评论 -
QQ空间对图片的处理之仿QQ长图预览
不知各位遇到特别长的图片时是怎么处理的?是 截取符合长宽的部分做临时展示?还是 硬要长宽100%模糊(啥也看不清)展示?还是 先拿一个压缩的图片做占位,在鼠标移入或点击时放大预览?今天偶然打开PC端QQ空间时,我发现了一种似乎更好的方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。直到用户点击图片跳转到详情展示:分析这种方式着实让我“眼前一亮”,一定程度上带给了用户新奇的体验感。顺着思路,一键 f12 打开源码,我看到了这样的代码:显而易见,QQ应该是采用了js监听鼠标位原创 2021-02-23 20:47:27 · 5383 阅读 · 4 评论 -
滑动翻页效果实现和移动端click事件问题
前述本文很短~主要是为了总结和讲述移动端click和js事件机制导致的一些问题。(:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我…正文最近做了一个小活动,里面要用到一个效果:滑动翻页。大概是这样的:<!-- HTML代码 --><div class="page-container"> <div class="page" style="background: #dc3b26">1</div> <div class="page"原创 2021-01-23 13:19:32 · 5996 阅读 · 9 评论 -
JavaScript数组索引检测中的数据类型问题
之前在写微信小程序项目时,里面有一个“城市选择”的功能,笔者用的是 <picker-view> 组件,这个组件比较特别,因为它的 value 属性规定是 数组 格式的。比如: value="[1]"。因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的)let val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.pIndex(:项目中存取元素是动态的!上面这是因为要使原创 2021-01-09 20:25:24 · 8039 阅读 · 17 评论 -
【前端特辑】探索a链接实践奥秘
见过a标签各种“千奇百怪”的写法,也探索过它的各种用法;于是迫不及待地想要分享出来 —— 这个在我看来html中最“好玩”的一个标签。原创 2020-11-25 09:11:36 · 7353 阅读 · 8 评论 -
探索浏览器页面关闭window.close()的使用
说起来window.close(),这也是个“不太让人省心”的角色。因为浏览器兼容性千差万别,还对他有诸多限制。使用语法:window.close()场景复现昨天发现有人在csdn上传违禁文件,举报后来到了这个页面:里面那个按钮发现点击无效!就。。。当时就挺尴尬的。不过既然它说是【关闭】,当时就想到了这个堪称“漏洞百出”的close事件,F12打开控制台一看:果不其然看到这顿时就来了兴趣探索过程和解决方案为什么就突然来了兴趣呢?首先,从这行代码中可以看出:这个页面不是通过 w原创 2020-08-19 10:36:51 · 6009 阅读 · 27 评论 -
对于“前端canvas骚操作”的一些理解
canvas ,作为HTML5的「画布」,canvas强大的功能将一直伴随H5走下去。前端使用canvas一般有两种方式:<canvas class="canvas" width="" height=""></canvas>然后通过JavaScript去操控一些属性比如文字:ctx.fillText("一段文字",左上角X坐标值,左上角Y坐标值); //填充//或ctx.strokeText("一段文字",左上角X坐标值,左上角Y坐标值); //镂空.原创 2020-07-16 09:24:41 · 5997 阅读 · 6 评论 -
谈谈css使用中遇到的的一些坑
今天早上,当我鼠标无意中移入某课网某一页面中的“扫码下载APP”的fixed图上,看到一张二维码从这个图的相对底部慢慢、慢慢的移上来,或者说:展开 时,我就知道,今天有事干了。。。我大致分析了一下,欸,觉得挺简单的,然后兴冲冲地去编译器上噼里啪啦,然后,,,错了,(真的是一顿操作猛如虎,一看战绩…)结果和我的预期,完全不符!这是预期展开一半的效果:而这是我开始做的展开一半的效果:把从上...原创 2019-10-28 19:58:50 · 532 阅读 · 0 评论 -
移动Web开发适配绝招rem
这两天回头巩固知识点,才算真正的了解了rem(一直以为就直接用就行,尴尬)啥是remrem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过rem计算的规则是依赖根元素,em是依赖父元素计算。rem布局原理: 拿到设计稿,按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来...原创 2019-10-17 09:13:14 · 757 阅读 · 11 评论 -
实例解读ajax发送请求与数据响应
Ajax前后端数据交互——通过在后台与服务器的少量数据交换,实现页面异步(局部)更新。异步 -> XMLHttpRequest后台 <- (交换数据) -> 服务器适应网址:var request;if(window.XMLHttpRequest){ request=new XMLHttpRequest(); //IE7+、Firefox、Chrome...}...原创 2019-08-24 13:31:30 · 974 阅读 · 0 评论 -
CSS是如何实现卡片3D翻转效果的
先上代码:HTML<div class="main"> <div class="box b1"> <p>你就是云风清吗?</p> </div> <div class="box b2"> <p>我是云风清</p> </div>...原创 2019-10-07 09:27:15 · 1884 阅读 · 1 评论 -
jQuery的Ajax的responseText为undefined!
先扯一个故事吧:早些时候我刚接触JavaWeb的时候,碰上了一个问题:以字符串形式在页面输出“您好中国hello”开始我是这样写的:response.getWriter().write("您好中国hello");发现页面上是这样的:这一看就是响应的编码格式问题了。于是我查阅资料,改成了这样:response.setCharacterEncoding("UTF-8");respo...原创 2019-10-05 17:04:07 · 3934 阅读 · 0 评论 -
JavaScript网页特效:年月日三级联动自动更新以及innerHTML的用法
进入正题之前,先说说js中innerHTML的用法innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;如:<div id="aa">这是内容</div> ,我们可以通过 document.getElementById('aa').innerHTML 来 获取id为aa的...原创 2019-05-31 09:15:18 · 559 阅读 · 0 评论 -
案例总结:有趣的css3渐变
不打算多说(说太多没用,要学会查看文档),但打算细聊。(文中有实例)背景由css -> css3,确实发展了很多,页面更加灵活,“动画”也被强调。以“transition”、“tranform”、“animation(-duration)”属性为首的N大属性让前端开发者往往“欲罢不能”。浅谈“渐变”横向渐变、径向渐变、由内而外。。。这里给大家分享几个有趣的渐变色,用来丰富页面。...原创 2019-05-27 20:08:26 · 938 阅读 · 0 评论 -
HTML+css+js模拟iframe——点击切换选项卡
前言想为某网站前端页面加一点关于<p>的样式特效,自然而然想到了一个神奇的东西——选项卡。第一个想到的方法竟然是iframe,我去,一个我还完全不熟练的操作(不是谦虚!),然后就想:能不能有种方法去简单的替代一下,于是,就有了下图:坐那里了一下午,可算把它改进后加到某网页中了。。。效果还不错。代码展示<!DOCTYPE html><html>...原创 2019-05-17 20:41:57 · 2316 阅读 · 4 评论 -
实例展示:用css实现网页图片特效
前言今天看到某网站上有关于“用js实现图片的缓慢伸展”和“图片缩放”的课程,不禁心血来潮,想要写篇文章,也算是纪念一下曾经被难倒的问题吧。先来说一下用js实现图片缓慢缩放效果在我设计的某网页中,有这样一串代码:``` ```最后一个bb6从后面代码可以看出,这是没有相关特效的div,故将其图片放在了css中。(图片的两种引...原创 2019-05-17 13:55:39 · 8750 阅读 · 0 评论 -
实例精剖:js实现鼠标悬浮时指定位置弹出图片
当然,弹出有两种方式,在此就不显示“在原位置替换”的方式了,在其他博文中有提到。其实这个很简单的实现,就是利用js中document操纵文本的特性。下面是我实现某官网时所用的方式:<div class="footer-top-right-bottom"> <a href="javascript:void(0)" onMouseout="hid...原创 2019-05-15 20:21:57 · 2861 阅读 · 0 评论 -
项目总结与感悟:关于页面性能的优化
感悟终于完成了这一项目,感觉。。。又激动又刺激将我的实战经验分享给大家:先说说页面中的图片吧,学前端的都知道的,图片的导入有两种方式:一是在HTML中用img格式;二是在css中用background属性。可是问题来了,在css中导入时有时会引起某个属性值显示不出来,这就很尴尬了,你想对一个图片既旋转又拉伸,结果。。。如下示例:(HTML) <div class="bb4"...原创 2019-05-18 21:55:29 · 1603 阅读 · 1 评论 -
js案例:导航栏下拉至一定高度时固定的特效
这篇文章现在才发,因为和…相关,不能过早泄露“机密”。。。情境导入实现社团网站,在下面浏览评论设置时发现一个问题:如果你的网页很长,但你又设置了“登录/注册后才能评论”,这就很尴尬了,某一个用户在评论时突然想到还未登录,然后废好大劲回到顶部去点击登录按钮,这还不算什么,毕竟可以设置“回到顶部”锚点,但重要的是他登录完成后还要重新划到最后去。。。用户体验感极差了可以说。那么,我们可以设置实...原创 2019-05-14 08:42:58 · 2066 阅读 · 0 评论 -
js新特性辨别:let和var的区别及作用域
自ECMAScript 6出来,加入了两个新的关键字 const 和 let…从前后代码对比,唯一的区别就是在循环创建i的方式不同,一个是var,一个是i,而var出的变量,在学习js初期也是踩了不少作用域问题的坑,在循环执行完成后,i的值任然存在,而且会在离开循环行再++一次,让打印出了10;再看下方用let创建的i在离开循环时,这个i已经是被销毁的变量,所以在这个地方与var创建的变量的区...原创 2019-06-01 19:12:15 · 546 阅读 · 0 评论 -
JS禁止复制粘贴、屏蔽鼠标右键和F12查看
前几天看慕课的视频的时候,突然(真的是“突然”)发现:视频播放的时候点击鼠标右键没有动静(我本想打开控制台…),思考再三,觉得这在一些网站上非常有用,于是乎,放出来让大家伙看看:首先,什么是“鼠标右键”?jQuery引入鼠标右键事件:$('div').mousedown(function(e){ if(e.which===3){ alert('这是鼠标单击右键事件'); }else ...原创 2019-10-04 13:34:56 · 962 阅读 · 0 评论 -
前端性能优化实践:让视频加载也“懒”一点
在 本专栏 中,我向大家介绍了图片的加载优化,其中“最具盛名”的便是 懒加载 了。与图片一样,视频同样可以延迟加载,来达到性能优化的目的。正常情况下加载视频,都是使用<video>标签,那么对于一些需要用户自己播放的视频,最好指定<video>标签的preload属性为none,这样浏览器就不会预加载任何视频数据。为了占用空间,我们用poster属性为其占位:<...原创 2019-09-05 13:07:35 · 7951 阅读 · 0 评论 -
我看Web:什么是JSON
什么是json?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格...原创 2019-08-02 13:30:20 · 471 阅读 · 0 评论 -
【手记】前端页面中的“居中”(持续更新)
我想了很久,在夜深人静时还是写下了这篇文章…因为我今天又见到了一个“老朋友”——居中!说起来,我也积累了很多使元素居中的方式了,故而,在这里总结一下。。。居中分为很多种,常用的也大致就那么几类,比如:文字的居中,图片的居中,盒子的居中,等等。你当然 不能对div 用 text-align 属性,这没有一点效果。原创 2019-07-15 21:41:22 · 1864 阅读 · 0 评论 -
【Ajax】跨域的产生及如何解决跨域问题
什么是跨域? 为什么会出现跨域浏览器为了保护用户, 保证用户安全,使用同源策略 来针对请求做出响应。同源:协议相同:protocol(ftp file http https 等协议)不同得协议被服务器认为不同源域名相同:domain网站得域名必须一致。端口相同:port默认80端口,但是不同端口也被认为跨域以上任何不相同都被认为是跨域。简单的说:1 · 使用xmlHttpReque...原创 2019-07-14 11:17:18 · 1006 阅读 · 0 评论 -
【css3技术路】仿放大镜效果的几种方式原理解析
文章标题为啥是“仿放大镜”?因为我今天要说的,并不是像一般说的,鼠标移入时旁边弹出一个局部的大图,那很好写,也没多少技巧(用相对定位定位父元素(或说:原图),绝对定位定位局部大图(目的:让它处于原图旁边某位置),在旁边用css控制样式并用鼠标事件监听,,,当然,你也可以直接用jQuery中的接口——$(‘类名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoo...原创 2019-07-14 11:16:27 · 1425 阅读 · 0 评论 -
【手记】浅谈“闭包”(JavaScript & Python)
窥探“闭包”先放两个例子看看:function outer(){ var localVal=30; return function(){ return localVal; }}var func=outer();func(); //30上面程序就是一个小的实例,它和下面的普通程序本质上是一样的:function outer(){ var localVal=30; r...原创 2019-07-09 13:12:02 · 472 阅读 · 0 评论 -
HTML+CSS+JS网页设计——关于一个问题的回答
昨天浏览csdn的blink,发现有一个关于前段方面的问题先冒昧给这位点建议:一定重视“布局”,还有就是分布之间的关系。其实学到后面你会发现,哇,这些不都是盒子(即div)之间的组合和排列吗。。。《阿里巴巴java开发手册》中说过,要常用“组合”而不是“衔接”。(应该是这么说的吧,曾经看过这本书)这对于网页设计的开发也尤为适用!还有,不要再HTML+css里停留太长时间,如果你是一心走前...原创 2019-04-20 17:06:40 · 13266 阅读 · 0 评论