使用原生js开发插件的实现方法

更新日期: 2018-01-16阅读量: 2657标签: 插件

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码


;(function(global) {
    "use strict";
    var fly=function(data){
        
    };
    
    fly.prototype.setColor=function(el,color){
		if(typeof el === 'string'){
			document.getElementById(el).style.color=color;
		}
    };
    

    if (typeof module !== 'undefined' && module.exports) module.exports = fly;//兼容CommonJs规范
    if (typeof define === 'function') define(function() { return fly; });//兼容AMD/CMD规范
    global.fly = fly;//全局变量
})(this);

这个简单的插件实现了一个功能把设置一个div的颜色值, 插件的使用如下:

<div id="box">这是文字</div>
<script src="fly.js"></script>
<script>
var f=new fly();//实例化
f.setColor('box','red');
</script>


简单说明:

1.使用严格模式可以修复了部分语言上的不足,提供更强的错误检查,保证代码较强的安全性。

2.使用闭包模式,保证插件内变量的安全,加强了封装性,避免数据对环境的污染,jquery就是最典型的使用闭包的工具库。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/360

chrome插件开发

上手调试:打开chrome://extensions/ 开启开发者模式,选择加载已解压的扩展程序,选中自己的项目文件即可上手调试;引入vue 会出现 安全性问题,需要在manifest.json中设置

使用CodeMirror插件遇到的问题

结果你会发现,可以复制代码,没问题,但是不可以粘贴复制的代码,那问题到底出现在了哪里呢?首先呢,排除clipboard插件的问题,这个很简单,随便找个例子测试一下就行了

Js二维码插件:qrious

二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。

解决游览器安装Vue.js devtools插件无效的问题

打开自己写的一个vue.js网页,发现图标并没有亮起来,还是灰色;打开自己写的一个vue.js网页,游览器上图标有了 ,但是控制台不显示;解决方案:

揭秘webpack plugin

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。这篇文章将尝试探索 webpack plugin

分享 10 个超实用的 Chrome 扩展

CSSViewer这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它的所有CSS属性。您可以通过快捷键在CSSViewer的窗体中轻松复制您选定元素的样式。

jQuery图片剪裁插件Cropper.js的使用

1.引入必要的js和css核心文件;2.构建html,可以将图片或canvas直接包裹到一个块级元素中。small时预览框;3.初始化插件及相关参数

通过编译器插件实现代码注入

大型的前端系统一般是模块化的。每当发现问题时,模块负责人总是要重复地在浏览器中找出对应的模块,略读代码后在对应的函数内打上断点,最终开始排查。

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数1.进入动画钩子:before-enter,enter,after-enter;2.离开动画钩子:before-leave,leave,after-leave;3.在enter钩子中的函数调用done

程序员必备五款chrome浏览器插件

postman一款模拟客户端工具,通常用于开发中调试api接口。相信大部分程序员都有使用过,操作简单且功能强大,支持团队开发。 json这种数据交换格式在数据开发中被运用的越加广泛,jsonview插件可以自动对json数据转码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!