js插件的经典写法与总结

之前写了一篇关于js插件的方法，可以传入参数，当时不能够拓展方法，而且模式也不是很好，虽然能够满足一定的业务要求。下面是对js插件的完善，可以实现参数传入，方法拓展，链式操作，设计模式更加清晰。

<!DOCTYPE html>
<html>
<head><title>js插件测试</title><script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div style="width:200px;height:200px;border:1px solid;background:red" class="mydiv">测试</div>
<script type="text/javascript">
(function($){//定义在闭包函数中的全局变量，用来初始化参数，其他的所有函数可以调用var config;//一些私有函数，相当于php类中private的私有方法，被主函数调用var privateFunction = function(){// 执行代码console.log(arguments[0]);}//主函数包含在method中，对外暴露，可以被jquery的实例对象执行var methods = {//初始化的函数，传入参数对象init: function(options){     // 在每个元素上执行方法，同时返回该jqueryded的实例对象// console.log(options);return this.each(function() {var $this = $(this);// console.log($this);// 尝试去获取settings，如果不存在，则返回“undefined”var settings = $this.data('pluginName');// console.log(settings);// 如果获取settings失败，则根据options和default创建它if(typeof(settings) == 'undefined'){var defaults = {name:'zengbing',sex:'nan',onSomeEvent: function() {}};settings = $.extend({}, defaults, options);// 保存我们新创建的settings$this.data('pluginName',settings);}else{// 如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做）settings = $.extend({}, settings, options);// 如果你想每次都保存options，可以添加下面代码：$this.data('pluginName', settings);}//将该配置参数赋值全局变量，方便其他函数调用config=settings;// 执行私有的方法，完成相关逻辑任务// privateFunction(config.name);});},//销毁缓存的变量destroy: function(options) {// 在每个元素中执行代码return $(this).each(function() {var $this = $(this);// 执行代码// 删除元素对应的数据$this.removeData('pluginName');});},//其他的主题函数。可以完成对象的其他操作val: function(options1,options2,options3) {// 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值var someValue = this.eq(0).html();// 返回值console.log(arguments);return someValue;},getContent: function(){return this.each(function(){var content=$(this).text();console.log(content);//获取全局变量的初始化的值console.log(config.sex)});}};$.fn.pluginName = function(){var method = arguments[0];if(methods[method]) {method = methods[method];//将含有length属性的数组获取从第下标为1的之后的数组元素，并返回数组arguments = Array.prototype.slice.call(arguments,1);}else if( typeof(method) == 'object' || !method ){method = methods.init;}else{$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );return this;}//jquery的实例对象将拥有执行method的能力，method的this是指jquery的实例对象return method.apply(this,arguments);}})(jQuery);//用法实例
var config={name:'huang',sex:'nv'
};
//先初始化参数配置，在执行各个主体函数，函数中可以调用config的变量，其实就是jquery的链式操作
$('div.mydiv').pluginName(config).pluginName('getContent').pluginName('val','bing');</script></body>
</html>

js插件的经典写法与总结相关推荐

前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
JavaScript（三）js插件
文章目录一.日期组件(laydate) 二.Echarts图表统计(柱形统计图) 三.Echarts图表统计(扇形统计图) 四.Echarts图表统计(折线统计图) 一.日期组件(laydate) ...
如何定义一个高逼格的原生JS插件
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
js中foreach有三种写法，你知道吗
JavaScript的foreach 初始化写法 1.经典写法 2.js的foreach 3.es6的foreach 初始化先创建一个h5文件,并定义一个数组 <!DOCTYPE html& ...
原生js插件（超详细）
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
从零开始编写一个js插件
什么是js插件首先我们必须要明白什么是js插件,说的简单点,类似于 function add(a, b){ return a+b; } 这就是一种插件的雏形,因为它还没有封装起来, 它会影响到工作区 ...
JQuery Easing.js插件
jQuery Easing.js 插件介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...

js插件的经典写法与总结

js插件的经典写法与总结相关推荐

最新文章

热门文章