首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于发布-订阅原生 JS 插件封装

用原生 JS 封装一个动画插件。效果如下: ? 这个飞驰小球看起来是不是特有灵性呢?没错,它就是用原生JS实现。 接下来,就让我们深入细节,体会其中奥秘。...一、需求分析 封装一个插件,将小球 DOM 对象作为参数传入,使得小球在鼠标按下和放开后能够运动,在水平方向做匀减速直线运动,初速度为鼠标移开瞬间速度,在竖直方向运动类似于自由落体运动。...四、采用发布-订阅 估计读完这段代码,你也体会到了这个功能实现是非常容易实现。但是实际上,作为一个插件标准来讲,这段代码是存在一些潜在问题,这些问题并不是逻辑上问题,而是设计问题。...在这里我并不是简单讲讲效果实现、贴贴代码就过去了,而是带你体验了封装插件整个过程。有了发布-订阅场景,理解这个设计思想就更加容易了。...在我理解中,编程意义远不止造轮子,写插件,来显得自己金玉其外,而是留心思考,提炼出一些思考问题方式,从而在某个确定时间点让你拥有极其敏锐判断,来指导和优化你下一步决策,而不是纵身于飞速迭代技术浪潮

3.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用Preact 开发基于Shadow DOMJS插件

    前言 第三方JS插件在日常开发中经常会使用到。对于一些不涉及到展示功能插件,仅需要引入一个js文件即可,但对于一些界面级插件,如轮播图、富文本编辑器等,往往还需要单独引入css文件使之展示正常。...如果可以仅引入一个js文件,并且插件样式能完全做到与主体应用隔离,那么插件通用性也能进一步提高。...MVVM框架当然也可以用来开发界面级JS插件,甚至会使事情变得更加简单。 JS插件一般都是轻量。相比于使用React,Preact更符合我们要。...部分分离,借助JSX,可以做到all in JS,这也是我们选择Preact重要原因之一。...以Rollup为例,使用rollup-plugin-postcss插件,即可完成: rollup.config.js import postcss from "rollup-plugin-postcss

    2K30

    页面滚动,元素跳动;附带jquery.scrollex.js插件

    在现在大多数网站开发中,都有很多动画效果。 有些动画是页面一加载就要,还有一些动画是需要页面滚动到那个元素才要展示。...页面加载时动画效果: 1) 页面加载完成后,给body元素添加class: on-loading, 需要实现动画元素在body.on-loading 状态下显示为:opacity:0(需要显示出来元素...当滚动到该元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用是jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件

    5.7K10

    基于JS实现回到页面顶部五种写法(从实现到增强)

    该实现主要在页面顶部放置一个指定名称锚点链接,然后在页面下方放置一个返回到该锚点链接,用户点击该链接即可返回到该锚点所在顶部位置   [注意]关于锚点详细信息移步至此 <body style="...  [注意]关于<em>页面</em>的scrollTop<em>的</em>兼容问题详细内容移步至此 <button id="test" style="position...,x和y指定滚动<em>的</em>相对量   只要把当前<em>页面</em>的滚动长度作为参数,逆向滚动,则可以实现回到顶部<em>的</em>效果 <button id="test"...如果为true,表示元素顶部与当前区域可见部分顶部对齐(前提是当前区域可滚动);如果为false,表示元素底部与当前区域可见部分尾部对齐(前提是当前区域可滚动)。...如果没有提供该参数,默认为true   使用该方法原理与使用锚点原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果

    5.4K21

    所见即所得-基于Node.js页面数据实践

    能在页面上看到数据就是能得到数据,这就是我所说“所见即所得”这五个字含义。 数据抓取技术可以通过很多后台语言实现,比如PHP、JAVA等等,但是Node.js有它独特优势。...数据抓取也有恶意攻击网站或盗取数据情况。作为前端工程师,只有当你知道别人是如何抓取时候,才能想办法去做防守。 页面抓取三个步骤 1、获取数据。 2、从网页中提取并清洗出所需数据。...使用Node.js进行数据抓取优势 Node.js无阻塞和事件驱动这两个特性可以大大提升抓取效率。 因为Javascript是一门前端语言,所以用它来做数据提取和清洗有很大优势。...Node.js最近几年社区活跃度比较高,可以用工具和包也很多。 有一些数据会隐藏在JS脚本中,只能用Javascript来抓取。...所以在做数据抓取时候最好带上useragent。 有些页面数据接口必须在头部中声明特定referer才能获取数据。 部分网页和数据接口会有访问频次限制。我建议大家降低访问频次,不要过于规律。

    1.2K110

    基于jqueryimgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能

    需求很简单,就是这么easy,这个其中重点就是用户可以自己对选择头像进行截取,最终选择了基于jqueryimgareaselect.js。既然插件都有了,那就开工吧!...第一步: 前端下载必须js插件,后台使用java自带imageio包处理,不需要其他jar包。...jquery.imgareaselect-0.9.10.zip jquery.js 第二步: 新建静态页面index.html (页面有点丑哈。。。)...第四步: 后台接收并处理图片,后台是基于SpringMVC,不熟悉可以自学下下。...先来看下页面的效果如何吧! ? 当然这个效果比较low,不是很好看,仅仅是个demo而已,再来贴个项目线上效果图吧,这个不low哦! ? ?

    6.1K70

    基于PythonMaya插件开发

    开发Maya插件,有两种执行脚本方法: (1)直接在 Maya脚本编辑器,直接写代码或者加载代码并运行,缺点是没有自动提示; (2)基于 PyCharm 进行编码,然后通过 MayaCharm 在.../download/#section=windows 文本使用版本:PyCharm Community Edition 2021.3.2 (2)为Maya安装devkit 下载页面:https://www.autodesk.com...) (3)为PyCharm安装 MayaCharm 插件 根据提示,我们找到 Maya userSetup.py 文件,将下面代码复制进去。...提供一个“检查更新”功能,就是请求一个 url 获取版本号,然后对比看有没有最新,另外一种方法就是由上而下广播通知大家更新插件; (3)缩写一个 exe 程序,一键安装插件 其实就是双击后,可以将包含在...查询目录有很多种方法,比如遍历注册表,然后选Maya版本,再找到指定 shelves 目录 祝大家都能顺利完成Maya插件开发

    1.3K20

    基于PythonHoudini插件开发

    Houdini是基于QT进行开发,支持 Python、HScript二种脚本进行插件开发。...本文以Python开发为例来进行说明,环境说明: (1) Python 3.x(我用版本是 3.9 版本) (2)IDE开具 PyCharm(我用版本是 PyCharm Community Edition...(比如执行python文件名指定 run 函数等) 为了工具更便捷开发,界面我们采用了 PySide2 进行搭建。...# 升级系统pip > python –m pip install –upgrade pip # 安装 PySide2 > pip install pyside2 注意创建是 Widget,以及控件名称...本文用是PyCharm编辑器,首先需要设置解释器路径为 Houdini Python37目录 并向解释器路径添加以下三个目录 安装 Houdini Python Support 插件 将新建

    1.2K20

    基于hanlpes分词插件

    摘要:elasticsearch是使用比较广泛分布式搜索引擎,es提供了一个单字分词工具,还有一个分词插件ik使用比较广泛,hanlp是一个自然语言处理包,能更好根据上下文语义,人名,地名,组织机构名等来切分词...默认分词 图1.jpg 输出: 图2.jpg IK分词 图3.jpg 输出: 图4.jpg hanlp分词 图5.jpg 输出: 图6.jpg ik分词没有根据句子含义来分词...,hanlp能根据语义正确切分出词 安装步骤: 1、进入https://github.com/pengcong90/elasticsearch-analysis-hanlp,下载插件并解压到esplugins...目录下,修改analysis-hanlp目录下hanlp.properties文件,修改root属性,值为analysis-hanlp下data 目录地址 2、修改es config目录下jvm.options...我词典.txt文件 格式遵从[单词] [词性A] [A频次] 修改完后删除同目录下CustomDictionary.txt.bin文件 重启es服务

    1.1K30

    基于OBS插件开发总结

    相对老版本而言,OBS Studio在架构上进行了重构,采用微内核+插件形式进行开发。作者意图通过这种架构来独立出核心代码,将周边功能作为插件形式实现。...打开OBS Studio插件安装目录,可以见到如下动态库文件: ?       也就是说,OBS中插件是以动态链接库形式实现。...该页面提供了VS2013和VS2015两个版本预编译库。根据自己开发环境选择对应库版本。下载好后解压到文件夹即可。 (3)设置好环境变量。这里设置环境变量其实就是为了指定FFmpeg库路径。...如(C:\Qt\Qt5.5.1\5.5\msvc2013_64)       当然如果仅仅只需要编译插件目录下插件,可以不用指定QTDIR变量。...开发初始阶段,建议还是调试OBS Studio内置插件,来熟悉下OBS Studio插件架构。

    5.5K90
    领券