基本情報
| 学生ID | フルネーム | 労働者の特定の部門 | ブログのリンク |
|---|---|---|---|
| 031702313 | 周Lirong | JSコーディング、テスト例 | https://www.cnblogs.com/lrongblog/ |
| 031702206 | 呉Yahong | UIデザイン、テキストの誘導 | https://www.cnblogs.com/wuyahong/ |
GitHubの住所：https://github.com/zlrong-hub/031702313-031702206-
この割り当てのブログへのリンク：https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736
PSPテーブル
| PSP | パーソナルソフトウェアプロセス段階 | 推定時間がかかる（分） | 実際の時間がかかる（分） |
|---|---|---|---|
| プランニング | 計画 | 30 | 40 |
| 推計 | このタスクが必要とどのくらいの時間を見積もります | 30 | 40 |
| 開発 | 開発 | 150 | 120 |
| 分析 | （新しい技術を学ぶ含む）ニーズ分析 | 900 | 750 |
| デザインスペック | 設計ドキュメントの生成 | 30 | 30 |
| デザインレビュー | デザインレビュー | 30 | 60 |
| 標準コーディング | コードの仕様（現在の開発のための適切な規範の開発） | 60 | 30 |
| 設計 | 具体的な設計 | 60 | 90 |
| コーディング | 具体的なコーディング | 480 | 600 |
| コードレビュー | コードレビュー | 60 | 90 |
| テスト | 検査（セルフテスト、コードを変更し、変更を提出） | 180 | 240 |
| 報告 | レポート | 30 | 60 |
| テストrepor | テストレポート | 60 | 60 |
| サイズ測定 | コンピューティングのワークロード | 30 | 60 |
| 死後＆プロセス改善計画 | その後まとめ、およびプロセス改善計画 | 30 | 60 |
| トータル | 2160 | 2330 |
問題解決のためのアイデアの説明や解説の設計と実装
問題解決のためのアイデア
- テキストボックス入力データに、アレイへのデータアレイに
- アレイは、アレイに分割されています
- 本部順不同リスト、動的に生成されたブロック
- Jstreeは、スケーラビリティを向上するために使用したいと考えていました
- 設定したCSS形式
設計と実装
世代家系機能
//动态生成内嵌无序列表
function rendertree(lines,parent){
if(lines.length<=1||lines[1].length<=1){
var el=$('<a href="#">'+lines+'</a>');
parent.append(el);
return parent;
}
else{
el=$('<a href="#">'+lines[0]+'</a>');
parent.append(el);}
var ul=$('<ul/>');
for(var i=1;i<lines.length;i++){
var li=$('<li/>');
rendertree(lines[i],li);
ul.append(li);
}
parent.append(ul);
return parent;
}
//在divz中添加生成的无序列表
function render(lines){
var div=$('<div/>');
return rendertree(lines,div);
}
function maketree(){
//将文本框内容进行分割后存放在数组中
var text=0;var lines=new Array();var data=new Array();var tdata=new Array();var line=new Array();var k=0;var j=0;
text=document.getElementById("Text").value;
lines=text.split("\n");
for(var i=0;i<lines.length;i++){
lines[i]=lines[i].replace(/(：)/g," ");
lines[i]=lines[i].replace(/(、)/g," ");
lines[i]=lines[i].split(" ");
}
/*for(var i=0;i<lines.length;i++){
if(lines[i]!=""){
data[j]=lines[i];j++;
}
else{
tdata[k]=data;k++;j=0;var data=new Array();
}
}*/
//for(var j=0;j<tadata.length;j++) {
var tree=render(lines);
$("div").append(tree);
//}
$("a").click(function () {
$(this).next().toggle();
});
}ページのデザイン
<head>
<meta charset="utf-8">
<title>家族树</title>
<style type="text/css">
body
{
background-image:url(背景1.jpg);
background-repeat:no-repeat;
background-size:cover
}
.main
{
width:60%;
height:400px;
float:right;
}
</style>
</head>
<body>
<h2 align="center"><font color=black>家族树信息</font></h2>
请输入家族树信息
<br>
<textarea id="Text"cols ="50" rows = "20" style="background-color:transparent"></textarea>
<div id="div" class ="main">
</div>
<br>
<br>
<button onclick="maketree()" style="margin-left:140px;">maketree</button>
</body>デザインやディスプレイの追加機能
機能
基本的には何の機能は、非常に単純な一本の木ではありません
ページ表示
ログイン画面
生成インターフェース
ノードスケーリング
カタログの説明と使用のための指示書
ディレクトリ説明
Jiazushu家系図ファイルには、ファイルとREADMEファイルが含まれ
jiazushuフォルダ含むHTMLファイル、IMGファイル、jiazushu.jsファイルの
READMEファイルの説明ページを
説明書
- 全体の家族の木のフォルダをダウンロード
- オープンjiazushuwenファイルjiazushu.htmlは、ブラウザでページを見ることができます
- テキストボックスに、データを入力し、ボタンをクリックして結果を表示します
ユニットテスト
Google Chromeを使用してユニットテスト
Githubのチェックコードが記録さ
コードモジュールは困難または結び目とソリューションを経験されて
問題の説明：どのように合理的な分割をテキストにして配列に格納
しようとして行わ：所望の効果を達成するために組み合わせるだけで、分割（）スプリットを使用するが、結果は（期待に応えて、後で分割することによって（）と置き換えることはありませんでした）
かどうか解決：解決した
ものを収穫：置き換える使用することを学ぶ（）関数を
問題の説明：動的順不同リストを生成することができません
してみてください行わは： UL HTMLでセクションを予約設定し、動的に追加Liが
解決されるには：解決した
ものを収穫：動的に要素を追加し、再帰的な使用して、親要素の子要素を追加します方法は、動的に生成されたインラインリスト
問題の説明：複数のツリーと関連樹木の共存を実現することができません。
何をしようとするんでした：複数のツリーを生成するために、ループの内部に配置されたツリーの生成機能が
解決されます。未解決
チームメイトの評価
Wuya香港：私は本当に能力をコーディングに欠けているので、まず第一に、私のチームメイトに感謝し、そのJSの部分は、すべて含めて、彼女によって行わ前と学習後がない、また、私はより多くの有罪だ場所であり、コーディングや修正を、私たち、この作業が正常に完了させるために、かなりの彼女の難しさで助け、だけでなく、彼女の真剣な態度に感謝を提供し、私たちは1 + 1> 2の完了後にチームを奨励し続けることを願って。
周Lirong：私のチームメイトの過程でジョブを完了することは困難であるこのタスクを実行するために私達の両方のためのフロントエンドのホワイトは私に励ましの多くを与えたので、私はそれを行うことができます。また、将来的にプロセスはもう少しコミュニケーションと共有できることを願っています。