信步拾遺之中英文留白

時間 2019-12-13

標籤信步拾遺之中英文留白简体版

原文原文鏈接

在前幾天，看到了一篇博客，總體感受很舒服，但又說不出來爲啥，認真看了下，發現原來他的中英文有留白，字裏行間感受很是好，而後回過頭看本身的博客，慘不忍睹，怎麼能忍，改，立刻改。 javascript

網絡上實現中英文留白的方式不少，我選了一種 js 實現方式，並寫了一個小型的中英文留白格式轉換 js 程序。 css

1、中英文留白程序

盤古腳本下載路徑：https://github.com/vinta/pangu.jshtml

<html>
<script src="https://cdn.bootcss.com/pangu/3.3.0/pangu.min.js">
</script>
<style type="text/css">
.alfred_box {
	margin-top:5px;
	border: 1px solid #a0b3d6; 
	width:95%;
	height:90%;
}
</style>
<script>
	function littleblank(){
		var text = pangu.spacing(document.getElementById('beautiful').innerText);
		document.getElementById('beautiful').innerText = text;
	}
</script>
<body>
	<input type="button" value="想要 beautiful 下嗎？點這裏" onclick="littleblank()" />
	<div id="beautiful" class="alfred_box" contenteditable="true"><br /></div>
</body>
</html>

中英文留白.html

效果圖：java

2、JS 異步加載

在搜索資料的時候，看到一哥們爲了節約 10ms 加載時間（我實際測試大概節約5ms，多是我網絡比較好，我竟然去測試了，也是閒的 w(ﾟДﾟ)w），搞了個 JS 異步加載，蠻有意思的，順手研究了下。
通常對於初學者， HTML 頁面的 script 標籤都會寫在 head 標籤部分，這會致使一個問題，阻塞全部頁面渲染工做，使得用戶在腳本加載完畢並執行完畢以前一直處於「白屏死機」狀態。爲何呢？由於 JS 的加載是一個由上而下的過程，又稱阻塞模式或同步模式，之因此要同步執行，是由於 JS 中可能有輸出 document 內容、修改 dom等行爲，因此默認同步執行纔是安全的。git

咱們看到的不少網頁是把 <script> 放在頁面末尾 </body> 以前，這也是比較通行的一種 js 加載優化方式，爲了儘量減小阻塞行爲，先讓頁面展現出來。github

旁的很少說，轉換程序異步加載版本以下，使用的是較爲通用的方式，經過 js 方法動態生成 script 節點，在一些支持 H5 的瀏覽器中，也可使用 script 標籤的 async 屬性或 defer 屬性指定該腳本異步加載，二者的區別主要在於腳本下載完以後什麼時候執行，在此就不進行細說，有興趣的能夠放狗搜下。瀏覽器

<html>
<script>
(function(u, c) {
  var d = document, t = 'script', o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = u;
  if (c) { o.addEventListener('load', function(e) { c(e); }); }
  s.parentNode.insertBefore(o, s);
})
('https://cdn.bootcss.com/pangu/3.3.0/pangu.min.js', function() {
  //作一些你在完成加載後想作的事情吧
});
</script>
</script>
<style type="text/css">
.alfred_box {
	margin-top:5px;
	border: 1px solid #a0b3d6; 
	width:95%;
	height:90%;
}
</style>
<script type="text/javascript">
	function littleblank(){
		var text = pangu.spacing(document.getElementById('beautiful').innerText);
		document.getElementById('beautiful').innerText = text;
	}
</script>
<body>
	<input type="button" value="想要 beautiful 下嗎？點這裏" onclick="littleblank()" />
	<div id="beautiful" class="alfred_box" contenteditable="true"><br /></div>
</body>
</html>

中英文留白.html

OK，完事，在盤古腳本官網看到做者在一本正經的瞎扯淡，下面這段話，哎喲，我去，該擺什麼表情呢。。。安全

漢學家稱這個空白字元爲「盤古之白」，由於它劈開了全形字和半形字之間的混沌。另有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟本身不愛的人結婚，而其餘三成的人最後只能把遺產留給本身的貓。畢竟愛情跟書寫都須要適時地留白。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。