Vue 笔记:事件

记一些 Vue 的笔记。本篇均与事件处理相关。

onload

需要侦听 load

<template>
  <img src="/path/to/img" @load="onLoad">
</template>

<script>
export default {
  methods: {
    onLoad(event) {
      // do something
    }
  }
}
</script>

drop

需要阻止 dragover 的默认行为,不然不触发。

<template>
  <div class="drop-area" @dragover.prevent="onDragOver" @drop="onDrop">
</template>

<script>
export default {
  methods: {
    onDragOver(event) {
      // 此时仍然可以处理
    },
    onDrop(event) {
      console.log(event.dataTransfer);
    }
  }
}
</script>

尬聊会:第一期实录

尬聊会第一期实录。

这个视频斗鱼说有问题,色情暴力之类的,给我拒了。我百思不得其解。如果你看完发现问题所在,请告诉我,谢谢。

时间锚点:

  1. [01:40] webpack该怎么学习呢?
  2. [05:20] 我为什么想搞尬聊会
  3. [07:10] 面试小经验
  4. [16:20] node怎么进行学习
  5. [21:00] 经常被问 ……源代码? 怎么读别人的源代码呢?
  6. [29:35] 初学者学习es6有什么好的方法?
  7. [34:35] 请加下,现在做跨平台,ionic2和RN选哪个好一点呢?
  8. [38:45] Phonegap
  9. [41:45 进度条这里出问题了,不知道线上怎么样] 现在的很多公司是否都不愿意带新人,兼谈学习
    1. 非常主动
    2. 胆大(有问题就问)心细(不要逮着一个人问)脸皮厚
    3. 问题必须经过自己的思考,尽量问一句话能答完的问题
  10. [44:20] 框架选择问题。Vue 作者尤雨溪的访谈
  11. [51:07] 半路出家的 JSer 学写样式
  12. [57:00] 会写页面但是不会 JS 的同学怎么学?

继续阅读“尬聊会:第一期实录”

JavaScript 异步开发全攻略

把之前写的《JavaScript 异步开发全攻略》更新了内容,然后放在 Gitbook 上,https://meathill.gitbooks.io/javascript-async-tutorial/content/ 欢迎阅读分享,因为我会不时维护,请关注,star。

之前在 GitChat 做过一次分享:《JavaScript 异步开发全攻略》。在我看来,原始内容可能不够完美,但通过后来的维护,可以把它打磨得越来越好。昨天在 SF 上回答了一个 Vuex 的 action 里使用 Promise 的问题,然后就想去补充一下这方面的内容。结果发现 GitChat 竟然不支持编辑文章,只能把内容发给运营人工修改。

索性把内容放到 Gitbook 上好了,反正 GitChat SEO 也不做,文章也自然移动到第二页了。试了试,没有被墙,很好。于是简单整理了一下,上传。

欢迎阅读,欢迎分享,因为我会不时更新新内容,请关注 star:

JavaScript 异步开发全攻略

678次直播总结,兼半年总结

总结一下5678系列分享失利的教训,反省一下自己这半年的问题,确定一下下半年的目标和宗旨。

时间过的可真快,计划表上的大部分内容几乎还在原地踏步,半年时间就过去了。

今年的主要目标是做视频培训课程,不过很不赶巧,春节从日本回来我们全家就陷入感冒漩涡,你方咳罢我登场,轮着来,好半个月坏半个月,一直到过完五一才渐渐摆脱感冒阴影。于是系列视频教程就被我一拖再拖,第一波联系的 51CTO 学院已经把我放弃了,我也不好意思再找她们;第二波联系的慕课网要求甚严,现在都还没完成第一次课……

另一方面,SF 增设讲堂后我就立刻加入开始直播,如今进行了8期——好吧,其实早就完成了8期,只不过后几期越做越惨,身心俱伤,所以我休养了一个月……

继续阅读“678次直播总结,兼半年总结”

知加 zhijia.io 即将关闭

知加即将关闭,市场上没有同类竞品,写书的地方只能改到别处了。

今天突然从知加运营那里得到消息,知加将于7月24日关闭。其实,得知 Easy 离职回老家当独立开发者,我就猜想这个产品命不久矣。

还是挺遗憾的,因为从产品层面来看,知加有很多过人之处,目前看来市场上还真没有同类竞品:

继续阅读“知加 zhijia.io 即将关闭”

第一场 GitChat 总结

在 GitChat 做了一次分享,总结一下他们家和 SF 的差异。简单来说,GC 的文章式共享方便检索,SF 的视频在交流效率上更占优势。另外,GC 的钱实时到帐,很舒服。

开始之前,先做广告吧。

GitChat 分享 《JavaScript 异步开发全攻略》

为解决异步函数的回调陷阱,开发社区不断摸索,终于折腾出 Promise/A+。它不增加新的语法,可以适配几乎所有浏览器;以队列的形式组织代码,易读好改;捕获异常方案也基本可用。这套方案在迭代中逐步完善,最终被吸收进 ES2015。不仅如此,ES2017 中还增加了 Await/Async,可以用顺序的方式书写异步代码,甚至可以正常抛出捕获错误,维护同一个栈。可以说彻底解决了异步回调的问题。 现在大部分浏览器和 Node.js 都已原生支持 Promise,很多类库也开始返回 Promise 对象,更有各种降级适配策略。Node.js 7+ 则实装了 Await/Async。如果您现在还不会使用,那么我建议您尽快学习一下。

