Fork me on GitHub

JSBorn 文件

關於JSBorn的API文件都在集中在此...

Alpha版本,還有很多問題和需要加強的地方,若有問題或想法可 聯絡我,覺得不錯記得給個

Properties

Class Instance Properties

Name type description
className String 物件被定義的名稱

Options

Instance Config Options

Name type default description
abstr boolean false 宣告該物件為抽象類,只能繼承無法建立實體
extend string '' 物件繼承,必須對應物件定義的名字,如:define.your.classname
plugins array [] 載入插件並且擴充物件本身的功能,和繼承相似,主要是使用第三方提供。必須對應插件定義的名字,如:plugin.classname
imports array [] 當該物件需要用到某個class,可以事先動態載入準備好,和一般物件導向語言的import是一樣的意思。
single boolean true 宣告物件為單一實例/Singleton,只能JSB.create("class.name") 一次。
JSB.cls("classname", {
	abstr  :false,
	single :false,
	extend :"parent.classname",
	imports:[
		"import.classname"
	],
	plugins:[
		"plugins.classname"
	],
	initialize: function(options) {
		//因為Imports了import.classname,所以才能建立。
		JSB.create("import.classname");
	}
})

Method

Instance Method

Name
addListener(event,callback,scope)

監聽物件的事件

Parameters
  • event : (String)

    事件的名字

  • callback : (Function)

    回调函数

  • scope : (Object/Class)

    作用域

destroy()

銷毀物件,讓系統 GC回送 該物件

Dispatch Event / 觸發事件
destroy

Returns
Class

dispatchEvent(event,object)

觸發事件

Parameters
  • event : (String)

    事件的名字

  • object : (Object/Class)

    傳送的資料

removeListener(event)

移除監聽物件的事件

Parameters
  • event : (String)

    事件的名字

SUPER()

呼叫父層初始化(有繼承物件才需要使用)


Events

Instance Events

Name
destroy(jq_event,jsb_cls)

當物件被刪除時將會觸發。

Parameters
  • jq_event : (jQuery Event)

    事件的物件

  • jsb_cls : (Class)

    被刪除的物件

Properties

JSB Properties

Name type description
version String JSBorn 目前版本號
event Object

jQuery Event 事件,兼容jQuery 1.7以下版本的變數

jQuery >= 1.7 :

{on:"on",off:"off"}

jQuery < 1.7 :

{on:"bind",off:"unbind"}

config Object

JSB 的設定

alert("Version:"+JSB.version);

Method

JSB Method

Name
JSB.addListener(event,callback,scope)

監聽JSB的事件

Parameters
  • event : (String)

    事件的名字

  • callback : (Function)

    回调函数

  • scope : (Object/Class)

    作用域

JSB.create(classname,options,triggeroff)

建立一個JSBorn Class

Parameters
  • classname : (String)

    物件名字,如: org.jsborn.class

  • options : (Object)

    物件初始化接收的資料

  • triggeroff : (Boolean)

    建立時是否要觸發 create 事件,這會影響建立物件的速度

Dispatch Event / 觸發事件
create

Returns
Class

JSB.echo(type,[misc ... ])

封裝瀏覽器內建console,使用console時在不支援的瀏覽器上不會報錯。

Parameters
  • type : (String)

    console物件的函數,如: log , info

  • [misc ... ] : (Misc)

    JSB.echo("log",1,2,3,4,5,6,7,8,9);

JSB.extendCore(namespace,jsb_class)

此函式主要能讓第三方物件或自建的程式擴充到JSB。詳細請看 開發者手冊

Parameters
  • namespace : (String)

    命名空間,例如:"myname",擴充成功會就可以調用 JSB.core.myname

  • jsb_class : (Class)

    擴充JSB的物件,該物件與一般物件有差異,詳細請看 開發者手冊

JSB.extendPlugin(jsb_class)

此函式主要能讓第三方物件或自建的程式擴充到物件。詳細請看 開發者手冊

Parameters

JSB.getClassData()

取得已註冊的物件資料

Returns
Object Class

JSB.getImportData()

取得Import的資料

