archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

improve inline style attribute performance

Browse Source
This commit is contained in:
Michael Rawlings 2017-01-18 16:36:30 -08:00
parent 9e4a638c51
commit 3d4b70dbd9
4 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
runtime/html/helpers.js
View File

@ -11,7 +11,6 @@ var escapeXmlAttr = escape.escapeXmlAttr;
var attrHelper = require('./helper-attr');
var attrsHelper = require('./helper-attrs');
var classList;
@ -68,6 +67,9 @@ exports.as = attrsHelper;
* sa('color: red; font-weight: bold') ==> ' style="color: red; font-weight: bold"'
* sa({color: 'red', 'font-weight': 'bold'}) ==> ' style="color: red; font-weight: bold"'
*/
var dashedNames = {};
exports.sa = function(style) {
if (!style) {
return '';
@ -76,16 +78,18 @@ exports.sa = function(style) {
if (typeof style === 'string') {
return attrHelper(STYLE_ATTR, style, false);
} else if (typeof style === 'object') {
var parts = [];
var styles = '';
for (var name in style) {
if (style.hasOwnProperty(name)) {
var value = style[name];
if (value) {
parts.push(name + ':' + value);
var value = style[name];
if (value != null) {
var nameDashed = dashedNames[name];
if (!nameDashed) {
nameDashed = dashedNames[name] = name.replace(/([A-Z])/g, '-$1').toLowerCase();
}
styles += nameDashed + ':' + value + ';';
}
}
return parts ? attrHelper(STYLE_ATTR, parts.join(';'), false) : '';
return styles ? ' ' + STYLE_ATTR + '="' + styles +'"' : '';
} else {
return '';
}

16
runtime/vdom/helper-styleAttr.js
View File

@ -1,3 +1,5 @@
var dashedNames = {};
/**
* Helper for generating the string for a style attribute
* @param {[type]} style [description]
@ -11,16 +13,18 @@ module.exports = function(style) {
if (typeof style === 'string') {
return style;
} else if (typeof style === 'object') {
var parts = [];
var styles = '';
for (var name in style) {
if (style.hasOwnProperty(name)) {
var value = style[name];
if (value) {
parts.push(name + ':' + value);
var value = style[name];
if (value) {
var nameDashed = dashedNames[name];
if (!nameDashed) {
nameDashed = dashedNames[name] = name.replace(/([A-Z])/g, '-$1').toLowerCase();
}
styles += nameDashed + ':' + value + ';';
}
}
return parts ? parts.join(';') : null;
return styles || null;
} else {
return null;
}

2
test/autotests/render/style-attr-object/expected.html
View File

@ -1 +1 @@
<div style="color:red;font-weight:bold"></div>
<div style="color:red;font-weight:bold;background-color:blue;"></div>

2
test/autotests/render/style-attr-object/template.marko
View File

@ -1 +1 @@
div style={color: 'red', 'font-weight': 'bold'}
div style={color: 'red', fontWeight: 'bold', 'background-color':'blue'}