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