js插件的封装 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

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

3.9K2 0

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

前言抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉挺可行的。。。...Ajax核心，创建XHR对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR），IE5是第一款引入XHR对象的浏览器，而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的...一个域名的组成： http:// www abc.com: 8080 / scripts/AjaxPlugin.js 协议子域名主域名端口号请求资源地址当协议、子域名、主域名、端口号中任意一个不相同时...主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 JS 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的...params.fail&¶ms.fail({message:"over time"}); window[cbName]=null; },params.time); } 插件详细解析及使用方法见

4.2K2 1

您找到你想要的搜索结果了吗？

是的

没有找到

UISYS封装ECharts插件

摘要 AIroot UISYS 工具的模块封装能力很强，可以方便的融合第三方插件的能力。可以按照开发者的思想对已有插件升级改造，例如 ECharts。...ECharts是目前国内数据可视化经常使用的插件，它基于canvas渲染，比以往的图形控件更加流程。...今天我们用 AIroot UISYS来封装ECharts，来作为一个标签，然后直接引入我们的HTML代码中。 1....准备我们新建一个目录，命名为 MyTest，然后下载 Echarts 的 js 包保存到当前目录的js文件夹下。...这套例子写的非常简单，如果考虑到兼容框架的特性，实际上还有很多要做。写插件吗，我觉得UISYS最贴近原生代码量少，不用绕脑子，直接用原生插件，非常好。

1.2K1 1

封装环形加载进度条（Vue插件版和原生js版）

1、效果预览 2、用到的知识主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。在看下面文章之前，你需要了解 12 1234567891011121314151617181920212223242526272829303132333435363738 3、使用有两种方式，一种是直接安装即可使用，一种需要封装...选一种适合自己的即可。...1 （1）、安装插件安装Vue插件 npm install loading-vue-component 使用 // main.js import loading from 'loading-vue-component...data() { return { progress: 0,color:'#1989fa'} } } 1234567891011121314151617181920 （2）、封装插件

4K2 0

js -- canvas img 封装

鼠标 1.操作canvas 中的 img。右键放大缩小，左键移动img。　　　2.拖动input type= range 改变图片的透明度 html 代码图片已中心店的坐标缩放... js.../index.js"> js 代码 /** * Created by Administrator on 2018/7/6. */ function doNothing...height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale); }) }); } 有错误的地方

9K4 0

JS-cookie封装

oDate.setDate(oDate.getDate()+iDay);//设置延期日 document.cookie = name+'='+value+';expires='+oDate;//到这里的oDate...是延期后的时间毫秒数 setCookie('xxx','www',3)//调用传参，前俩参数记得加‘单引号’ getCookie（）中： getCookie:传一个参数，就是要查找记录的name值，讲现有的...cookie字符串进行切割扔个arr，此时的arr就是{name=1,name2=2,name3=3...}的一个object，就像一个json，此时，再遍历，将arr的每一个元素分别提取出来然后通过等号切割...，扔个arr2，这样，arr2就成了俩值得数组，遍历一遍，就被扔进来一对，把扔进来的这对进行判断，如果他的名字等于传进来的要查找的参数值，那么arr2内部的第2个数值就是要找的名字对应值，把他弹出来。...否则，遍历完了还没有，就弹回空或者其他的“没找到”等提示语。 removeCookie（）中：有效期时间设置为-1，让计算机以为这条数据是昨天过期，自己删除本条数据。 ?这里第二个参数为什么是1

10.5K5 1

自己封装的tools.js文件

