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查看全部路由。跨域

SBind前端框架设计说明

核心应用

代码预览

说明

开始

选项

路由

组件

模板视图

事件

数据模型

问题

大型应用