Ajax 介绍与使用

Ajax是什么?如何运用?

AJAX不是新的编程语言,而是一种使用现有标准的新方法。

AJAX = Asynchronous JavaScript and XML立基于非同步JavaScriptXML。简单地说,Ajax 即运用非标准的XMLHttpRequest对象,并配合服物器端的 脚本进行通讯。Ajax能够传送并接收各种格式的文件,其中包括 XMLHTMLJSONAjax最吸引人之处在于它的〝非同步〞性质,这意味着Ajax能做各种动作,而无须更新整个页面。如此便能透过使用者的事件更新页面的一小部分。

  • 无须重新载入整个页面,便能对服物器发送请求。
  • 分析并运用各种文件。

使用前的吐槽:
在原先创建XMLHttpRequest对象还需要考虑IE7一下的浏览器,现在我想应当不用了,所以额外的兼容性代码不在提供;顺带说一句不吐槽IE6还算是前端开发者吗~~~。

阅读全文 »

HTML 语义化和结构设计

为何写这篇博文?

当时在知乎看到一篇文章如何理解HTML5section?会在什么场景使用?为什么这些场景使用section而不是 div,正在讨论HTML的语义化,当时我对如何使用HTML5的新标签有一些糊涂,当然也会有一些自己的见解;通过阅读大家的评论,终于对HTML的语义化和结构设计有了一定的了解,在这里告诉大家我的大招W3C官方文档

我在知乎的回答

这个问题其实可以扩展为HTML5语义化标签的使用。

语义化标签我认为用途在于:划分文档的大纲。而divspan之类的无语义化标签,应当在设置额外样式或者脚本处理时使用。我的原则是:先书写文档大纲标签,构建整体页面,而不考虑样式部分;之后书写样式时,在考虑如何设置无语义标签。

阅读全文 »

indexedDB 数据库的使用

IndexedDB是一种使用浏览器存储大量数据的方法。它创造的数据可以被查询,并且可以离线使用。IndexedDB对于那些需要存储大量数据,或者是需要离线使用的程序是非常有效的解决方法。

indexedDB是一个怎么样的数据库?

IndexedDB是一个事务型数据库系统,类似于基于SQLRDBMS。然而不同的是它使用固定列表,IndexedDB是一个基于JavaScript的面向对象的数据库。IndexedDB允许您存储和检索用键索引的对象; 可以存储structured clone algorithm支持的任何对象。您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务中的数据。

阅读全文 »

在这最近 25 天的日子里

我都干了什么?

  • 开发了一款应用。
  • 体会了黑眼圈的烦躁。

好吧以上就是没有更新的借口···

应用做什么用的呢?

简单说是我对时间、工作与生活、梦想和目标的感悟之作!以上纯属扯淡,开个玩笑!其实就是一款计划类型的工具应用,设置任务,完成获得奖励。

具体请看github

阅读全文 »

font-face 的实用价值

@font-face是什么?

MDN的解释:

这是一个叫做@font-faceCSS@规则,它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式,@font-face可以消除对用户电脑字体的依赖。@font-face不仅可以放在在CSS的最顶层,也可以放在@规则的条件规则组中。

用户电脑字体是什么呢?更好理解的名称叫做Web安全字体,它是一种妥协,网页上的字体需要是本该存在于当前用户电脑上的字体才能正确显示,不然只会显示默认的Web字体;这样的灵活性,观赏性就会差很多了。使用方法

阅读全文 »

JavaScript 忍者秘籍读书笔记 —— 第八章 驯服线程和定时器

timeoutinterval之间的区别

  • JavaScript引擎是单线程执行,异步事件必须要排队等候才能执行。
  • 如果当前正在执行其它事件,该定时器就会推迟到下一个可用的执行时间点上,不会比延迟时间更短。
  • 如果一直不能执行定时器,最后就会无延迟执行,并伴随着多个同时执行。
  • setTimeout会在回调结束后再延迟至少10毫秒执行。

    1
    2
    3
    4
    5
    setTimeout( function reset () {
    /* code */
    setTimeout( reset, 10 );
    }, 10 );
  • setInterval则不管回调是否结束,每隔10毫秒执行;便会出现同时执行。

    1
    2
    3
    setInterval( function () {
    /* code */
    }, 10 );
阅读全文 »

JavaScript 忍者秘籍读书笔记 —— 第三章 函数是根本

函数的独特之处

JavaScript 是函数式语言,开发人员对JavaScript印象不好也在于浏览器的API

函数是第一型对象

对象的功能:

  • 可以通过字面量进行创建。
  • 可以赋值给变量、数组或其它对象的属性。
  • 可以作为参数传递给函数。
  • 可以作为函数的返回值进行返回。
  • 可以拥有动态创建并赋值的属性。
    函数可以像对象一样使用以上所有功能,并且可以被调用。

事件轮询

函数的调用通常是异步方式,浏览器的事件轮询是单线程的,每次只能处理一个事件,所以事件都被按照FIFO列表的顺序来处理。

回调

函数定义之后再调用就是回调。

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十四章 中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系。所有的相关对象都通过中介者对象来通信,而不是相互引用;中介者模式使网状的多对多关系变成了一对多关系。

中介者模式是迎合迪米特法则最少知识原则的一种实现,一个对象应当尽可能少的了解另外的对象。

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十三章 职责链模式

职责链模式把一系列可能会处理请求的对象连接成一条链,请求在这些对象间依次传递,直到遇到处理它的对象。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const order500 = function ( orderType, pay, stock ) {
if ( orderType === 1 && pay === true ) {
console.log( '500元定金预约,得到100' );
} else {
return false;
}
};
const order200 = function ( orderType, pay, stock ) {
if ( orderType === 2 && pay === true ) {
console.log( '200元定金' );
} else {
return false;
}
};
const orderNormal = function ( orderType, pay, stock ) {
if ( stock > 0 ) {
console.log( '普通用户' );
} else {
console.log( '库存不足' );
}
};
class Chain {
constructor( fn ) {
this.fn = fn;
this.successor = null;
}
setNextSuccessor( successor ) {
return this.successor = successor;
}
passRequest( ...args ) {
const ret = this.fn.apply( this, args );
if ( ret === false ) {
this.successor && this.successor.passRequest.apply( this.successor, args );
}
return ret;
}
}
const chainOrder500 = new Chain( order500 );
const chainOrder200 = new Chain( order200 );
const chainOrderNormal = new Chain( orderNormal );
chainOrder500.setNextSuccessor( chainOrder200 ).setNextSuccessor( chainOrderNormal );
chainOrder500.passRequest( 1, true, 500 );
chainOrder500.passRequest( 2, true, 500 );
chainOrder500.passRequest( 2, false, 500 );
chainOrder500.passRequest( 2, false, 0 );

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十二章 享元模式

享元模式是一种用于性能优化的模式,运用共享技术来有效支持大量细微度的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Model {
constructor( sex ) {
this.sex = sex;
}
takePhoto() {
console.log( `sex=${this.sex}, underwear=${this.underwear}` );
}
}
let maleModel = new Model( 'male' ),
femaleModel = new Model( 'female' );
for ( let i = 0; i < 50; i++ ) {
maleModel.underwear = `underwear${i}`;
maleModel.takePhoto();
}
for ( let i = 0; i < 50; i++ ) {
femaleModel.underwear = `underwear${i}`;
femaleModel.takePhoto();
}

阅读全文 »