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

时间: 2018-01-16阅读: 975标签: 插件

作为前端开发,我们都习惯使用一些开源的插件例如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就是最典型的使用闭包的工具库。


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

video.js使用技巧

Video.js初始化有两种方式;一种是在<video>标签里面加上。注意,两者缺一不可。刚开始的时候我觉得后面的值为空对象{},不放也行,导致播放器加载不出来,后来加上来就可以了。

关于 tapable 你需要知道这些

在阅读 webpack 前如果不了解 tapable 的话,很有可能会看得云里雾里,那么 tapable 到底是什么,又有什么用呢?本文主要介绍 tapable 的使用以及相关实现,通过学习 tapable 能够进一步的了解 webpack 的插件机制

11个顶级 JavaScript 日历插件

日历是我们生活中重要的一部分。在当今世界,人们大多使用网络或移动日历。它们随处可见,包括在各种软件中:预订应用、旅行软件、项目管理、管理面板等。出于多种原因,用户可能需要在网站上使用日历

Vue自定义指令directive,插件的封装以及混合mixins

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

chrome书签插件

Pinbox 是一款可以使得用户的Chrome书签变得更加生动的谷歌浏览器插件,用户在Chrome中安装了Pinbox插件以后,只需要点击一下扩展按钮就会自动为你把当前的网页保存到Pinbox中。

提升工作效率的Chrome插件推荐

推荐几个我觉得非常不错的 Chrome 插件,都是我非常常用的。Postman、Octotree、OneTab、Momentum、掘金、Night Eye、一键管理所有扩展

vue开发常用第三方插件总结

这篇文章整理vue开发中常用插件及工具,主要包含: UI组件、开发框架、实用库、服务端SSR、辅助工具、应用实例、Demo示例等,分享给大家,希望对大家有所帮助

Vue实现一个图片懒加载插件

图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。 这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件。

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全