交互设计七大定律上

产品

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

阅读全文

kano模型

产品

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

阅读全文

vue 实现原理(一)

Vue

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

阅读全文

函数的节流与防抖

js

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

阅读全文

严格模式

js

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

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

}

阅读全文

异步加载js

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

Vue

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


Vuex图示

阅读全文

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :