promise 对象之 deferred 对象 portal 实例环境搭建

promise 对象之 deferred 对象

portal 实例环境搭建

----------------------------------------------

1.什么是脚手架：别人搭建好的环境 下载下来使用

AJAX

并行/串行

promise.all

-----------------------------------------------

promise.all

同时请求两个 然后同时返回 如有一个出错 另外一个也出错

-----------------------------------------------

const getJSON = function(url,type, data) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
};
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open(type, url);
client.onreadystatechange = handler;
client.responseType = "json";
if(type ==‘get‘){
client.send();
}else {
client.setRequestHeader("Content-Type", "application/json");
client.send(JSON.stringify(data));
}
});
return promise;
};

$(function() {
//添加留言
$(".submit").click(() => {
submit(true);
});
//修改留言
$(".update").click(()=>{
submit(false);
});
//删除留言
$(".deleteAll").click(() => {
getJSON("/map/delAll",‘delete‘)
.then(function(json) {
$(".messageList").html(‘全部数据已经清除‘);
}, function(error) {
console.error(‘出错了‘, error);
});

});
//查看留言
$(".viewMes").click(()=> listShow());
//提交
let submit = (isAdd) =>{
let _name = $(".name").val(),
_message = $(".message").val();
if(_name ==‘‘ || _message ==‘‘) {
alert(‘请输入信息！‘);
return false;
}
$(".name,.message").val("");
isAdd ? add(_name, _message) : upd(_name, _message);
};
//添加数据
let add = (name, message) => {
getJSON("/map/add",‘post‘, {name: name, message: message})
.then(function(json) {
listShow();
}, function(error) {
console.error(‘出错了‘, error);
});
};
//删除数据
let del = (name) =>{
getJSON("/map/del",‘delete‘, {name:name})
.then(function(json) {
listShow();
}, function(error) {
console.error(‘出错了‘, error);
});
};
//编辑数据
let upd = (name, message) =>{
getJSON("/map/upd",‘put‘, {name: name, message: message})
.then(function(json) {
$("#inputEmail3").attr(‘disabled‘,false);
listShow();
}, function(error) {
console.error(‘出错了‘, error);
});
};
//绑定未来元素
$(".messageList").on(‘click‘, ‘.del‘, (e)=>{
del($(e.target).attr(‘name‘));
});
$(".messageList").on(‘click‘, ‘.upd‘, (e) =>{
let value = $(e.target).val();
$("#inputEmail3").attr(‘disabled‘,true);
$(".name").val(value.split(‘,‘)[0]);
$(".message").val(value.split(‘,‘)[1]);
});
//列表显示
let listShow = () => {
//原生promise
/*getJSON("/map/get",‘get‘).then(function(d) {
_showList(d);
}, function(error) {
console.error(‘出错了‘, error);
});*/

//$.ajax() 低于1.5.0版本的jQuery，返回的是XHR对象，高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
// 链式写法
let list = $(".messageList"),str = "";
$.ajax({url:"/map/get",dataType:"json",type:"get"})
　　.done(function(d){
for (let i=0; i<d.length; i++) {
str += `<li class="list-group-item"><span class="key">${d[i].key}</span><span>说：</span><span class="value">${d[i].value}</span>
<span style="float:right;"><button class="del" name="${d[i].key}">删除</button>
<button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`;
}
list.html(str);
})
　　.fail(function(){ alert("出错啦！"); });
};

let _showList = (d) =>{
let list = $(".messageList"),str = "";
for (let i=0; i<d.length; i++) {
str += `<li class="list-group-item"><span class="key">${d[i].key}</span><span>说：</span><span class="value">${d[i].value}</span>
<span style="float:right;"><button class="del" name="${d[i].key}">删除</button>
<button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`;
}
list.html(str);
};
//查询数据
//链式写法 串行
$(".queryThen").click(()=> queryThen());
let queryThen = ()=> {
$.ajax({url:"/map/add1",dataType:"json",type:"get"})
　　.then(data => {
return $.get("/map/add2", data.result.id);
})
.then(data => {
alert(data);
}, () => { alert("出错啦！"); });
};

//方法1
let addPromise1 = new Promise((resolve,reject) => {
getJSON("/map/add1",‘get‘).then(function(d) {
resolve(d);//返回
}, function(error) {
console.error(‘出错了‘, error);
});
});
//方法2
let addPromise2 = new Promise((resolve,reject) => {
getJSON("/map/add2",‘get‘).then(function(d) {
resolve(d);//返回
}, function(error) {
console.error(‘出错了‘, error);
});
});
// 并行 when 多个请求完成后返回
$(".queryWhen").click(()=> queryWhen());
let queryWhen = ()=> {
/*$.when($.ajax({url:"/map/add1",dataType:"json",type:"get"}), $.ajax({url:"/map/add2",dataType:"json",type:"get"}))
.then((data1,data2) => {
console.log(data1[0]);
console.log(data2[0]);
}, () => { alert("出错啦！"); });*/

Promise.all([
addPromise1,//传的请求方法
addPromise2
]).then(([add1,add2])=>{
console.log(add1);
console.log(add2);
}, function(error) {
console.error(‘出错了‘, error);
});
};
})
-----------------------------------------------
//串行 套着执行的

