首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端开发实际上操作的是数据不是DOM

并且当你面对一个在某一个具体页面上有N多交互,且不跳页,且这些交互还是操作不同接口返回数据时,也许你就蒙了。...就是从前端的最终操作目标,data,数据,为起点,来看待 & 学习WEB前端。...昨天的文章里我说过,你在京东买东西,你点击的是input,但实际上通过input标签,你触发了ajax事件,调用了updata方法,修改了你的payCart对象,即购物车对象里的val值,这是什么?...这个操作实质上操作的是数据,是你的payCart数据。 让我们先从需求出发,先把业务所用到的数据都整理,归纳出来。形成各种对象对象其实就是数据的集合嘛。那数据是什么?它是一种模型。...第一步,先理清网站里的各种业务、逻辑,并以对象的形式写出来; 第二步,把这些对象以业务逻辑的顺序,画线连续起来; 第三步,把这些业务、逻辑之间的连线,加入适当的事件做为开关; 第四步,根据前三步,学习需要的

1K80
您找到你想要的搜索结果了吗?
是的
没有找到

关于 JavaScript 中的 Promise

如果 Promise 对象处于失败状态,将会调用 onRejected 处理函数。catch() 方法也返回一个新的 Promise 对象,可以继续进行链式调用。...然后,返回获取的数据以便后续操作。在调用 fetchData() 函数的代码中,可以使用 .then() 方法来处理成功获取数据后的进一步操作,并使用 .catch() 方法来捕获可能的错误。...在 Bluebird 的帮助下,使用该Promise.cancel()方法实现了 Promise 取消。此方法不是标准 Promise API 的一部分,而是特定于 Bluebird。...每个异步操作函数返回一个 Promise 对象,模拟了一些异步操作,并在一定的延迟后解决 Promise。...与 Promise.all() 和 Promise.race() 不同,Promise.any() 在至少有一个 Promise 被解决时就会解决,不是等待所有 Promise 都解决。

45563

面试官:为什么data属性是一个函数不是一个对象

警告说明:返回的data应该是一个函数在每一个组件实例中 二、组件data定义函数对象的区别 上面讲到组件data必须是一个函数,不知道大家有没有思考过这是为什么呢?...,则不会出现这种情况(函数返回对象内存地址并不相同) function Component(){ this.data = this.data() } Component.prototype.data...data形式,使每个实例对象数据不会受到其他实例对象数据的污染 三、原理分析 首先可以看看vue初始化data的代码,data的定义可以是函数也可以是对象 源码位置:/vue-dev/src/core...data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况 组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。...采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象 面试官VUE系列总进度:10/33 面试官:说说你对vue的理解? 面试官:说说你对SPA(单页应用)的理解?

3.1K10

ECMAScript7 asyncawait 异步解决方案

图片 Async函数作为异步解决方案的最优解,async/await特性能让我们编写出相比回调地狱和Promise链式调用更直观、更容易理解的代码,Async函数返回一个Promise对象,可以使用then...()方法添加回调函数,当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句 01 初识 async/await const fetch = require('node-fetch...console.log(`bookname: ${data_2.notebooks[4].name}`); console.timeEnd('time'); } bookname() 根据两种方式得到的数据对比...,并行所运行的时间更短,其主要思路是,先触发所有的请求,得到Promise对象,再通过await等待resolve返回的结果 05 使用 try catch 捕捉错误 const fetch = require...= require('bluebird'); async function JianShuRequest(id) { await bluebird.delay(1000); const

62550

Node子进程asyncawait方法不正常执行的思考和解决

其思路就是注册任务后,分出子进程,然后在主进程需要执行任务时,向reactor子进程发送命令,reactor收到命令后分配到worker子进程在执行完成后返回结果到主进程。...一直是bluebird的,并没有使用js原生的Promise,于是我通过原生的promise再来执行之前使用bluebird做的异步调用,这次果然也是卡主了,甚至是这样不是异步的操作调用了Promise...); LoadEnvironment(&env); //在这里执行js env.async_hooks()->pop_async_id(1); } 复制代码 在AsyncCallbackScope对象的构造函数中会执行如下语句...析构时会将该值复原,但是我们的子进程在js执行中就分配出来了,并且通过uv_run后直接就exit所以并没有机会析构该对象,当然无法调用tick函数和microtask。...执行到最后一步就是_tickCallback,所以就是5,执行完了js以后uv_run,自然就是执行timer,当然在node中setTimeout的时间为0时,实际为1,所以在第一次调用uv__run_timers

