javascript
9 分钟 读完 (大约 1412 个字)

ES6 promise 对象

含义

  • 状态

    promise 对象代表一个异步操作，有三种状态：

    • Pending 进行中
    • Resolved 已完成 （又称Fulfilled）
    • Rejected 失败

  • 特点
    一旦状态改变就不会在改变。

目的

解决回调写法的混乱以及一个统一标准。

以下文字至“用法”前来源于 原文连接

假设有一个数据库保存操作，一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个db.save出了问题怎么办？基于这个考虑，我们又需要在每一层回调中使用类似try…catch这样的逻辑。这个就是万恶的来源，也是node刚开始广为诟病的一点。

1
2
3
4
5
6
7
8
9
10
db.save(data, function(data){
    // do something...
    db.save(data1, function(data){
        // do something...
        db.save(data2, function(data){
            // do something...
            done(data3); // 返回数据
        })
    });
});

另外一个缺点就是，假设我们的三次保存之间并没有前后依赖关系，我们仍然需要等待前面的函数执行完毕, 才能执行下一步，而无法三个保存并行，之后返回一个三个保存过后需要的结果。（或者说实现起来需要技巧）

阅读更多
javascript
2 分钟 读完 (大约 238 个字)

js监听对象属性变化

思路

监听对象属性变化有两种方法：回调函数、使用访问器属性。
首先定义一个对象

1
2
3
var obj = {
	a:null
}

回调函数

使用回调函数思路是定义一个函数来设置对象的属性，之后在调用回调函数

定义监听函数

1
2
3
4
5
6
7
8
9
10
11
function $watch(obj, prop, callback) {
    if (!obj.$property) {
        obj.$property = function(prop, value) {
            if (this[prop] != value) {
                this[prop] = value;
                return callback(this);
            }
            return this;
        }
    }
}

触发回调

1
2
3
$watch(obj,'a',function(obj){
	console.log("obj的属性a的发生改变："+obj.a);
})

更改属性值

1
obj.$property('a','random')

访问器属性

使用访问器属性即使用set get 属性，可以通过 Object 的 defineProperty 方法访问到。此方法有兼容性问题 ，这里我只监听属性更改，没有修改。

监听

1
2
3
4
5
Object.defineProperty(obj,"a",{
    	set:function(val){
    		console.log("obj的属性a的发生改变："+val);
    	}
    });

更改属性值

1
obj.a='random';
javascript
1 分钟 读完 (大约 214 个字)

js获得浏览器宽高、屏幕宽高

高度有关

1
2
3
4
5
6
7
8
9
10
11
12
13
//浏览器窗口高度
window.outerHeight
//浏览器可视区域高（包括滚动条）
window.innerHeight
//ps：在部分版本QQ浏览器上innerHeight和outerHeight值相同
//浏览器可视区域高（不包括滚动条）
document.documentElement.clientHeight
//网页总高度
document.body.clientHeight
//显示器可视高度
window.screen.height
//显示器可用高度（例如去除底部任务栏）
window.screen.availHeight

宽度有关

1
2
3
4
5
6
7
8
9
10
11
12
//浏览器窗口宽度
window.outerWidth
//浏览器可视区域宽度（包括滚动条）
window.innerWidth
//浏览器可视区域宽度（不包括滚动条）
document.documentElement.clientWidth
//网页总宽度
document.body.clientWidth
//显示器可视宽度
window.screen.width
//显示器可用宽度（例如去除侧边任务栏）
window.screen.availWidth

图片高度示意

阅读更多
javascript
1 分钟 读完 (大约 166 个字)

JavaScript Ajax封装 类似jQuery Ajax

_Ajax

简介

简单封装的ajax库
支持post和get方法 兼容IE7及以上浏览器
和jQuery Ajax格式相似

源码

源码

更新

已更新jsonp跨域支持

api

option

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_Ajax({
              "url":"",
              "method":"",//默认get
              "async":true,//默认为false
              "data":{
              },
              "header":{                    
              },
              "cache":true,//默认为false
              "dataType":"",//"text"  "json"  "xml"  "jsonp"默认为text
              success:function(){
              },
              beforeSend:function(){
              }
          })

libs:

通过 <script>标签引入<script src="lib/_Ajax.min.js" type="text/javascript" charset="utf-8"></script>
通过CDN获取http://ajax-10030624.file.myqcloud.com/_Ajax.js http://ajax-10030624.file.myqcloud.com/_Ajax.min.js

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>_Ajax_Demo</title>
      <script src= " lib/_Ajax.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
      <script type="text/javascript">
          _Ajax({
              "url":"server.php",
              "method":"post",//默认get
              "async":true,//默认为false
              "data":{
                  "key":"value",
                  "key2":"value2"
              },
              "header":{
                  "h":"c",
                  "h2":"c2"                    
              },
              "cache":true,//默认为false
              "dataType":"json",//"text"  "json"  "xml"  默认为text
              success:function(data){
              },
              beforeSend:function(){
              }
          })
      </script>
  </body>
</html>
关注我

友链

分类

标签云

ES6 ES7 angularjs canvas cli compiler css electron go http javascript lib mongodb node.js npm other react template typescript vue websocket 作品 教程 杂 算法 配置 音频

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×