这样功能，我用了最少的代码编写，但是都很实用
使用例子
(new Date()).ToFormat("yyyy-MM-dd") // 日期转换
// 模板应用
<script type="text/template" id="temp">
#for(var i=0;i<data.length;i++){#
<div>#=data[i].Name#</div>
#}#
</script>
$Temp($("#temp").html())([{Name:"李三"},{Name:"李四"}]);// 返回 <div>李三</div> <div>李四</div>
// 命名空间写法，有时候想把每个方法写在同一个对象里面，但是又想他们条理清晰，就用这个
假如我写一个方法
var slider=$require("Mall.Comm.Slider");
// 图片幻灯片
$define("Mall.Comm.Slider",function () {
}());
// 图片延迟加载
$define("Mall.Comm.ImageycLoad",function () {
}());
observable.bind("#tbform",{
Name:"小三",
Age:16
});
<body>
<table id="tbform">
<tr>
<td>名称</td>
<td data-bind="text:Name"></td>
</tr>
<tr>
<td>年龄</td>
<td data-bind="text:age"></td>
</tr>
</table>
</body>
代码:
// 声明
$define = function (ns,fn) {
var namespaces = window;
ns = ns.toLowerCase();
if(/\./.test(ns))
{
var names = ns.split("."), len = names.length-1,name;
for (var i = 0; i < len; i++)
{
name = names[i];
namespaces = namespaces[name] || (namespaces[name] = {});
}
namespaces[names[len]] = fn;
}else
{
namespaces[ns] = fn;
}
}
// 调用
$require=function(ns)
{
var namespaces = window;
ns = ns.toLowerCase();
if (/\./.test(ns)) {
each(ns.split("."), function (i, name) {
namespaces = namespaces[name];
});
return namespaces;
} else {
return namespaces[ns];
}
}
String.prototype.PadLeft = function (len, padText) {
return (new Array((len || 1) - this.length + 1).join(padText)) + this;
}
// 任意日期格式转换
Date.prototype.ToFormat = function (format) {var date = this, y = date.getFullYear().toString(), m = date.getMonth() + 1, d = date.getDate(), h = date.getHours(), min = date.getMinutes(), s = date.getSeconds();
return format.replace(/yyyy/g, function () {
return y;
}).replace(/yy/g, function () {
return y.substr(y.length - 2);
}).replace(/MM/g, function () {
return m.toString().PadLeft(2, "0");
}).replace(/dd/g, function () {
return d.toString().PadLeft(2, "0");
}).replace(/hh/g, function () {
return h;
}).replace(/mm/g, function () {
return min;
}).replace(/ss/g, function () {
return s;
});
}
// 模板替换
var $Temp = function (tempHtml) {
var strHtml = $Temp.format(tempHtml);
return function (data) {
return $Temp.complice(strHtml, data);
};
}
$Temp.decodeHTML = function (str) {
return str.replace(/\&/g, "&").replace(/</g, "<").replace(/>/g, ">");
}
$Temp.format = function (str) {
return str.replace(/\\#/g, "_$1$_");
}
$Temp.unformat = function (str) {
return str.replace(/_\$1\$_/g, "#");
}
$Temp.complice = function (temp, data) {
if (!data)
{
return "null data";
}
var fnBody = "var result='',decodeHtml=Bq.template.decodeHTML;", temps = temp.split("#");
fnBody += "\n\rwith(data){";
var splitjoin = function (ishtml, content) {
var firstchar = content.charAt(0);
fnBody += "\n\r";
if (ishtml) {
fnBody += "result+='" + content.replace(/\'/g, "\\'").replace(/\r/g,"\\r").replace(/\n/g, "\\n") + "';";
} else if (firstchar == "=") {
fnBody += "result+=" + content.substr(1) + ";";
} else if (firstchar == ":") {
fnBody += "result+=decodeHtml(" + content.substr(1) + ");";
} else {
fnBody += content;
}
}
for (var i = 0; i < temps.length; i++) {
splitjoin(i % 2 == 0, temps[i]);
}
fnBody += "\n\r};";
fnBody += "return result;";
try
{
var fn = new Function("data", fnBody);
return $Temp.unformat(fn(data));
} catch (e) {
if (console)
{
console.log(e);
}
return "";
}
}
// dom 绑定
var observableObject = function (data) {
var that = this, name, data=data||{};
that._events = {};
for (name in data) {
that[name] = data[name];
}
}
observableObject.prototype.get = function (name) {
if (this.hasOwnProperty(name)) {
var value=this[name];
if(typeof value!="function")
{
return value;
}else
{
return value.call(this);
}
}
return "";
}
observableObject.prototype.destroy = function ()
{
this._events = null;
}
observableObject.prototype.set = function (name, value) {
if (this.hasOwnProperty(name)) {
this[name] = value;
this.change(name);
}
}
observableObject.prototype.add = function (name, fn) {
if (this.hasOwnProperty(name)) {
if (!this._events[name]) {
this._events[name] = [];
}
this._events[name].push(fn);
}
}
observableObject.prototype.change = function (name) {
var events = this._events[name] || [], i = 0; len = events.length;
for (; i < len; i++) {
events[i].call(this,name);
}
}
observableObject.prototype.refresh = function () {
var events = this._events, name, i = 0, len;
for (name in events) {
this.change(name);
}
}
var observable = function (object) {
if (!(object instanceof observableObject)) {
return new observableObject(object);
}
object._events = {};
return object;
}
observable.bind = function (dom, viewmodel) {
var dom = $(dom), i = 0, len = dom.length, viewmodel = observable(viewmodel);
for (; i < len; i++) {
dataBindEelement(dom[i], viewmodel);
}
viewmodel.refresh();
return viewmodel;
}
var reg_parseDataBinds = /([\w-]+):([\w-]+)/g;
var parseDataBinds = function (binds) {
var result = {}, r;
while ((r = reg_parseDataBinds.exec(binds))) {
result[r[1]] = r[2];
}
return result;
}
var dataBindPlug = observable.bindPlug= {
text: function (element,name) {
$(element).text(this.get(name));
},
html: function (element,name) {
$(element).html(this.get(name));
},
invisible:function(element,name)
{
var d = this.get(name);
if (typeof d == "boolean") {
if (!d) {
$(element).show();
} else {
$(element).hide();
}
}
},
visible: function (element,name) {
var d = this.get(name);
if(typeof d=="boolean")
{
if(d)
{
$(element).show();
}else
{
$(element).hide();
}
}
},
setBindPlug:function(name,element)
{
var binds = dataBindPlug[name] || function () { };
return function (name) {
binds.apply(this,[element,name]);
};
}
};
each("click blur change focus keyup keydown hover".split(" "), function (i, eventname) {
dataBindPlug[eventname] = function (eventname) {
eventname = eventname + ".observable";
return function (element, name) {
var handler = this[name], that = this;
element = $(element);
if (typeof handler == "function") {
element.off(eventname);
$(element).on(eventname, function (e) {
handler.call(that,e);
});
}
}
}(eventname);
});
var dataBindEelement = function (element, datasouce) {
var bind = element.getAttribute("data-bind"), childrens = element.children, len = childrens.length, i = 0;
if (bind) {
var binds = parseDataBinds(bind);
for (var name in binds) {
datasouce.add(binds[name], dataBindPlug.setBindPlug(name, element));
}
}
for (; i < len; i++) {
dataBindEelement(childrens[i], datasouce);
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
