文档章节

SBind前端框架设计说明

BarZu
 BarZu
发布于 2016/09/11 19:56
字数 1928
阅读 74
收藏 0
点赞 0
评论 0

核心应用

代码预览

index.html

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

main.js

//定义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>

生成的html

<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]外的任何元素都无效。

支持委托的常用事件

| 事件名称 | 说明 | |:--|:--| | 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)

问题

  • 事件集中写在events上,不知道哪个dom元素绑定了事件,会不会给维护带来困难?

不会,事实上分离事件更利于维护,只要在事件后面加上扼要备注,对应的dom便一目了然。

events: {
    'click #goBack': 'goBack', //返回上一页面
    'click #submit': 'pay', //支付
    'input #telBox': 'filterNum' //电话只允许输入数字
}
  • 没有指令也算是一个完整的框架?

指令的功能无非就是绑定属性、事件和处理判断、循环,早期的前端模板引擎没有指令处理这些问题也毫不费力,SBind的模板语法算是复古写法。

  • 不配置路由表,维护时想查看有多少路由怎么办?

建议路由与对应view文件同名,这样看文件名就了解了。如果是自动化构建的应用,一次性注册所有SBind实例,可以输出SBind.routingTable查看所有路由。

大型应用

© 著作权归作者所有

共有 人打赏支持
BarZu
粉丝 10
博文 17
码字总数 10191
作品 3
广州
高级程序员
前端工程师如何与设计师合作?

原文出处:Chuckie Chang 如果你是前端,你可以给设计师提以下一些要求: 1.如果想要95%以上还原设计稿,你必须提供给设计师设计时的注意事项,当然如果设计师有前端功底,他的设计会考虑到更...

Chuckie Chang ⋅ 2015/11/01 ⋅ 0

Web 应用开发框架--s2jh4net

简介 集结最新主流时尚开源技术的面向互联网Web应用的整合前端门户站点、HTML5移动站点及后端管理系统一体的的基础开发框架,提供一个J2EE相关主流开源技术架构整合及一些企业应用基础通用功...

xautlx ⋅ 2015/05/28 ⋅ 9

xautlx/s2jh4net

项目简介 集结最新主流时尚开源技术的面向互联网Web应用的整合前端门户站点、HTMl5移动站点及后端管理系统一体的的基础开发框架,提供一个J2EE相关主流开源技术架构整合及一些企业应用基础通...

xautlx ⋅ 2015/03/04 ⋅ 0

用户动态设计说明之实践

@红薯 你好,想跟你请教个问题:看了你的用户动态设计说明后 我这边的这个查询还是没有良好的用到索引 我该如何改造 如图

jxzhoujian ⋅ 2012/09/26 ⋅ 4

用户评论内容,由mysql到mongodb的切换

最近我们做的项目准备将用户评论内容使用mongodb存储,但是不知道用mogodb比用mysql的分库分表到底有哪些优势,哪位大神最好能提供一下简单的设计说明一下。小弟非常疑惑如果没有事物,这样做...

轻裸小衫 ⋅ 2014/03/10 ⋅ 2

我要做一个教学用的画板软件。有兴趣的可联系我。QQ:945103301。

我有一个软件项目需要做。做一个教学用的画板软件。有兴趣的可联系我。QQ:945103301。 希望在开放的开发环境中进行。 网上这种免费的源代码资源应该是很多的。但不知哪些是可信呢? 而且代码...

liugb0414 ⋅ 2010/04/04 ⋅ 0

zbus-6.3.0 发布,轻量级 MQ,RPC 服务总线

zbus-6.3.0 发布了,主要改进内容包括: 1. 增加主从队列支持 2. 增加消息过滤机制,根据消息键值决定是否写入消息队列磁盘。 3. 增加不经过网络传输的JVM内部通讯优化的JvmBroker 4. 增加Z...

少帮主 ⋅ 2016/03/22 ⋅ 20

SpringMVC源码剖析(一)- 从抽象和接口说起

SpringMVC作为Struts2之后异军突起的一个表现层框架,正越来越流行,相信javaee的开发者们就算没使用过SpringMVC,也应该对其略有耳闻。我试图通过对SpringMVC的设计思想和源码实现的剖析,从...

相见欢 ⋅ 2012/12/29 ⋅ 38

SpringMVC源码剖析(一)- 从抽象和接口说起

SpringMVC作为Struts2之后异军突起的一个表现层框架,正越来越流行,相信JavaEE的开发者们就算没使用过SpringMVC,也应该对其略有耳闻。我试图通过对SpringMVC的设计思想和源码实现的剖析,从...

城固如春 ⋅ 2016/10/17 ⋅ 0

lucene 增量索引问题请教

@红薯 你好,想跟你请教个问题:看了您的 OSChina 的全文搜索设计说明 —— 索引过程 这篇文章,我初学java 用lucene建增量索引的功能,每次有新的文章发表,我就触发增量索引逻辑,为避免锁...

csyangshungang ⋅ 2013/03/21 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 这么好的姑娘都不要了啊

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @TigaPile :分享曾惜的单曲《讲真的》 《讲真的》- 曾惜 手机党少年们想听歌,请使劲儿戳(这里) @首席搬砖工程师 :怎样约女孩子出来吃饭,...

小小编辑 ⋅ 23分钟前 ⋅ 1

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部