【JavaScript】插件参数的写法

就是实现复制的一个过程

(function() {
    var Explode = function(container, params) {
        ‘use strict‘;
        var n = this;
        if(!(this instanceof Explode)) return new Explode(container, params);
        var defaults = {
            img: ‘chi2.png‘,
            type: 1
        };
        params = params || {};    /*有参数传递进来赋给params,没有为空*/
        var originalParams = {};  /*备份传进来的params*/
        for(var param in params) {  /*遍历params*/
            if(typeof params[param] === ‘object‘) {  /*如果是对象,继续遍历该对象,再赋值*/
                originalParams[param] = {};
                for(var deepParam in params[param]) {
                    originalParams[param][deepParam] = params[param][deepParam];
                }
            } else {  /*不是对象,直接赋值*/
                originalParams[param] = params[param];
            }
        };
        for(var def in defaults) {   /*遍历默认的参数,如果传入的参数没有定义到,则把默认值加进来,若已定义,则默认值没用*/
            if(typeof params[def] === ‘undefined‘) {  /*比如:如果params[img]没有定义,则使用默认值*/
                params[def] = defaults[def];
            } else if(typeof params[def] === ‘object‘) {
                for(var deepDef in defaults[def]) {
                    if(typeof params[def][deepDef] === ‘undefined‘) {
                        params[def][deepDef] = defaults[def][deepDef];
                    }
                }
            }
        };
        n.params = params;
        n.originalParams = originalParams;
        n.container = typeof container === ‘string‘ ? document.querySelectorAll(container) : container;
        if(!n.container || (n.container.length && n.container.length == 0)) return; /*没有container直接return*/
        if(n.container.length && n.container.length > 1) { /*有container且个数大于1*/
            var s = [];
            for(var i = 0; i < n.container.length; i++) {
                s.push(new Explode(n.container[i], params));
            };
            return s;
        };
        n.container = n.container[0] || n.container;   /*有且仅有一个container*/
})() 
时间: 2024-10-07 06:15:13

【JavaScript】插件参数的写法的相关文章

如何开发原生的 JavaScript 插件(知识点+写法)

一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了,我个人简单理解就是,能方便实现某个功能的扩展工具.(下面我会通过简单的例子来帮助读者理解) 第二个 W "Why" -- 为什么? 为什么要有插件这种东西,首先结合第一个 W 来理解就是,使用插件的目的是方便我们实现某一个功能. 也就是说在编程过程中我们只需要找轮子,或者改轮子而不需要重

大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector)

一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式.那么今天从这篇文章开始,我们就以实例 的方式带着大家由浅入深的开发属于自己的插件库.嘿嘿嘿,废话少说,进入正题.直接上实际效果图: 大家看到了吧,这是一个下拉菜单插件,在我们日常开发中,系统提供的可能有时让我们觉得不是很美观并且功

bootstrap javascript插件部分的笔记整理

概览 (1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件. bootstrap框架里的轮播图,他有自己的js文件. JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 bootstra

Nivoslider插件参数和方法

Nivoslider插件参数和方法一览表 参数/方法 描述 默认值 基本 effect 图片切换效果.提供了11种效果:'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft',诸如渐入渐出,滑动,百叶窗等等都有. random animSpeed 图片切换速度(毫秒) 500

jQuery插件使用和写法

jQuery插件分类3中: 1.封装对象方法的插件. 2.封装全局函数的插件. 3.选择器插件. jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法: 1.jQuery.fn.extend()方法——封装对象方法. 代码如下: ;(function($){ ////这里写插件代码 })(jQuery); 2.jQuery.extend()方法——封装全局函数.选择器插件,还有一个很强大的功能,用于扩展已有的Object对象. 代码如下: jQuery.extend(tar

开源原生JavaScript插件-CJPCD(省市区联动)

一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的功能.网上有许多类似插件,但是有些需求还是有些出入,所以就自己动手写了一个.思路是共通的但是实现和细节肯定会有所不同,我们重点放在代码介绍上.笔者已经将其上传到 github,大家可以下载使用,也可以把源码拷下来参考,路过的朋友顺手 star 哦. 二.补充知识 当前插件版本为1.0.1,能满足最常

(转)javascript匿名函数的写法、传参和递归

(原)http://www.veryhuo.com/a/view/37529.html (转)javascript匿名函数的写法.传参和递归 http://www.veryhuo.com 2011-08-07 断桥残雪部落格 投递稿件 我有话说 今天在整理javascript入门培训的PPT时,提到了匿名函数,所以拿来分享下心得. 匿名函数的写法顾名思义,就是没有名字的函数(⊙﹏⊙b汗).匿名函数通常用于javascript作用域的控制,可以有效的避免对全局变量的污染.常见的匿名函数有下面四种写

JavaScript 插件

概览 单个还是全部引入 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了. 组件的 data 属性 不要在同一个元素上同时使用多个插件的 data 属性.例如,button 组件不能

Bootstrap3.0学习教程十七:JavaScript插件模态框

这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js). 不要将两份文件全部引入 bootstrap.js和bootstrap.min.js同样是包含了所有插件.区别是:一个没有压缩,一个进行了压缩. 插件之间的依赖 某些插件和CSS组件依赖于其