模板户:专注于dede模板,织梦源码,织梦模板,网站模板,dedecms模板,网站源码,dedecms教程以及各类手机网站模板和企业网站模板分享.

织梦模板

VIP

CMS教程

站长学院

随机织梦教程

最新织梦教程

织梦模板随机Tags

关键词排名 原创 用户体验 玩具外贸网站源码 关键词优化 搜索引擎 汽车配件织梦模板 网站title 太阳能光伏网站源码 网站 财务会计网站源码 餐饮管理织梦模板 餐饮加盟网站源码 关键词 汽车润滑油网站源码 蜘蛛 优化 织梦伪静态 高亮 个人网站

为什么你的 JavaScript 代码如此冗长?!

www.mobanhu.com / 2019-03-12 08:27:17
前端媛猿

前端媛猿

web前端技术分享、交流平台



又一年过去了,JavaScript发生了许多变化。但是,即使是2019年了,还是需要给一些帮助你编写干净、整洁、有效、且具有扩展性的代码建议。

下面是让你成为更好的开发者的9条建议。


1. async / await


如果你还在为回调陷阱烦恼不已,那么就应该赶快扔掉这些2014年的代码了。除非绝对必要(比如某个库要求回调,或者出于性能的原因),否则不要再用回调了。Promise也不错,但当代码规模越来越大时,它们总是有些别扭。


我的解决方案就是async / await,能让阅读代码变得更容易,代码变得更整洁。实际上,Javascript中的任何Promise都可以await,只要你用的库能返回Promise,就可以await它。实际上,async/await只不过是promise的语法糖而已。为了让代码正确运行,你只需在函数前面加上async即可。

下面是个例子:

