SBind前端框架設計說明

時間 2019-12-24

標籤 sbind 前端框架設計說明简体版

原文原文鏈接

核心應用

代碼預覽

index.htmljavascript

<html>
    <head>
        <title>SBind</title>
        <script src="sbind.js"></script>
    </head>
    <body>
        <script>
        SBind.boot();   //啓動SBind程序
        history.hash = "main"; //跳到默認路由
        </script>
    </body>
</html>

main.jshtml

//定義main視圖
SBind({
    route: 'main',
    id: 'main',
    events: {
        'click .goBack': 'goBack' //返回到上一視圖
    },
    model: {
        title: 'SBind框架演示',
        text: '測試內容'
    },
    template: '<component:header><div>{{= text }}</div>',
    onShow: function() {
        console.log('Hello World!');
    },
    goBack: function() {
        history.back();
    }
});

//定義header組件
SBind({
    id: 'header',
    events: {
        'click #goDetail': 'goDetail' //跳到詳細說明頁
    },
    model: {
        goback: '返回',
        detail: '詳細'
    },
    template: './header.html',
    goDetail: function() {
        SBind.navigate('detail');
    }
});

header.html前端

<div>
    <div class="goBack">{{- goback }}</div>
    <h1>{{- title }}</h1>
    <div id="goDetail">{{- detail }}</div>
</div>

生成的htmlvue

<html>
    <head>
        <title>SBind</title>
        <script src="sbind.js"></script>
    </head>
    <body>
        <script>
        SBind.boot();   //啓動SBind程序
        history.hash = "main"; //跳到默認路由
        </script>
        <div id="sbind_views">
            <div sb-route="main" id="mian">
                <div sb-component="header">
                    <div class="goBack">返回</div>
                    <h1>SBind框架演示</h1>
                    <div id="goDetail">詳細</div>
                </div>
                <div>測試內容</div>
            </div>
        </div>
    </body>
</html>

說明

開始

入口文件index.html，在head引入sbind.js，在body使用SBind.boot()啓動程序，在執行boot以前可以使用SBind.config配置一些選項，選項內容待設計。改變history.hash跳轉頁面，做爲默認路由設置。
引入第三方插件，如jQuery，簡單頁面可以使用普通script標籤引入，大型應用可以使用gulp等自動化構建工具用import導入
腳本編寫，給SBind傳入一個對象，全部工做都是給SBind傳入的對象配置選項。
生成的dom元素上帶有sb-route、sb-component等屬性，方便調試排錯。

選項

鍵名	類型	備註
id	String	惟一標識符，做爲Component必填
route	String	路由，做爲View必填
events	Object	定義事件
model	Object	定義數據
template	String	定義模板
onCreate	Function	SBind實例建立完成時執行一次
onInit	Function	初次路由到達，對應view添加到html時執行一次
onShow	Function	每次路由到達時執行
onHide	Function	每次從當前路由離開時執行

路由

hash改變爲#main時，SBind自動查找views[main]，若是沒有對應實例則查找main.js加載並執行。執行過main.js後保存爲views[main]。
以script、script[type=text/html]、link[rel=sheetstyle]形式加載腳本、模板、樣式，不使用xhr，避開跨域。
禁止路由環路，例：A->B->C->D->B，歷史記錄刪除C、D，在B執行back直接回A而不是D

組件

帶有route的SBind對象最終產物稱爲view實例，只有id的稱爲component，能夠將view視爲特殊的component。路由改變時對應的view會被插到body>div#sbind_views並執行onShow。
view的內容由對應的template編譯而成，若是沒有顯式指定template，程序自動查找與腳本名稱對應的html文件。例：main.js會查找main.html。
component依賴view存在，即component的配置要寫在view的文件裏，不然不能被加載到。除非使用自動化構建，該內容將在大型應用構建詳細說明。
只在模板裏使用<component:header>便可自動查找相應組件，不須要像vue、angular等須要手動傳入組件。
組件繼承，使用parent:"parentId"指定父組件，方法數據事件所有繼承，原型鏈指向父組件方式實現。

模板視圖

