首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

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

3.1K20

原生JS封装Ajax插件(同域&&jsonp跨域)

前言 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉挺可行的。。。...简单说说思路,有兴趣的可以自己跟着写一个,顺便熟悉一下原生的Ajax......一个域名的组成: http:// www abc.com: 8080 / scripts/AjaxPlugin.js 协议 子域名 主域名 端口号 请求资源地址 当协议、子域名、主域名、端口号中任意一个不相同时...主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 JS 代码,网页端接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的...params.fail&¶ms.fail({message:"over time"}); window[cbName]=null; },params.time); } 插件详细解析及使用方法见

2.9K21

Base封装(二)-- 封装属于自己的Library(UI篇)

https://blog.csdn.net/lyhhj/article/details/73554768 绪论 之前分享了一篇 Base封装(一)–我的最简MVP架构简单的封装自己的MVP架构...接下来继续分享我的封装之路,今天要分享的是常用的UI,同样大家看到不合适的地方多多指正啊.....常用组件 在写一个APP的时候我们通常都会用到一些常用的组件,慢慢的积累下来了就存到自己的库里面,以后写项目的时候就不用再去到处找了,下面看看我收藏了哪些常用的组件吧 1.NoScrollListView...系统默认会按照这个规则来设置子视图的大小,开发人员当然也可以按照自己的意愿设置成任意的大小。 UNSPECIFIED 表示开发人员可以将视图按照自己的意愿设置成任意的大小,没有任何限制。...https://github.com/hdodenhof/CircleImageView 3.ProgressBar 对于loading加载框这个网上已经有很多了,各式各样的,如果UI需要你定制的话那就自己自定义一个

55910

使用vue封装右键菜单插件

环境搭建 一开始我是直接用的typescript的tsc命令进行打包的,但是我的插件里用到了vue、scss,发现要把这些文件打包进去需要自己去配webpack。...在package.json中,CLI默认是把vue和core-js放在dependencies下的,我们开发的插件是要给其他开发者引用的,如果我们打包的产物中包含Vue包的话可能会引发各种问题,比如用户可能会在引入我们的包之后会在...我们可以通过手动将其设置为false,让其在打包时使用内联样式,这样就能解决样式失效的问题了,我们在vue.config.js中加入下述代码。...创建一个div元素,将刚才的组件容器挂载到这个div元素上 销毁组件 完成上述操作后,我们就实现了让右键菜单显示到指定位置,但是要怎么隐藏它呢,经过一番思考后,我又想到了下述思路: 将上述加载组件的实现封装成一个函数...在插件全局声明一个变量menuVM,默认声明为null 指令内部触发右键事件时,调用我们封装的函数,用menuVM去接收其返回值 此时我们创建一个全局点击事件的监听,如果menuVM不为null,我们就把这个元素移除

2.6K30
领券