Discussion on: vue.js modules in the browser, the cheap way

View post

Interesting idea! Thank you for sharing this.

Just a few JS advice. (You might lose a little bit of browser support, but since you are using object method shorthand, it shouldn't support IE and safari already according to MDN.)

Don't use var anymore. Use const and let instead.
Don't use me = this, use arrow function to have the context inherited.
Use promise instead of callback. (Eliminate the use of counter by using Promise.all)
Avoid jquery
Use either

{
    f: function(){
        ...
    }
}

{
    f(){
        ...
    }
}

Not both. Although they are essentially the same thing, it is important to have consistency.

Magnus Manske • Apr 6 '18 • Edited

Thanks! This is what it looks like in proper ES6 (some parts omitted):

let vue_components = {
    loadComponents : function ( components ) {
        return Promise.all ( components.map ( component => this.loadComponent(component) ) ) ;
    } ,
    loadComponent ( component ) {
        let id = this.getComponentID ( component ) ;
        if ( $('#'+id).length > 0 ) return Promise.resolve(42) ; // Already loaded/loading
        $('body').append($("").attr({id:id}).css({display:'none'}));
        return fetch ( this.getComponentURL(component) )
            .then ( (response) => response.text() )
            .then ( (html) => $('#'+id).html(html) )
    }
}


I tried to get rid of jQuery, but document.getElementById("content").innerHTML = html doesn't seem to work for some reason, even though it does set the HTML. But I need jQuery for the larger project anyway, so that's OK...