JavaScript Best Practices – Avoiding Inline JavaScript with Dynamic Content

javascript

I read here that you should avoid coding JavaScript inline (see item #1).

It sounds like a great idea; however, I'm not sure how to use js to select dynamic content without setting the id in the function call inline.

For example, I have a simple blog. The comments are hidden, but can be displayed by clicking an anchor (generated dynamically) that calls a JavaScript function to toggle the comments for that specific post:

$commentsButton = "<a name='comments" . $post->id . "' href='#comments" . $post->id . "'> comments (" . count($comments) . ")</a>";

toggleComments() function:

function toggleComments(id) {
    $('#' + id + ' .commentsContainer').toggle(500);
}

How do you keep from doing this kind of thing? Is it always appropriate to avoid inline JavaScript? Or is this a case where it's necessary?

Update:

I ended up using this:

$('.commentButton').each(function() {
    $(this).click(function() {
        $(this).parents('.post').find('.commentsContainer').toggle(500);
    });
});

with this:

$commentButton = "<a class='commentButton'> comments (" . count($comments) . ")</a>";

Best Answer

How do you keep from doing this kind of thing?

In browser based javascript, this is set to the DOM element that triggered the event in the event handler. You can take advantage of that to re-use a function for any DOM element.

function toggleComments() {
    $(this).find('.commentsContainer').toggle(500);
}

Then you don't have to emit the ID into the javascript.

Related Solutions

Avoiding the New Operator in JavaScript – Better Alternatives

Firstly arguments.callee is deprecated in ES5 strict so we don't use it. The real solution is rather simple.

You don't use new at all.

var Make = function () {
  if (Object.getPrototypeOf(this) !== Make.prototype) {
    var o = Object.create(Make.prototype);
    o.constructor.apply(o, arguments);
    return o;
  }
  ...
}

That's a right pain in the ass right?

Try enhance

var Make = enhance(function () {
  ...
});

var enhance = function (constr) {
  return function () {
    if (Object.getPrototypeOf(this) !== constr.prototype) {
      var o = Object.create(constr.prototype);
      constr.apply(o, arguments);
      return o;
    }
    return constr.apply(this, arguments);
  }
}

Now of course this requires ES5, but everyone uses the ES5-shim right?

You may also be interested in alternative js OO patterns

As an aside you can replace option two with

var Make = function () {
  var that = Object.create(Make.prototype);
  // use that 

  return that;
}

In case you want your own ES5 Object.create shim then it's really easy

Object.create = function (proto) {
  var dummy = function () {};
  dummy.prototype = proto;
  return new dummy;
};

Javascript – How to structure a modern web application

Your Question is going to return some very opinion based answers. So I am trying to answer as neutral as possible regarding which Framework or option to use.

I think every thing you pointed out is fairly modern as are all your listed technologies. jQuery and AngularJs aren't that old I guess.

Also I believe that you have already answered your own question. Let me explain my utterrance in detail :

Out of 3 mentioned practises you don't like 2, so only one mix really remains.

I personally find the mix #1 and #2 ugly

Why not just go with what you are comfortable with for now instead of relying on the opinion of other people. You seem to know what you are doing and have an open mind to new developments in your field so why worry about what other people think for now. Your question helped me discover something new. Thx for that. Hope that helped.

Originally a comment was just too long for it to be one.

Best Answer

Related Solutions

Avoiding the New Operator in JavaScript – Better Alternatives

Javascript – How to structure a modern web application

Related Topic