自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

flying meng的菜鸟居

此时此刻,非你莫属

  • 博客(222)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 实战web聊天室(express+socket.io):进退、聊天、重名检测

放纵了这么多天,又到了开学的时候,终于想到不能这么无所事事下去,正巧遇到同学在写Python聊天室,想到能不能实现一个web版的聊天室呢?后台用nodejs,客户端与服务端通信用socket.io —— 这是一个比较成熟的websocket框架了。nodeJs是一个好东西,尤其是在处理消息通讯,网络编程方面,天生的异步IO配合V8引擎,啧啧初始工作安装express, 用这个来托...

2020-02-17 19:36:50 4257 17

原创 vue-cli3项目实战——实现通用管理系统模板前端部分

vue-cli已然成为前端大型项目的必需品,用它实现一个管理系统模板?该怎样………

2019-12-18 10:55:41 991 16

原创 WePY+WebSocket实现聊天小程序

socket通常也称作“套接字”,用于描述IP地址和端口,是一个通信链的句柄。可以用来实现不同虚拟机或不同计算机之间的通信。网络上的两个程序通过一个双线的通信连接实现数据的交换,这个连接的一端称为一个socket。关于这一点 属于网络协议部分内容,想深入了解此部分的请移步专栏:笑谈网络协议WebSocket是基于TCP的一种新的网络协议,它实现了浏览器与服务器全双工通信 —— 允许服务器主动...

2019-12-17 09:05:23 835 4

原创 js设计模式在web前端开发中的实践——网站登录

本文,笔者将以一个登录模块的开发流程,向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。OK,步入正题。加入你是一个大型网站的前端开发人员,经过激烈地讨论以后,决定让你负责登录模块的开发。先说,这个网站很大,所以有很多模块,比如:header头部、nav导航、消息列表、购物车… 这些模块有一个共同的特点,就是必须先用ajax异步请求获取用户的登录信息 —— 这是正...

2019-12-14 19:10:27 2062 8

原创 小程序自定义button组件获取用户信息(用户授权登录)

背景不得不提一句:微信小程序的:获取用户信息的机制改了(早就改了)。或许是不想让开发者对用户“随意”造成困扰——毕竟有的用户上来只是为了“逛一圈”。于是增加了“只有触发button才能弹窗”的功能。新版-微信授权机制<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button>//...

2019-11-29 12:31:11 2606 1

原创 前端常用的几种跨域通信方式实践:jsonp&cors&postMessage&改域

为什么说是“ 前端 ”“ 跨域 ” ?跨域方式有三种:jsonp、cors,以及动态代理。相比之“基于”前端的前两种方法,最后一种不太常用 —— 没错,cors一般来讲是后端设置,但是完全可以让前端“一力以担之”。前文推荐(不了解“跨域”的可以先看这里):https://blog.csdn.net/qq_43624878/article/details/95853615jsonp方式解决...

2019-11-27 09:48:18 720 19

原创 煮酒论JavaScript:使用“更好的”代码(高性能的密码)

本文是一篇纯干货前端分享,也算是笔者最近一段时间的思考总结。(顺便为1024庆祝!)

2019-10-23 19:31:59 3217 7

原创 前端项目分析:我是如何做图片优化的(预加载、懒加载和延迟加载)

众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分。图片的优化有两种方式: 预加载 和 懒加载。本文结合实际案例,为大家讲述网站中图片的优化妙方。文章不短,但没有废话,肯定令你耳目一新啦

2019-07-10 09:25:57 11709 18

原创 微信小程序 | canvas为你的天气预报添加雨雪效果

canvas动画,又叫“粒子系统”,是HTML5新增的为页面添加多样化效果的绝佳实践。正巧最近做的一个天气类微信小程序紧接尾声,寻思着首页展示温度等信息的地方似乎少了点什么。到Android自带的天气预报上看了下,恍然大悟。于是结合前一段时间钻研的canvas为其添加雨雪粒子效果。小程序中的“绘图”API小程序的绘图 API 虽然也叫canvas,但跟 HTML5 的 Canvas 本质上有很大区别的,其原因是小程序的绘图(Canvas)是客户端实现的 Native UI 组件,而不是普通的 H5

