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

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

原生 JS 封装一个动画插件。效果如下: ? 这个飞驰的小球看起来是不是特有灵性呢?没错,它就是用原生JS实现的。 接下来,就让我们深入细节,体会其中的奥秘。...一、需求分析 封装一个插件,将小球的 DOM 对象作为参数传入,使得小球在鼠标按下和放开后能够运动,在水平方向做匀减速直线运动,初速度为鼠标移开瞬间的速度,在竖直方向的运动类似于自由落体运动。...现在我们不妨原生 JS 手写一下简单的发布-订阅,让我们原生撸到底 //subscribe.jsclass Subscribe { constructor() { //创建容器...在这里我并不是简单讲讲效果的实现、贴贴代码就过去了,而是带你体验了封装插件的整个过程。有了发布-订阅的场景,理解这个设计思想就更加容易了。...回过头看,比如 DOM2 的事件池机制,vue 的生命周期钩子等等,你就会明白它们为什么要这么设计,原理上和这次封装没有区别,这样一想,很多东西就更加清楚了。

3.1K20

原生JS封装拖动验证滑块你会吗?

以下文章来源于程序员成长指北 ,作者_release 专注 Node.js 技术栈分享,从 前端 到 Node.js 再到 后端数据库,祝您成为优秀的高级 Node.js 全栈工程师。...座右铭:今天未完成的,明天更不会完成 前言 闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库。...; 代码块1是在判断是在浏览器环境还是nodeJS环境,方便代码三后期使用,代码块2声明了一个对象SliderTools,将用户传进来的option和默认的defaultOption进行合并 编写核心函数...= document.querySelector('.drag_bg'); this.handler = document.querySelector('.handler'); } 编写核心函数...document.onmousemove = null; document.onmouseup = null; } } } 添加工具方法(核心函数

5.8K50

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

前言 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉挺可行的。。。...简单说说思路,有兴趣的可以自己跟着写一个,顺便熟悉一下原生的Ajax......同域发送请求 GET请求 最常见的请求类型,常用于查询某些信息。通过将查询的字符串参数追加到URL的末尾来将信息发送给服务器。...complete; xhr.open(this.config.type,this.config.url,this.config.async); xhr.send(null); } POST请求 通常用于向服务器发送应该被保存的数据...JSONP由两部分组成:回调函数和数据,回调函数一般是由网页端控制,作为参数发往服务器端,服务器端把该函数和数据拼成字符串返回。

2.9K21

js常用函数大全107个

e­xpression];[condition];[upadte e­xpression]) {inside loop}   16.循环中止的命令是:break   17.JS中的函数定义:function...则说明没找到.   38.取字符串中指定位置的一个字符:StringA.charAt(9);   39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);   40.数学函数...,Math.floor(Math.random()*(n+1))返回随机数   41.定义日期型变量:var today = new Date();   42.日期函数列表:dateObj.getTime...函数时用:(Javascript:)来开头后面加函数名   48.在老的浏览器中不执行此JS:<!...调用的外部函数文件其扩展名为.htc   63.window.focus()使当前的窗口在所有窗口之前.   64.blur()指失去焦点.与FOCUS()相反.   65.select()指元素为选中状态

3.2K10

前端系列 |原生JS和jQuery循环遍历函数

前言 之前总是不清楚原生JS和jQuery中有哪些循环遍历函数,而且有时候还总是把原生JS方法当成jQuery方法来用,以致于项目总是报错,并且还不知道是什么原因。...这样原生JS和jQuery的方法,我们就可以随意使用了。...原生JS循环遍历函数 1.for() for循环得知道数组的长度才能循环。它比较常用,这里就不多说了。 2.forEach () 不需要知道数组长度,也可以对数组中每一个元素进行操作。...; //当前元素索引 console.log(item); //当前元素 }) 2.map() 用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。...该方法通常用于缩小在被选元素组合中搜索元素的范围。

6.6K20

js书写原生ajax,JS 原生ajax写法

JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...: function() { return new XMLHttpRequest … js原生Ajax 的封装和原理 原理及概念 AJAX即“Asynchronous Javascript And XML...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K40
领券