Returns
Array

JSB.importClass(classname)

動態載入物件

Parameters
  • classname : (String)

    物件名字,若該物件檔案還沒載入,將會動態載入。

JSB.removeListener(event)

移除監聽JSB的事件

Parameters
  • event : (String)

    事件的名字

JSB.setConfig(options)

設定JSB的全域設定

Name type default description
console boolean true 是否要輸出console訊息,主要是控制JSB.echo
createImport boolean true 建立物件時,如果完全沒載入該物件的JS檔案,是否要自動尋找。
extendPlugins array [] 設定所有物件在建立預設就自動的擴充插件,不需要每個重覆設定。
importSetup object

物件Import時載入位置的設定,一旦設定錯誤則會無法載入檔案。

Options
  • library : (String) , default: ""

    JSBorn's Library Import時指定的位置,可以是相對或絕對路徑。

    importSetup:{library:"http://domain.com/LIBRARY_PATH"}
  • source : (String) , default: ""

    開發者編寫的物件 Import時指定的位置,可以是相對或絕對路徑。

    importSetup:{source:"http://domain.com/source/SOURCE_PATH"}
  • parserURL : (Function)

    若需要後端要自定載入檔案位置,可以使用此函式

JSB.setConfig({
	console:true,
	createImport :true,
	importSetup:{
		library:'/assets/jsborn/',
		//基本上source和library是可以一起的
		source:'/assets/mysource/',
		parserURL:function(url){
			//REWRITE IMPORT PATH
			return url
		}
	}
});

Events

JSB Events

Name
create(jq_event,jsb_cls)

當物件建立時將會觸發。

Parameters
  • jq_event : (jQuery Event)

    事件的物件

  • jsb_cls : (Class)

    被建立的物件

destroy(jq_event,jsb_cls)

當物件被刪除時將會觸發。

Parameters
  • jq_event : (jQuery Event)

    事件的物件

  • jsb_cls : (Class)

    被刪除的物件

Method

Channel 註冊在 JSB.core.channel , 呼叫如 JSB.core.channel.addChannel(ROOM)

Name
addChannel(room)

新增一個事件頻道,就像聊天室一樣。

Parameters
  • room : (String)

    頻道的名稱

Returns
Boolean

delChannel(room)

刪除事件頻道。

Parameters
  • room : (String)

    頻道的名稱

Returns
Boolean

join(room,jsb_class,callback)

讓物件加入頻道指定的頻道

Parameters
  • room : (String)

    頻道名稱

  • jsb_class : (Class)

    物件

  • callback : (Function)

    當接收到訊息時的回調函式

Returns
Boolean

getChannel(room)

取得指定頻道的資料。

Parameters
  • room : (String)

    頻道的名稱

Returns
Object

getChannelData()

取得所有在頻道的資料

Returns
Array

send(room,data)

對指定的頻道傳送事件或資料,只有頻道內的會員才會觸發Callback

Parameters
  • room : (String)

    頻道的名稱

  • data : (Object)

    傳送給指定頻道的資料

Returns
Boolean

leave(room,jsb_class)

讓物件離開指定頻道

Parameters
  • room : (String)

    頻道的名稱

  • jsb_class : (Class)

    物件

Returns
Boolean

編輯範例
JSB.cls("org.jsborn.a", {
 
    imports: ["jsborn.core.channel"],
 
    initialize: function () {
 
        JSB.core.channel.join('channelName', this, function (e, data) {
 
            alert("callback:"+data);
 
            JSB.core.channel.leave('channelName', this);
            //this is not work after leave channel.
            JSB.core.channel.send('channelName','send again!');
 
        });
 
    }
 
});
 
JSB.create("org.jsborn.a");
 
JSB.core.channel.send('channelName','helloworld');

Method

Channel 註冊在 JSB.core.model , 呼叫如 JSB.core.model.getObjKey()

Name
getObjKey(obj,key)

對目標Object資料取得資料

Parameters
  • obj : (Object)

    目標Object

  • key : (String)

    搜尋的key

Example
編輯範例
var obj = {
	a:{
		b:{
			name:"helloworld!"
		}
	}
}

