本篇主要是继交互设计七大定律上的后续。这篇将详细记录下
接近法则
、防错原则
、复杂性守恒定律
和奥卡姆剃刀原理
。
学习
vue
也有一段时间了。为了给自己加深记忆,本篇文章将通过从零开始仿写一个vue.js
,实现vue
中的单向绑定、双向绑定和 computed。因为篇幅较长,所以本篇主要实现单向绑定,下一篇将实现双向绑定和 computed。
加载 JS 最常见的方法就是在
<head>
中插入<script type="text/javascript" src="balabala"></script>
在浏览器解析过程中,一旦发现<script>
,就会阻止浏览器的后续处理。直至等待脚本下载并执行完后,才继续恢复解析 HTML 网页。这是因为 JS 中可能会修改 DOM 还有重定向行为等。所以默认同步执行才是安全的,否则会导致复杂的线程竞赛问题。所以一般建议把<script>
放在<body>
结尾处,这样尽可能减少页面阻塞。如果 JS 是来源于网页开发者自己的 JS 代码,内容是开发者可以控制的。那么我们可以采用以下三种方式去提高性能:
1、合并文件:当有多个script
标签引用时,我们根据需求合并至单个。这样有助于建立一次 TCP 连接,就可完成下载。
2、压缩文件:利用压缩工具压缩 JS,去除多余的空格和注释,减少文件大小。
3、末尾加载:把<script>
写在<body>
结尾处,因为整个文档正文已经加载完毕。
如果我们使用的是第三方 JS,类似高德地图等由其他服务提供商提供的,这时 JS 代码并不受我们控制,就很有可能出现加载时间很长,甚至失败的情况。时间太长则会造成浏览器“假死”,页面一片空白。如果第三方 JS 代码越多,则这种风险就越大。所以就要考虑如果在加载第三方 JS 的情况下,保证自己网站的加载速度。如果这个时间还采用同步加载,带来的体验往往并不好。所以我们可以采用异步加载这些第三方 JS。
Vuex 通过创建一个集中的数据存储,供程序中所有组件访问。主要应用于 Vue.js 中管理数据状态的一个库。接下来我用一张图来帮助我们更好的理解什么是 Vuex。图中 store 是一个仓库,装的是数据源。下面的 c1-c4,分别代表 component1-component4. 这里面的组件都可以去使用我们 store 里面的数据。Vuex 帮助我们实现了数据统一管理的功能 。