美文网首页
js高级程序设计和额外扩展小总结:

js高级程序设计和额外扩展小总结:

作者: cs0710 | 来源:发表于2017-08-09 02:01 被阅读13次
1.扩展对话框的应用

在日常的业务中,除了经常使用到的alert、confirm、prompt这些对话框之外,还有两个和用户交互对话框存在。

// "打印"对话框,这个在业务中已经使用到了,而且可以通过@media print {}进行样式的控制
window.print();

// "查找"对话框。没错,就是浏览器页面角落里的查找框
window.find();

这两个对话框都是异步显示的,因此不会受用户禁止对话框的影响。对我而言,作为额外的补充,还是挺满足的。

2.关于location对象在业务中的使用

最近在工作中使用location对象的地方不少,首先就是可读可写的属相href的使用,进行路径的跳转,在这里location.href和redirect的不同可以看一下这篇文章,因为它帮我解决了一个隐蔽的问题,非常感谢。这是response.redirect 与javascript 的 location.href 的区别 ](http://konglx.iteye.com/blog/1836628)。

接下来就是关于location对象的一些在业务中使用的属性。

  • location.href: 返回完整的url路径
  • location.search: 这是应该很常用的一个,可以获取到?之后的参数,为了方便,可以自定义一个根据参数名回去值得函数
  • location.pathname: 返回url中的目录和文件名,这在对路由中的url进行操作时很有用
  • location.reload(): 这个方法里面可以接受一个可选的参数true,对于接受参数的它还是有区别的。不接受参数时,它是从浏览器的缓存中进行加载。接受参数时,会强制从浏览器中进行重新加载。不过也有个问题,在重新加载时,可能会影响它之后代码的执行(有可能不会执行),这与网络延迟或者系统资源有关,所以最好将它放在代码的最后一行。
3.async await和promise的区别

​ 今天在业务代码里,闷着头呼呼写了两个异步函数,回调函数里面又嵌套了一个异步函数,写完发现没啥问题。可是在我看了一些关于async、await和promise的文章和说明后,发现我写的这个代码已经"过时"了。因为这样嵌套是很不规范的,尤其是在毁调函数比较多时,这样嵌套起来,就是找死!所以,在大牛的指导下,改变了代码的写法,然后就是简洁了不少,也就是说这里不再像之前那样使用Promise对象在其回调函数中去取得数据。可是还有一个问题,就是这两种写法的区别是什么?

​ es7 对async和await有了更加标准的解决方案,es6中使用的是Promise对象。async 的作用就是可以声明一个异步函数,此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve,并拿到结果。通过下面的三段代码,我也是刚刚理解了一点点,但是我感觉有助我我入门理解。

// 使用Promise链
MongoClient.connect(url + db_name).then(db => {
    return db.collection('blogs'); // 将值透传到下一个方法中
}).then(coll => {
    return coll.find().toArray();
}).then(blogs => {
    console.log(blogs.length);
}).catch(err => {
    console.log(err);
})

上面的代码的缺点就是不能跨链访问数据,比如我在最后想通过db.close()去关闭数据库。那么就不能拿到db对象,除非进行嵌套,再去访问数据,这样就显得很冗余。

// 将Promise链打断,进行嵌套,并且每次进行捕获异常,因为现在Promise没有形成完整的链
MongoClient.connect(url + db_name).then(db => {
    let coll = db.collection('blogs');
    coll.find().toArray().then(blogs => { // 断链解决
        console.log(blogs.length);
        db.close();
    }).catch(err => {  // 捕获异常
        console.log(err);
    });
}).catch(err => {
    console.log(err);
})

最后,就是使用async和await的解决方案。

(async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    console.log(blogs.length);
    db.close();
})().catch(err => {
    console.log(err);
});

上面的解决方案就显得舒服多了,而且这里的数据不会再遇到跨链访问的问题。

对于第3点完全是晚上看了一些别人的博客留下的小感悟。后期还要深入学习!

相关文章

  • js高级程序设计和额外扩展小总结:

    1.扩展对话框的应用 在日常的业务中,除了经常使用到的alert、confirm、prompt这些对话框之外,还有...

  • JS转义字符

    摘自《JS高级程序设计》

  • JS笔记001(JS的组成、数据类型)

    内容归纳总结自《JavaScript高级程序设计》 1. JS的组成 1.ECMAScript核心 解释器2.D...

  • 正则表达式

    JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经...

  • js高级程序设计,总结:

    1.Number()和parseInt()、parseFloat()之间的区别:(1)Number()适用于任何的...

  • DOM

    以下内容总结自《js高级程序设计 第三版》 今天来说说JS中的DOM以及DOM操作。 DOM是什么,做了什么? D...

  • 提高 JavaScript 开发效率的高级VSCode扩展!

    原文:提高 JavaScript 开发效率的高级 VSCode 扩展! 作者:前端小智 Quokka.js Quo...

  • 前端知识体系

    1.JS基础 5 2.JS高级 5JS高级程序设计,各种api的应用,es6新增api的运用 3.CSS...

  • JS中的继承

    以下内容总结自《js高级程序设计 第三版》 在许多面向对象的语言中,都支持接口继承和实现继承。 接口继承:只继承方...

  • 函数表达式

    以下内容总结自《JS高级程序设计》第三版 什么是函数表达式? 函数表达式,是JS中定义函数的一种方式。在JS中,共...

网友评论

      本文标题:js高级程序设计和额外扩展小总结:

      本文链接:https://www.haomeiwen.com/subject/goxfrxtx.html