BIN Framework- 前端APP JS框架

BIN Framework- 前端APP js框架

BIN是一个简单、轻量的前端JS框架，可用于Hybrid(结合Cordova框架) APP、SPA(Single Page Application)APP、MPA(Multiple Page Application) APP以及一般的网页开发。

工程结构和开发模式

从结构可以看出，采用BIN开发的项目能有良好的组织结构和模块划分能力，这对于工程管理是十分必要的。BIN采用的开发模式十分贴近传统的GUI开发，无论多么复杂的一个UI，都可以通过搭积木的方式，将一个一个UIView组合而成。所以如果你曾经做过PC桌面程序、Android、IOS等传统GUI的开发，BIN你已经熟悉了一大半。

BIN遵循MVC，OCP，KISS等原则，没有引入过多的模式和概念，保持简单但又足够强大！

框架特性

前后端分离

BIN的开发是一种类CS结构，前后端开发人员各自关注自己的业务开发，通过约定的API进行数据交互，BIN提供了API本地数据Mock模块，前端能够更方便独立于服务器进行开发和自测。

代码本地化

BIN模块管理和加载机制采用RequireJS，针对RequireJS提供了基于LocalStorage的本地化机制，对于业务代码，就可以考虑存放在本地，提升页面加载速度和用户体验使用的缓存策略:

强缓存:第三方库代码、BIN框架代码，经过合并混淆后，文件名加HASH；带ID的资源图片协商缓存(304):配置文件、带名称的资源图片本地缓存(LocalStorage):业务代码Tutorials本地化Tutorials无本地化Deamon本地化Deamon无本地化

自动构建

BIN提供了基于Gulp的自动构建，在工程发布时，一键处理混淆、合并、压缩、内嵌以及引用处理。

页面内嵌(Inline)+Deferred Loading+Progressive Render

在MPA和WEB页面开发中，为了避免页面加载时的白屏，BIN引入了页面内嵌（Inline）机制，在自动构建阶段，将页面内容（比如home.html）自动内嵌到引导页面（比如index.html）,在访问index.html时，即渲染出home.html的内容。然后通过DeferredLoading和ProgressiveRender逐次显示各个子View中的内容。整个页面加载过程和传统的GUI加载过程类似（显示无网络依赖的内容－>填充有网络依赖的内容。

Online TutorialsOnline Deamon

功能

View抽象，模拟原生开发模式一般页面 Pageview导航栏页面 NaviPageView下拉刷新页面 RefreshView列表页面 ListView指示器 IndicatorViewAlert框 AlertViewTab栏 TabBarViewSwipe页面 SwipeviewTab页面 TabView网络API模块网络缓存模块图片延迟加载数据中心模块，支持本地存储和会话存储本地API测试框架，支持完全无依赖服务器进行开发

安装

安装nodejs-BIN压缩包,参照demo开始你的应用开发

目录结构

bin : BIN 框架代码demo : 演示APPandroid-project : Android原生工程，用于打包Android APPios-project : IOS原生工程，用于打包IOS APPtools : 包含一些开发工具server : Web APP的模拟服务器，在本地开发时需要

demo

在Android手机上演示demo:1. 拷贝bin目录中内容到demo/bin目录。2. 拷贝demo目录内容到android-project/asserts/www目录下。3. 编译APK安装。

在IPhone手机上演示demo:1. 拷贝bin目录中内容到demo/bin目录。2. 拷贝demo目录内容到ios-project/www目录下。3. 编译IPK安装。

文档

Core

bin

bin是整个框架的命名空间，包含了可配置的Class结构(classConfig)，包含了全局的单件实例app,netManager,hudManager,debugManager,naviController,dataCenter。

配置文件

bin中的配置文件有globalConfig, requireConfig, classConfig,netLocalConfig。在bin/config中包含了这些配置文件的模板，实际应用中使用的是config目录下的。详细信息参见文件。

globalConfig.js 对应用的整体配置，包含global和runtime两类配置数据。global : 全局配置，通过bin.globalConfig获取，这里面是整个globalConfig里的内容runtime : 运行时配置，应用启动后，会根据global中runtime来选择对应的运行时配置，以方便我们不同版本的切换。requireConfig.js 对requirejs的整体配置classConfig.js 对bin类结构的配置，在这里面可以修改框架内部实际使用的类，已达到定制自己的类，比如Application，DataCenter…注意 : 该结构定义中不存在没有依赖关系，仅仅是一个结构关系，所以在requirejs的define中不要直接使用，而是在运行时使用。netLocalConfig.js 网络API本地数据测试配置

Application

Application是bin的应用基类，可通过classConfig中定制。

bin-Manager

bin中的所有ajaxhttp请求由netManager封装，netManager提供API抽象。netManager中提供四种策略(Policy)来定制网络处理的行为，bin提供了默认实现。CachePolicy : 网络缓存策略,配置网络请求的数据在客户端如何缓存+ NORMAL : 一直缓存在本地,直到超过maxCacheDuration(Config中配置)+ DURATION : 指定缓存的时间，过期后无效+ SESSION : APP期间一直有效，关闭后缓存失效+ USER_SESSION : 用户登陆期间有效，退出后失效CallbackPolicy : 网络回调策略，可在这里面添加在框架层面对请求的统一处理DebugPolicy : 网络本地数据测试策略SendCheckPolicy : 网络发送策略，处理网络请求在发送前的过滤逻辑+ ABORT_ON_REQUESTING : 同一个api请求，当已经存在请求，再次发送将会abort前一次请求+ REJECT_ON_REQUESTING : 同一个api请求，当已经存在请求，再次发送将会被reject，不能请求