59810

是否还在疑惑Vue.js中组件的data为什么是函数类型不是对象类型

} 组件中data使用函数的情况 其实当我们把组件注册到别的页面上时,也会创建一个Vue实例,就像这个样子 function Vue() { //此处data的值为一个函数,调用时会return返回一个对象...let vm1 =new Vue() //此时的vm1应该是这样的 vm1 = { //这里的data,是先获取了函数Vue中的data(data的值为函数),然后得到了data的返回值 this.data...= new Vue() //此时vm2是这样的 vm2 = { //这里的data,是先获取了函数Vue中的data(data的值为函数),然后得到了data的返回值 data: { name...这是因为这两个实例对象在创建时,是先获得了一个函数,将该函数返回值作为了自己属性data的值,并且这两个实例对象中data的值在栈中对应的堆中的地址也不一样,所以他们不会互相影响。...因为我们刚开始定义了构造函数Vue时,给他内部的data设置了一个值,该值为对象类型,对象类型在js中称为引用数据类型,在栈中是存储着一个指向内存中该对象的堆中的地址。

3.4K30

细说JS异步发展历程

所谓同步,就是在发出一个"调用"时,在没有得到结果之前,该“调用”就不返回。但是一旦调用返回,就得到返回值了。换句话说,就是由“调用者”主动等待这个“调用”的结果。..."调用"在发出之后,这个调用就直接返回了,没有返回结果。换句话说,当一个异步过程调用发出后,调用者不会立刻得到结果。...Promise 一定程度上解决了回调地狱的问题,Promise 最早由社区提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。...Generator 函数一般配合 yield 或 Promise 使用。Generator函数返回的是迭代器。对生成器和迭代器不了解的同学,请自行补习下基础。...= require('bluebird'); const readFile = bluebird.promisify(fs.readFile); function* read() { yield

2.3K21

重构:从Promise到AsyncAwait

async函数会隐式地返回一个Promise,因此可以直接return变量,无需使用Promise.resolve进行转换 下面,我们可以通过一个非常简单的示例来体验一下Async/Await的酸爽:...示例1 const Promise = require("bluebird") var readFile = Promise.promisify(require("fs").readFile) //...示例3:Promise.map 使用Promise.map读取多个文件的数据,调用异步接口的时候有两种方式: const Promise = require("bluebird") var readFile...库,readFile与Promise.map都是Promise函数。...总结 JavaScript的异步编写方式,从回调函数Promise再到Async/Await,表面上只是写法的变化,本质上则是语言层的一次次抽象,让我们可以用更简单的方式实现同样的功能,程序员不需要去考虑代码是如何执行的

1.2K31

你不知道的Node.js性能优化

通过对比可以发现,性能损耗主要来自于 Promise 对象自身的实现,V8 原生实现的 Promisebluebird 这样第三方实现的 Promise 库要慢很多。...所以对于大量异步逻辑、轻量计算的中间件项目而言,可以在代码中把全局的 Promise 换为 bluebird 的实现: global.Promise = require('bluebird');...解决方法就是: 使用 Redis 这样的外部缓存,实际上像 Redis 这样的内存型数据库非常适合这种场景; 限制本地缓存对象的大小,比如使用 FIFO、TTL 之类的机制来清理对象中的缓存。...正确的做法应该是,根据 this.push() 返回值选择正确的行为,当返回值为 false 时,说明此时堆积的 chunk 已经满了,应该停止读入。...但实际上 C++ 扩展并不是灵丹妙药,V8 的性能也没有想象的那么差。

3.3K70

框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数不是对象

// data是一个对象 name: 'itclanCoder', }, }; 当一个组件被定义,data必须声明为返回一个初始数据对象函数,因为组件可能被用来创建多个实例 也就是说,在很多页面中...,定义的组件可以复用在多个页面 如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例中修改data,都会影响到所有的组件实例 如果data是函数,每次创建一个新实例后...,调用data函数,从而返回初始数据的一个全新副本数据对象 这样每复用一次组件,会返回一份新的data数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合 可以看下面一段代码...// 声明构造器函数 function Person() {} Person.prototype.data = { // 原型下挂载一对象,并有name属性 name: 'itclanCoder...,实例化出来的对象(p1,p2)都指向的是同一份实体 原型下的属性相当于是公有的 修改一个实例对象下的属性,也会造成另一个实例属性跟着改变,这样在组件复用的时候,肯定是不行的,那么改成函数就可以了的,如下代码所示

1.9K20

从零开始写一个符合PromisesA+规范的promise

基础版本 目标 可以创建promise对象实例。 promise实例传入的异步方法执行成功就执行注册的成功回调函数,失败就执行注册的失败回调函数。...实现一旦promise状态改变,再对promise对象添加回调函数,也会立即得到这个结果。...,所以都是返回一个promise,我们上一节实现的promise可以实现执行完异步操作后执行后续回调,但是本节的回调读取文件内容操作并不是同步的,而是异步的,所以当读取完1.txt后,执行它回调onFulfilledCallbacks...但是,我们平常写promise一般都是这样写的: promise.then(f1).then(f2).then(f3),一开始所有流程我们就指定好了,不是在f1里面才去注册f1的回调,f2里面才去注册...另外执行回调函数时,因为回调函数既可能会返回一个异步的promise也可能会返回一个同步结果,所以我们把直接把回调函数的结果托管给bridgePromise,使用resolvePromise方法来解析回调函数的结果

1K10

Promise: 给我一个承诺,我还你一个承诺

我们看到,如果要把一个异步操作封装成Promise,我们需要首先创建一个Promise,并提供一个包含两个参数 resolve,reject的函数,在这个函数里调用你的异步方法(这里用setTimeout...对于类库调用者(consumer),拿到一个Promise对象,他可以调用 then 方法来获取异步后的数据,也可以调用 catch 来处理错误。...Promise实际使用中除了解决callback hell,让代码可读性增强外,还可以做很多事情。...比如说 Promise.all(iterable)(resolve所有结果,返回新的Promise),或者 Promise.race(iterable)(只要有一个结果resolve出来,就立即返回新的...下面是Promise和Observable的代码的对比,可以看到,一旦创建,Promise会立刻执行对象体内的代码(不管你有没有调用 then),Observable直到subscriber真正要读取时

1.2K40

从零开始写一个符合PromisesA+规范的promise

基础版本 目标 可以创建promise对象实例。 promise实例传入的异步方法执行成功就执行注册的成功回调函数,失败就执行注册的失败回调函数。...实现一旦promise状态改变,再对promise对象添加回调函数,也会立即得到这个结果。...,所以都是返回一个promise,我们上一节实现的promise可以实现执行完异步操作后执行后续回调,但是本节的回调读取文件内容操作并不是同步的,而是异步的,所以当读取完1.txt后,执行它回调onFulfilledCallbacks...但是,我们平常写promise一般都是这样写的: promise.then(f1).then(f2).then(f3),一开始所有流程我们就指定好了,不是在f1里面才去注册f1的回调,f2里面才去注册...另外执行回调函数时,因为回调函数既可能会返回一个异步的promise也可能会返回一个同步结果,所以我们把直接把回调函数的结果托管给bridgePromise,使用resolvePromise方法来解析回调函数的结果

1.5K20

微信小程序中使用Promise进行异步流程处理

【更新说明】 由于微信开发者工具和微信真机环境的不断升级,小程序中要使用Promise的话,已经不需要像文中描述的再引入第三方库如bluebird或es6-promise了,可直接使用。...所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行;或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求。...我们先将这些函数变成Promise的方式: function asyncFunc1(){ return new Promise(function (resolve, reject) { //...ES6中原生支持了Promise,不过在原生不支持Promise的环境中,我们有很多第三方库来支持,比如Q.js和Bluebird。.../libs/bluebird.min') //我用了bluebird.js /** * 将小程序的API封装成支持Promise的API * @params fn {Function} 小程序原始

2.7K40

React 中必会的 10 个概念

这意味着,如果 null 为其中一个参数传递值,则不会采用该函数定义的默认值。因此,请确保使用 undefined不是 null 当您希望使用默认值时使用。...如 MDN 网站文档所述,类主要是语法糖,不是 JavaScript 现有的基于原型的继承。有些属性值得一提,因为它们与使用常规函数编写的类不太相同。 ?...继承,这不是特定于 JavaScript 的东西,而是面向对象编程中的常见概念。 简而言之,这是将一个类创建为另一个类的子级的能力。...异步用于定义异步函数,该函数返回隐式 Promise 作为其结果。 ? 请注意,使用异步函数的代码的语法和结构看起来像常规同步函数。 关键字 await仅在异步函数中起作用。...实际上,如果一个 Promise 能够正常 resolve,它就会返回结果。但是,如果 reject,则会引发错误。

6.6K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券