1 桃花扇J

尚未进行身份认证

前端女孩的自我修养

等级
TA的排名 13w+

JavaScript模块化发展史

最近开始学习模块化开发了,这一篇完全无关任何代码,就来讲一下模块化的发展史,提高一下专业素养。目录1.萌芽阶段2.第二阶段3.第三阶段4.第四阶段JS模块化发展史大致可以分为4个阶段,萌芽,困境,进步,发展,接下来详细介绍各个阶段1.萌芽阶段JS在诞生之初,是为了实现页面中的小效果,代码量非常小。因为程序规模太小,所以即使大家知道这门语言存在缺陷,也不会特意去解决,只需要在开发的时候多加注意便可以避免问题。在这一阶段中,因为前端工程量实在太小,所以前后端并没有分离,前端的工作

2020-05-24 23:55:27

Fetch第一篇:基本使用

之前搞定了Promise,接下来来学习Fetch API。封装过AJAX函数的各位肯定能知道XMLHttpRequest的问题(没有封装过的点这里),首先其所有的功能全部集中在同一对象上,容易书写混乱不易维护代码;其次,我们都到ES6啦,传统的事件驱动模式,无法适配新的Promise API,因此1.Fetch API概述并非取代AJAX,而是对AJAX传统的API的改进 精细的功能分割:头部信息,请求信息,响应信息等均分布到不同的对象,更利于处理各种复杂的AJAX场景 使用Promise AP

2020-05-21 17:54:53

Promise第三篇:async和await关键字

在此之前的两篇文章已经把Promise的用法交代清楚了,Promise确实很好的解决了回调地狱等异步处理出现的问题,提高了代码的阅读性,但是在代码形式上较为复杂,还有很多回调的感觉,不易于阅读和理解。因此ES6还新增了async和await两个关键字,作为简化Promise API的方法,注意,只是简化,而并不是代替Promise1.async1)用法async用于修饰函数(无论是函数字面量还是函数表达式),放置在函数声明前位置,被修饰函数的返回结果一定是Promise对象,其目的在于简化函数的

2020-05-19 17:28:50

Promise第二篇:你需要记着的API

上一篇介绍了Promise的一些基本用法和串联,这一篇具体讲一下它的API,包括上篇使用的then和catch,以及扩充的静态成员finally和几个静态成员。除此之外,我们可以看到,Promise在解决异步问题的同时,也存在一定的问题,比如返回值,回调等,总之还是不方便阅读和理解,因此ES6新增了async和await来改善这一问题,使得我们异步处理的代码看起来并没有回调的感觉,就像正常代码一样,是ES6提供的语法糖,非常好用。一.Promise的相关API1.实例成员1)then:注册一个后

2020-05-18 17:09:36

Promise第一篇:基本使用方法和串联

1.基本使用首先清楚promise的过程:事件从unsettled未解决阶段(pending状态)开始发展到settled已解决阶段(resolved和rejected状态),Promise对象可以传resolve与reject两个函数,其中resolve函数将Promise推向resolved阶段,reject函数将Promise推向rejected阶段,且两者均只可传一个参数,表示推向状态的数据,下面给个图理解一下注册thenable函数:当Promise是resolved状态时,执行th.

2020-05-16 22:12:15

学习Promise之前你必须理解的知识点:异步处理的通用模型

上一篇中提到了回调地狱的问题,ES6为了解决多层回调,提高代码的可阅读性,提出了一套异步的通用模型,这一部分对理解promise很重要1.两个阶段该模型中,将一件可能发生异步操作的事情分为两个阶段:unsettled 和 settledunsettled:未解决阶段,表示事情还在进行前期的处理,并没有发生通向结果的那件事 settled:已解决阶段,事情已经有了一个结果,不管这个结果是什么,整件事情无法逆转【注】事情总是从为解决阶段逐步发展到以解决阶段的,并且未解决阶段拥有控制何时通向已解决

2020-05-10 22:53:47

原生JS封装自己的AJAX

封装完写了个回调地狱,真是吐了,写不动了,分享一下代码吧//封装ajax函数function ajax(obj) { //指定提交方式的默认值 obj.type = obj.type || 'get'; //设置是否为异步,默认值为异步 obj.async = obj.async || true; //设置数据的默认值 obj.data = obj.data || null; //根据不同的浏览器创建XHR对象 let xhr = nu

2020-05-09 16:01:30

理解JS的事件循环过程

众所周知,JS引擎是单线程的,但是为了实现异步处理,会有其他线程来处理异步的事件,本篇来详细介绍JS处理异步函数的过程。首先了解几个概念:宿主环境:JS运行的环境称为宿主环境,需要清楚的是JS不仅可以在浏览器上运行,也可以在服务器上运行。执行栈(call stack):一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前,它的相关信息会加入到执行栈。函数调用之前,创建执行环境,然后加入到执行栈;函数调用之后,销毁执行环境。JS引擎执行顺序:执行的是执行栈的最顶部异步函数:某些函数不会

