WEBのFragmentシステム

2018-07-10 12:26:08

 Androidのフラグメントのような構造をHTMLとJavaScriptで作ってみました。

‌index.html
‌<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"/>  <script type="text/javascript" src="Fragment.js"></script>  <script type="text/javascript" src="Main.js"></script>  <title>BLOGシステム</title> </head> <body>  <div data-fragment="MainFragment"></div>  <div data-fragment="SubFragment"></div>  <div data-fragment="Sub2Fragment"></div> </body> </html>
‌ というような形でHTMLを定義すると、自動的に対象のjsファイルがロードされ、そこからさらにHTMLファイルが読み込まれ、さらにクリックイベントのバインドなどの処理を行う構造です。

‌MainFragment.js
‌//フラグメントの初期化 Fragment.init("MainFragment",CustomFragment); function CustomFragment(){} //フラグメントが作成されたときに呼び出される CustomFragment.prototype.onViewCreate = function(){  //HTMLデータを動的に読み込む  this.loadView("Layout/MainFragment.html"); } CustomFragment.prototype.onViewCreated = function(node){  //ここに読み込んだ後のイベントバインド処理 }
 ‌実装はしてみたものの使い道に困る感じなので没ネタです。