Skip to content

Commit

Permalink
was playing around with dataset, and some other perf opts, removing d…
Browse files Browse the repository at this point in the history 
…ataset
  • Loading branch information
@dhigginbotham
dhigginbotham committed Sep 15, 2015
1 parent c4baa50 commit 2d72705
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 70 deletions.
2 changes: 1 addition & 1 deletion .publish
Submodule .publish updated from d98021 to 36264a
2 changes: 1 addition & 1 deletion dist/murk.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file modified dist/murk.js.gz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion examples/build/templates/basic-example.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div data-murk-id="basic" data-murk="firstExample" data-murk-filter="reverseStr"></div>
<div data-murk-id="basic" data-murk="secondExample"></div>
<div data-murk-id="basic" data-murk="thirdExample" data-murk-filter="highlightText"></div>
<div data-murk-id="basic" data-murk="fourthExample" data-murk-filter="reverseStr,highlightText" data-murk-filter-mutate="true">embedded example</div>
<div data-murk-id="basic" data-murk="fourthExample" data-murk-filter="reverseStr,highlightText">embedded example</div>
</div>

<div class="form-row">
Expand Down
2 changes: 1 addition & 1 deletion examples/build/templates/repeat-example.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<div class="hero">
<div data-murk="repeatedExample" data-murk-id="repeat">
<div>
Name: <span data-murk-repeat-key="name" data-murk-filter="highlightText"></span>
Name: <span data-murk-repeat-key="name"></span>
</div>
<div>
Age: <span data-murk-repeat-key="age"></span>
Expand Down
4 changes: 2 additions & 2 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3 name="repeat-example">Basic Example: </h3>
<div data-murk-id="basic" data-murk="firstExample" data-murk-filter="reverseStr"></div>
<div data-murk-id="basic" data-murk="secondExample"></div>
<div data-murk-id="basic" data-murk="thirdExample" data-murk-filter="highlightText"></div>
<div data-murk-id="basic" data-murk="fourthExample" data-murk-filter="reverseStr,highlightText" data-murk-filter-mutate="true">embedded example</div>
<div data-murk-id="basic" data-murk="fourthExample" data-murk-filter="reverseStr,highlightText">embedded example</div>
</div>