2020-05-09 09:40:14

ES6新增数据类型符号(2):共享符号与知名符号

目录1.共享符号2.知名符号1.共享符号上节课讲到每次调用得到的符号都是不相同的,但是存在需要同一个符号的需求,因此ES6提供了静态方法for,可以根据某个符号名称(符号描述)得到同一个符号,如下例【例1-1】const syb1 = Symbol.for('这是一个共享符号');const syb2 = Symbol.for('这是一个共享符号');console....

2020-05-08 15:45:14

ES6新增数据类型符号(1):普通符号

在编程时,我们会遇到某些属性,我们不需要或者不想要别人访问它,即需要设置私有属性,而在ES6之前,并没有方法实现属性私有化,因此ES6提供了新的数据类型,为我们提供设置私有属性的方法1.普通符号1)创建通过Symbol函数创建,如下const syb = Symbol('这是一个符号');console.log(syb);2)特点I.没有字面量II.使用typeof...

2020-05-07 22:52:01

ES6语法规则之解构

解构:使用ES6的一种语法规则,将一个对象或数组的某个属性提取到某个变量中称为解构,并且解构不会对被解构的目标造成任何影响首先给出一个对象用作解构const user = { name: 'jwh', age: 23, address: { city: '西安', school: '西安邮电大学' }}在ES6之前,如...

2020-05-06 21:19:55

ES6对象(3):类的继承

1.继承的概念如果两个类A和B,如果可以描述为:B是A(例如:猫是动物,轿车是汽车,男人是人),则A和B形成继承关系。如果B是A,则:B继承自A A派生B B是A的子类 A是B的父类如果A是B的父类,则B会自动拥有A中的所有实例成员【例1】ES6之前的继承function Animal(type, name, age, sex) { this.type = typ...

2020-04-29 16:54:35

ES6对象(2):面向对象与类

目录一.面向对象简介二.类(构造函数的语法糖)1.传统的构造函数的问题2.类的特点三.类的其他书写方式1.可计算的成员名2.getter和setter3.静态成员4.字段初始化器5.类表达式一.面向对象简介面向对象是一种思想,和具体的语言一样,与面向过程对比如下: 面向过程:思考的切入点是功能的步骤 面向对象:思考的切入点是对象的划...

2020-04-29 11:20:18

ES6对象(1):新增语法与API

一.新增的对象字面量语法二.Object新增API

2020-04-28 16:30:14

ES6函数第三篇:函数篇

1.新增API——new.target众所周知,js中构造函数需使用new来调用,但是即使不使用new关键字,也可以调用构造函数,如【例1-1】,为了解决这一问题,js的解决方式为使用instanceof查看原型上是否有该构造函数,如【例1-2】,到了es6提供了一个特殊的API,可以使用该API在函数内部,判断该函数是否使用new来调用,如【例1-3】【例1-1】构造函数的两种调用方式...

2020-04-28 08:31:22

ES6函数第二篇:剩余参数与展开运算符的练习

上一篇讲了剩余参数和展开运算符,这一篇来几个小练习巩固一下吧首先明确一点,展开运算符实现的克隆是浅克隆,即若克隆引用值,实际克隆的是它的地址,举个栗子叭【例1】const obj = { name: 'jwh', age: '18', sex: 'female', hobby: ['read', 'sing', 'sport']};const ob...

2020-04-26 12:05:35

深入理解函数式编程之柯里化

目录柯里化定义柯里化原因柯里化前奏——需要固定数量参数实现柯里化——期待固定数量参数应用柯里化流程剖析柯里化定义在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转化成一系列使用一个参数得函数的技术In mathematics and computer science, currying is the technique of translating t...

2020-04-26 12:03:32

ES6函数第一篇:参数篇

1.默认参数(1)使用在书写型参数,直接给形参进行赋值的值成为默认值,如此,在调用函数时,如果没有给对应的参数赋值(即它的值为undefined),则会自动使用默认值(2)对arguments的影响只要给函数加上参数默认值,该函数会自动变成严格模式下的规则,即arguments和形参脱离(3)暂时性死区的问题形参和ES6中的 let / const 声明一样,具有作用域,并...

2020-04-24 21:30:01

ES6的字符串与正则表达式

目录1.Unicode支持2.新增字符串API3.正则中的粘连标记4.模板字符串1.Unicode支持早期由于存储资源有限,Unicode使用16位二进制来存储文字,我们将一个16位二进制编码叫做一个码元(code unit)。后来由于技术的发展,Unicode对文字编码进行了扩展,将某些文字扩展到了32位(占用了两个码元)【例1-1】,并且将某个文字对应的二进制数字...

2020-04-23 20:35:11

ES6的变量声明详述

var声明变量的问题let与const声明变量规则以及二者的区别

2020-04-23 11:29:32

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 原力探索 · S
    原力探索 · S
    在《原力计划【第二季】》打卡挑战活动中,发布 12 篇原创文章参与活动的博主,即可获得此勋章。(本次活动结束后统一统计发放)