Magento 2 requires Js Component Init: it does not work

I'm having a problem, while I initialize.
If I define them in the document, it works as expected, but of course you can not call my functions from that scope.

web / js / shadefinder.js

define([
'jquery',
'underscore',
'mage/template',
'mage/translate',
'mage/url',
'jquery/ui',
'slick'
], function ($, _, mageTemplate, $ translate, url) {
& # 39; strict use & # 39 ;;

var Shadefinder = {

init: function () {
var msSfLoader = & # 39; .ms-sf-loader & # 39 ;;;

var _ this = this;
_this.shade = "http://magento.stackexchange.com/";
_this.skin = "http://magento.stackexchange.com/";
_this.underlyingColor = "http://magento.stackexchange.com/";
_this.desiredFormula = "http://magento.stackexchange.com/";
_this.skinTone = "http://magento.stackexchange.com/";
_this.baseurl = url;
_this.mediaurl = $ (& # 39; # mediaUrl & # 39;). val () + & # 39; shade_finder / & # 39 ;;
// _this.skinurl = skin;
_this.currentStep = 0;
_this.result = "http://magento.stackexchange.com/";
_this.mediaurlshade = $ (& # 39; # mediaUrl & # 39;). val () + & # 39; images / & # 39 ;;

$ (& # 39; ms-sf-step-2 & # 39 ;, & # 39; ms-sf-step-3 & # 39 ;, & # 39; ms-sf-step-4 & # 39 ;, & # 39 ; ms-sf-step-5 & # 39 ;, & # 39; final & # 39;). hide ();

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .start-over & # 39 ;, function () {
_this.startOver ();
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .skinlabel1 & # 39 ;, function () {
_this.nextStep (this, 0);

});
jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .skinlabel2 & # 39 ;, function () {
_this.nextStep (this, 0);

});
jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .skinlabel3 & # 39 ;, function () {
_this.nextStep (this, 0);

});
jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .skinlabel4 & # 39 ;, function () {
_this.nextStep (this, 0);

});
jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .ms-shade-color-title & # 39 ;, function () {
_this.underlyingColor = jQuery (this) .attr (& # 39; value & # 39;);
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # bulk_add & # 39 ;, function () {
_this.bulkAddToCart (jQuery (this) .val ());
jQuery (this) .attr (& # 39; disabled & # 39 ;, true);
});