下次直播分享 前端面试攻略:JavaScript 排序与搜索

从事前端开发的同学很多从页面仔入门,比如说我,自学比例很大,有些时候会无意中忽视一些基础,比如算法、数据结构。这些欠缺在某些时候就会显得很致命,比如说面试,或者处理大量数据的场景。所以希望这样的一场分享能够帮助大家夯实原本不太扎实的基础,将来的开发之路更加顺畅。

目前早鸟票发送中,7月13日前门票5折,19日前75折,开播当日恢复全价。

继续阅读“第一场 GitChat 总结”

【修正】Promise N种用法-异步回调的问题-findLargest 解析

做慕课视频的时候,仔细琢磨了一下,发现之前讲的还是有问题,所以重新录了一遍。

做慕课视频的时候,仔细琢磨了一下,发现之前讲的还是有问题,所以重新录了一遍。

继续阅读“【修正】Promise N种用法-异步回调的问题-findLargest 解析”

使用 Live-server 作为开发服务器

我一直都用 Webstorm,所以分享时漏掉了搭建本地测试服务器的环节,现在补上。

实战组件开发——手机日历 – 1. 项目启动 直播结束后,有同学问我怎么在本地调试。于是我突然意识到这个问题:

我一直都用 Webstorm,它有内置开发服务器,点一下就可以在浏览器里用 http:// 协议预览了。但是没有用 Webstorm 的同学就办不到,如果直接双击 .html 会议 file:/// 协议打开,影响开发。

然后我就录了下面这段视频,介绍使用 Live-server 进行本地开发。视频很短,中间等待安装的时间比较长,可以跳过。


另外,《实战组件开发》的第四讲:《用 Gulp 打包发布吧!》将于本周五进行,欢迎大家来围观。


Live-server 官网

Node.js 8 中的 util.promisify

Node.js 8 内建了“Promise 化”功能,可以把之前回调模式的方法,很简单的封装成支持 Promise 的方法,只需要调用 util.promisify(原函数) 即可。对于非 Node.js 标准风格的函数,也提供自定义转换函数的功能。

Node.js 8 于上个月月底正式发布,带来了很多新特性。其中比较值得注意的,便有 util.promisify() 这个方法。

如果你已经很熟悉 Promise,请继续往下看。如果你还不熟悉 Promise,可以先跳过去看下下章:Promise 介绍

util.promisify()

虽然 Promise 已经普及,但是 Node.js 里仍然有大量依赖回调的异步函数,如果我们把每个函数都封装一遍,那真是齁麻烦齁麻烦的,比齁还麻烦。

所以 Node.js 8 就提供了 util.promisify() 这个方法,方便我们把原来的异步回调方法改成支持 Promise 的方法,接下来,想继续 .then().then().then() 搞队列,还是 await 就看实际需要了。

我们看下范例,让读取目录文件状态的 fs.stat 支持 Promise:

const util = require('util');
const fs = require('fs');

const stat = util.promisify(fs.stat);
stat('.')
  .then((stats) => {
    // Do something with `stats`
  })
  .catch((error) => {
    // Handle the error.
  });

怎么样,很简单吧?按照文档的说法,只要符合 Node.js 的回调风格,所有函数都可以这样转换。也就是说,只要满足下面两个条件,无论是不是原生方法,都可以:

  1. 最后一个参数是回调函数
  2. 回调函数的参数为 (err, result),前面是可能的错误,后面是正常的结果

结合 Await/Async 使用

同样是上面的例子,如果想要结合 Await/Async,可以这样使用:

const util = require('util');
const fs = require('fs');

const stat = util.promisify(fs.stat);
async function readStats(dir) {
  try {
    let stats = await stat(dir);
    // Do something with `stats`
  } catch (err) { // Handle the error.
    console.log(err);
  }
}
readStats('.');

自定义 Promise 化处理函数

那如果现有的使用回调的函数不符合这个风格,还能用 util.promisify() 么?答案也是肯定的。我们只要给函数增加一个属性 util.promisify.custom,指定一个函数作为 Promise 化处理函数,即可。请看下面的代码:

const util = require('util');

// 这就是要处理的使用回调的函数
function doSomething(foo, callback) { 
  // ...
}

// 给它增加一个方法,用来在 Promise 化时调用
doSomething[util.promisify.custom] = function(foo) { 
  // 自定义生成 Promise 的逻辑
  return getPromiseSomehow(); 
};

const promisified = util.promisify(doSomething);
console.log(promisified === doSomething[util.promisify.custom]);
// prints 'true'

如此一来,任何时候我们对目标函数 doSomething 进行 Promise 化处理,都会得到之前定义的函数。运行它,就会按照我们设计的特定逻辑返回 Promise 实例。

我们就可以升级以前所有的异步回调函数了。

继续阅读“Node.js 8 中的 util.promisify”