alert(JSB.core.model.getObjKey(obj,"a.b.name"));

Returns
Misc

getObjtDiff(obj_org,obj_mod,type)

比對兩個Object資料的不同之處

Parameters
  • obj_org : (Object)

    原始資料

  • obj_mod : (Object)

    修改資料

  • type : (String) 可以設定 adddelmodifyall

    比對的類型

Example
編輯範例
var obj_org = {
	a:{
		b:{
			name:"hello!"
		}
	}
}

var obj_mod = {
	a:{
		b:{
			name:"helloworld!"
		}
	}
}

console.log(JSB.core.model.getObjtDiff(obj_org,obj_mod,"modify"));

Returns
Misc

Method

Controller Method

Name
getRoot()

取得物件綁定的setRoot時的值

Returns
Misc

registerClass()

自動對應符合attribute的html dom 建立物件,必須要先setRoot

Attribute
  • jsb-cls="classname"

    classname:要建立的物件名稱

Example
編輯範例
...
<div id="controller-test">
	<div jsb-cls="controller.example.node">
	</div>
</div>
...
JSB.cls("controller.example", {
    plugins: ["jsborn.plugin.controller"],
    initialize: function (options) {
        this.setRoot("#controller-test");
        this.addListener("controller-create", function (e, scope, element) {
            alert("class create:" + scope.className);
        });
        this.registerClass();
    }
})

JSB.cls("controller.example.node", {
    initialize: function (options) {}
})
JSB.create("controller.example");

Dispatch Event / 觸發事件
controller-create

registerData()

在執行此函式前,必須要先setRootaddModel,此函式會自動對應符合attribute的html dom ,並且資料更新時會刷新dom

Attribute
  • jsb-data="modelname:key"

    modelname:對應物件設定的Model物件名字

    callback:對應物件Model資料欄位

Example
編輯範例
...
<div id="controller-test">
	<div jsb-data="datainfo:data.name">hello</div>
</div>
...
JSB.cls("controller.example", {
    plugins: ["jsborn.plugin.controller"],
    initialize: function (options) {
        this.setRoot("#controller-test");
        this.addModel("datainfo", {
            data: {
                name: "hello"
            }
        });
        this.registerData();
    }
});
var _cls = JSB.create("controller.example");
setTimeout(function () {
    _cls.setModel("datainfo", {
        data: {
            name: "helloworld"
        }
    });
}, 1000);

registerEvent()

自動對應符合attribute的html dom 註冊事件,必須要先setRoot

Attribute
  • jsb-event="event:callback"

    event:對應jQuery所支援的事件

    callback:對應物件的要接收callback的function

Example
編輯範例
...
<div id="controller-test">
	<div jsb-event="click:_click_cb">button</div>
</div>
...
JSB.cls("controller.example", {
    plugins:["jsborn.plugin.controller"],
    initialize: function(options) {
        this.setRoot("#controller-test");
        this.registerEvent();
    },
    _click_cb:function(){
        alert("_click_cb");
    }
});
JSB.create("controller.example");

select()

會用jQuery取得物件setRoot綁定的dom

Returns
jQuery Selector

setRoot(id)

對物件綁定一個dom的控制範圍

Parameters
  • id : (String/jQuery Selectors)

    可以是#id .cssjQuery('id')

Returns
Misc

編輯範例
...
<div id="controller-test">
	DOM
</div>
...
JSB.cls("controller.example", {
    plugins:["jsborn.plugin.controller"],
    initialize: function(options) {
        this.setRoot("#controller-test");
        console.log(this.getRoot());
        console.log(this.select());
    }
});
JSB.create("controller.example");

Events

Controller Events

Name
controller-create(jsb_class,element)

registerClass成功建立物件時將會觸發。

Parameters
  • jsb_class : (Class)

    建立的物件

  • element : (Element)

    綁定的DOM

Method

Model Method

Name
addModel(modelname,data)

新增一個資料模組

Parameters
  • modelname : (String)

    資料模組的名字

  • data : (Object)

    資料模組的資料

Returns
Class

