I've already put more effort into this than a Saturday morning warrants, so I'll keep this short and an exercise in copy and past.
Perennial CFMLer James Mohler has posted some code on Code Review: "Filtering the attributes for a custom tag". I'll just reproduce my bit of the review, with his code by way of framing.
Go have a look, and assess our code as an exercise.
James's functions:
Original:
string function passThrough(required struct attr) output="false" {
local.result = "";
for(local.myKey in arguments.attr) {
if (variables.myKey.left(5) == "data-" || variables.myKey.left(2) == "on" || variables.myKey.left(3) == "ng-") {
local.result &= ' #local.myKey.lcase()#="#arguments.attr[local.myKey].encodeForHTMLAttribute()#"';
} // end if
} // end for
return local.result;
}
His reworking:
string function passThrough(required struct attr) output="false" {
arguments.attr.filter(
function(key, value) {
return (key.left(5) == "data-" || key.left(2) == "on" || key.left(3) == "ng-");
}
).each(
function(key, value) {
local.result &= ' #key.lcase()#="#value.encodeForHTMLAttribute()#"';
}
);
return local.result;
}
Now for my code review (this is a straight copy and paste from my answer):
OK, now that I've had coffee, here's my refactoring:One thing I didn't put as I don't think it's relevant to this code review is that one should be careful with inline function expressions. They're not themselves testable, so if they get more than half a dozen statements or have any branching or conditional logic: extract them into their own functions, and test them separately.
function extractCodeCentricAttributesToMarkupSafeAttributes(attributes){ var relevantAttributePattern = "^(?:data-|ng-|on)(?=\S)"; return attributes.filter(function(attribute){ return attribute.reFindNoCase(relevantAttributePattern); }).reduce(function(attributeString, attributeName, attributeValue){ return attributeString& ' #attributeName#="#attributeValue#"'; }, ""); }
Notes on my implementation:
- I could not get TestBox working on my ColdFusion 2016 install (since fixed), so I needed to use CF11 for this, hence using the function version of
encodeForHTMLAttribute(). The method version is new to 2016.- we could probably argue over the best pattern to use for the regex all day. I specifically wanted to take a different approach to Dom's one, for the sake of comparison. I'm not suggesting mine is better. Just different. The key point we both demonstrate is don't use a raw regex pattern, always give it a meaningful name.
- looking at the "single-expression-solution" I have here, the code is quite dense, and I can't help but think Dom's approach to separating them out has merit.
Code review notes:
- your original function doesn't work. It specifies
variables.myKeywhen it should belocal.myKey. It's clear you're not testing your original code, let alone using TDD during the refactoring process. You must have test coverage before refactoring.- the function name is unhelpfully non-descriptive, as demonstrated by Dom not getting what it was doing. I don't think my function name is ideal, but it's an improvement. I guess if we knew *why
- you were doing this, the function name could be improved to reflect that.
- lose the scoping. It's clutter.
- lose the comments. They're clutter.
- don't abbrev. variable names. It makes the code slightly hard to follow.
- don't have compound if conditions like that. It makes the code hard to read. Even if the condition couldn't be simplified back to one function call and you still needed multiple subconditions: extract them out into meaningful variable names, eg:
isDataAttribute || isOnAttribute || isNgAttributekeyandvalueare unhelpful argument names- slightly controversial: but unless it's an API intended to be used by third-parties: lose the type checking. It's clutter in one's own code.
- there's no need for the
outputmodifier for the function in CFScript.- don't quote boolean values. It's just
falsenot"false".
Unit tests for this:
component extends="testbox.system.BaseSpec" { function beforeAll(){ include "original.cfm"; include "refactored.cfm"; return this; } function run(testResults, testBox){ describe("Testing for regressions", function(){ it("works with an empty struct", function(){ var testStruct = {}; var resultFromOriginal = passThrough(testStruct); var resultFromRefactored = extractCodeCentricAttributesToMarkupSafeAttributes(testStruct); expect(resultFromRefactored).toBe(resultFromOriginal); }); it("works with an irrelevant attribute", function(){ var testStruct = {notRelevant=3}; var resultFromOriginal = passThrough(testStruct); var resultFromRefactored = extractCodeCentricAttributesToMarkupSafeAttributes(testStruct); expect(resultFromRefactored).toBe(resultFromOriginal); }); it("works with each of the relevant attributes", function(){ var relevantAttributes = ["data-relevant", "onRelevant", "ng-relevant"]; for (relevantAttribute in relevantAttributes) { var testStruct = {"#relevantAttribute#"=5}; var resultFromOriginal = passThrough(testStruct); var resultFromRefactored = extractCodeCentricAttributesToMarkupSafeAttributes(testStruct); expect(resultFromRefactored).toBe(resultFromOriginal); } }); it("works with a mix of attribute relevance", function(){ var testStruct = {notRelevant=7, onRelevant=11}; var resultFromOriginal = passThrough(testStruct); var resultFromRefactored = extractCodeCentricAttributesToMarkupSafeAttributes(testStruct); expect(resultFromRefactored).toBe(resultFromOriginal); }); it("works with multiple relevant attributes", function(){ var testStruct = {"data-relevant"=13, onRelevant=17, "ng-relevant"=19}; var resultFromOriginal = passThrough(testStruct); var resultFromRefactored = extractCodeCentricAttributesToMarkupSafeAttributes(testStruct); expect(resultFromRefactored).toBe(resultFromOriginal); }); }); } }
Use them. NB: the includes inbeforeAll()simply contain each version of the function.
Oh, and in case yer wondering... yes I did write the tests before I wrote any of my own code. And I found a coupla bugs with my planned solution (and assumptions about the requirement) in doing so. Always TDD. Always.
Anyway, all of this is getting in the way of my Saturday.
Righto.
--
Adam