模板不使用v-for，v-on，ng-repeat，ms-attr等指令，所有使用{{}}語法，如{{each items as item}}，<div class="{{= active }}">等
{{= data }}雙向，輸出字符串，至關於innerText
{{- data }}單向，輸出字符串
{{# data }}雙向，輸出html，至關於innerHTML
{{+ data }}單向，輸出html
{{if}}{{/if}}條件
{{each items as item i}}循環
{{ }}運行任意javascript代碼
支持管道過濾器，表達式運算
模板解釋引擎須要處理的類型：文本（textContent）、dom節點（Node)、類（className）、屬性值（Attribute）、表單輸入（input/select/textarea）、數組列表（Array）

<ul>
    <!-- 循環 -->
    {{each items as item i}}
    <li data-id="{{- item.id | filter}}">
        <div>{{= item.title }}</div>
        
        <!-- 嵌套循環 -->
        {{each item as it j}}
        <p>{{= it.text }}</p>
        {{/each}}
    </li>
    {{/each}}
</ul>
<div class="toast {{= showClass}}">
    {{# tips }}
</div>
{{if isButton}}<button>肯定</button>{{/if}}

事件

事件events，使用代理的方式綁定到view上，任憑view裏的內容怎樣變化都能監聽到。定義方式參考butterfly，鍵名爲事件加選擇器，值爲字符串或函數，當爲字符串時，自動匹配view對應的方法。
組件內定義的事件僅在該組件內生效，層級包含關係，例如view[main]定義的點擊事件，因爲component[header]在view[main]裏，所以在view[main]和component[header]裏匹配的元素都會響應該點擊事件，而在compontent[header]裏定義的事件，點擊compontent[header]外的任何元素都無效。

支持委託的經常使用事件java

事件名稱	說明
click	須要相似fastclick事件庫處理300ms延遲，fastclick原理是在touchend使用stopImmediatePropagation阻止將要執行的click事件，並使用new Event建立點擊事件促使當即執行。可根據其原理將300ms延遲提速功能寫入SBind核心庫，並收集現已不存在300ms問題的userAgent
focusin<br>focusout	火狐瀏覽器不支持該組事件，webapp多數webkit內核，可不考慮火狐。若是須要支持火狐，可在目標dom元素上綁定focus/blur事件，這兩個事件不支持冒泡，即沒法委託
input	使用input事件，輸入中文會遇到中文未進輸入框，鍵碼先上屏的問題，可監聽compositionstart和compositionend處理中文輸入
touchstart<br>touchmove<br>touchend	該組事件通常組合使用，擴展爲長按，左劃，右劃等事件
keydown<br>keyup<br>keypress	通常使用input代替該組事件
change	各大主流瀏覽器都支持
mousedown<br>mousemove<br>mouseup<br>mouseover	IOS手機不支持該組事件，移動端沒有鼠標，SBind主要面向手機市場，可忽略該組事件的應用

數據模型

數據繼承，header組件沒有定義title，在渲染時，模板找不到title，會自動向上搜索，這一特性方便複用組件。
雙向綁定算法，先解釋成抽象樹，賦值，對dom做標記，不綁定dom。model數據變化時再查找dom綁定並處理。按需綁定可很大程度減小編譯時間。

（PS：之前用PHP作的CMS系統處理靜態文件也使用按需處理的方式，很大程度的下降服務器IO操做。傳統的CMS系統用戶每次保存數據都會自動生成靜態html，使用404方式可在訪客訪問時才生成html，即請求訪問時系統攔截404並將靜態url轉爲動態url，並生成html返回給訪客，若是動態url也404纔給訪客返回404）web

問題

事件集中寫在events上，不知道哪一個dom元素綁定了事件，會不會給維護帶來困難？

不會，事實上分離事件更利於維護，只要在事件後面加上扼要備註，對應的dom便一目瞭然。算法

events: {
    'click #goBack': 'goBack', //返回上一頁面
    'click #submit': 'pay', //支付
    'input #telBox': 'filterNum' //電話只容許輸入數字
}

沒有指令也算是一個完整的框架？

指令的功能無非就是綁定屬性、事件和處理判斷、循環，早期的前端模板引擎沒有指令處理這些問題也絕不費力，SBind的模板語法算是復古寫法。gulp

不配置路由表，維護時想查看有多少路由怎麼辦？

建議路由與對應view文件同名，這樣看文件名就瞭解了。若是是自動化構建的應用，一次性註冊全部SBind實例，能夠輸出SBind.routingTable查看全部路由。跨域

大型應用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。