在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:bingoJS开源软件地址:https://gitee.com/bingoJS/bingoJS开源软件介绍:库包下载:https://git.oschina.net/bingoJS/bingoJS/blob/master/bingo.full.zip Demo:https://git.oschina.net/bingoJS/bingoJS/tree/master/demo 更新记录:http://git.oschina.net/bingoJS/bingoJS/blob/master/history.md BingoJS技术交流群:172982805 ####1、关于bingoJSbingoJS是一个前端MV*开发框架, 致力打造最完善的浏览端JS开发框架,在双向绑定方面提取现有MV框架各种优点,并将模块化开发、按需动态加载、依赖注入、服务化等技术集成到框架,而且对现在所有框架都没任何冲突顺利兼容,让你只需简单配置就可以只关注自己业务代码的编写。 ####2、双向绑定jQuery操作dom开发和双向绑定都是一种手段,而双向绑定可以让html与JS很好分离开来,而不用直接操作dom层,让JS专心处理业务代码(组装显示业务数据)。比如业务系统中会存在大量数据收集和提交,这些场景都非合适用绑定手段,看下面例子实现: <div bg-action="action1"> 名字:<input bg-model="datas.name" /> 年龄:<input bg-model="datas.age" /> <button bg-click="save">保存</button></div><script> var action1 = bingo.action(function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; });</script> ####3、提供MV开发模式MVC是一种开发模式,是一种代码组织和规划方式,可以对开发规范和思维的统一,对前端工程迭代,后期维护,交付变得更容易;跟现有前端MV框架比,bingoJS拥有最完善MV开发模式,可以说没有任何配置就可以实现正常的业务开发: 3.1、支持现在常见的MVVM开发,你可以简单定义一个action进行绑定:<div bg-action="action1"> 名字:<input bg-model="datas.name" /> 年龄:<input bg-model="datas.age" /> <button bg-click="save">保存</button></div><script> var action1 = bingo.action(function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; });</script> 3.2、支持纯前端MV开发,这时可以认为你服务端代码和浏览端代码完全隔离,即retful+前端MV:<div bg-action="action/demo/user"> 名字:<input bg-model="datas.name" /> 年龄:<input bg-model="datas.age" /> <button bg-click="save">保存</button></div><script> bingo.module('demo').action('userInfo', function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; });</script> 如果上面代码所示,html与js代码是放一块的,如果感觉比较混乱和后期维护难,我们还可以将它们分开来,框架已经会自动帮你做这些识别: view/demo/user文件 <div bg-action="action/demo/user"> 名字:<input bg-model="datas.name" /> 年龄:<input bg-model="datas.age" /> <button bg-click="save">保存</button></div> action/demo/user文件 bingo.module('demo').action('userInfo', function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; }); 你会发现它们的内容是没有任何改变,但完全可以将它们分离开来,这里还有一个route url概念,如果有兴趣可以去看说明文档 3.3、支持纯前端MVC开发,这时前端MV已经不能满足你划分业务复杂度,还需再一步细分,即retful+前端MVC:view/demo/user/list文件 <div bg-action="action/demo/user/info"> 名字:<input bg-model="datas.name" /> 年龄:<input bg-model="datas.age" /> <button bg-click="save">保存</button></div> action/demo/user文件 bingo.module('demo').controller('user', function () { bingo.action('list', function ($view, $ajax) { }); bingo.action('info', function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; });});
####4、按需加载
有现有的JS库,如果要合并打包也就最低限度设置即可。 //可以按需引用bingo.using('scripts/plugins/jquery.transit.min.js');bingo.using('services/userService');bingo.module('demo').controller('user', function () { bingo.action('list', function ($view, $ajax) { }); bingo.action('info', function ($view, $ajax) { var datas = { name: '', age: '' }; $view.save = function () { $ajax('/rest/save').param(datas).post(); }; });}); 可以看见,它们组织思维跟后端代码组织思维很相像,这样开发人员很简单就能过度来开发; ####5、兼容性在JS方面可以说完全兼容到IE6;在dom管理方除了核心编译部分用了原生外,其它都几乎依赖jQuery写的,所以取决于jQuery版本的兼容;```这里输入代码 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论