12-19 关于异步编程进一步研究以及类型转换

最新推荐文章于 2024-10-09 11:04:18 发布

鹿目圆

最新推荐文章于 2024-10-09 11:04:18 发布

阅读量155

点赞数 2

本文链接：https://blog.csdn.net/qq_36620428/article/details/85098078

版权

关于异步编程进一步研究

从回调地狱说起，JavaScript异步编程__“回调地狱”的一些解决方案

事件发布/监听模式

借鉴这种思想，一方面，我们可以监听某一事件，当事件发生时，进行相应回调操作；另一方面，当某些操作完成后，通过发布事件触发回调。这样就可以将原本捆绑在一起的代码解耦。

const events = require('events');
const eventEmitter = new events.EventEmitter();

eventEmitter.on('db', (err, kw) => {
    db.find(`select * from sample where kw = ${kw}`, (err, res) => {
        eventEmitter('get', res.length);
    });
});

eventEmitter.on('get', (err, count) => {
    get(`/sampleget?count=${count}`, data => {
        console.log(data);
    });
});

fs.readFile('./sample.txt', 'utf-8', (err, content) => {
    let keyword = content.substring(0, 5);
    eventEmitter. emit('db', keyword);
});

使用这种模式的实现需要一个事件发布/监听的库。上面代码中使用node原生的events模块，当然你可以使用任何你喜欢的库。（比如这次项目，大神就使用了自定义的一个vue实例进行监听，如下）


export const SDKObserver = new Vue();

 //  注册函数，给原生调用
      bridge.registerHandler('uploadPicSuccessFuc', function(data) {
        callback(data);
        SDKObserver.$emit('uploadPicSuccessFuc', data);
      });
    }

然后在页面组件里进行监听，就能捕获这个事件，并且能够获取到data为回调函数

SDKObserver.$on("uploadVideoSucessFuc", obj =>
 {
}

这样在公共组件抛出事件，页面组件监听并捕获，调用回调函数的做法，有利于解耦，增加可读性和复用性。并且在SDKObserver这个vue示例下的箭头函数，this的指向必定是vue示例，就可以调用vue本身的api。

海通社区的打包改造

关于如何让海通社区项目支持es6，林宇大神提出了一个方案，
可以考虑在js目录下使用es6书写好js代码，然后通过gulp打包为项目中原来目录下的.controller.js，就能正常的继续接下来的步骤了。缺点就是会每多一个js文件就会多一个es6文件。
至于为什么要这么麻烦的改，是因为原来打包的插件和代码都不支持es6，只能通过这种折中的办法来进行解决。