delModel(modelname)

刪除指定名稱的資料模組

Parameters
  • modelname : (String)

    資料模組的名字

Returns
Class

getModel(modelname)

取得指定名稱的資料模組

Parameters
  • modelname : (String)

    資料模組的名字

Returns
Class

getModelData()

取得物件內所有的的資料模組

Returns
Array

setModel(modelname,data)

更新指定名稱的資料模組

Parameters
  • modelname : (String)

    資料模組的名字

  • data : (Object)

    更新的資料

Dispatch Event / 觸發事件
model-add
model-del
model-modify

Returns
Array

Events

Model Events

Name
model-add(jq_event,jsb_class,data)

當資料模組原有的值被新增資料時觸發。

Parameters
  • jq_event : (jQuery Event)

    jQuery Event 物件

  • jsb_class : (Class)

    物件本身

  • data : (Object)

    新增的值

model-add(jq_event,jsb_class,data)

當資料模組原有的值被刪除時觸發。

Parameters
  • jq_event : (jQuery Event)

    jQuery Event 物件

  • jsb_class : (Class)

    物件本身

  • data : (Object)

    刪除的值

model-modify(jq_event,jsb_class,data)

當資料模組原有的值被修改時觸發。

Parameters
  • jq_event : (jQuery Event)

    jQuery Event 物件

  • jsb_class : (Class)

    物件本身

  • data : (Object)

    修改的值

#
1 物件支援無限繼承,如:A 繼承 B 繼承 C 繼承 ... N
2 物件不支援多重繼承,主因是會造成不容易管理,尤其是JS本身的特性。
3 子層會將父層物件函式都會被繼承下來,一樣的函式則會被子層覆蓋,而物件Options等則不會被繼承。
4 繼承的物件若沒有事先載入,則會按照物件名字搜尋,並且載入。載入失敗則會報錯。詳細可以見import
5 繼承時,物件可以在initialize時呼叫SUPER(),讓父層先進行初始化
6 物件如果沒有呼叫SUPER(),則物件initialize後父層才會進行初始化
7 繼承和插件的差別在於一個是自己寫,一個是第三方提供,管理上的差別。

import 有點類似其他程式語言內的includeimport等功能,主要是載入物件需要用到的.js檔案,並將.js內的物件註冊起來。

物件被初始化的時候,該物件設定的imports檔案才會執行載入。

如果已經在html內已加入如:<script src="./source/org/jsborn/test.js"></script>import發現一樣的檔案會自動跳過。


若需要自訂import載入位置,例如: /?src=jsborn_core_channel.js/jsborn_core_channel.js

可以使用 importSetup 內的 parserURL

JSB.setConfig({
	importSetup:{
		parserURL:function(url){
			var _str_url = url;
			//DO SOMETHING!
			return _str_url;
		}
	}
});

import 支援同時載入多個檔案,有3種解析方式。如果要修改可以用 JSB.setConfig 設定。

# 方式 說明
1 物件名稱

如:org.jsborn.testimport會將該名稱變成org/jsborn/test.js,在按照JSB config的importSetup內的source來組合路徑。

如果載入JSBorn內建的檔案如:jsborn.core.channel,則會採用importSetup內的library變數來組合路徑。

詳細請看JSB setConfig 的 importSetup

2 相對路徑

import支援org/jsborn/test.js相對路徑。

3 絕對路徑

import支援http://domain.com/org/jsborn/test.js絕對路徑。

import有一個對絕對路徑的限制是不能遠端讀取js檔案,只能載入同一個網域的js。

JSB.setConfig({
	importSetup:{
		library:"/assets/library/",
		source:"/assets/source/"
	}
});

JSB.cls("org.jsborn.test", {

	imports:[
		//最後這檔案會解析成:/assets/library/jsborn/core/channel.js
		"jsborn.core.channel",
		//最後這檔案會解析成:/assets/source/org/mysource/model.js
		"org.mysource.model",
		//維持現狀
		"org/mysource/view.js",
		//維持現狀
		"http://domain.com/asset/source/org/mysource/test.js"
	],

	initialize:function(){

	}

});