async function getData() {
    const result = await axios.get(https://dube.io/service/ping)
    const data = result.data

    console.log(data, data)

    return data
}

getData()


注意在顶层代码是无法await的,await只能在async函数中使用。此外,async / await是在ES2017中引入的,所以务必要对代码进行编译(transpile)。


2. 异步控制流


许多时候需要获取多个数据集并在每个数据集上做一些处理,或者在所有异步调用都返回之后执行某项任务。

for...of

假设网页上有一些精灵宝可梦,我们需要获取每一只的详细信息。我们不能等待所有调用结束,因为我们不知道一共有多少只。我们希望能在获取一部分数据之后立即更新数据集,这时候就可以使用for...of在一个数组上进行循环,然后在内部加入async的代码块,但这样做会造成阻塞,直到所有调用结束。一定要注意,这样做有可能会造成性能瓶颈,但这样做也不失为一种办法。

例子如下:


import axios from axios

let myData = [{id0}, {id1}, {id2}, {id3}]

async function fetchData(dataSet{
    for(entry of dataSet) {
        const result = await axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
        const newData = result.data
        updateData(newData)

        console.log(myData)
    }
}

function updateData(newData{
    myData = myData.map(el => {
        if(el.id === newData.id) return newData
        return el
    })
}

fetchData(myData)


这些例子实际上都能运行,可以自行复制粘贴到你喜欢的代码沙盒工具中。


Promise.all


怎样才能并行获取所有宝可梦呢?我们可以await所有的promise,只需用Promise.all即可:


import axios from axios 

let myData = [{id0}, {id1}, {id2}, {id3}]

async function fetchData(dataSet{
    const pokemonPromises = dataSet.map(entry => {
        return axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
    })

    const results = await Promise.all(pokemonPromises)

    results.forEach(result => {
        updateData(result.data)
    })

    console.log(myData) 
}

function updateData(newData{
    myData = myData.map(el => {
        if(el.id === newData.id) return newData
        return el
    })
}

fetchData(myData)


for...of和Promise.all都是在ES6+中引用的,所以代码需要编译。


3. 解构和默认值


我们现在回到前面的例子:


const result = axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)
const data = result.data


这段代码有个更简单的写法。我们可以使用解构来从一个数组或对象中获取一个或多个值。可以这样写:


const { data } = await axios.get(...)


这样就能节省一行代码!还可以进行重命名:


const { data: newData } = await axios.get(...)


另一个小技巧就是在解构时制定默认值。这样能保证变量永远不会为undefine,因此就不需要手工检查变量了。


const { id = 5 } = {}
console.log(id// 5


这些技巧也可以用在函数参数上,例如:


function calculate({operands = [12], type = addition} = {}{
    return operands.reduce((acc, val) => {
        switch(type) {
            case addition:
                return acc + val
            case subtraction:
                return acc - val
            case multiplication:
                return acc * val
            case division:
                return acc / val
        }
    }, [additionsubtraction].includes(type) ? 0 : 1)
}

console.log(calculate()) // 3
console.log(calculate({typedivision})) // 0.5
console.log(calculate({operands: [234], typemultiplication})) // 24


第一眼看上去这个例子可能不太容易理解,但多花些时间研究下是有好处的。当我们不给函数传递参数时,就会使用默认值。如果给函数传递参数,那么不存在的参数就会使用默认值。


解构和默认值是在ES6+中引入的,所以代码需要编译。


4. 真值和假值


在使用默认值时,经常需要检查存在的值。但是,你还可以直接使用真值和假值。这样能改善代码并节省好多字符,使代码更加流畅。我经常看到人们这样写:


if(myBool === true) {
  console.log(...)
}
// OR
if(myString.length > 0) {
  console.log(...)
}
// OR
if(isNaN(myNumber)) {
  console.log(...)
}


这些代码可以缩写成:


if(myBool) {
  console.log(...)
}
// OR
if(myString) {
  console.log(...)
}
// OR
if(!myNumber) {
  console.log(...)
}


要真正理解这些语句的好处,你必须要理解真值和假值都是什么。下面是部分摘要:


假值


  • 长度为0的字符串

  • 数字0

  • false

  • undefined

  • null

  • NaN


真值


  • 空数组

  • 空对象

  • 任何其他东西


当检查真值或假值时,不需要明确写出比较,这相当于使用双等号 == 而不是三等号 ===。一般来说,这种用法的行为与预想是一致的,但有可能会遇到bug。比如,我最常遇到但就是有关数字0的bug。


5. 逻辑运算符和三元运算符


这些运算符也是用来缩减代码的,节省下宝贵的代码行数。经常有许多工具可以保持代码干净整洁,但这些工具也会造成混乱,特别是在改变它们时。


逻辑运算符


逻辑运算符可以组合两个表达式,并返回true或false,或者匹配的值。常用的有&&,意思是“与”,还有 || 意思是“或”。我们来看看:


console.log(true && true// true
console.log(false && true// false
console.log(true && false// false
console.log(false && false// false
console.log(true || true// true
console.log(true || false// true
console.log(false || true// true
console.log(false || false// false


根据上一部分关于真值和假值的知识,我们可以将逻辑运算符组合起来。在使用逻辑运算符时,会使用以下规则:


  • && :返回第一个值为假的表达式的值。如果不存在,则返回最后一个值为真的值。

  • || :返回第一个值为假的表达式的值。如果不存在,则返回最后一个值为假的值。


console.log(0 && {a1}) // 0
console.log(false && a// false
console.log(2 && 5// 5
console.log([] || false// []
console.log(NaN || null// null
console.log(true || a// true


三元运算符


三元运算符很像逻辑表达式,但它由三个部分组成:


  • 比较部分,返回假值或真值;

  • 第一个值,如果比较为真;

  • 第二个值,如果比较为假。


下面是例子:


const lang = German
console.log(lang === German ? Hallo : Hello// Hallo
console.log(lang ? Ja : Yes// Ja
console.log(lang === French ? Bon soir : Good evening// Good evening


6. 链式操作


你遇到过这个问题吗?在访问嵌套对象的属性时,无法事先确定对象的属性是否存在?可能不得不写这样的代码:


let data
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData


这段代码很荒谬,我们还有更好的办法,至少是在建议中的办法(下面说了怎样启用该办法)。这个办法称为optional chaining,用法如下:


const data = myObj?.firstProp?.secondProp?.actualData


用这个方法检查嵌套属性非常流畅,代码也能变得更干净。


目前,optional chaining还不是官方标准的一部分,但它是个stage-1的实验性功能。需要在babelrc中加入@babel/plugin-proposal-optional-chaining来启用它。


7. 类属性和绑定


JavaScript中的函数绑定是个非常常见的任务。由于ES6标准引入了箭头函数,我们现在可以自动地用定义的形式绑定函数——这方法非常好用,现在的JavaScript开发者都在用它。之前类刚刚出现时是没办法使用箭头函数的,因为类需要用某种特殊的方式来定义。我们需要在某个地方进行绑定,例如在构造函数里(在React.js中最好这样做)。


我很讨厌需要先定义类方法再绑定方法的流程,不过现在可以通过箭头函数进行自动绑定。箭头函数现在可以直接在类中使用。


下面是个例子,其中的_increaseCount被绑定了:


class Counter extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count0 }
    }

    render() {
        return(
            <div>
                <h1>{this.state.count}</h1>  
                <button onClick={this._increaseCount}>Increase Count</button>
            </div>

        )
    }

    _increaseCount = () => {
        this.setState({ countthis.state.count + 1 })
    }
}


目前,类属性不是官方标准的一部分,但是个stage-3的实验性功能。必须在babelrc中添加@babel/plugin-proposal-class-properties才能使用它。


8. 使用parcel


作为前端开发者,你肯定会遇到打包和编译代码的问题。


长时间以来,实践中的标准是webpack。我最初用的是webpack版本1,当时用起来很痛苦,需要不断修改尝试各种配置选项,我在上面花了无数个小时想办法让它工作。一旦弄好我就绝不会再碰它,以免不小心破坏什么。几个月之后我遇到了parcel,总算松了口气。它几乎可以不加任何配置拿来即用,但你依然可以在需要的时候进行改变。它还支持插件,类似于webpack和babel,但非常快。


如果你不知道parcel,我建议你一定要试试。


9. 自己写更多代码


这一条很有意思,这个话题我已经讨论过很多次了。


即使是CSS,许多人也喜欢用现成的库,比如bootstrap。至于JavaScript,现在还有很多人在用jQuery以及各种小型库进行表单验证、跑马灯等等。虽然使用库天经地义,但我强烈建议你自己写更多的代码,而不是依赖于安装各种npm包。当然,大型的库(甚至框架)需要整个团队去构建,如moment.js或react-dateicker,自己写是不现实的。


但是,其他的大部分东西都可以自己写。这样能带来三个好处:


  • 你清楚地知道代码的内容;

  • 在某个点上你开始真正理解编程,知道内部的工作原理;

  • 可以防止代码膨胀。


最初直接使用npm包很方便。自己实现一些功能会花很多时间。但是,如果安装的包并不能正常工作,而需要换别的方法,就得花更多的时间去阅读其API。而在自己实现时,你可以为项目100%地量身定做。

https://levelup.gitconnected.com/9-tricks-for-kickass-javascript-developers-in-2019-eb01dd3def2a

作者:Lucas Gisder-Dubé,曾联合创立过一家创业公司,并担任CTO一年半的时间。离开创业公司后,他在Ironhack作为讲师给别人讲编程。

来自: CSDN 


● 后台回复【电子书】,即可免费获取 27本 精选的前端电子书!

● 后台回复【web100】,免费获取 100本 最棒的前端电子书!

● 后台回复【后台管理模板】,免费获取 48个 实用、漂亮的后台管理模板!

● 后台回复【登录模板】,免费获取 15个 超赞的后台登录模板!

点击下方“阅读原文”查看更多精彩内容

    阅读原文

    发送中

    阅读原文
    本文由AB模板网:织梦模板整理发布, 转载请说明出处:https://www.mobanhu.com
    随机站长资讯
    高级精美的家私企业网站源码 家私家纺类网
    农业绿色生态水果企业dede源码
    驾校类企业网站源码 驾校网站模板
    绿色LED灯管类织梦源码 照明企业网站模板
    蓝色通用织梦博客模板 资讯文章类网站源码
    红色大气装饰公司织梦源码 建筑装修装潢企
    网站建设企业模板 互联网网络营销类网站源
    html5响应式手机自适应网站模板(兼容手机
    黑色HTML5工作室网络公司网站整站模板(适
    简洁大气网站建设网络设计类企业织梦模板
    html5+css3高端网站建设工作室源码 酷炫的h
    红灰色大气网络工作室织梦模板
    织梦dedecms幻灯片模糊解决办法
    织梦dedecms巧用标签实现图片自动Alt功能,
    织梦dedecms文章列表循环标签增加notypeid
    织梦dedecms专题模板应用分析及使用案例
    dedecms织梦让二级栏目标题去除“/”斜杠和
    最新站长资讯
    高级精美的家私企业网站源码 家私家纺类网
    农业绿色生态水果企业dede源码
    驾校类企业网站源码 驾校网站模板
    绿色LED灯管类织梦源码 照明企业网站模板
    蓝色通用织梦博客模板 资讯文章类网站源码
    红色大气装饰公司织梦源码 建筑装修装潢企
    网站建设企业模板 互联网网络营销类网站源
    html5响应式手机自适应网站模板(兼容手机
    黑色HTML5工作室网络公司网站整站模板(适
    简洁大气网站建设网络设计类企业织梦模板
    html5+css3高端网站建设工作室源码 酷炫的h
    红灰色大气网络工作室织梦模板
    织梦dedecms幻灯片模糊解决办法
    织梦dedecms巧用标签实现图片自动Alt功能,
    织梦dedecms文章列表循环标签增加notypeid
    织梦dedecms专题模板应用分析及使用案例
    dedecms织梦让二级栏目标题去除“/”斜杠和
    关于出现“对不起,您安装的不是正版应用..
    Discuz(Can not write to cache files)有关
    Discuz通过修改文章标题更好的实现SEO的方
    DiscuzX中存在不合法的文件被上传的修复方
    关于Discuz x3.1页面空白解决方法
    首页 免费源码 VIP专区 会员中心
    收缩