ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识。
需要掌握的内容有:
- javascript之数据类型、变量、变量操作符javascript之数组
- javascript之函数
- javascript之对象、面向对象
- javascript之原型
javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。
- number:就是数字值,包括整数、小数、NaN、正负无穷。
- string:字符串类型、单双引号引起来的内容。
- boolean:true、false
- object:表示所有的javascript对象,不用多说
- function:我们熟悉的方法,也就是函数类型,是javascript特有的数据类型。
- undefined:表示变量声明了但是并没有被赋值。
举例:
Ext.onReady(function(){
//NUmber/String/Boolean/Object/Undefined/Function
//Number
// var num1 = 10;
// var num2 = 10.5;
// var num3 = .6; //0.6
// var num4 = 070; //56
// var num5 = 1/0; //正无穷
// var num6 = window.parseInt("dasdsada"); //NaN not a number
//String 单双引号表示的字符串
//Boolean true/false
//Object
// var date = new Date();
// var arr = new Array();
// var obj = {name:'ddd',age:10};
// alert(obj.hasOwnProperty('name'));
//ECMA5
//Undefined 变量声明了但是没有被赋值 其实也等同于Null
// var a;
// alert(a);
// alert(undefined == null); //true
// alert(undefined === null); //false
// alert(typeof null); //object 表示的就是一个空对象的引用
//
//Function
function fun(){
console.info('fun...');
}
fun();
alert(typeof fun); //Function
});
- javascript声明变量用var关键字+name表示。
- javascript变量是弱变量类型,所谓的弱变量类型其实就是根据赋值决定变量的类型。
- javascript变量分为全局变量和局部变量,所有在方法里声明的变量,都是局部变量,在方法外声明的变量都是全局变量。
- javascript之运算操作符:
- javascript里运算符和java基本一样,typeof 操作符是判断数据类型的操作符,非常的实用。
javascript 更不建议使用全局变量(查找的时候效率比较低,大型程序开发时不安全)
javascript之数组
数组是javascript里最常用的对象了,它类似于java里的容器,可以承装不同类型的元素,容器的长度也可以任意。数组操作非常灵活,且里面有很多常用的方法。
push、pop
shift、unshift
splice、slice
concat、join
sort、reverse
ECMA5也对Array扩展了很多实用的方法,比如forEach、filter、some等..
//Array
// var arr = [1,2,3,4,5];
// arr.forEach(function(item){
// alert(item);
// });
var arr1 = [10,21,35,32,13];
var newarr1 = arr1.filter(function(item){
if(item > 20){
return true;
}else{
return false;
}
});
alert(newarr1);
javascript之函数
对于Ext开发者,我还是希望你能对javascript原生的东西非常了解、甚至熟练掌握运用。那么函数,无疑是非常重要的概念。首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式。每种方式他们都会有区别,分别为:
- function语句形式
- 函数直接量形式
- 构造函数形式
函数中的arguments对象
- argument的作用一:接受函数的实际参数
- argument的作用二:用于做递归操作
//Function 函数
//前两种创建函数的主要区别:function语句形式,javascript解释器直接会去找,其他的代码就从上到下顺序执行
//1:function语句形式
fun1();
alert(fun2); //undefined
fun2(); //出错
function fun1(){
alert('fun1...');
};
//2:函数直接量的形式
var fun2 = function(){
alert('fun2...');
};
//第三种构造函数式,它具有的作用域与前两种不同,它具有顶级作用域
//3:构造函数形式
var fun3 = new Function('x','y','return x+y;');
alert(fun3(10,20));
//var k = 1;
//function test(){
// var k = 2;
// //创建三种方式的函数:
// function f(){return k;}; //f()=2
// var f = function(){return k}; //f()=2
// var f = new Function('return k;'); //f()=1 相当于在最外层,顶级域声明
// alert(f());
//};
//
//test();
arguments对象
//arguments对象,每一个函数内部都有一个arguments对象
//function test(x,y){
// //第一个作用:接受函数的实际参数
// alert(arguments); //object arguments
// alert(arguments.length); //3
//
//
// alert(arguments[2]); //3
//};
//test(1,2,3);
//第二个作用:通常用于递归操作
function fact(number){
if(number <= 1){
return 1;
}else {
return number * fact(number - 1);
}
};
alert(fact(5));
var fact2 = fact;
fact2(5);
//下面写法出错
var fact2 = fact;
fact = null;
fact2(5);
//修改:
function fact(number){
if(number <= 1){
return 1;
}else {
return number * arguments.callee(number - 1);
}
};
//下面写法不会出错
了var fact2 = fact;
fact = null;
fact2(5);
javascript之函数
this关键字的使用
this关键字总是指向调用者,谁调用函数,this就指向谁
call、apply的使用
call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域
块的概念
和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域
闭包:掌握闭包必须要深入清楚的概念
- 执行环境
- 作用域链
- 垃圾回收机制
this的使用:
//This 关键字在javascript里的使用
function test(){
alert(this.x);
};
test.x = 10;
//alert(test.x); //10
test(); //undefined 相当于window.test();
//如果在定义一个变量如下
var x = 5; //相当于window.x=5
function test(){
alert(this.x);
};
test.x = 10;
test(); //弹出框显示5,
call apply:
//call apply 主要作用是绑定作用域
var color = 'red';
var obj = {color:'yellow'};
function showColor(x,y,z){
alert(x+y+z);
alert(this.color);
};
showColor(); //red
//call . apply 绑定一个函数,到你指定的作用域内执行
showColor.call(window,10,10,30);
showColor.call(obj,10,10,30);
showColor.apply(obj,[2,3,4]);//参数是数组
块的概念:
//块的概念:
function test(){
for(var i = 1;i<=5;i++){
alert(i);
}
alert(i); //这里也能执行 显示了6
};
test();
function test(){
(function(){
for(var i = 1;i<=5;i++){
alert(i);
}
})();
alert(i); //这里执行 显示错误
};
test();
//注意,在javascript中,要想直接执行一个函数,可以使用(function(){...})();形式
闭包:
//闭包:执行环境、作用域、js垃圾回收
//函数碰到return直接返回,没有return返回结果undefined
function test(){
return function(){
alert('这是闭包体代码。。。');
};
};
alert(test()); //返回的是:function(){ alert('这是闭包体代码。。。');};
var f = test();
alert(typeof f); //function
f();
function test(){
var temp = 10;
return function(){
alert(temp);
};
};
test()(); //10
闭包的一个作用是局部变量实现全局变量的功能
例如做一个网页上按钮点击次数的例子,网页上有一个按钮,点击一次显示一次点击次数,每点击一次加1
一种做法是:
<body>
<input type="button" value="点击" οnclick="test();"> <br>
</body>
var i = 0;
function test(){
alert(++i);
};
定义一个全局变量i,点击一次自动加1
另一种做法使用闭包:
<body>
<input type="button" value="点击" οnclick="<span style="color:#ff0000;">inp.getCount();</span>"> <br>
</body>
var inp = (function(){
var i = 0;
return {
getCount:function(){
alert(++i);
}
};
})();
javascript之对象、面向对象
使用json对象(JavaScript Object Notation)
- JS对象的特性
- 对于js来说json对象非常的重要,我们要学会如何操作json对象
面向对象的概念
- 如何定义一个类、如何实例化对象、如何扩展对象(原型prototype)
- 单体模式:简单单体、闭包单体、惰性单体、分支单体
- 对象的定义其他方式(工厂模型、稳妥对象、聚合对象)
- 原型的使用、原型链
- 原型的继承(多种方式实现:组合继承、借用构造函数继承、混合继承、掺元类等)
- 链式编程
- javascript契约书:接口(注释法、属性检测法、鸭式辨型法)
设计模式:如果能够掌握JS的设计模式,我相信在以后的Ext学习中,慢慢的研读,体会Ext底层代码的设计,是非常有帮助的。
json对象
Ext.onReady(function(){
//var obj = new Object(); 一种定义对象的方法
var obj = {name:'zzz',age:30};//json对象
// obj.sex = '男'; //新增属性
// obj.age = 25; //修改属性的值
// delete obj.name; //删除对象的属性
//枚举对象内置属性的循环
for(var attr in obj){
alert(attr + ":" + obj[attr]);
}
});
对象的定义,实例化
var Person = function(name,age){
this.name = name;
this.age = age;
//private
var _sex = '男'; //js私有属性
this.getSex = function(){
return _sex;
};
this.setSex = function(sex){
_sex = sex;
};
};
//实例化一个对象
var p = new Person('张三',30);
alert(p.name);
对对象的各种扩展(属性和方法):
var Person = function(name,age){
this.name = name;
this.age = age;
//private
var _sex = '男'; //js私有属性
this.getSex = function(){
return _sex;
};
this.setSex = function(sex){
_sex = sex;
};
};
Person.prototype.id = 10; //扩展对象属性
Person.prototype.method = function(){ //扩展对象方法
alert(this.age);
};
//实例化一个对象
var p = new Person('张三',30);
alert(p.name);
alert(p.id);
p.method();
要注意,实例化的语句要放在扩展之后:
//原型对象的构造器总是指向当前对象的模板
Person.prototype = { //另一种扩展对象的方法,推荐使用
constructor:Person,
id:10,
method:function(){
alert('method...');
}
};
//实例化一个对象
var p = new Person('张三',30);
alert(p.name);
alert(p.id);
p.method();
单体模式:
//单体模式:
var ZCD = {};
ZCD.Array = {
each:function(){
alert('each');
},
filter:function(){
alert('filter');
}
};
ZCD.staticMethod = function(){
alert('我是单体下的静态方法');
};
ZCD.Array.each();
ZCD.staticMethod();
闭包单体:
//单体模式:闭包单体
var ZCD = (function(){
var Array = {
each:function(){
alert('each...');
}
};
return {
arrayEach:function(){
Array.each();
}
};
})();
ZCD.arrayEach();