中文關鍵詞替換體驗頁面原型 2018-08-21
阿新 • • 發佈:2019-01-12
源自: 中文化 類C程式語言 需要什麼樣的關鍵字? · Issue #40 · program-in-chinese/overview. 原型為純前端, 本地瀏覽器執行效果如下:
關鍵詞選取的討論已經不少, 往往都有各人偏好的風格. 這個原型旨在通過實驗各種用詞在實際程式碼中的效果, 使討論更接近實用. 也許在完善後也可用來演示其他風格的中文程式語言設計.
原始碼庫在: program-in-chinese/demo_keyword_design_by_code
程式碼選自program-in-chinese/team_website (中文程式碼示例之冒泡演算法, 後感), 程式碼塊的HTML程式碼是直接截取了jekyll轉換後的HTML原始碼, 高亮也是利用了jekyll的自帶css.
原型中其他的原始碼如下
主介面.html
主要內容是三塊
- 原始程式碼 - 使用英文關鍵詞的程式碼
- 替換關鍵詞後的程式碼 - 根據關鍵詞詞典, 對所有相關關鍵詞進行替換後生成的程式碼
- 關鍵詞修改表 - 顯示所有關鍵詞的對應中文, 進行修改後可以即時看到程式碼替換後的效果
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<span>原始碼</span>
<div id = "原始碼">
< div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="err">前</span> <span class="ow">in</span> <span class="nb">xrange</span><span class="p">(</ span><span class="nb">len</span><span class="p">(</span><span class="n">a</span><span class="p">)):</span>
<span class="k">for</span> <span class="err">後</span> <span class="ow">in</span> <span class="nb">xrange</span><span class="p">(</span><span class="err">前</span> <span class="o">+</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">a</span><span class="p">)):</span>
<span class="k">if</span> <span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">]</span> <span class="o">></span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">]:</span>
<span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">],</span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">]</span> <span class="o">=</span> <span class="n">a</span><span class="p">[</span><span class="err">後</span><span class="p">],</span> <span class="n">a</span><span class="p">[</span><span class="err">前</span><span class="p">]</span>
</code></pre></div></div>
</div>
<span>替換後代碼</span>
<div id = "替換後代碼">
</div>
<div id = "替換表">
</div>
<script src="詞替換.js"></script>
</body>
</html>
詞替換.js
初始時有預設的關鍵詞詞典(為演示之用只加了三個, 歡迎提交新增/修改, 最好實現多套關鍵詞可選). 頁面載入時, 按照這個預設詞典對"原始碼"中的程式碼進行關鍵詞替換, 並按每個關鍵詞一行動態生成"替換表"可供使用者手動修改.
var 關鍵詞詞典 = {
'for': '對於',
'in': '在',
'if': '如果'
};
function 替換所有關鍵詞() {
var 原始碼拷貝 = document.getElementById("原始碼").children[0].cloneNode(true);
var 欄位列表 = 原始碼拷貝.getElementsByTagName('span');
for (var i = 0; i < 欄位列表.length; i++) {
var 欄位內容 = 欄位列表[i].textContent;
var 對應中文詞 = 關鍵詞詞典[欄位內容];
if (對應中文詞) {
欄位列表[i].textContent = 對應中文詞;
}
}
var 替換程式碼塊 = document.getElementById("替換後代碼");
if (替換程式碼塊.children.length == 1) {
替換程式碼塊.removeChild(替換程式碼塊.children[0]);
}
替換程式碼塊.appendChild(原始碼拷貝);
}
// <div><span>for</span><input type="text" name="for替換" value="對於"></div>
function 建立替換詞條(原詞文字, 替換文字) {
var 詞條 = document.createElement("div");
var 原詞 = document.createElement('span');
原詞.textContent = 原詞文字;
var 替換 = document.createElement('input');
var 替換輸入框名 = 原詞文字 + '替換';
替換.type = 'text';
替換.name = 替換輸入框名;
替換.value = 替換文字;
詞條.appendChild(原詞);
詞條.appendChild(替換);
return 詞條;
}
function 取輸入監聽函式(關鍵詞) {
return function() {
關鍵詞詞典[關鍵詞] = document.getElementsByName(關鍵詞 + '替換')[0].value;
替換所有關鍵詞();
};
}
替換所有關鍵詞();
var 替換表 = document.getElementById("替換表");
for(var 關鍵詞 in 關鍵詞詞典) {
替換表.appendChild(建立替換詞條(關鍵詞, 關鍵詞詞典[關鍵詞]));
var 替換輸入框名 = 關鍵詞 + '替換';
document.getElementsByName(替換輸入框名)[0].addEventListener('input', 取輸入監聽函式(關鍵詞));
}
歡迎新增新例程, 尤其是較短自成一體的中文命名的例程.