Créer un plugin jquery en nodeJs

1. import $ from 'jquery'
3. const jqueryPluginSkeleton = (($) => {
5. const NAME = 'jqueryPluginSkeleton';
6. const DATA_KEY = 'jits.jqueryPluginSkeleton';
8. class jqueryPluginSkeleton {
10. constructor(element, params) {
11. this._element = element;
12. this._params = params;
13. this.setEvents();
14. };
16. setEvents(){
17. let self = this;
18. $('.badge', this._element).click(function(e){
19. self.click($(e.target));
20. });
21. }
23. click($badge) {
24. if($badge.hasClass(this._params.selectedClass)){
25. $badge.addClass(this._params.defaultClass)
26. .removeClass(this._params.selectedClass);
27. }else{
28. $badge.addClass(this._params.selectedClass)
29. .removeClass(this._params.defaultClass);
30. }
31. this.loadItems();
32. }
34. loadItems(){
35. console.log('Load at:' + $(this._element).data('url'));
36. // ...
37. }
39. // Static
40. static _jQueryInterface(config) {
41. const defauts =
42. {
43. selectedClass: "badge-primary",
44. defaultClass: "badge-disabled",
45. };
46. let params = $.extend(defauts, config);
47. return this.each(function () {
48. const $element = $(this);
49. let data = $element.data(DATA_KEY);
50. if (!data) {
51. data = new badgeFilters(this, params);
52. $element.data(DATA_KEY, data);
53. }
54. })
55. }
56. }
58. /**
59. * ------------------------------------------------------------------------
60. * jQuery
61. * ------------------------------------------------------------------------
62. */
64. $.fn[NAME] = jqueryPluginSkeleton._jQueryInterface;
65. $.fn[NAME].Constructor = jqueryPluginSkeleton;
66. $.fn[NAME].noConflict = function () {
67. $.fn[NAME] = JQUERY_NO_CONFLICT
68. return jqueryPluginSkeleton._jQueryInterface
69. };
70. return jqueryPluginSkeleton;
71. })($);
73. export default jqueryPluginSkeleton

import $ from 'jquery'

const jqueryPluginSkeleton = (($) => {

    const NAME  = 'jqueryPluginSkeleton';
    const DATA_KEY  = 'jits.jqueryPluginSkeleton';

    class jqueryPluginSkeleton {

        constructor(element, params) {
            this._element = element;
            this._params = params;
            this.setEvents();
        };

        setEvents(){
            let self = this;
            $('.badge', this._element).click(function(e){
                self.click($(e.target));
            });
        }

        click($badge) {
            if($badge.hasClass(this._params.selectedClass)){
                $badge.addClass(this._params.defaultClass)
                      .removeClass(this._params.selectedClass);
            }else{
                $badge.addClass(this._params.selectedClass)
                      .removeClass(this._params.defaultClass);
            }
            this.loadItems();
        }

        loadItems(){
            console.log('Load at:' + $(this._element).data('url'));
            // ...
        }

        // Static
        static _jQueryInterface(config) {
            const defauts  =
                {
                    selectedClass: "badge-primary",
                    defaultClass: "badge-disabled",
                };
            let params = $.extend(defauts, config);
            return this.each(function () {
                const $element = $(this);
                let data = $element.data(DATA_KEY);
                if (!data) {
                    data = new badgeFilters(this, params);
                    $element.data(DATA_KEY, data);
                }
            })
        }
    }

    /**
     * ------------------------------------------------------------------------
     * jQuery
     * ------------------------------------------------------------------------
     */

    $.fn[NAME]             = jqueryPluginSkeleton._jQueryInterface;
    $.fn[NAME].Constructor = jqueryPluginSkeleton;
    $.fn[NAME].noConflict  = function () {
        $.fn[NAME] = JQUERY_NO_CONFLICT
        return jqueryPluginSkeleton._jQueryInterface
    };
    return jqueryPluginSkeleton;
})($);

export default jqueryPluginSkeleton

1. <div class="filters-list collapse pt-2" id="main-filters-list" data-url="/most-recent">
2. <a href="#" class="badge badge-primary all">All</a>
3. <a href="#" class="badge badge-disabled">Culture</a>
4. <a href="#" class="badge badge-disabled">Politic</a>
5. </div>

<div class="filters-list collapse pt-2" id="main-filters-list" data-url="/most-recent">  
 <a href="#" class="badge badge-primary all">All</a>  
 <a href="#" class="badge badge-disabled">Culture</a>  
 <a href="#" class="badge badge-disabled">Politic</a>
 </div>

1. var jqueryPluginSkeleton = require('./jquery-plugin-skeleton');
3. $(function(){
4. $('.filters-list').jqueryPluginSkeleton({});
5. });

var jqueryPluginSkeleton = require('./jquery-plugin-skeleton');

$(function(){
   $('.filters-list').jqueryPluginSkeleton({});
});