2021-01-27 15:55:38 1396 10

原创 滑动翻页效果实现和移动端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 4403 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 6027 8

原创 一种离谱到极致的页面侧边栏效果探究

emmmmmmm标题实在想不到怎么起。其实效果大概是这样的:display动画的应用起因是什么呢?在笔者最近为社团计划的官网上打算做一个这样的效果:点击头像,左边/右边滑出一个“面板”,里面展示用户的个人信息。当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏,display“加上动画!我们大概都知道的是:HTML渲染过程中有一个可能执行的、影

2021-01-06 11:07:35 10351 10

原创 聊聊页面中的锚点效果和回到顶部

页面中的锚点各位想必都“了如指掌”,其基于a链接“同页面跳转”和“id属性标签的历史问题”。可能有人不知道的是:HTML中的“id”非常神奇:id属性的元素不仅可以在js中直接使用,而不必先获取;还可以和url相关联。直接用id访问是旧版本js遗留下来的特性,浏览器会建立window实例的id同名属性,这是为了兼容旧的网页。但不要依赖这个特性,在含有特殊字符或者和window实例的其他属性有冲突时可能失效。我们都知道,锚点应该这样用:<a href="这里写#号+id名">去这里&l

2020-12-28 11:20:27 11220 44

原创 用户体验 | 页面阅读进度提示

相信很多人都在项目中用过这么一个玩意 —— NProgress.js库,或者是其它类似的库,它们的作用很实用:页面加载进度提示。顾名思义,就是在刚进入页面或刷新或请求数据时在页面顶部有一个进度条给用户以反馈,使页面加载显得不那么“尴尬”。但只有很少人见过 “在页面顶部实时反馈当前阅读进度” 的效果 —— 为什么?因为有滚动条。但不得不提的是:这真的很有用!不管是“在有些要求高的页面对自带滚动条很厌恶”还是“即使有滚动条也可以给用户更好看的提示效果”。当然,目前第一种场景比较多。用JS达到实时进度提

2020-12-21 11:13:42 10180 14

原创 小Tip:关于单行/多行文本溢出隐藏的一些看法

最早的文本溢出隐藏只是简单的hidden,把看不见的都给“去掉”,就像这样:<p class="hid"> 哈哈哈哈哈哈哈哈哈哈哈</p>.hid{ width: 100px; height: 20px; overflow: hidden; border: 1px solid red;}到后来发现这样不太好:比如在一些信息录入框,如果单纯的用 overflow:hidden; 可能别人会误以为信息不全由此产生一些“大问题”,所以

2020-12-11 15:59:08 2140 7

原创 CSS3+JS完美实现放大镜模式

大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,别看标题这么牛气哄哄,其实也就算是介绍了css里的transform和animation两种动画方式 —— 当然,实现的效果也很简单。虽然后来随着技术的增长又逐渐实现了canvas方式的放大镜以及用纯JS实现了另一种“淘宝式”的模型,其效果如下://xz:这里是一张图片但是仍然不尽人意:因为实现起来太复杂了,而且需依赖大部分JS逻辑,移动和显示的效果均依赖JS,通过JS计算偏移量再渲染样式。但是CSS3自定义变量的出现让我看到了“希望之光”

2020-12-01 11:21:14 10744 41

原创 【前端特辑】探索a链接实践奥秘

见过a标签各种“千奇百怪”的写法,也探索过它的各种用法;于是迫不及待地想要分享出来 —— 这个在我看来html中最“好玩”的一个标签。

2020-11-25 09:11:36 6581 14

原创 前端性能优化之“离线缓存manifest”

在 本专栏 的 这一篇文章 中,给各位引出了一个“不同寻常的”性能体验优化方式 —— 离线缓存,并介绍了它的简单用法,本文来详细说说!啥是离线缓存离线缓存又叫“ApplicationCache”,是从浏览器缓存中分出来一块缓存区,用来存储一定的资源。它是HTML5的新特性。你可以使用它将构成web应用程序的资源,如HTML、css、JavaScript、图片等存储到本地缓存中,这样不仅可以使以后进来时更加方便,还可以在离线状态时“无差别”继续使用web应用!离线缓存和普通的浏览器网页缓存有明显的区别

2020-11-16 09:19:54 2715 8