<div class="form-row">
Expand Down Expand Up @@ -149,7 +149,7 @@ <h3 name="repeat-example">Repeat Example: </h3>
<div class="hero">
<div data-murk="repeatedExample" data-murk-id="repeat">
<div>
Name: <span data-murk-repeat-key="name" data-murk-filter="highlightText"></span>
Name: <span data-murk-repeat-key="name"></span>
</div>
<div>
Age: <span data-murk-repeat-key="age"></span>
Expand Down
54 changes: 22 additions & 32 deletions examples/js/murk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,11 @@
// as well as the current key being processed. it tries to be extremely
// light by only doing reads, and saving writes until the end.
function handleRepeat(key) {
var repeatModel, attrs, repeatElKeys, frag, processRepeats;
var repeatModel, repeatElKeys, frag, processRepeats;
if (state.model[key] instanceof Array) {
// hide our first elem, so we can use it later
if (this.style.display != 'none') this.style.display = 'none';
repeatModel = state.model[key];
attrs = attr(this);

// we keep reference of all of our repeats
// inside of state.repeats, so we always
Expand All @@ -223,7 +222,7 @@

// processes each repeat individually
processRepeats = function(repeat, i) {
var el, atts, $key = (key + '.$' + i), newEl = false;
var el, $key = (key + '.$' + i), newEl = false;

// we make a new key, out of our current key
// and setup any new elems that we might need
Expand All @@ -239,14 +238,13 @@
// are fresh, and non object things
// can be check simply like this
if (el.innerHTML != repeatModel) {
atts = attr(el);

// new els get sanitized
if (newEl) {
atts(opts.selectorPrefix, 'rm');
atts(opts.selectorPrefix + '-count', 'rm');
atts(opts.selectorPrefix + '-bound', 'rm');
atts(opts.selectorPrefix + '-repeat', $key);
delete el.dataset.murk;
delete el.dataset.murkCount;
delete el.dataset.murkBound;
el.dataset.murkRepeat = $key;
}
if (typeof repeat == 'object') {
// allows us to keep ref of new $key,
Expand All @@ -255,7 +253,7 @@
repeat.$key = $key;
Array.prototype.forEach.call(el.getElementsByTagName('*'), processNodes, repeat);
} else {
el.innerHTML = repeat;
setupTextNode(el, repeat);
}
// let their be light XD
if (el.style.display == 'none') el.style.display = '';
Expand All @@ -273,26 +271,19 @@
// proccesses the filters added to any
// given bound elem
function processFiltersEvent(key) {
var attrs, filters, filterMutate, processFilter;
attrs = attr(this);
if (attrs) {
filters = attrs(opts.selectorPrefix + '-filter');
filterMutate = attrs(opts.selectorPrefix + '-filter-mutate');
if (filters) {
processFilter = function(filter) {
if (state.filters.hasOwnProperty(filter) &&
state.model.hasOwnProperty(key)) {
var val = state.filters[filter].call(this, state.model[key]);
if (typeof val != 'undefined' && filterMutate) {
state.model[key] = val;
}
setupTextNode(this, val);
}
};
if (filters.indexOf(',') != -1) filters = filters.split(',');
if (!(filters instanceof Array)) filters = [filters];
Array.prototype.forEach.call(filters, processFilter, this);
}
var filters, processFilter;
if ('murkFilter' in this.dataset) {
filters = this.dataset.murkFilter;
processFilter = function(filter) {
if (state.filters.hasOwnProperty(filter) &&
state.model.hasOwnProperty(key)) {
var val = state.filters[filter].call(this, state.model[key]);
setupTextNode(this, val);
}
};
if (filters.indexOf(',') != -1) filters = filters.split(',');
if (!(filters instanceof Array)) filters = [filters];
Array.prototype.forEach.call(filters, processFilter, this);
}
}

Expand Down Expand Up @@ -325,9 +316,8 @@
// times we're interacting with our
// elems
function trackCountEvent() {
var count, attrs = attr(this);
count = attrs(opts.selectorPrefix + '-count');
attrs(opts.selectorPrefix + '-count', (count ? parseInt(count,0)+1 : 1));
var count = ('murkCount' in this.dataset ? this.dataset.murkCount : null);
this.dataset.murkCount = (count ? parseInt(count,0)+1 : 1);
}

// handles dom manipulation
Expand Down
54 changes: 22 additions & 32 deletions src/murk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,11 @@
// as well as the current key being processed. it tries to be extremely
// light by only doing reads, and saving writes until the end.
function handleRepeat(key) {
var repeatModel, attrs, repeatElKeys, frag, processRepeats;
var repeatModel, repeatElKeys, frag, processRepeats;
if (state.model[key] instanceof Array) {
// hide our first elem, so we can use it later
if (this.style.display != 'none') this.style.display = 'none';
repeatModel = state.model[key];
attrs = attr(this);

// we keep reference of all of our repeats
// inside of state.repeats, so we always
Expand All @@ -223,7 +222,7 @@

// processes each repeat individually
processRepeats = function(repeat, i) {
var el, atts, $key = (key + '.$' + i), newEl = false;
var el, $key = (key + '.$' + i), newEl = false;

// we make a new key, out of our current key
// and setup any new elems that we might need
Expand All @@ -239,14 +238,13 @@
// are fresh, and non object things
// can be check simply like this
if (el.innerHTML != repeatModel) {
atts = attr(el);

// new els get sanitized
if (newEl) {
atts(opts.selectorPrefix, 'rm');
atts(opts.selectorPrefix + '-count', 'rm');
atts(opts.selectorPrefix + '-bound', 'rm');
atts(opts.selectorPrefix + '-repeat', $key);
delete el.dataset.murk;
delete el.dataset.murkCount;
delete el.dataset.murkBound;
el.dataset.murkRepeat = $key;
}
if (typeof repeat == 'object') {
// allows us to keep ref of new $key,
Expand All @@ -255,7 +253,7 @@
repeat.$key = $key;
Array.prototype.forEach.call(el.getElementsByTagName('*'), processNodes, repeat);
} else {
el.innerHTML = repeat;
setupTextNode(el, repeat);
}
// let their be light XD
if (el.style.display == 'none') el.style.display = '';
Expand All @@ -273,26 +271,19 @@
// proccesses the filters added to any
// given bound elem
function processFiltersEvent(key) {
var attrs, filters, filterMutate, processFilter;
attrs = attr(this);
if (attrs) {
filters = attrs(opts.selectorPrefix + '-filter');
filterMutate = attrs(opts.selectorPrefix + '-filter-mutate');
if (filters) {
processFilter = function(filter) {
if (state.filters.hasOwnProperty(filter) &&
state.model.hasOwnProperty(key)) {
var val = state.filters[filter].call(this, state.model[key]);
if (typeof val != 'undefined' && filterMutate) {
state.model[key] = val;
}
setupTextNode(this, val);
}
};
if (filters.indexOf(',') != -1) filters = filters.split(',');
if (!(filters instanceof Array)) filters = [filters];
Array.prototype.forEach.call(filters, processFilter, this);
}
var filters, processFilter;
if ('murkFilter' in this.dataset) {
filters = this.dataset.murkFilter;
processFilter = function(filter) {
if (state.filters.hasOwnProperty(filter) &&
state.model.hasOwnProperty(key)) {
var val = state.filters[filter].call(this, state.model[key]);
setupTextNode(this, val);
}
};
if (filters.indexOf(',') != -1) filters = filters.split(',');
if (!(filters instanceof Array)) filters = [filters];
Array.prototype.forEach.call(filters, processFilter, this);
}
}

Expand Down Expand Up @@ -325,9 +316,8 @@
// times we're interacting with our
// elems
function trackCountEvent() {
var count, attrs = attr(this);
count = attrs(opts.selectorPrefix + '-count');
attrs(opts.selectorPrefix + '-count', (count ? parseInt(count,0)+1 : 1));
var count = ('murkCount' in this.dataset ? this.dataset.murkCount : null);
this.dataset.murkCount = (count ? parseInt(count,0)+1 : 1);
}

// handles dom manipulation
Expand Down

0 comments on commit 2d72705

Please sign in to comment.