最近寫了一個Javascript Editer web

時間 2019-11-15

標籤最近寫了一個 javascript editer web 欄目 JavaScript 简体版

原文原文鏈接

這是一款開發測試工具，用於測試Javascript代碼的執行狀況，也可用於html代碼測試。畢竟兩者密不可分。但它只是個簡單的工具，僅有測試功能，不能提示error或自動調試，沒有調試功能個人一個調試代碼的辦法是逐句測試，再把成功的句子組合。目前這仍是個架構式demo，不完善，可修改。原本是本身寫代碼時爲了少用ctrltab鍵切換屏幕，以爲晃眼睛，因此把寫文件的記事本和查看執行狀況的nevigater設計在一個html頁面上。javascript

項目地址：https://git.oschina.net/yihazino/jesEcss

項目有四個htm可用，jesE.htm用於編輯和測試javascript代碼，Hsave.htm用於編輯和測試html代碼，還有一個snr.htm是能夠查看文件和展現編程效果的簡單的寬屏browser，最後Up.htm是綜合改進版（第一屏先是效果顯示區，scroll可在第二屏的textarea編輯代碼。）最近都增長了保存文件功能並實線了自動刷新效果區。html

這是文件的網盤連接，請多多指教！（前一個連接是初版，有一些測試文件，後面一個連接是簡化與界面改進後的版本。）java

https://share.weiyun.com/08083b1656ab387b95f4a46b2541efbagit

https://share.weiyun.com/2c3439f12b1f404fd19e27b3cceaabafweb

界面沒有太多設計，左面是白板，用來查看執行結果，後面是文本框，用來寫代碼。兩個按鈕，一個用來提交代碼，保存在緩存文件fe.htm中，另外一個能夠清空白板的內容，可是文本框中的代碼不會隨之清空，由於開發過程全部代碼都很重要。由於沒有保存文件的功能，因此要保存測試成功的代碼，須要退出軟件後在程序的文件夾找到fe.htm文件，手動複製，更名，再歸檔。可見功能還不夠完善，可由開發者本身改進，我也不使用中不斷的修改它。編程

舉例，可將按鈕修改成紅色，只需修改ui.css文件中.bt類的color和border兩個樣式緩存

除了help.txt文件（提醒保存路徑和刷新查看結果），其餘三種文件分別是：架構

一.自定義的Javascript函數寫在f.js文件：函數

function rt(a){document.write(a)}
function m(a){rt('<'+a+'>')}
function n(a){rt('</'+a+'>')}
function mk(a,b){m(a);rt(b);n(a)}
function el(a){return document.getElementById(a)}
function ih(a){return el(a).value}
function eq(a,b){var mi=a-b;if(mi==0){rt(1)}}

二.首頁jesE.htm的代碼：

<link href='ui.css'  rel='stylesheet' />
<script src='f.js'></script>
<script>
function pass()
    { var wt=ih('wt'); 
      wt="<script src='f.js'"+"></"+"script>"+"<script"+">"+wt+"</script"+">"+"<body style='font-size:24px;'"+"></"+"body>";
      var fso=new ActiveXObject('Scripting.FileSystemObject');
      var fl=fso.CreateTextFile('e://a/fe.htm');
      fl.Write(wt);
      fl.Close
    }
function clr()
   { var fso1=new ActiveXObject('Scripting.FileSystemObject');
     var fl1=fso1.CreateTextFile('e://a/fe.htm');
     fl1.Write(null);
     fl1.Close;
   }
    rt('<iframe id="panel" src="fe.htm" /></iframe>');
    m("textarea id='wt'");n('textarea');
    m("div class='bt' onclick='pass()'");rt('presee');n('div');
    m("div class='bt bt2' onclick='clr()'");rt('clear');n('div');
</script>
<body style='background:#e4e4e8;'></body>

這個文件有兩處能夠根據開發者須要修改。一是第8行和第14行的文件保存位置，能夠把e://a/fe.htm改爲其餘存儲路徑，而在第十八行的src=「fe.htm」，也要與之同步。fe.htm是緩存文件的名字，這個緩存文件存放待測試的代碼，並在刷新首頁後，在首頁iframe標記位置打開，固然緩存文件名字能夠本身隨意更改，可是注意得和保存路徑的最後的那個文件名字一致。二是按鈕的名稱能夠自行修改，第一個按鈕的名稱在倒數第四行的rt('presee');位置，好比也可根據我的習慣把presee（預覽）改爲preview，exec或test等其餘與執行代碼和測試有關的詞語。

若是把第六句的字符串變量wt的賦值語句去除，點擊執行按鈕後就不會在代碼緩存文件fe.htm

中寫<script></script>標記，也必會寫f.js的調用語句，這樣就將這個webpage軟件改爲了HTML代碼的測試軟件，這也是個不錯的修改方法，我如今就是這樣用的。能夠將想要測試的html文件代碼直接粘貼到右面的textarea，單擊presee按鈕，而後刷新，在左面的白板中就會查看到結果了。

三.設計界面用的樣式文件ui.css的代碼

#panel {border:1px solid #0083ce;
margin-top:50px;
margin-left:70px;
margin-right:80px;
float:left;
width:560px;
height:640px;
background:#fff;}

#wt {border:0px solid #919191;
margin-top:50px;
padding-top:16px;
padding-left:22px;
position:relative;
float:left;
overflow:auto;
width:480px;
height:640px;
background:#4b4236;
color:#ffffff;
font-size:26px;}

.bt {margin-top:56px;
margin-left:34px;
float:left;
width:80px;
height:28px;
background:white;
border:2px solid #900;
color:#900;
font-family:Microsoft Yahei;
font-size:18px;
text-align:center;}
.bt2 {margin-top:32px;}

相關標籤/搜索