2 行舟客

学生身份

我要认证

江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网和个人网站开发;目前着迷于vue、node、css技术。开源并维护有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI (或:https://codechina.csdn.net/qq_43624878/yunUI),欢迎star! 也曾开源过纯前端在线图片处理工具—— https://github.com/1314mxc/compress ,欢迎体验!

等级
TA的排名 2k+

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

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

2020-10-26 15:37:00

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

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

2020-10-24 00:05:29

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

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

2020-10-14 10:25:34

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

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

2020-08-11 14:12:28

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

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

2020-10-06 10:09:38

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

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

2020-09-28 09:59:01

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

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

2020-09-24 23:44:26

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

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

2020-09-18 23:08:29

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

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

2020-09-14 23:02:10

小数型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

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

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

2020-08-25 16:51:03

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

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

2020-08-19 10:36:51

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

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

2020-08-15 10:02:00

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

先说说我为什么有这种“奇怪”的想法。它基于这样一个场景:我最近闲来无事完善了一个小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

说说HTML中alternate的一二三事

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

2020-08-04 09:38:16

对静态文件中间件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

在页面加载之后执行JavaScript

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

2020-08-04 09:35:38

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

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

2020-07-25 15:27:01

对于“前端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

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

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

2020-07-13 11:11:30

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 技术圈认证
    技术圈认证
    用户完成年度认证,即可获得
  • 阅读者勋章Lv4
    阅读者勋章Lv4
    授予在CSDN APP累计阅读博文达到90天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 1024勋章
    1024勋章
    #1024程序员节#连续参与两年活动升级勋章,当日发布原创博客即可获得
  • 分享学徒
    分享学徒
    成功上传1个资源即可获取