1. 技术文章
  2. Lungo 使用说明及心得 中文api —— JavaScript部分

Lungo 使用说明及心得 中文api —— JavaScript部分

由 為{幸葍}努か 提交于 2019-12-03 09:37:03

前面总结了一篇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

标签
Lungo
移动开发
webapp
框架
api
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!