[DikeJS]jsテンプレート技術について、requireJS定義モジュールを使用する(四)
前回はテンプレート技術を分析して編纂しましたが、あまり合理的ではないことが分かりました.今は新しい改良コードを送ります.
/**
* @Author Dike.Li
* @Date 2015/7/30
* @class Template
* @public
* @Description Template Label Replace
*/
define(function (require) {
/**
* XXX='{XXX}' || XXX="{XXX}"
* @type {RegExp}
*/
var regExp = new RegExp('[a-zA-Z]+[\\s]*=[\\s]*[\"\']\\{[^\\{\\}]+\\}[\"\']', '\g');
/**
* {XXX}
* @type {RegExp}
*/
var regExpLable = new RegExp('\\{[^\\{\\}]+\\}', '\g');
/**
* {XXX} -> XXX
* @type {RegExp}
*/
var regExpLabelName = new RegExp('[^\\{\\}]+', '\g');
/**
*
* @param str
* @returns {*}
*/
var convertString = function (obj) {
var str = obj;
if (obj instanceof Array) {
str = obj.join('');
}
return str;
};
/**
* {id} option {id:123}
* @param temp
* @param option
* @returns {*}
* @constructor
*/
var getTemp = function (temp, option) {
/**
*
* @type {*}
*/
temp = convertString(temp);
/**
* XXX='{XXX}' || XXX="{XXX}"
* @type {Array|{index: number, input: string}|*}
*/
var alArr = temp.match(regExp);
/**
* option ,
*/
for (var al in alArr) {
/**
*
*/
var label = alArr[al].match(regExpLable)[0];
/**
*
*/
var labelName = label.match(regExpLabelName)[0];
if (typeof(option[labelName]) === 'undefined' ||
option[labelName] === null ||
option[labelName] === 'null' ||
option[labelName] === '') {
temp = temp.replace(alArr[al], '');
continue;
}
temp = temp.replace(label, option[labelName]);
}
return temp;
};
return {
getTemp: getTemp
}
});
使用方法:var temp = ['<div class="login-main">',
'<div class="login-top"><img src="images/login-top.png" width="471" height="91" /></div>',
'<div class="dl-top">',
'<p><span class="dl-wz"> :</span><span><input id="{username}" type="text" class="dl-anniu"/></span></p>',
'<p><span class="dl-wz"> :</span><span><input id="{password}" type="text" class="dl-anniu" /></span></p>',
'<p><span class="dl-mima"><input type="checkbox" value="" class="fx-k" /></span><span> <a href="#"> </a></span></p>',
'<p class="denglu-t"><input id="{login_button}" class="login-b"/></p>',
'</div>',
'</div>'];
var template = require('Template');
temp = template.getTemp(temp,{
username: 'username',
password:'password',
login_button:'login_button'
});