Javascript MVC学習雑記3
6078 ワード
前回に続き、今回はModelクラスにローカルストレージ機能を追加する予定で、html 5のlocalStorageを使用しています.これで便利です.ページがリフレッシュされると、追加したデータが自動的にロードされます.次は静的ページのコードです.
上のファイルをindexとして保存します.htmlは、html 5をサポートするブラウザで実行できます.例えば、chrome、ffなどです.
もう一つjquery 1.8.3のjsライブラリです.ここではjqueryのCDNに変更できます.これは公式に提供されているCDNアドレスです.
http://code.jquery.com/jquery-1.8.3.min.js
では、今日はこれで終わります.次のcontinue:)
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript" >
//
if(typeof Object.create!=="function"){
Object.create=function(o){
function F(){}
F.prototype=o;
return new F();
}
}
var Model={
prototype:{
init:function(){
console.log('Model.prototype.init');
},
find:function(){
console.log('Model.prototype.find');
}
},
inherited:function(){
//console.log('exec inherited')
},
created:function(){
//console.log('exec created!');
},
create:function(){
var object=Object.create(this);
object.parent=this;
object.prototype=object.fn=Object.create(this.prototype);
object.created();//
this.inherited(object); //
return object;
},
init:function(){
var instance=Object.create(this.prototype);
instance.parent=this;
instance.init.apply(instance,arguments);
return instance;
},
extend:function(o){
for(var key in o){
this[key]=o[key];
}
},
include:function(o){
for(var key in o){
this.prototype[key]=o[key];
}
}
};
//
Model.extend({
records:{},
initattr:function(o){
var obj=this.init();
for(var key in o){
obj[key]=o[key];
}
return obj;
},
find:function(id){
return this.records[id];
}
});
Model.include({
save:function(){
this.parent.records[this.id]=this;
}
});
var User=Model.create();
//
User.include({
getname:function(){
console.log(this.name);
},
attributes:function(){
var result={};
for(var i in this.parent.attributes){
var attr=this.parent.attributes[i];
result[attr]=this[attr];
}
return result;
}
});
User.extend({
attributes:["name","age","id"],
//
savelocal:function(){
var result=[];
for(var i in this.records){
var record=this.records[i].attributes();
result.push(record);
}
localStorage.setItem("Users",JSON.stringify(result));
},
//
loadlocal:function(){
if (localStorage.getItem("Users")){
alert(localStorage.getItem("Users"));
var result=JSON.parse(localStorage.getItem("Users"));
var html=[];
for(var i in result){
html.push("<tr>");
for(var key in this.attributes){
var attr=this.attributes[key];
html.push("<td>");
html.push(result[i][attr]);
html.push("</td>");
}
html.push("</tr>");
}
$("#tabinfo tbody").append(html.join(''));
}
}
});
$(function(){
$(window).bind("beforeunload",function(){
User.savelocal();//
});
$("#butadd").click(function(){
var name=$("#txtname").val();
var id=$("#txtid").val();
var age=$("#txtage").val();
var user=User.initattr({"name":name,"age":age,"id":id});
user.save();
var html=[];
html.push("<tr>");
for(var key in User.attributes){
var attr=User.attributes[key];
html.push("<td>");
html.push(user[attr]);
html.push("</td>");
}
html.push("</tr>");
console.log(user);
$("#tabinfo tbody").append(html.join(''));
});
//
User.loadlocal();
});
</script>
</head>
<body>
<p>
:<input type="textbox" id="txtid" style="margin:5px;padding:5px;width:200px;" />
:<input type="textbox" id="txtname" style="margin:5px;padding:5px;width:200px;" />
:<input type="textbox" id="txtage" style="margin:5px;padding:5px;width:200px;" />
<input type="button" id="butadd" style="margin:5px;padding:5px;width:200px;" value=" " />
</p>
<p>
<table style="border:1px solid green" id="tabinfo">
<thead>
<th> </th>
<th> </th>
<th> </th>
</thead>
<tbody>
</tbody>
</table>
</p>
</body>
</html>
上のファイルをindexとして保存します.htmlは、html 5をサポートするブラウザで実行できます.例えば、chrome、ffなどです.
もう一つjquery 1.8.3のjsライブラリです.ここではjqueryのCDNに変更できます.これは公式に提供されているCDNアドレスです.
http://code.jquery.com/jquery-1.8.3.min.js
では、今日はこれで終わります.次のcontinue:)