❝小闫语录:活得傻一些,活得糊涂一些,活得简单一些,你会发现生活很美好。不要将事情计较的太过明白,不要将事情看得过于透彻,不要将自己陷入一堆琐事之中。 ❞
Ext.js
系列课程笔记
HTML
CSS
javaScript
JS
的面向对象(oo
)编程Ajax
❝书籍推荐:《JavaScript 设计模式》《征服Ajax Web 2.0 开发技术详解》 ❞
创建一个 html
页面,将 ext
的一些必要文件进行引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入 css 文件 -->
<link rel="stylesheet" type="text/css" href="./ext-2.3.0/resources/css/ext-all.css"/>
<!-- 引入 js 文件 -->
<script type="text/javascript" src="./ext-2.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext-2.3.0/ext-all-debug.js"></script>
<!-- 引入自己的 js 文件 -->
<script type="text/javascript" src="./lesson01.js"></script>
</head>
<body></body>
</html>
创建对应的 js
文件 lesson01.js
:
(function() {
Ext.onReady(function() {
Ext.MessageBox.alert("提示", "hello world");
});
})();
❝它的入口函数为
onReady
,即在加载完成html
页面之后,再加载入口函数的内容。 ❞
显示效果:
ext-弹窗
小闫同学将开发工程师常用的官方文档进行了汇总,地址为「https://www.pythonnote.cn/OfficialDocuments/」文档会不定期补充更新,请收藏或转发给好友。
❝
Ext.js
的文档也包含在内,点击对应按钮即可跳转。 包含了英文文档以及中文文档,英文吃力的同学,中文更方便哦 ~ ❞
document
下面是官方文档界面说明:
API-zh
❝文档讲解的超级详细,当哪里不理解的时候,可以快速检索学习。 ❞
extjs
对原生的 js
进行了一些扩展,使得开发更加的高效化,比如 Array
的方法:remove
。下面是它的 API
remove( o ) : Array
Removes the specified object from the array. If the object is not found nothing happens.
Available since: 1.1.0
Parameters
o : Object
The object to remove
Returns
Array
this array
简单的翻译来说:从数组中移除某个指定的对象,如果对象不存在,那么相当于什么都没发生,也不会报错。传入的参数是要移除的对象,返回的是这个数组。
「示例」:
var msgArray = [1, 2, 3, 4, 5];
msgArray.remove(1);
alert(msgArray); // 1 被移除,弹出窗口显示 2,3,4,5
❝如果直接在
js
代码中执行上述代码会报错:没有remove
方法。而在Ext.onReady
中执行上述代码时,会正常无误。 ❞
当然上面只是众多 API
中的一个小例子,是为了说明它对原生 js
进行了很多扩展。那么他底层是怎么做的呢?
Array.prototype.remove = function(obj) {
if (null == obj) {
return false;
}
for (var i = 0, n = 0; i < this.length; i++) {
if (this[i] != obj) {
this[n++] = this[i];
}
}
this.length -= 1;
};
// 测试
var msgArray = [1, 2, 3, 4, 5];
msgArray.remove(1);
alert(msgArray); // 1 被移除,弹出窗口显示 2,3,4,5
其实大部分都是通过上述 prototype
为类添加方法,只不过官方的代码逻辑一定比这个完善的多。