原生标签的能力你挖掘了多少?

380

落地业务并单独整理成文章的原生CSS能力

纯 CSS 也能实现拖拽效果?:利用 overflow

震惊,type="range" 居然可以实现评星功能:type="range" 实现

不可思议,纯 css 都能图片滚动:scroll-snap-type 实现

还有几篇在路上的,敬请期待,总之是基于业务场景,不谈业务,技术没法落地,这个推荐就好像没了灵魂一样

背景

有一天CoCo问我,你们阅文公众号文章是怎么产出的,我的回答是基于业务中的问题,讨论学习

1.png

为啥我会这样回答呢?因为我就是问题少年,在写业务的时候,我总觉得有更好更佳的实现方式,只是我没有想到或者说我不会。

3.jpeg

我个臭不要脸的,身边有一群大佬同事,这得天独厚的资源不用用太可惜了。所以我就要多问,问的频率最高的是文彬张老师,每当我get到了新的功能我就学习到了。视野中出现了焦点,也就出现了盲点。基于业务场景多和他们交流学习,便可扩展视野,而不是守着自己的那一亩三分地,仅会的那一点点知识,日复一日,年复一年,徒增工作年限,就是没咋没长本领。

有趣的原生标签和属性

在我眼里原生就是写布局,画样式;但是在大佬们的眼里,它们就是一个个活宝无所不能。

button 的 autofocus 属性可实现聚焦滚动到指定位置

光标会自动定位到该元素上面,不管元素在哪

使用场景:已进入页面的时候需要自动滚动到x位置,你又懒得用js去计算定位

demo:在线编辑器失效,因为编辑代码的地方聚焦了,轮不到我的小demo可以拿代码网页自己跑

label标签实现距离不是问题

异地恋最大的问题就是距离,多少甜蜜恩爱的小情侣终究抵不过距离。可是这对于label和input来说,距离在他们这对小情侣眼里不值一提,它们的心永远在一起,是那个值得的人,何惧距离。label 的 for 永远心系 input 的 id,不管在页面的哪一个角落。

使用场景:点击区域a,区域b发生变化

距离遥远都不是事

纯css 实现弹窗的显示隐藏

纯css 实现展开收起

同样 button 的 form关联到表单 永远心系 form 的 id,不管在页面的哪一个角落。又是一对活在童话故事里面的小情侣

提交数据用form

提交数据or提交表单的时候,常常会有一个一键清空所有值,有些呢还有回车键提交表单,有些呢还有数据的准确性验证等等

总之呢用了form,就是轻轻松松简简单单

<button type="reset">我是form表单里面的重置</button> 他在表单内,一句话清空表单值

键盘回车提交数据呢,是表单自带,不用你写。

数据的验证呢?在表单的上面加原生属性就好了,你不需要做啥特殊的处理,你不需要在另起炉灶。

form 表单

别忘了前面说的 button 的form关联form表单的事哟

addeventlisten 可以传入四个参数

5.jpeg addeventlisten 原本的第三个参数demo

事件冒泡,把事件绑定在父元素的身上,利用事件冒泡,他的子元素都可以监听该事件。基于这个前提,来实现一个,a元素下面的任何一个子元素获取到焦点的时候,触发事件

tabindex:元素是否可以聚焦,-1表示可以被聚焦,但是不能被tab索引,经常测试大部分的元素都是-1.也就是说大部分元素其实都可以有焦点相关的事件

把所有的事件都绑定在父元素身上

ES6 的可以实现模版渲染

用过框架的朋友都熟悉变量赋值的语法(${name}),可是又有多少朋友可以做到脱离了框架,用原生属性去实现呢?

看了张老师的这篇博客你也可以,ES6模板字符串在HTML模板渲染中的应用

文章的关键一段代码

String.prototype.interpolate = function (params) {
    const names = Object.keys(params);
    const vals = Object.values(params);
    const str  = new Function(...names, `return \`${this}\`;`)(...vals);
    return str;
};

即便是没有了框架也可以实现,类似那样的模板赋值。万变不离其宗,有了牢固的基础,要明白弄懂哪些框架的原理,问题应该不大了。

es6 模版渲染

在这行代码的基础上继续扩充,简简单单的就是一个小型的vue了。我同事再次基础上扩充了一些语法web-template,学习了解一下思路是一个很不错的选择,用不用的话,看业务契合度吧

如何用 css 判断浏览器类型

用 css 判断这个问题不大,比如filter这个属性只有火狐支持,那么支持这个属性的就是火狐浏览器

@supports 用这个就好了呀

@supports not (filter: url(resources.svg#c1)) {
  div {
    float: right;
  }
}

没想到可以用浏览器不支持的属性作为浏览器的判断,这个有优点也有缺点,缺点就是如果哪一天浏览器css支持,那就完了,而且要找到这个css属性也不容易

关注原生标签和属性

一个个都是宝,那些都是我在日常的工作中用到的,日常业务也可以变的丰富多彩,有意义。倘若你在工作中,寻找到学习的乐趣,你的工作就不再是简单的工作。当你看到一个ui或者一个交互,你就抛弃以往惯用的实现方式,另辟蹊径。或许成功,或许失败,但是尝试的勇气是最宝贵的东西。

尝试成功了,就要记录。为啥要选用新的方式?老的有什么问题?在尝试的过程中遇到了哪些问题?新的方式可以给我带来什么?整个事情就形成了一个闭环,凡事有交代 件件有着落 事事有回应。

后记

在朋友Pengcheng Nie的协助下,最近博客进行了一波框架的升级,评论功能啥的都可以用了,加载速度还是一个痛的。cdn 加载还有一点点小小的问题,后续等这个小小的问题解决了,访问的速度就会上去了。就先将就将就着用,在未来一周内,考虑博客内容的一波整合,博客中有一些内容写的并不清楚,并有冗余。尽可能把每一篇文章都写的有质量,并且有业务落点为支撑。

欢迎关注我的博客sunseekers,博客会保持一直更新,你的支持是我最大的鼓励。

虽然素未谋面,却已相识很久,很微妙也很知足。在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。