// 链式写法
//链式写法 串行
$(".queryThen").click(()=> queryThen());
let queryThen = ()=> {
$.ajax({url:"/map/add1",dataType:"json",type:"get"})
　　.then(data => {
return $.get("/map/add2", data.result.id);//传上一个请求获取到的ID
})
.then(data => {
alert(data);
}, () => { alert("出错啦！"); });
};

-----------------------------------------------

//并行 同时走的

$.when($.ajax({url:"/map/add1",dataType:"json",type:"get"}), $.ajax({url:"/map/add2",dataType:"json",type:"get"}))
.then((data1,data2) => {
console.log(data1[0]);
console.log(data2[0]);//两个都成功了才会进来
}, () => { alert("出错啦！"); });

项目中用的很多

-----------------------------------------------

portal 开发环境搭建

lib 放所有的js

最下面的 js require.js

-----------------------------------------------

AMD

CMD

.bowerrc

这个文件 里面选择安装bower 的下载目录

-----------------------------------------------

https://www.gulpjs.com.cn/

搭建环境的方法

并行 串行

-----------------------------------------------

反复多搭建几次

1.1环境
运行环境nodejs
使用gulp自动化编译scss，js等
使用bower管理依赖插件
使用requirejs作为模块加载器
使用bootstrap css作为样式框架
依赖jquery，jquery-ui两个库
1.2项目目录
node_modules为依赖模块文件
.bowerrc 为bower配置文件,包含模块安装目录配置
bower.json为bower配置文件,包含依赖模块等
gulpfile.js为gulp任务配置文件
package.json为程序配置文件,包含npm依赖模块等
Lib为bower.json ?dependencies中的依赖文件

原文地址：https://www.cnblogs.com/shaozhu520/p/9737383.html

时间： 2024-10-04 05:37:05

promise 对象之 deferred 对象 portal 实例环境搭建的相关文章

Innobackup mysql 多实例环境搭建主从同步

Innobackup mysql 多实例环境搭建主从同步 该实验是在mysql多实例环境下做的:如果需要部署 mysql 多实例环境,则移步: mysql 多实例案例实战: http://blog.csdn.net/wanglei_storage/article/details/49305239 mysql 的主从搭建大家有很多种方式,传统的 mysqldump 方式是很多人的选择之一.但对于较大的数据库则该方式并非理想的选择.使用 Xtrabackup 可以快速轻松的构建 mysql 主从架构

deferred对象和promise对象（一）

个人认为阮一峰老师讲的关于deferred对象是最容易理解的. deferred对象是jquery的回调函数解决方案.解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口. deferred对象的功能: 1.将ajax操作改为链式 对于$.ajax()操作完成之后,如果使用的是低于1.5版本的jquery,返回的是XHR对象,高于1.5版本返回的是deferred对象.deferred对象可进行链式操作. $.ajax({ url:"test.html", su

javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应词典:v.迁延:听从:扣存:[军]使延期入伍所以deferred对象的含义就是"延迟"到未来某个点再执行. jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式http://api.jquery.com/jQuery.ajax/Example: Save some d

jQuery的Deferred对象教程

阮一峰的这往篇教程讲得非常好:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery官网文档:http://api.jquery.com/category/deferred-object/ ------------------------------------- 以下将阮一峰的教程的后半部分做一个整理,前半部分已经非常 好了 -------------

jQuery的deferred对象详解（一）

最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面阐述deferred讲的非常清楚,也让我大彻大悟,为了以后能很好的查阅,现将阮老师的文字转载过来. 一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即

promise 对象其实就是 deferred 对象的特例

一.前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念.Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码. jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规范进行实现,有一些API上的差异. 好,让我们来看看他们的特性吧( 本文示例基于jquery 1.8版本以上 ). 二.示例 以前写动画时,我们通常是这么干的: $('.animateEl

promise 对象其实就是 deferred 对象的特例【转】

http://www.tuicool.com/articles/MVnmamr 原文  http://blog.segmentfault.com/f2e/1190000000523676 一.前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念.Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码. jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规

jQuery之Deferred对象

Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单工厂模式. 它用来解决JS中的异步编程,它遵循 Common Promise/A 规范.实现此规范的还有 when.js 和 dojo. $.Deferred作为新特性首次出现在版本1.5中,这个版本利用Deferred又完全重写了Ajax模块. $.Deferred在jQuery代码自身四处被使用,分别是promise方法.DOM ready.Ajax模块.动画模块. 这里以版本1.8.3分析,由于1.7后$.

jQuery之Deferred对象详解

deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. Promises是什么 由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待.为