/* * 生成指定范围的随机整数 * @param lower 下限 * @param upper 上限 * @return 返回指定范围的随机整数，上/下限值均可取 */ function...{ return Math.floor(Math.random() * (upper - lower)) + lower; } /* * 生成rgb随机颜色值 * @return 返回生成的rgb...串联字符串，并返回 return "rgb(" + r + "," + g + "," + b + ")"; } /* * 将 URL 中查询字符串转换为对象 * @param ul 待转换的URL...与 # 的索引 var start = url.indexOf("?"), end = url.indexOf("#"); // 判断是否有 ?...// 遍历迭代数组中每个元素 for (var i = 0, len = queryString.length; i < len; i++) { // 将当前数组中遍历到的 "key=

1.5K3 0

自己原生js封装的ajax请求

前言这几天在恶(xue)补(xi)node.js，其中老师讲到了ajax，以前学习js都是东一点、西一点。不系统，当然，原因也很多。...当时一些js基础知识也欠缺（虽然现在也不咋的），想要自己封装，难度也很大。今天也终于自己封装一个简易的ajax。...viewport" content="width=device-width, initial-scale=1.0"> Title js...success: function (res) { console.log(res); }, dataType: 'json' }) 压缩文件下载：ajax.min.js

5.6K3 0

JS 分片任务的高阶函数封装

="IE=edge" /> 分片任务的高阶函数封装...="IE=edge" /> 分片任务的高阶函数封装...封装高阶函数这里我们已经完成这项任务的分片执行，但我们希望这个分片函数针对的不仅仅是这个任务，它应该是通用的，所以我们要提取一些操作，让用户自己去执行，比如说：具体任务的执行过程分片任务执行的时机？...这些都应该由开发者去定义，基于这些，我们封装成一个更加通用的高阶函数：的用法浏览器的渲染原理分片高阶函数的封装

3451 0

JS高级-数据结构的封装

带着这个美好的愿望，开始学习吧O(∩_∩)O~~ 我们知道在JS中，常常用来组织数据的无非是数组和对象（这些基础就不介绍了）。...当然这些数据类型，原生JS不支持，那么就需要通过封装来模拟，其底层还是数组和对象（被看穿喽~），接下来我们挨个来解析吧一、列表定义：列表是一组有序的数据，每个列表中的数据项称为元素。...队列的封装代码： function Queue() {//队列的构造函数 this....JS中对象就是以字典的形式设计的，但字典的基础是数组，而不是对象。这样可以进行排序，况且JS中一切皆对象，数组也不例外。...集合的封装代码： function Set() {//集合的构造函数 this.

8.8K7 0

tab 插件封装 — 类似vue框架的思想

看了一个tab 封装的插件，插件简单，但思想很不错. 现分享给大家，可以看看 html 页面代码：思想： 1. 使用节点的属性data来设置数据. 2....-- 引入模板文件 --> js"> js"> js"> new MyTab("#my-tab"); 模板文件：tpl.js 思想： 1、和一般的插件封装不一样，这里使用了模板的概念 2、...：myTab.js 思想： 1、将全局变量，变成形参来使用 2、功能划分细致，模块独立 3、使用文档片断 createDocumentFragment, 减少对dom操作的次数 4、全部采用es3 es5

1.8K2 0

小程序授权js封装

小程序的js封装，不是很全面，不过大部分的授权，做的产品是对接腾讯云的即时通讯IM 自建一个js文件放进去 const deviceAuthorSeting=function(author){...} export default deviceAuthorSeting 引入：import deviceAuthorSeting from "@/common/deviceAuthorSeting.js

5.4K1 0

js封装cookie操作函数

简单封装一下js操作cookie的函数 //设置cookie function setCookie(name,value,expireTime) { var exp = new Date();

9.7K5 0

使用vue封装右键菜单插件

在package.json中，CLI默认是把vue和core-js放在dependencies下的，我们开发的插件是要给其他开发者引用的，如果我们打包的产物中包含Vue包的话可能会引发各种问题，比如用户可能会在引入我们的包之后会在...{ "declaration": true,// 是否生成声明文件 "declarationDir": "dist/lib",// 声明文件打包的位置 } 创建vue.config.js...我们可以通过手动将其设置为false，让其在打包时使用内联样式，这样就能解决样式失效的问题了，我们在vue.config.js中加入下述代码。...，经过一番思考后，我又想到了下述思路：将上述加载组件的实现封装成一个函数，将创建的div元素作为返回值。...在插件全局声明一个变量menuVM，默认声明为null 指令内部触发右键事件时，调用我们封装的函数，用menuVM去接收其返回值此时我们创建一个全局点击事件的监听，如果menuVM不为null，我们就把这个元素移除

3.5K3 0

Html5上传插件封装

前段时间将flash的上传控件替换成使用纯js实现的,在此记录 1.创建标签封装上传插件 //拓展 $.extend($.fn, { fileUpload: function (opts) { this.each(function...funs.fileSelected(); }); }); } }); 3.调用封装的控件...file:后台接收此文件的参数 id:当前是冗余拓展，博主本意是上传到服务器后返回个url，url指向上传文件的服务器路径 4.控制器接收文件并且保存(简单实现) [HttpPost...// public ActionResult SavePhoto() { //fileName要和视图的插件参数一致

4.3K8 0

AngularJS driective 封装自动滚动插件

1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll', ['$location', '$anchorScroll...} }; }]); 　　HTML 使用方法　　Controller 中对数据的绑定

1.8K8 0

JS中封装性，你真的懂封装性嘛？？？？

console.log("局部函数"); } console.log(num); console.log(value);//记住,局部的变量与函数只能在他所在的作用域中输出

2.1K1 0

js写插件教程

；我为了方便都写到一个html中了；请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里；就是function(){}();函数自执行；保证里面的变量不会与外界互相影响...号(叹号)或者;(分号)这不是写错了,为了防止那个二货写的js结束没有分号；而可能发生报错 /* ;function(win,doc,$,undefined){ }(window...比如你要点击按钮添加input的值到 div里 var addHtml = function(demo,btn){//插件名，调用的时候直接new一下插件名就行了并传参数或者传对象(一般这个函数名手写字母大写比较好...add-1");//这里是实例1调用插件的代码 new addHtml("demo-2","add-2"); //这里是实例2调用插件的代码 //是不是明白为什么要写插件了；要封装...--这里是最简单的插件写法；当然还有传对象参数的插件等等。。。。-->

42.2K1 0

JS-完美运动框架（封装）

function getStyle(obj, name) { if(obj.currentStyle) { return obj...

5.1K8 0

Vue笔记：封装 axios 为插件使用

使用axios发起一个请求对大家来说是比较简单的事情，但是axios没有进行封装复用，项目越来越大，引起的代码冗余。就会非常麻烦的一件事。...所以本文会详细的跟大家介绍，如何封装请求，并且在项目组件中复用请求。有需要的朋友可以做一下参考。...，结合 Vuex 做全局的loading动画，或者错误处理将 axios 封装成 Vue 插件使用文件结构在src目录下新建 http 文件夹 ?...config.js axios的默认配置 api.js 二次封装axios，拦截器等 interface.js 请求接口文件 index.js 将axios封装成插件 config.js 完整配置请参考...封装成 Vue 插件 // 导入所有接口 import apiList from '.

2.6K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