您的位置：首页 > Web前端 > JavaScript

js插件的经典写法与总结

2017-01-09 23:44 337 查看

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

[html] view
plain copy

print ?

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航