doAPI(params) 进行一次api操作,params为ajax的参数,同时包含bin定义的参数params.options : bin api选项loading : 网络加载选项 默认为MODEL, true/false加载效果, MODEL表示同时添加模态效果, 网络请求同时，用户将不能进行UI操作。cache : 网络缓存选项 默认无, NORMAL/DURATION/SESSION/USER_SESSIONcacheDuration : 指定缓存的时间(ms), 当cache为DURATION时有效sendCheck : 网络发送选项 默认无, ABORT_ON_REQUESTING/REJECT_ON_REQUESTINGsetDebugPolicy(policy) 设置网络本地测试策略setCallbackPolicy(policy) 设置网络回调策略setCachePolicy(policy) 设置网络缓存策略setSendCheckPolicy(policy) 设置网络发送策略ajax(params) 发送ajax请求

bin.hudManager

bin中所有hud显示由hudManager提供，比如Alert，Status，Indicator。

startIndicator(options) 开始菊花图。options.model : 是否模态 true/false返回本次菊花图ID，供stopIndicator使用stopIndicator(indicatorID) 停止indicatorID指定的菊花图，如果没有指定，则完全取消菊花图。注意 : bin对于菊花图支持计数机制。showStatus(message) 显示悬浮信息alert(options) 显示对话框

bin.naviController

bin中提供了页面栈概念，由naviController完成。

push(name, pushData, options) 跳转到name指定页面name : 页面名字 pushData : 向新页面传递的数据，新页面可通过onViewPush获取options : 跳转效果参数，可选pop(count, popData, options) 返回指定级数(count)页面count : 返回的级数popData : 向返回的页面传递的数据，返回页面可通过onViewBack获取options : 跳转效果参数，可选popTo(name, popData, options) 返回到指定页面参数参照pop操作current() 获取当前页面的栈数据，返回为{name, view}name : 页面名字view : 页面对象getView(name) 获取指定页面的栈数据，返回结构同current()startWith(name) 以name指定的新页面作为根页面，原来的页面栈将被清空

bin.dataCenter

提供数据中心封装，包含了本地持久化和本地会话，用户持久化和用户会话这几种数据库抽象。提供用户数据分离功能。

bin.debugManager

在框架上提供调试功能，可参见应用中悬浮调试按钮，可在应用中直接查看console.log, console.info,console.error信息，方便调试。

UI

View

View是BIN中最基本的UI Controller，包含了HTML中某一个Element对应的逻辑，在ios中类似View Controller。

constructor(options) 构造函数options.html : 从html构造view,html应该包含一个根Elementoptions.elem : 从已有Element构造view,elem可以是DOM或者JQuery节点options.el : 从已有Element构造view,elem可以是DOM或者JQuery节点，这种方式不会触发render和show的调用注意：BIN中的view只能通过这几种方式来构造，三种方式是互斥的genHTML() 为view动态构造HTML结构函数preGenHTML() genHTML的前事件函数posGenHTML() genHTML的后事件函数asyncPosGenHTML() posGenHTML的异步版本，对于需要依赖layout过后的属性(比如width,height)，在该函数中处理show() 显示该viewhide() 隐藏该viewremove() 移除该view,移除后，view在html中对一个的节点也会被移除onShow() view在显示时被调用onHide() view在隐藏时被调用onRemove() view在移除时被调用，一些清理的逻辑在这里处理isShow() 返回view当前是否显示中$(sel, fromSel) 在view中从fromSel节点查询sel节点，并返回该节点，sel和fromSel为JQueryselector。如果fromSel为空，则从当前view的根节点查询；如果sel为空，返回view的根节点$html(sel, html) 如果html不为空，对sel节点设置html；如果html为空，则返回sel节点的html；如果sel为空，则对根节点操作$text(sel, html) 参照$html，不同点在于调用节点的text$append(sel, elem) 将elem插入到sel节点的最后$fragment(sel, fromSel) 对$(sel, fromSel)创建一个Fragment，对Fragment操作完后需要调用setup将实际内容append到$(sel,fromSel)节点

PageView

PageView代表一个主页面，可具有过场动画；PageView从View继承

NaviPageView

NaviPageView代表一个具有导航栏的主页面；NaviPageView从Page继承

开发和其他

使用自己熟悉的一个编辑器，比如: Sublime，Notepad++，vim …使用Chrome做模拟器和调试器。由于PC和手机WebKit的差异，需要在手机端进行测试。在Android手机上，为了避开不同手机在WebKit上的兼容性，BIN使用了Crosswalk内核，优点是：Crosswalk性能更好，不存在兼容性问题；缺点是：编译的APK会大10几MB；Crosswalk有lite版本，但是lite版本不稳定。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。