Javascript MVC学習雑記3

6078 ワード

前回に続き、今回はModelクラスにローカルストレージ機能を追加する予定で、html 5のlocalStorageを使用しています.これで便利です.ページがリフレッシュされると、追加したデータが自動的にロードされます.次は静的ページのコードです.
<!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:)