交互设计七大定律上

      “除非有更好的选择,否则就遵从标准”,这是交互设计之父阿兰·库珀说过的。在交互设计领域,有些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们高效的完成自己的设计。因为讲的比较仔细,所以会分为上下两篇展开记录。本篇主要记录下菲茨定律席克定律神奇数字 7±2 法则

阅读全文

kano模型

      kano模型分析法是授野纪昭以客户满意度为模型设计了一种新的方法论。凭我们主观的去判断用户的需求是不太准确的。kano模型主要是分析用户对于某项事物到底满不满意,然后将数据汇总起来,用一个客观的数据去分析用户到底是喜欢的还是不喜欢的。它可以用数据去捕获用户真正的需求,帮助产品更好地迭代升级。

阅读全文

vue 实现原理(一)

      学习vue也有一段时间了。为了给自己加深记忆,本篇文章将通过从零开始仿写一个vue.js,实现vue中的单向绑定、双向绑定和 computed。因为篇幅较长,所以本篇主要实现单向绑定,下一篇将实现双向绑定和 computed。

阅读全文

函数的节流与防抖

      当我们在做 WEB 客户端开发时,会经常使用resizescrollmousemoveinput等在极短的时间内高频的调用回调函数。如果回调中又伴随着 DOM 操作,从而引发浏览器的重排与重绘,会造成浏览器非常大的计算压力,同时也会大量占用内存,性能差的浏览器可能就会直接假死,这样会大大降低用户体验。所以我们需要降低触发回调的频率。接下来我们通过函数节流和防抖看下如何降低回调的频率。

阅读全文

严格模式

      最近又重温了一下犀牛书,想对严格模式下的语言规范进行一下梳理和总结。“use strict” 是 ES5 引入的一条指令,它只能出现在脚本代码的开始或者函数体的开始、任何实体语句之前。使用”use strict”令的目的是说明(脚本或函数中)后续的代码将会解析为严格代码。严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,并增强安全性。不建议在整个脚本中使用严格模式,建议按照一个个函数去开启严格模式。避免合并脚本带来的问题

1
2
3
function A(){
“use strict”
}
1
2
3
4
"use strict"
function A(){

}

阅读全文

异步加载js

      加载 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中央状态管理

      Vuex 通过创建一个集中的数据存储,供程序中所有组件访问。主要应用于 Vue.js 中管理数据状态的一个库。接下来我用一张图来帮助我们更好的理解什么是 Vuex。图中 store 是一个仓库,装的是数据源。下面的 c1-c4,分别代表 component1-component4. 这里面的组件都可以去使用我们 store 里面的数据。Vuex 帮助我们实现了数据统一管理的功能 。


Vuex图示

阅读全文


Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :