信步拾遗之中英文留白

时间 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 岁的时候跟本身不爱的人结婚，而其馀三成的人最后只能把遗产留给本身的猫。毕竟爱情跟书写都须要适时地留白。