javascrpt arale
TRANSCRIPT
JavaScript + Arale前端开发部 邵帅
主要内容
主要内容
web技术及职责
主要内容
web技术及职责
JavaScript语言特性
主要内容
web技术及职责
JavaScript语言特性
选择器和DOM操作
主要内容
web技术及职责
JavaScript语言特性
选择器和DOM操作
Arale框架
web技术及职责
元素 职责 MVC
HTML 内容 M
CSS 样式 V
JavaScript 行为 C
元素 职责 MVC
HTML 内容 M
CSS 样式 V
JavaScript 行为 C
元素 职责 MVC
HTML 内容 M
CSS 样式 V
JavaScript 行为 C
主要内容
web技术及职责
JavaScript语言特性
选择器和DOM操作
Arale框架
JavaScript语言特性
弱类型语言
弱类型语言
声明变量时不需要指定类型
弱类型语言
声明变量时不需要指定类型
六种数据类型：number, string,
object, boolean, null, undefined
弱类型语言
声明变量时不需要指定类型
六种数据类型：number, string,
object, boolean, null, undefined使用前先声明
number, string, boolean
Number, String, BooleanVS.
number, string, boolean
Number, String, BooleanVS.
原始数据类型，按值传递
number, string, boolean
Number, String, BooleanVS.
原始数据类型，按值传递
对象，按引用传递
number, string, boolean
Number, String, BooleanVS.
undefined
nullVS.
原始数据类型，按值传递
对象，按引用传递
number, string, boolean
Number, String, BooleanVS.
undefined
nullVS.
变量被创建后，但未赋值，不应该在程序中传递
原始数据类型，按值传递
对象，按引用传递
number, string, boolean
Number, String, BooleanVS.
undefined
nullVS.
变量被创建后，但未赋值，不应该在程序中传递
空值，可以在程序中传递
原始数据类型，按值传递
对象，按引用传递
基本类型
基本类型没有任何理由去封装基本类型
基本类型没有任何理由去封装基本类型
var x = new Boolean(false);if (x) { alert('hi'); // Shows 'hi'.}
基本类型没有任何理由去封装基本类型
var x = new Boolean(false);if (x) { alert('hi'); // Shows 'hi'.}
var x = Boolean(0);if (x) { alert('hi'); // This will never be alerted.}typeof Boolean(0) == 'boolean';typeof new Boolean(0) == 'object';
作用域
作用域function f1(x) { var a = 1; if(x) { var b = 2; } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
作用域function f1(x) { var a = 1; if(x) { var b = 2; } function f2() { var c = 3; } console.log(a); console.log(b); console.log(c);}f1(4);
12undefined
作用域
JavaScript中只有函数作用域
if (x) {function foo() {}
}
if (x) {function foo() {}
}
if (x) {function foo() {}
}
if (x) { var foo = function() {}}
不要在块内声明一个函数
expression & literal
expression & literalfunction fn() {
console.log(f1); var f1 = function() { console.log("f1") } console.log(f1);
console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2();}fn()
expression & literalfunction fn() {
console.log(f1); var f1 = function() { console.log("f1") } console.log(f1);
console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2();}fn()
expression & literalfunction fn() {
console.log(f1); var f1 = function() { console.log("f1") } console.log(f1);
console.log(f2); function f2() { } console.log(f2); var f2 = function() { console.log("f3"); } f2();}fn()
打印结果：
nullfunctionfunctionfunctionf3
函数是第一型
函数是第一型能表达为匿名的直接量
函数是第一型能表达为匿名的直接量
能被变量存储
函数是第一型能表达为匿名的直接量
能被变量存储
能被其他数据结构存储
函数是第一型能表达为匿名的直接量
能被变量存储
能被其他数据结构存储
有独立而确定的名称
函数是第一型能表达为匿名的直接量
能被变量存储
能被其他数据结构存储
有独立而确定的名称
可作为函数结果值返回
原型
原型 对象的构建基于原型prototype
原型 对象的构建基于原型prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
原型 对象的构建基于原型prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
getR Vs. area
原型 对象的构建基于原型prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
//static methodCircle.getClassName = function() { return “Circle”;}
getR Vs. area
原型 对象的构建基于原型prototypefunction Circle(x, y, z) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r;};}//instance methodCircle.prototype.area = function() { return this.r * this.r * 3.14159;}var c = new Circle(0, 0, 2);alert(c.area());
//static methodCircle.getClassName = function() { return “Circle”;}
getR Vs. area
prototype 对象是个模板，要实例化的对象都以这个模板为基础。
继承
继承function ClassA(sColor) { this.color = sColor;}
ClassA.prototype.sayColor = function () { alert(this.color);};
function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name);};
继承function ClassA(sColor) { this.color = sColor;}
ClassA.prototype.sayColor = function () { alert(this.color);};
function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name);};
对象冒充
继承function ClassA(sColor) { this.color = sColor;}
ClassA.prototype.sayColor = function () { alert(this.color);};
function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name);};
对象冒充
原型链
继承function ClassA(sColor) { this.color = sColor;}
ClassA.prototype.sayColor = function () { alert(this.color);};
function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name);};
对象冒充
原型链
继承function ClassA(sColor) { this.color = sColor;}
ClassA.prototype.sayColor = function () { alert(this.color);};
function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name);};
对象冒充 原型链+
闭包
闭包函数式编程：严
格强调无副作用
闭包函数式编程：严
格强调无副作用
闭包：给予机会
改变外部环境
（全局变
量，scope chain
闭包函数式编程：严
格强调无副作用
闭包：给予机会
改变外部环境
（全局变
量，scope chain
var sMessage = "hello world";function sayHelloWorld() { alert(sMessage);}sayHelloWorld();
闭包函数式编程：严
格强调无副作用
闭包：给予机会
改变外部环境
（全局变
量，scope chain
var sMessage = "hello world";function sayHelloWorld() { alert(sMessage);}sayHelloWorld();
var iBaseNum = 10;function addNum(iNum1, iNum2) { function doAdd() { return iNum1 + iNum2 + iBaseNum; } return doAdd();}
闭包函数式编程：严
格强调无副作用
闭包：给予机会
改变外部环境
（全局变
量，scope chain
var sMessage = "hello world";function sayHelloWorld() { alert(sMessage);}sayHelloWorld();
var iBaseNum = 10;function addNum(iNum1, iNum2) { function doAdd() { return iNum1 + iNum2 + iBaseNum; } return doAdd();}
简单的说，闭包就是函数可以使用函数之外定义的变量
事件驱动的编程模型
事件驱动的编程模型
事件驱动的编程模型
事件驱动的编程模型<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
事件驱动的编程模型<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}
事件驱动的编程模型<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}
var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
事件驱动的编程模型<button id=”btn” onclick=”alert(‘button clicked!’);”>Click Me!</button>
var btn = document.getElementById(‘btn’);btn.onclick = function() { alert(“button clicked”);}
var btn = document.getElementById(‘btn’);if(window.addEventListener) { btn.addEventListener(‘click’, function() {alert(1);}, false);} else { btn.attachEvent(‘onclick’, function() {alert(1);});}
事件类型
事件类型click
change
load
mouseover
mouseout
blur
submit
keydown
keypress
resize
scroll
......
主要内容
web技术及职责
JavaScript语言特性
选择器和DOM操作
Arale框架
选择器和DOM操作
DOM
DOMDocument Object Model
DOMDocument Object ModelHTML和XML文档的编程接口规
范，W3C标准之一
DOMDocument Object ModelHTML和XML文档的编程接口规
范，W3C标准之一
通过JS操作DOM对象来达到操作页面
元素的目的
DOM manipulation
DOM manipulation
创建元素
DOM manipulation
创建元素
删除元素
DOM manipulation
创建元素
删除元素
获取元素/集合
DOM manipulation
创建元素
删除元素
获取元素/集合
访问/修改元素属性
DOM操作函数
DOM操作函数getElementById
firstChild, lastChild,childNodes
previousSibling, nextSibling, parentNode
getElementsByTagName
appendChild
removeChild
replaceChild
createElement
createTextNode
insertBefore
innerHTML
var newP = document.createElement("p");var txt = 'Kilroy was here.';var newT = document.createTextNode(txt);newP.appendChild(newT);var p2 = document.getElementsByTagName('p')[1];p2.parentNode.replaceChild(newP,p2);
选择器/selector
主要内容
web技术及职责
JavaScript语言特性
选择器和DOM操作
Arale框架
Arale框架
Arale前端解决方案
Arale前端解决方案
Arale Js
Arale前端解决方案
Arale JsAlice
Arale前端解决方案
Arale JsAlice
combo
Arale前端解决方案
Arale JsAlice
maven
combo
Arale前端解决方案
Arale JsAlice
maven
static servercombo
Arale前端解决方案
Arale JsAlice
maven
static servercombo
前端服务化
Hello World!
Hello World!
$E.domReady(function(){ $("btn").click(function(e){ alert("Hello Arale!"); });});
Selector
Selector
id选择器: $(‘id’)
Selector
id选择器: $(‘id’)
返回Node类型
Selector
id选择器: $(‘id’)
复杂选择器：$$(selector)
返回Node类型
Selector
id选择器: $(‘id’)
复杂选择器：$$(selector)
返回Node类型
返回数组，数组中的节点为Node类型
Dom & Node
$D ——静态方法集合
$Node——封装对象，使获得实例方法
Dom & Node
$D ——静态方法集合
$Node——封装对象，使获得实例方法Dom常用方法
toDomgetPosition
setStylegetDocumentWidth
getDocumentHeightgetViewportWidth
getViewportHeight
Dom & Node
$D ——静态方法集合
$Node——封装对象，使获得实例方法Node常用方法
addClassremoveClassattrinjectgetStylesetStylenextpreviousparentquery
Dom常用方法
toDomgetPosition
setStylegetDocumentWidth
getDocumentHeightgetViewportWidth
getViewportHeight
Event——$E
Event——$E
$E.domReady(function() {//do something
});
Event——$E 常用方法
connectdisconnect
subscribeunsubscribe
publishtrigger
delegatelive
$E.domReady(function() {//do something
});
Event——$E 常用方法
connectdisconnect
subscribeunsubscribe
publishtrigger
delegatelive
$E.domReady(function() {//do something
});
事件代理机制
数组——$A
数组——$A$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);});
数组——$A$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);});
map & reduce
数组——$A$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);});
eacheverysomemap
filter
map & reduce
数组——$A$A([1,2,3,4,5]).each(function(v, i) {
console.log(v);});
eacheverysomemap
filter
map & reduce Others:cleanremovecombineeraseincludelast...
颗粒化模块设计
颗粒化模块设计 combo服务
颗粒化模块设计 combo服务
颗粒化模块设计 combo服务
Loader.use(‘arale.http’, function() { $Ajax.get(‘url’, { success: function() { } });
});
A B
C
Loader.use(‘C’, function() {//some code here
})
加载C模块js文件的同时，若
A和B还没有加载会同时加
载。
颗粒化模块设计
A B
C
Loader.use(‘C’, function() {//some code here
})
加载C模块js文件的同时，若
A和B还没有加载会同时加
载。
代码检查
压缩代码检查
压缩
硬编码检测
代码检查
压缩
硬编码检测测试
代码检查
压缩
硬编码检测测试
依赖关系计算
代码检查
压缩
硬编码检测测试
依赖关系计算部署
代码检查
压缩
硬编码检测测试
生成文档
依赖关系计算部署
代码检查
压缩
硬编码检测测试
生成文档
依赖关系计算部署
代码检查
Maven
项目生命周期管理
压缩
硬编码检测测试
生成文档
依赖关系计算部署
代码检查
Maven
http://arale.alipay.net
http://arale.alipay.net:3000
如何开发组件http://arale.alipay.net/
wiki/doku.php?id=wigetdevelopment
jsdoc规范http://arale.alipay.net/wiki/
doku.php?id=jsdocstandard
自己用JS实现一个快速排序算法，不可
以用Array#sort方法
事件委托(delegate)的原理描述，自写或
使用Arale做一个小demo
task
Q & A
Thanks!