Lungo 使用说明及心得 中文api —— JavaScript部分
前面总结了一篇Lungo基础标签的笔记，这篇将要记录在学习LungoJS时的用到的javacript方法和心得：
Core
核心部分比较简单，从方法名字上面大概就能看出是做什么用的，本人使用的比较少
log()
主要是向控制台输出调试信息；有三个等级 1普通日志、2警告 、3错误
Lungo.Core.log(1, "Launched event"); Lungo.Core.log(2, "Warning!!"); Lungo.Core.log(3, "Error!!!!");
execute()
执行预先定义的回掉函数，官方文档中说可以执行多个方法，本人测试只执行了第一传入的方法
var myFunc = function(){
alert("func1")
};
var myFunc2 = function(){
alert("func2")
};
Lungo.Core.execute(myFunc);
bind()
虚拟一个新的方法，将一个函数的返回值与给定的序列绑定（合并拼接）
var example = "This is ";
var addText = function(textToAdd){
text = this;
for(var i = 0, len = textToAdd.length; i < len; i++){
text += " " + textToAdd[i];
}
return text;
};
var text = ["an", "example"];
var finalText = Lungo.Core.bind(example, addText)(text); text将作为addText方法的参数
mix()
将序列进行混合更新，只是简单的针对对应键值进行更新,其余混合进去，如官方例子
var CONFIG_BASE = {
name: 'lungo_db',
version: '1.0'
};
var CONFIG = {
version: '1.1';
}
var finalConfig = Lungo.Core.mix(CONFIG_BASE, CONFIG); 本人测试
var CONFIG_BASE = {
name: '小明',
age: '10'
};
var CONFIG_1 = {
name: '小红',
age: '9'
} var CONFIG_2 = {
name: '小李',
age: '11',
sex:'male'
}
var finalConfig = Lungo.Core.mix(CONFIG_2, CONFIG);
var first =Lungo.Core.mix(CONFIG_BASE, CONFIG) //上面代码中的
var second=Lungo.Core.mix(first, CONFIG_2)
result：
second
Object {name: "小李", age: "11", version: "1.1", sex: "male"}
isOwnProerty()、toType()、toArray()、orderByProperty()、findByProperty()
都比较简单，可以查看官方文档
除此以外，还有两个常用的方法isMobile()和environment()判断当前访问的设备是什么，来针对不同的设备显示不同的样式和功能
Lungo.Core.isMobile(); Lungo.Core.evironment();
cache
Lungo有自己的内存缓存机制，
var framework = {name: "Lungo", twitter: "lungojs"};
Lungo.Cache.set("lungoFramework", framework); //实现缓存
var cachedFramework = Lungo.Cache.get("lungoFramework"); //获取缓存
Lungo.Cache.remove("lungoFramework"); //删除缓存
Lungo.Cache.exists("lungoFramework"); //判断是否已经缓存
但是当浏览器或app关闭就清空了，而且没有全部清空clear()的方法，可以自己根据html5的新特性localstorage自己扩展本地缓存类
DOM
Lungo有自己获取dom元素的机制和方法Lungo.dom("")
<section id="main"">
<header data-title="Dom Manipulation"></header>
<article id="main-article" class="active">
<ul>
<li class="dark">
Tap here to change the color
</li>
</ul>
</article>
</section>
Subscribe to a tap event with a callback
Lungo.dom('#main-article li').tap(function(event) {
Lungo.dom(this).toggleClass('light').toggleClass('dark');
}); 因为Lungo是依托于quoJS的，这里有个简单的方法可以简化代码量
$$('#main'),类似于就Query，不过注意这里是两个$符号
.ELEMENT
.Carousel
滚动效果，这是一个非常实用的功能，可以实现图片的轮播，应用的导航页面（beginner），而且他能很智能的判断滚动中所处的位置、自动跳转到上一个下一个
var example = Lungo.Element.Carousel(el, function(index, element) {
Lungo.dom("section#carousel .title span").html(index + 1);
});
var example = Lungo.Element.Carousel(el);
Lungo.dom('[data-direction=left]').tap(example.prev);
var example = Lungo.Element.Carousel(el);
Lungo.dom('[data-direction=left]').tap(example.next);
Longo.Core.log(1,example.position())
.count
显示特定信息的数量，同设置html属性data-counter=“12”效果一样
Lungo.Element.count("#messages", 12); 此方法同样比较使用，可以放到新闻更新的数量，收藏的数量，代办事宜的数量等等
.loading
显示加载动画
Lungo.Element.loading("#main-article", 1); //设定显示的标签和时间
.process
官方说是可以实现进度条功能，本人没能调试出来，有高手实现的，可以指点一下小弟哦
.pull
拖曳刷新的功能，相信大家无论是在微博或其它新闻客户端上都见过类似的功能
<section id="main" data-pull="normal">
<header data-title="Pull & Refresh"></header>
<article id="main-article">
<ul>
<li class="dark" data-icon="help">
<strong>
Test this featury only drag down.
</strong>
<small>This element has an associated event</small>
</li>
</ul>
</article>
</section>
var pull_example = new Lungo.Element.Pull('#main-article', {
onPull: "拖拽下拉刷新", //下拉时显示文本
onRelease: "释放加载新数据", //释放是显示文本
onRefresh: "刷新...", //刷新数据显示文本
callback: function() { //回调函数
alert("成功!");
pull_example.hide();
}
});
比较遗憾的是LungoJS只支持顶部下来效果，没有地步向上的拖曳效果
.Menu
控制data-control="menu"导航标签的显示和隐藏
Lungo.Element.Menu.show("options-icons")
Lungo.Element.Menu.hide("options-icons")
Lungo.Element.Menu.toggle("options-icons") 这个方法可以解决前面提到的选择导航menu，不能自动隐藏必须选一个菜单
才能将menu隐藏的问题
.NOTIFICATION
又一个实用的功能——通知提醒var afterNotification = function(){
//Do something
};
Lungo.Notification.show(
"check", //图标
"Success", //标题
3, //显示时间
afterNotification //可选参数，成功后的回调函数
);
//Show loading screen
Lungo.Notification.hide();
Lungo.Notification.sucess(
"check", //图标
"Success", //标题
"Sucess Desc", //描述信息
3, //显示时间
afterNotification //可选参数，成功后的回调函数
);
Lungo.Notification.error(
"check", //图标
"UnSuccess", //标题
"UnSuccess Desc", //描述信息
3, //显示时间
afterNotification //可选参数，成功后的回调函数
);
Lungo.Notification.confirm({
icon: 'user',
title: '确认.',
description: 'Description of confirm.',
accept: {
icon: 'checkmark',
label: 'Accept',
callback: function(){ alert("Yes!"); }
},
cancel: {
icon: 'close',
label: 'Cancel',
callback: function(){ alert("No!"); }
}
}); Lungo.Notification.html('<h1>Hello World</h1>', "Close");
error
confirm
html
.Router
建上一篇文章的data-view-*部分
. ASIDE
控制侧边栏的显示
Lungo.Aside.show("my-aside");
Lungo.Aside.hide();
Lungo.Aside.toggle("my-aside");
.ARTICLE
Lungo.Article.clean("article_id", "user", "Title", "Description", "Refresh")
也比较实用，可以放在内容更新是使用
.service
settings
配置信息：文档类型，是否跨域，是否异步加载等等
Lungo.Service.Settings.async = true;//异步
Lungo.Service.Settings.error = function(type, xhr){
//Do something
};
Lungo.Service.Settings.headers["Content-Type"] = "application/json"; //头文件信息
Lungo.Service.Settings.crossDomain = false; //跨域
Lungo.Service.Settings.timeout = 10; //相应时间
get()
异步获取其它页面信息，可以设定返回值类型json, xml, html, or text，相当好用
var url = "http://localhost:8080/myService";
var data = {id: 25, length: 50};
var parseResponse = function(result){
//Do something
};
Lungo.Service.get(url, data, parseResponse, "json");
//Another example
var result = Lungo.Service.get(url, "id=25&len=50", null, "json"); 我记得这里是不能通过这个方法获取返回值的，以为get方法是异步的，这里需要设置才能获取到值
Lungo.Service.Settings.async = false
.post()
异步提交数据
.json()
同理get()
.cache()
以日期模式自动缓存页面获取到的信息
var result = Lungo.Service.cache(
url, //请求url
"id=25&len=50", //参数
"2 hours", //过期时间
null, //回调方法
"json" //缓存类型
);
补充两个我常用的两个方法
1. 重新初始化节点，当向列表等元素中追加内容、改变原有节点属性等有时会用到
Lungo.Boot.Data.init("a[data-view-article='star']");
2. 动态加载页面
Lungo.Resource.load("detail.html", "section#main"); //要加载的页面和将页面加载到哪个section