如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下怎么去做一个自己的js插件吧. 插件的需求 我们写代码,并不是所有的业务或者逻辑代码…

效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器里,而这个容器做了绝对定位实现了可视窗口的水平居中,新增的message只要在容器里append对应的元素就会在页面上显示出来. 接下来我们看下每个message元素的秘密~ 我们可以看到这里设置了height和padding属性的动画,那上文中的动画大概率是在关闭时设置height和padding…

插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服务. 插件不是随手就写成的,而是根据自己业务逻辑进行抽象.没有放之四海而皆准的插件,只有对插件,之所以叫做插件,那么就是开箱即用,或者我们只要添加一些配置参数就可以达到我们需要的结果.如果都符合了这些情况,我们才去考虑做一个插件. 插件封装的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域…

需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相对于浏览器) 在需要时开启,用完关闭 项目用的是vue,并未引入jQuery,所以直接原生js封装的,部分代码用到ES6语法 效果如图: 关闭状态 开启状态 封装后,开放三个参数功能: 开关按钮:开启参考线 父级div: 参考线颜色:color:"#ff0000",默认红色 调用方法 参数…

1. 取数组中的数据,并对空值设置默认值: 常规写法: let arr = [0, 1, null, '', 'abc']; let newArr = []; arr.forEach((item, index) => { if (!item) { newArr[index] = '我原来是空值'; } else { newArr.push(item); } }) 高逼格写法: let arr = [0, 1, null, '', 'abc']; let newArr = []; arr.forE…

一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了,我个人简单理解就是,能方便实现某个功能的扩展工具.(下面我会通过简单的例子来帮助读者理解) 第二个 W "Why" -- 为什么? 为什么要有插件这种东西,首先结合第一个 W 来理解就是,使用插件的目的是方便我们实现某一个功能. 也就是说在编程过程中我们只需要找轮子,或者改轮子而不需要重…

背景 写blog虽然经历了N多不同时代的产品,恒久不变的始终是自己无人问津的网站.虽然没几个人看,还是隔断时间就要折腾一下.从最开始的wordpress,到tale,到现在的hexo,网站变得越来越简单,越来越轻量级,这里主要说说hexo的使用. hexo介绍 主页: https://hexo.io/zh-cn/ 主页中有非常详细的介绍,主页中有介绍内容我这里就不赘述了,这里主要说说主页中没有详细说明内容. hexo 可以理解为是基于node.js制作的一个博客工具,不是我们理解的一个开源的博客…

JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网http://www.php.cn/js-tutorial-382417.html 之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时会乱掉…

一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用js原生代码,实现轮播图的常见效果!思路比较清晰,而且可重复性高,也几乎包含了现在网页上轮播实现的所有效果! 现在我们来看看它是什么样的效果,截一张图给大家看: 二.无论我们做什么特效,都要记住一个原则,先写静态的代码,再做动态的处理! 我们的轮播静态效果用html和css来实现: 1.为了代码的规范…

图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的di…