阿里前端学习笔记(二)
2014-07-20 by niuzhixiang
Kissy
Hello World
引入Kissy种子文件
<script src="http://g.tbcdn.cn/kissy/k/1.4.4/seed.js"></script>
添加一个Kissy模块
//此处省略模块名称,默认为该模块所在JS文件名。建议采用此写法,一个JS文件中只定义一个模块
//回调函数的第一个参数为KISSY本身;第二个参数为Base模块,与requires数组中指定的“base”相对应
KISSY.add(function(S,Base) {
//HelloWorld就是该模块类,它继承自Base模块(类)
var HelloWorld = Base.extend({
initializer:function(){
var self = this;
// Your Code
alert('hello world');
}
},{
ATTRS: {
// 这里是初始参数和默认值
A:{
value:'abc'
}
}
});
//返回HelloWorld类
return HelloWorld;
},{
//声明该模块依赖的其他模块
requires:['base']
});
使用这个Kissy模块
//使用模块时需指定模块名称
KISSY.use('h5-2banner-active/mods/banner/index',function(S,Banner){
//创建HelloWorld模块的实例,会执行initializer()方法。
new HelloWorld();
});
Kissy的特性
- 高度模块化。通过
KISSY.add()
注册一个模块,通过KISSY.use()
使用一个模块,便于KISSY组件的重用。 - 很多API与jQuery类似。
Kissy常用模块
- Seed模块:内置于种子文件Seed中,包括基础的面向对象支持、模块加载器(
loader
模块)、UA特性检测(UA
模块)、全局工具函数(lang
模块)等核心的功能。 - Components模块:包含一些比较常用的模块,例如动画效果(
anim
模块)、DOM节点操作(dom
和node
模块,其中后者继承自前者,进行了进一步的封装)、AJAX(io
模块)、事件机制(event
模块)等。 - Widgets模块:由官方或非官方提供的其他组件模块。
参考资料
Juicer
简介
Juicer是一个轻量级的JS模板引擎。它将数据和模板分离,通过把数据渲染到模板来生成最终的HTML片段。Juicer可以在NodeJS环境中运行。
Demo
<!--数据-->
<!--#def
{
"tmsTitle": "LOGO",
"title": "测试图片",
"href": "http://gtms01.alicdn.com/tps/i1/T1QBDWFXxcXXXzCwr6-168-170.png"
}
-->
<!--模板-->
图片地址: ${title} <br />
链接地址: ${href}
<!--数据-->
<!--#def
{
"list": [
{
"qt": "机票分会场",
"dz": "http://trip.taobao.com/jipiao"
},
{
"qt": "酒店分会场",
"dz": "http://trip.taobao.com/jiudian"
},
{
"qt": "度假分会场",
"dz": "http://trip.taobao.com/dujia"
}
],
"tmsTitle": "分会场列表"
}
-->
<!--模板,使用了循环语法-->
<ul class="other-link">
{@each list as item}
<li class="other-link-item"><a href="${item.dz}" target="_blank">${item.qt}</a></li>
{@/each}
</ul>
经过grunt-tpl-compiler编译后生成的HTML代码(遵循Kissy模块规范)为:
<!--第一段数据和模板渲染出来的HTML代码-->
图片地址: 测试图片
<br />链接地址: http://gtms01.alicdn.com/tps/i1/T1QBDWFXxcXXXzCwr6-168-170.png
<!--第二段数据和模板渲染出来的HTML代码-->
<ul class="other-link">
<li class="other-link-item">
<a href="http://trip.taobao.com/jipiao" target="_blank">机票分会场</a>
</li>
<li class="other-link-item">
<a href="http://trip.taobao.com/jiudian" target="_blank">酒店分会场</a>
</li>
<li class="other-link-item">
<a href="http://trip.taobao.com/dujia" target="_blank">度假分会场</a>
</li>
</ul>
参考资料
Less
简介
Less是一个CSS预编译器,它是原生CSS语言的扩展,添加了诸如变量、函数、运算、规则嵌套等新功能。Less可以在NodeJS环境中运行。
Demo
Less代码:
/*此处声明一个变量base*/
@base: #f938ab;
/*此处自定义了一个函数,如果第二个参数是一个颜色值,则调用该函数*/
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
/*此处又自定义了一个同名的函数,如果第二个参数是一个数字,则调用该函数。该函数首先
将第二个参数(alpha值)转换成rgba颜色值,然后再调用上面那个自定义函数*/
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
/*此处使用了一个内置函数saturate(),用于增加一定数值的颜色饱和度。Less中提供了
大量这种很有用的函数*/
color: saturate(@base, 5%);
/*此处使用了一个内置函数lighten(),用于增加一定数值的颜色亮度。*/
border-color: lighten(@base, 30%);
/*此处使用了规则的嵌套,在.box规则中嵌套了一个div规则,并且在div规则中使用了自定
义的函数,由于第二个参数是一个数字值而非颜色值,因此调用的是第二个自定义函数*/
div { .box-shadow(0 0 5px, 30%) }
}
编译后的CSS代码:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
参考资料
航旅桥协议
简介
- 航旅桥协议是由航旅客户端工程师开发的一套标准协议,用于H5页面与native代码的通信。在Bridge JS文件中实现了这套桥协议。
- 协议一共有三类,
page://
、native://
和bridge://
。其中page协议用于H5与native页面之间的跳转;native协议用于H5页面与native代码的数据交换(例如通过本地代码获取地理位置数据);bridge协议包含除page和native外的其他所有协议(例如获取手机网络连接情况、响铃及振动情况等)。 - 桥协议JS文件(Bridge项目下的
index.js
)的核心API是pushBack()
方法,各个协议的实现方法都调用了pushBack()
方法。
参考资料
详见阿里航旅前端Wiki页面。
NodeJS
简介
NodeJS是一个脱离了浏览器的JavaScript运行环境,可以独立运行JS程序。NodeJS的核心思想有两点——事件机制和异步处理。JavaScript语言很好地实现了这两点,使得NodeJS更加高效。
模块化
编写大型程序时都需要将代码模块化,NodeJS中的模块化机制包括require()
函数、exports
对象和module
对象。
require()
用于在当前模块中加载并使用别的模块。例如:var mymodule = require(./mymodule)
该语句在当前模块中引入了同级目录下的
mymodule.js
模块。exports
对象是当前对象的导出对象。其他模块通过require()
函数引用当前模块时,得到的就是exports
对象。module
对象用于获取当前模块本身的相关信息。最常用的是替换当前模块的导出对象exports
,例如以下语句,将一个模块的导出对象设置为了一个函数:module.exports = function () {
console.log('Hello World!');
};
NPM
NPM是NodeJS自带的包管理工具,类似于Linux下的rpm。使用NPM可以从NPM服务器下载别人编写的第三方包。例如下载grunt工具(v0.4.1)的命令如下:
$ npm install grunt@0.4.1
文件操作
NPM提供了对于本地文件操作的API。这些API底层大都是C/C++异步实现的。以下示例是一个拷贝文件的Demo:
//引入文件操作的内置模块fs
var fs = require('fs');
//调用fs模块提供的API实现文件的拷贝
function copy(src, dst) {
fs.writeFileSync(dst, fs.readFileSync(src));
}
//在主程序中调用文件拷贝函数
function main(argv) {
copy(argv[0], argv[1]);
}
/*使用process.argv可以获取到命令行参数,而前两个命令行参数分别是NodeJS执行程序
的绝对路径,以及主模块的绝对路径。因此从第三个命令行参数开始才是用户输入的。
这样就可以在命令行输入copy [src] [dst]这样的命令来调用该模块,实现文件拷贝了*/
main(process.argv.slice(2));
网络操作
NodeJS提供了一整套网络编程的API,主要包括几个部分:作为客户端向服务器发起HTTP请求;作为服务端接收客户端的HTTP请求;实现Socket通信(使用net
模块);解析URL及URL参数等(使用url
和querystring
模块)。以下两个例子分别展示了NodeJS作为客户端和服务器进行HTTP通信的过程。
作为客户端,向服务器发送HTTP请求,使用内置的
http
模块://定义请求头信息
var options = {
hostname: 'www.example.com',
port: 80,
path: '/upload',
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
//定义请求request,并传入响应到来时的回调函数
var request = http.request(options, function (response) {});
//写入请求数据,发送请求
request.write('Hello World');
//请求结束
request.end();
作为服务端,接收客户端发来的HTTP请求,也使用内置的
http
模块:/*创建一个HTTP服务器,并传入请求到来时的回调函数。每当一个请求到来时,该回调
函数就会被执行一次。这是一种事件机制。*/
http.createServer(function (request, response) {
//设置响应头信息
response.writeHead(200, { 'Content-Type': 'text/plain' });
//返回响应数据
request.on('data', function (chunk) {
response.write(chunk);
});
//响应结束
request.on('end', function () {
response.end();
});
//该HTTP服务器监听80端口
}).listen(80);
进程管理
NodeJS可以管理自身进程,也可以创建子进程,分别通过process
全局对象和child_process
模块来实现。例如通过process.argv
获取命令行参数(属于当前进程),通过child_process.exec()
方法来调用终端命令(终端命令运行在子进程)。
异步编程
在NodeJS中,异步编程与同步编程最大的区别就是:异步编程采用回调方式来实现功能。NodeJS提供的异步API也都是采用回调的方式实现的。例如使用一个函数的输出作为另一个函数的输入,同步编程的写法是:
//把函数fn2()的输出作为函数fn1()的输入
var output = fn1(fn2('input'));
// Do something.
而异步编程的写法是:
//把函数fn2()的输出作为函数fn1()的输入
fn2('input', function (output2) {
fn1(output2, function (output1) {
// Do something.
});
});
可以看出,异步编程一般就是一个回调函数套一个回调函数的>
形状。这种异步编程模式在遍历数组、异常处理等方面应用较多。
参考资料
- 阿里人写的七天学会NodeJS
- NodeJS官方网站
Web前端安全
SQL注入攻击
SQL注入攻击就是攻击者作为用户,在发送URL或填写表单时,恶意传递或输入特定的SQL语句,从而达到查询或篡改数据库的目的。例如一个正常的请求url为http://www.abc.com/home?userid=1
,服务端接收到请求参数后会运行如下查询语句SELECT * FROM user WHERE userid = 1
,而如果攻击者发送的请求url为http://www.abc.com/home?userid=1 or 1=1
,则服务端运行的SQL语句就变成SELECT * FROM user WHERE userid = 1 or 1=1
,这样攻击者就可以获取到user
表中所有的数据,造成用户信息泄露。
XSS攻击
XSS即跨站脚本攻击(Cross Site Scripting),原理与SQL注入攻击类似,也是攻击者作为用户,恶意传递或输入一些特定的JS脚本语句,从而进行钓鱼等活动。详细攻击方式请谷歌一下。
总结
谨记两点——“永远不要相信用户输入的数据”和“永远不要相信服务端响应的数据”,在处理用户的输入数据和服务端的响应数据之前,一定要先做好验证和转码等工作,防止遭到攻击。
杂七杂八的东西
markdown
挺好用的一种博客编辑语言,与Github完美配合,让周记写的更爽了。
抓包工具
Charles或者Fiddler,基于代理进行抓包,比Chrome的Network工作台更强大。
问题解决
- 在公司本机上运行grunt awpp任务时总是出现乱码错误,索性在
GruntFile.js
中加了一句console.log()
,把awpp任务封装的命令打印出来,然后直接执行这条命令就ok了。 - grunt tpl_compiler执行失败的问题神奇地消失了,估计是之前没有装好tpl的原因吧。