-003Providing flexible method parameters

Posted 2020-07-06 shamgod

一、The options object

1.增加阴影效果

 1 (function($) {
 2     $.fn.shadow = function() {
 3         return this.each(function() {
 4             var $originalElement = $(this);
 5             for (var i = 0; i < 5; i++) {
 6                 $originalElement
 7                     .clone()
 8                     .css({
 9                         position: ‘absolute‘,
10                         left: $originalElement.offset().left + i,
11                         top: $originalElement.offset().top + i,
12                         margin: 0,
13                         zIndex: -1,
14                         opacity: 0.1
15                     })
16                     .appendTo(‘body‘);
17             }
18         });
19     };
20 })(jQuery);
21 
22 $(document).ready(function() {
23     $(‘h1‘).shadow();
24 });

 

 1 (function($) {
 2     $.fn.shadow = function(options) {
 3         return this.each(function() {
 4             var $originalElement = $(this);
 5             for (var i = 0; i < options.copies; i++) {
 6                 $originalElement
 7                     .clone()
 8                     .css({
 9                         position: ‘absolute‘,
10                         left: $originalElement.offset().left + i,
11                         top: $originalElement.offset().top + i,
12                         margin: 0,
13                         zIndex: -1,
14                         opacity: options.opacity
15                     })
16                     .appendTo(‘body‘);
17             }
18         });
19     };
20 })(jQuery);

Calling this method now requires us to provide an object containing the option values:

1 $(document).ready(function() {
2     $(‘h1‘).shadow({
3         copies: 3,
4         opacity: 0.25
5     });
6 });

 

二、Default parameter values

 1 (function($) {
 2     $.fn.shadow = function(opts) {
 3         var defaults = {
 4             copies: 5,
 5             opacity: 0.1
 6         };
 7         var options = $.extend(defaults, opts);
 8         // ...
 9     };
10 })(jQuery);
11 
12 
13 
14 $(document).ready(function() {
15     $(‘h1‘).shadow({
16         copies: 3
17     });
18 });
19 
20 $(document).ready(function() {
21     $(‘h1‘).shadow();
22 });

 

三、Callback functions

 1 (function($) {
 2     $.fn.shadow = function(opts) {
 3         var defaults = {
 4             copies: 5,
 5             opacity: 0.1,
 6             copyOffset: function(index) {
 7                 return { x: index, y: index };
 8             }
 9         };
10         var options = $.extend(defaults, opts);
11         return this.each(function() {
12             var $originalElement = $(this);
13             for (var i = 0; i < options.copies; i++) {
14                 var offset = options.copyOffset(i);
15                 $originalElement
16                     .clone()
17                     .css({
18                         position: ‘absolute‘,
19                         left: $originalElement.offset().left + offset.x,
20                         top: $originalElement.offset().top + offset.y,
21                         margin: 0,
22                         zIndex: -1,
23                         opacity: options.opacity
24                     })
25                     .appendTo(‘body‘);
26             }
27         });
28     };
29 })(jQuery);
30 
31 $(document).ready(function() {
32     $(‘h1‘).shadow({
33         copyOffset: function(index) {
34             return { x: -index, y: -2 * index };
35         }
36     });
37 });

 

四、Customizable defaults

To make the defaults customizable, we need to move them out of our method definition and into a location that is accessible by outside code:

 1 (function($) {
 2     $.fn.shadow = function(opts) {
 3         var options = $.extend({}, $.fn.shadow.defaults, opts);
 4         // ...
 5     };
 6     $.fn.shadow.defaults = {
 7         copies: 5,
 8         opacity: 0.1,
 9         copyOffset: function(index) {
10             return { x: index, y: index };
11         }
12     };
13 })(jQuery);
14 
15 $(document).ready(function() {
16     $.fn.shadow.defaults.copies = 10;
17     $(‘h1‘).shadow({
18         copyOffset: function(index) {
19             return { x: -index, y: index };
20         }
21     });
22 });