jQuery (& # 39 ;. ms-shadefinder-logo & # 39;). in (& # 39; click & # 39 ;, function (e) {
jQuery (this) .addClass (& # 39; selected & # 39;);
jQuery (& # 39 ;. ms-shadefinder-overlay & # 39;). Show ();
jQuery (& # 39 ;. shadefinder-widget-main & # 39;). Show ();
});

jQuery (& # 39 ;. ms-shadefinder-close & # 39;). in (& # 39; click & # 39 ;, function (e) {
jQuery (& # 39 ;. ms-shadefinder-overlay, .ms-shadefinder-popup, # ms-sf-step-2, # ms-sf-step-3, # ms-sf-step-4, # ms- sf-step -5, #final & # 39;). Hide ();
jQuery (& # 39; # ms-sf-step-1 & # 39;). Show ();
jQuery (& # 39 ;. ms-shadefinder-logo, .shade-box & # 39;). removeClass (& # 39; selected & # 39;);
jQuery (& # 39 ;. shade-box & # 39;). removeClass (& # 39; unselected & # 39;);
});


jQuery (& # 39 ;. icon_help & # 39;). in (& # 39; click & # 39 ;, function () {
jQuery (this) .toggleClass (& # 39; help_selected & # 39;);
jQuery (& # 39 ;. ms-shadefinder-help & # 39;). slideToggle ();
});


jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # stpcont-4 .shade-box: first-child & # 39 ;, function () {
if (jQuery (& # 39; # stpcont-4 .shade-box: first-child & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # step-nav-next-4 & # 39;). html (& # 39;Finish& # 39;);
} else {
var foundationResultLink = jQuery (& # 39; # stpcont-4 .shade-box: first-child .ms-foundation-result-finish & # 39;). attr (& # 39; href & # 39;);
jQuery (& # 39; # step-nav-next-4 & # 39;). html (& # 39;Finish& # 39;);
}
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # stpcont-4 .shade-box: nth-child (2) & # 39 ;, function () {
if (jQuery (& # 39; # stpcont-4 .shade-box: nth-child (2) & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # step-nav-next-4 & # 39;). html (& # 39;Finish& # 39;);
} else {
var foundationResultLink2 = jQuery (& # 39; # stpcont-4 .shade-box: nth-child (2) .ms-foundation-result-link to & # 39;). attr (& # 39; href & # 39;);
jQuery (& # 39; # step-nav-next-4 & # 39;). html (& # 39;Finish& # 39;);
}
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # step-nav-next-4 & # 39 ;, function () {
if (! jQuery (& # 39; # ms-sf-step-4 .shade-box.selected & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # ms-sf-step-4 .ms-error-msg & # 39;). Show ();
} else {
jQuery (& # 39; # ms-sf-step-4 .ms-error-msg & # 39;). hide ();
}
});

jQuery (& # 39; # step-nav-next-1 & # 39;). on (& # 39; click & # 39 ;, function () {
if (jQuery (& # 39 ;. ms-shadefinder-step1 .ms-shadefinder-step1-item & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg & # 39;). hide ();
var _ this = this;
jQuery (msSfLoader) .show ();
var skintype = jQuery (& # 39 ;. ms-shadefinder-step1 .ms-shadefinder-step1-item.selected .skinlabel & # 39;). text ();
var html = "http://magento.stackexchange.com/";
jQuery (& # 39 ;. shade-box-container & # 39;). empty ();
$ .ajax ({
url: url.build (& # 39; foundation-shade-finder / index / getSkinToneBySkinType & # 39;),
type: "GET",
data: {skintype: skintype},
success: function (answer) {
var res = response.responseText.evalJSON ();
if (res.status === & # 39; success & # 39;) {
if (res.content.length) {
res.content.each (function (e, i) {
html + = e.content;
});
}
jQuery (& # 39; # ms-sf-step-1 & # 39;). hide ();
jQuery (& # 39; # ms-sf-step-2 & # 39;). Show ();
//jQuery('.shade-box-container').html(html).slick("refresh ");
jQuery (& # 39 ;. shade-box-container & # 39;). html (html);
jQuery (& # 39 ;. shade-box-container & # 39;). removeClass ("slick-initialized slick-slider");

/ * options of var = {
selector: & # 39; .shade-box-container & # 39 ;,
show: 3,
displacement: 1,
sensitive: [3, 2, 1]
                            }; * /
//$.tam.slider(options);

jQuery (& # 39 ;. shade-box-container & # 39;). slick ({
infinity: false,
slides to show: 3,
slidesToScroll: 1,
sensitive: [
                                    {
                                        breakpoint: 767,
                                        settings: {
                                            vertical: true,
                                            slidesToShow: 3,
                                            slidesToScroll: 1,
                                            dots: true,
                                            arrows: false
                                        }
                                    }
                                ]
                            });

jQuery (& # 39; html, body & # 39;). animate ({scrollTop: 0}, 0);
jQuery (msSfLoader) .hide ();
} else {
jQuery (msSfLoader) .hide ();
}
}
fails: function (response) {

}
});
} else {
jQuery (& # 39; # ms-sf-step-1 .ms-shadefinder-container2 .ms-error-msg & # 39;). Show ();
}
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # step-nav-back-2 & # 39 ;, function () {
jQuery (& # 39; # ms-sf-step-2 & # 39;). hide ();
jQuery (& # 39; # ms-sf-step-1 & # 39;). Show ();
jQuery (& # 39; html, body & # 39;). animate ({scrollTop: 0}, 0);
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; .shade-box & # 39 ;, function () {
var stepParentId = & # 39; # & # 39; + jQuery (this) .parents (& # 39 ;. stp-cont & # 39;). attr (& # 39; id & # 39;);
jQuery (this) .siblings (). removeClass (& # 39; selected & # 39;);
jQuery (this) .siblings (). addClass (& # 39; unselected & # 39;);
if (jQuery (this) .hasClass (& # 39; selected & # 39;)) {
jQuery (this) .removeClass (& # 39; selected & # 39;);
jQuery (this) .siblings (). removeClass (& # 39; unselected & # 39;);
} else {
jQuery (this) .addClass (& # 39; selected & # 39;);
jQuery (this) .removeClass (& # 39; unselected & # 39;);
}

if (jQuery (stepParentId + & # 39; .shade-box.selected & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (stepParentId + & # 39; .ms-error-msg & # 39;). hide ();
jQuery (stepParentId + & # 39; .ms-shadefinder-step-next & # 39;). removeClass (& # 39; ms-shadefinder-item-unselected & # 39;);
} else {
jQuery (stepParentId + & # 39; .ms-error-msg & # 39;). Show ();
jQuery (stepParentId + & # 39; .ms-shadefinder-step-next & # 39;). addClass (& # 39; ms-shadefinder-item-unselected & # 39;);
}
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # step-nav-next-2 & # 39 ;, function () {
if (jQuery (& # 39; # ms-sf-step-2 .shade-box.selected & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg & # 39;). hide ();
var _ this = this;
jQuery (msSfLoader) .show ();
var skintype = jQuery (& # 39; # ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel & # 39;). text ();
var skintone = jQuery (& # 39; # ms-sf-step-2 .shade-box.selected .sf-label & # 39;). text ();
var html = "http://magento.stackexchange.com/";
$ .ajax ({
url: url.build (& # 39; foundation-shade-finder / index / getUndertoneBySkinTypeAndSkinTone & # 39;),
type: "GET",
data: {skintype: skintype, skintone: skintone},
success: function (answer) {
var res = response.responseText.evalJSON ();
if (res.status === & # 39; success & # 39;) {
if (res.content.length) {
res.content.each (function (e, i) {
html + = e.content;
});
}
jQuery (& # 39; # ms-sf-step-2 & # 39;). hide ();
jQuery (& # 39; # ms-sf-step-3 & # 39;). Show ();
jQuery (& # 39; # ms-sf-step-3 # stpcont-3 & # 39;). html (html);
jQuery (& # 39; html, body & # 39;). animate ({scrollTop: 0}, 0);
jQuery (msSfLoader) .hide ();
}plus{
jQuery (msSfLoader) .hide ();
}

}
fails: function (response) {

}
});
} else {
jQuery (& # 39; # ms-sf-step-2 .ms-shadefinder-step-container .ms-error-msg & # 39;). Show ();
}
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # step-nav-back-3 & # 39 ;, function () {
jQuery (& # 39; # ms-sf-step-3 & # 39;). hide ();
jQuery (& # 39; # ms-sf-step-2 & # 39;). Show ();
jQuery (& # 39; html, body & # 39;). animate ({
scrollTop: jQuery (". stp-cont"). offset (). top
}, 2000);
});

jQuery (document) .on (& # 39; click & # 39 ;, & # 39; # step-nav-next-3 & # 39 ;, function () {
if (jQuery (& # 39; # ms-sf-step-3 .shade-box.selected & # 39;). hasClass (& # 39; selected & # 39;)) {
jQuery (& # 39; # ms-sf-step-3 .ms-shadefinder-step-container .ms-error-msg & # 39;). hide ();
var _ this = this;
jQuery (msSfLoader) .show ();
var skintype = jQuery (& # 39; # ms-sf-step-1 .ms-shadefinder-step1-item.selected .skinlabel & # 39;). text ();
var skintone = jQuery (& # 39; # ms-sf-step-2 .shade-box.selected .sf-label & # 39;). text ();
var undertone = jQuery (& # 39; # ms-sf-step-3 .shade-box.selected .ms-shade-color-title & # 39;). text ();
var html = "http://magento.stackexchange.com/";
var html2 = "http://magento.stackexchange.com/";
$ .ajax ({
url: url.build (& # 39; foundation-shade-finder / index / getIdealFoundationBySkinTypeAndSkinToneAndUndertone & # 39;),
type: "GET",
data: {skintype: skintype, skintone: skintone, undertone: undertone},
success: function (answer) {
var res = response.responseText.evalJSON ();
if (res.status === & # 39; success & # 39;) {
if (res.content.length) {
res.content.each (function (e, i) {
html + = & # 39;& # 39 ;;

html + = & # 39;
& # 39 ;; html + = & # 39;
& # 39 ;; html + = & # 39;http://magento.stackexchange.com/& # 39 ;; html + = & # 39;
& # 39 ;; html + = & # 39;

Natural, semi matt

& # 39 ;; html + = & # 39;

Your skin, perfected

& # 39 ;; html + = & # 39;Natural, semi matt& # 39 ;; html + = & # 39;
& # 39 ;; html + = & # 39;
& # 39 ;; $ (& # 39; stpcont-4 & # 39;). innerHTML = html; var _ this = this; _this.showLoader (); var _color = ele.next (0) .innerHTML; //_this.underlyingColor = _color; ele.siblings (). invoke (& # 39; removeClassName & # 39 ;, & # 39; selected & # 39;); ele.addClassName (& # 39; selected & # 39;); $ (& # 39; sel_2 & # 39;). innerHTML = _this.underlyingColor; _this.displayStep (_this.currentStep, _this.currentStep); _this.hideLoader (); } step4: function (ele) { //console.log('aaaaa & # 39;); var _ this = this; _this.showLoader (); ele.siblings (). invoke (& # 39; removeClassName & # 39 ;, & # 39; selected & # 39;); ele.addClassName (& # 39; selected & # 39;); _this.desiredFormula = ele.readAttribute (& # 39; sf-label & # 39;); $ (& # 39; sel_3 & # 39;). innerHTML = _this.desiredFormula; $ .ajax ({ url: url.build (& # 39; foundation-shade-finder / index / getResults & # 39;), type: "GET", data: {skin: _this.skin, underlying_color: _this.enustarColorColor, shadow: this. shaded, desired_formula: _this.desiredFormula}, success: function (answer) { var res = response.responseText.evalJSON (); // console.log (response.responseText); if (res.status === & # 39; success & # 39;) { _this.result = res; // update the global variable to use more if (res.skin_tone.length> 0) {// check pitch step // show skin tones // alert ("test"); var html = "http://magento.stackexchange.com/"; res.skin_tone.each (function (e, i) { html + = & # 39;
& # 39 ;; html + = & # 39;
& # 39; + & # 39;
& # 39 ;; html + = & # 39;
& # 39; + e.label + & # 39;
& # 39 ;; html + = & # 39;
& # 39 ;; }); $ (& # 39; stpcont-5 & # 39;). innerHTML = html; // established body _this.displaypass (4, 3); if (res.skin_tone.length === 1) { jQuery (& # 39; # stpcont-5 .shade-box & # 39;). trigger (& # 39; click & # 39;); } _this.hideLoader (); } else { _this.skinTone = "http://magento.stackexchange.com/"; _this.showResults (res); } }plus{ _this.hideLoader (); jQuery (". ms-error-msg"). Show (); } } fails: function (response) { _this.currentStep = 2; } }); } step5: function (ele) { var _ this = this; _this.showLoader (); var _tone = ele.readAttribute (& # 39; sf-label & # 39;); _this.skinTone = _tone; ele.addClassName (& # 39; selected & # 39;); $ (& # 39; sel_4 & # 39;). innerHTML = _this.skinTone; _this.showResults (); // update the current step counter in the final step _this.currentStep = 5; } showResults: function () { var _ this = this; _this.showLoader (); var res = _this.result; if (res.res_items.length> 0) { var line = "http://magento.stackexchange.com/"; res.res_items.each (function (e, i) { if (e.shade === _this.shade && e.underlying_color === _this.underlyingColor && e.skin_tone === _this.skinTone) { line = e; } }); yes (line! == "http://magento.stackexchange.com/") { _products lenders (line); } else { _this.hideLoader (); } } } renderproducts: function (line) { var _ this = this; var html = "http://magento.stackexchange.com/"; var child_skus = { & # 39; foundation & # 39 ;: line.foundation.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; blush & # 39 ;: line.blush.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; highlighter & # 39 ;: line.highlighter.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; corrector & # 39 ;: line.concealer.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; netural & # 39 ;: line.netural_lip.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; intense & # 39 ;: line.intense_lip.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2], & # 39; kit & # 39 ;: line.perfection_kit.split ("http://magento.stackexchange.com/" "http://magento.stackexchange.com/")[2] }; html + = & # 39;
& # 39 ;; var _image = & # 39;http://magento.stackexchange.com/& # 39 ;; html + = & # 39;
& # 39; + & # 39;
& # 39; + _image + & # 39;
& # 39; + & # 39;
& # 39; + _this.skinTone + & # 39;
& # 39; + & # 39;
& # 39 ;; html + = & # 39;
& # 39; + & # 39;
& # 39; + line.kit_title + & # 39;
& # 39; + & # 39;
& # 39; + & # 39;
& # 39; + & # 39;
The kit includes:
& # 39; + line.kit_description + & # 39;
$ 195 (value of $ 230)
& # 39; + & # 39;
& # 39; + & # 39;
& # 39 ;; html + = & # 39;
& # 39; + & # 39;
    & # 39 ;; if (line.foundation_sku) { var f_image = _this.result.infos.images[child_skus.foundation]; html + = & # 39;
  • & # 39; + & # 39;
    & # 39; + & # 39;
    Foundation
    & # 39; + & # 39;
    & # 39; + line.f_optn_label + & # 39;
    & # 39; + & # 39;
    & # 39; + & # 39;& # 39; + & # 39;
    $ & # 39; + _this.result.infos.prices[child_skus.foundation] + & # 39;
    & # 39; + & # 39;
    & # 39; + & # 39;
  • & # 39 ;; } html + = & # 39;
& # 39; + & # 39;
& # 39; + & # 39;Select to add the 3 previous items to the cartSelect to add the following 3 items to the cart& # 39; + & # 39;
& # 39; + & # 39;
& # 39; + & # 39;
Are you looking for additional products to complement your skin tone?
& # 39; + & # 39; & # 39; + & # 39;
& # 39; + & # 39;
& # 39 ;; $ (& # 39; stpcont-final & # 39;). innerHTML = html; _this.displaypass (5, 4); _this.hideLoader (); } nextStep: function (ele, step) { yes (step === 0) { this.step0 (ele); } yes (step === 1) { this.step2 (ele); this.currentStep = 2; } else if (step === 2) { this.currentStep = 3; this.step3 (ele); } else if (step === 3) { this.currentStep = 4; this.step4 (ele); } else if (step === 4) { this.step5 (ele); //this.currentStep = 4; } } }; });