snippetjavascriptMinor
Javascript filter class to hide and show content on data-attributes
Viewed 0 times
showjavascriptdataattributesfilterandcontentclasshide
Problem
I'm a hacker, not a trained engineer. I ask/answer specific questions on StackOverflow and am pretty confident in my ability to get the browser to do what I want, I thought I could benefit a great deal from a code review- hopefully I'm in the right place.
Please tear down my bright-eyed naivetie with cutting comments on code style, design, etc if I am and let me know if this isn't what this site is for.
This is a filter class that hides and shows long lists of content in container divs based on the content meta data. A sample content div:
The class itself (relies on JQuery):
```
function StreamFilter(_containerId, _testAttribute, _targetStyleClass, _applyStyleClass, _testFor){
return{
active : false,
filterHash : {},
testFor : _testFor,
CONTAINER_ID : _containerId,
TEST_ATTRIBUTE : _testAttribute,
TARGET_STYLE_CLASS : _targetStyleClass,
APPLY_STYLE_CLASS : _applyStyleClass,
on : function(){
this.active = true;
this.enforce();
},
off : function(){
this.clear();
this.active = false;
this.unenforce();
},
clear : function(){
this.filterHash = {};
},
add_key : function(_key){
// messages with matching metadata will be displayed
this.filterHash[_key] = true;
},
filter_only : function(_key){
this.clear();
this.add_key(_key);
this.on();
},
test : function(_key){
return(this.filterHash[_key]);
},
render : function(_$object){
if(this.active && ((this.test(_$object.attr(this.TEST_ATTRIBUTE)) === true) === this.testFor)){
_$object.addClass(this.APPLY_STYLE_CLASS);
}
return _$object;
},
enforce : function(){
var i;
// possible performance problems
$("
Please tear down my bright-eyed naivetie with cutting comments on code style, design, etc if I am and let me know if this isn't what this site is for.
This is a filter class that hides and shows long lists of content in container divs based on the content meta data. A sample content div:
...
The class itself (relies on JQuery):
```
function StreamFilter(_containerId, _testAttribute, _targetStyleClass, _applyStyleClass, _testFor){
return{
active : false,
filterHash : {},
testFor : _testFor,
CONTAINER_ID : _containerId,
TEST_ATTRIBUTE : _testAttribute,
TARGET_STYLE_CLASS : _targetStyleClass,
APPLY_STYLE_CLASS : _applyStyleClass,
on : function(){
this.active = true;
this.enforce();
},
off : function(){
this.clear();
this.active = false;
this.unenforce();
},
clear : function(){
this.filterHash = {};
},
add_key : function(_key){
// messages with matching metadata will be displayed
this.filterHash[_key] = true;
},
filter_only : function(_key){
this.clear();
this.add_key(_key);
this.on();
},
test : function(_key){
return(this.filterHash[_key]);
},
render : function(_$object){
if(this.active && ((this.test(_$object.attr(this.TEST_ATTRIBUTE)) === true) === this.testFor)){
_$object.addClass(this.APPLY_STYLE_CLASS);
}
return _$object;
},
enforce : function(){
var i;
// possible performance problems
$("
Solution
The usefulness of creating a class is that you can have private variables.
Simply placing every thing in an object defeats that point. Instead you should define everything in the protected part of the function and simply expose an external API with the return.
http://codr.cc/s/9b31baa5/js
Simply placing every thing in an object defeats that point. Instead you should define everything in the protected part of the function and simply expose an external API with the return.
http://codr.cc/s/9b31baa5/js
Context
StackExchange Code Review Q#2287, answer score: 2
Revisions (0)
No revisions yet.