原创 浅谈微信小程序授权应用

微信小程序中关乎“授权”的,抛开各路“牛鬼蛇神”不谈,大体上也就两种:位置授权用户信息授权切记的是:在微信一直打着的“用户至上”的旗号下,几乎一切用户相关的应用都需要用户手动授权!所以必须要有提示的。位置授权昨天完成了微信小程序项目的最后一点内容,里面我加了个“点击自动定位”的功能,请求的是高德地图的web API,但是需要传经纬度,于是我一开始是这样写的:wx.getLocation({ type: 'gcj02', success: function(res) { va

2020-11-06 13:50:28 4366 18

原创 CSS伪类:empty让我眼前一亮

最近看过我文章的都知道:我最近在写一个微信小程序的项目,在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是今天早上我看着wxml文件中一堆wx:if/else和hidden突然很烦躁,先不说wx:if的性能问题,就是标签上也是冗杂的。接着上一篇文章【微信小程序自定义组件库yPicker组件分析及省市区三级联动实现】,在其中我分析了这么一个例子 —— 省市区三级联动的自定义实现,在其中有详细代码这里就不多说,说说如何调用:我当时是这么想的:一方面出于“不在JavaScript里写太多东西”的考虑

2020-11-02 09:12:20 6706 13

原创 微信小程序自定义yPicker组件分析及省市区三级联动实现

自从上一篇文章:微信小程序自定义日历组件及flex布局最后一行对齐问题分析 出来以后,有人私聊我说能不能从头分析一下我开源的自定义组件?一直没时间。这不,最近项目中有个需求是 省市区三级联动 ,我就顺便从组件库中的第一个 「扩展日期-时间(点此直接至GitHub)」picker组件开始说一下这两个功能的实现。简单说一下“自定义日期-时间组件”它的背景是项目的第一版当时发现微信小程序内置的日期组件:picker只能精确到某一天(年月日),但是我们很多时候需要年月日时分甚至是年月日时分秒(如结束时间/发布

2020-10-26 15:37:00 5733 15

原创 vue项目实录:下拉刷新组件的开发及slot的使用

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发:正式开篇在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表“整个屏幕”,通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新)首先需要编写下拉刷新组件的 template,这里用到 <slot>,代码如下:<template>

2020-10-24 00:05:29 6338 37

原创 原生图片预览实现及由此引出的图片自适应宽高问题探索

看到手机相册,突发奇想:能不能用实现一个原生的页面“相册”?或者说,传统网页中怎么实现图片预览功能?如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了引入下文,见谅嘿嘿);但又不是说所有的页面都要用框架…经过一番探索,终于大概实现了想要的功能:大概流程就是:可以点开大图观看、可以左右滑动切换、进入预览时可以从你当前点击的那一张开始浏览。实现相册初始展示页如上所示,我们可以在Header头中添加Viewport配置 —— 移动端页面常备:<meta name=

2020-10-14 10:25:34 4732 36

原创 从表单校验看JavaScript策略模式的使用

众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重。事实上,几乎每一个中大型网站都会有“登录注册”以验证用户信息、防止一些不可名状的隐患。。。那么表单的优劣就成了前端开发者急需解决的问题。其实我更愿意称为“代码的可读性”或“可复用性”以及“是否冗杂”。表单也有“优劣”?你在开玩笑嘛?我想你可以认真看下下面的代码,它用到了一些“新知识”:<form action="xxx" id="registerForm"> 请输入用户名:<input type="text" nam

2020-10-13 11:09:27 5408 27

原创 从一次项目重构说起CSS3自定义变量在项目中是如何使用的?

关于CSS3变量在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了:声明变量的时候,变量名前面要加两根连词线(--)。body{ --color:red;}上面代码中,body选择器里面声明了一个自定义变量:--color 。它与color等正式属性没有什么

2020-10-06 10:09:38 9344 23

原创 微信小程序自定义日历组件及flex布局最后一行对齐问题分析

最近为我开源的小项目:微信小程序扩展自定义组件库(点击去GitHub) 增加了一个新组件 —— 日历组件。在编写过程中,因为大家都知道,日历组件是有固定行数和每一行的固定列数的(即使当前方块内没有值),所以结合小程序“数据优先”的特点,最合适的布局方式一定是flex了!说一下大致思路(布局上),笔者将整个组件分为两部分:分别是头部的当前日期(年月)显示,以及左右两侧的切换按钮当前切换月份的日期显示头部的布局自不多说:一个 display:flex; 加上 align-items:center;

2020-09-28 09:59:01 3534 9

原创 探索CSS属性*-gradient的实用价值

先介绍一下一个有趣的属性 —— conic-gradient :圆锥渐变!对其感兴趣是因为我发现它竟然可以用来做圆饼图!比如这样的:这样的:其原理也很简单:就是以起始点为中心,然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数,每个颜色值后可以跟两个百分比,为当前颜色值的起始点和终止点(中间用空格隔开):background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);还可以分开来写:background:

2020-09-24 23:44:26 1028 11

原创 探索js让你的网页“自己开口说话”

最近一直在研究音视频流,正好想要做一个“有声提示”,增强页面交互和用户体验的功能。(以后打算引入前端AI,让整个页面真正实现“语音控制”,嘿嘿)。不说废话,实现过程中倒是遇到了一点小问题:本来嘛以为是很简单的:就像一般给网页添加背景音乐,先动态创建一个audio元素,让其隐藏起来,然后用js添加一个event事件,并触发(事实上现在普遍认为的是:不能给网页添加背景音乐。但经过猜想和实践发现,也可通过下文第一种解决方式实现):let event = new MouseEvent("click"); /

2020-09-18 23:08:29 700 7

原创 HTML5+CSS3高级动画的应用实践

我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。但目前来说,3D效果的“高级”动画似乎更受欢迎一些,而且我们也确实需要。这不,前两天笔者就在项目中给“翻转动画”增加了一个3D效果,看起来贼爽:这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析:首先,要实现这个功能,我们从外往里看:把文字所在部分看作一个盒子的话,前后两个横线并不属于这个盒子才对,那么,很自然就想到了—— ::after 和 ::before

2020-09-14 23:02:10 7133 33

原创 小数型Number在web中最出色的两个应用场景

我们大概都知道的是:精确度问题不仅在前端,甚至在整个编程领域都是“由来已久”的。前端的精确度问题大概要从 Math.floor(number) 向下取整、 Math.round(number) 四舍五入但是round函数在正数和负数表现竟然有差异为开端。这里不得不提一句:Math.round的实现原理其实是“将参数加上0.5再向下取整”,也就是说并不是真正的“四舍五入”!同样的还有因为二进制转换和存储问题导致的0.1+0.2!=0.3的问题。但是这不是重点:我们将以此引出它们在浏览器中的使用:浏览

2020-09-07 09:30:43 3101 21

原创 探索在网页中使用“标注”

——“如何在网页中实现一个体验更好的选中翻译功能”?“如何配合JavaScript实现选中态”?“H5在标注上有啥新的特性/API”?话说说起“标注”,在HTML5之前,你可能想起的是各种浏览器插件,emmmmmmm或者说你根本不认为浏览器上可以有这种玩意。但是HTML5来了,这是它的时代。

2020-08-25 16:51:03 6105 25

原创 探索浏览器页面关闭window.close()的使用

说起来window.close(),这也是个“不太让人省心”的角色。因为浏览器兼容性千差万别,还对他有诸多限制。使用语法:window.close()场景复现昨天发现有人在csdn上传违禁文件,举报后来到了这个页面:里面那个按钮发现点击无效!就。。。当时就挺尴尬的。不过既然它说是【关闭】,当时就想到了这个堪称“漏洞百出”的close事件,F12打开控制台一看:果不其然看到这顿时就来了兴趣探索过程和解决方案为什么就突然来了兴趣呢?首先,从这行代码中可以看出:这个页面不是通过 w

2020-08-19 10:36:51 3080 26

原创 CSS实用技巧:伪元素/伪类的妙用

在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展,伪元素/伪类也开始被大量应用:在性能愈加被看中的当下,处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”!下面笔者总结的一些关于CSS的“骚操作”,希望能对你产生帮助::hover和:focus显示浮层我们完全可以只用CSS的父子选择器(用于“父子嵌套”)/兄弟选择器(用于“同级并列排列”)+伪类 :hover 实现【当鼠标滑入显示xxx】,甚至不用JS!比如:当鼠标滑入链接时显示图片<a href="javascrip

2020-08-15 10:02:00 5398 17

原创 探索在原生网页中使用自定义数据属性

先说说我为什么有这种“奇怪”的想法。它基于这样一个场景:我最近闲来无事完善了一个小demo:音乐播放器。在里面有一个功能 —— 点击列表某一项弹出音乐播放弹框。我原先一直是“为每一项单独加一个click事件监听”。这很糟糕!<div id="videob"></div>//js代码videob.onclick=function(){ let video=document.createElement('video') video.setAttribute('src','x

2020-08-13 13:51:44 7873 48

原创 说说HTML中alternate的一二三事

alternate?你没搞错吧?这不就是“交替、替换”吗?这有什么好说的?但是如果我问出来:alternate在HTML中的用法,具体作用,可能你只能说:“诶这不是那啥么”。说实话我一开始也压根不知道有这个东西,但是就在前两天这玩意解决了我的一大“难题”,顿时这兴趣不就来了么!好吧想来你也遇到过这种情况:网页换肤!其实我们的选择还是挺多的,比如:设置不同颜色,用JavaScript去一个一个的操控、替换(或者设置“全局的”class名)用JavaScript替换link标签的href值对

2020-08-04 09:38:16 2263 11

原创 对静态文件中间件koa-static的一些理解

在app.js里,若想指定当前目录为托管目录,我们一般会这样做:const static=require('koa-static')const Koa=require('koa')const app=new Koa()app.use(static('.'))app.listen(8081)koa-static就是koa(node框架)中最常用的、较为成熟的 静态web托管服务中间件 ,在koa中常用于比如外链静态资源(如CSS文件)://下载npm install koa-static

2020-08-04 09:37:11 3264 18

原创 在页面加载之后执行JavaScript

我们都知道,页面加载是有顺序的。让我们先来理一下页面的展示过程:当你输入url并按下回车时首先从本地查找域名,有的话直接用hosts文件里的ip地址,否则查询DNS,得到ip地址建立TCP连接——进行“三次握手”客户端发送http请求服务端处理,并返回结果给客户端关闭TCP连接——需要“四次挥手”浏览器收到结果,开始解析资源(JS、CSS、HTML),解析HTML生成的dom树,和同时解析css生成的cssom树结合生成渲染树根据渲染树渲染页面当然,再详细的比如:如何解析生成DOM树、

2020-08-04 09:35:38 1621 13

原创 对HTML-input的一些思考和理解

前两天在写原生上传文件时用到了input的 type="file" 按钮,写完以后就感觉别扭的一批:这玩意自己的样式实在难看,但是它又不支持自定义样式。最后“灵光一现”,想到:可以设置其透明度为 opacity: 0; 然后拿其他的标签覆盖上去:比如 input type="text" 、比如 div、比如 label 。。。最近正好在搞这个“图片上传”、“压缩”的事情:H5以后,input就支持了accept —— 选择文件类型,还有一些值比如...

2020-07-25 15:27:01 4267 18

原创 对于“前端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 5236 6

原创 关于CSS3一些新属性的一些思考:夜间模式、区域阴影、透明度

关于 filter —— 你以为它只能做单纯的“滤镜”吗?不!常用的 blur 处理(图片)模糊程度、 opacity 处理(图片)透明度、 grayscale 处理(图片)灰度 属性只是其世界组成中的一部分。css-filter的实际用处可真不少。其实,最【受人追捧】的夜间模式用filter也可以简单实现:首先,我们拿到一个input标签 —— 它一般放在整个页面(body)的最上面 —— 这样就可以通过CSS的一些“特性”来控制“全局”:<input type="checkbox" /&

2020-07-13 11:11:30 10216 12

JavaScript内存管理相关.docx

该文档是笔者经余月整理后所得,里面包含了JavaScript内存相关的知识概述。大概有浏览器内存管理、JavaScript内存泄漏及补救措施、闭包的概念,希望对诸君有帮助

2020-04-10

个人做的网站,请大佬们指教

发表于 2019-06-03 最后回复 2019-12-10

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除