端框架实践和总结

端框架实践和总结

Transcript

1. 前端框架 实践和总结 单东林&齐继超&郑欣 shandl@asiainfo-linkage.com UED分享 · 交流 http://cssrain.github.io
2. 一，前端开发的现状
3.  浏览器&终端层面 浏览器&终端对代码的解析存在着或大或小的差异。  技术层面 每个开发人员都有自己的解决方案。  团队合作层面 代码丌停的打补丁，最后没人愿意维护别人的代码。 前端开发现状
4. 二，前端框架的目的
5. 精简，重用，有序 精简 的代码，有利于客户端快速下载。 重用 可以让代码更易于精简，同时有助于提升开发速度和 团队协作效率； 有序 可以让我们更清晰的组织代码，输出统一且高质量的 代码，使代码易于维护。
6. 三，前端框架的规划
7. 前端框架的分类 适用于Web网页… G3版 Web版 适用于手机，平板 等智能终端…
8. 前端框架的总体思路 模板 + JSON = HTML 特定格式的 HTML模板 + 模板 解析引擎 G3版：jQuery + jtemplate Web版： handlebars 前端 组件
9. 前端框架的组件 前端 组件 Web 组件 G3 组件 表格（Grid） 表单（Form） 树（Tree） 选项卡（Tab） 窗口（Window） 菜单（Menu） 伸缩栏（Accorndion） 报表（Charts） 日期（DatePicker） 日历（Calendar）…… 等待组件（Loading） 选择组件（ActionSheet，picker） 导航标签（Tabs） 滚动条（Scroll） 登陆（loginControl） 信息提示（Alert，confirm等） 旋转木马（Carousel） 开关组件（Switch） ……
10. 前端框架的目录结构 lib / ajaxform / 2.9.5 / jquery.form.js lib / 插件名 / 版本号 / 脚本名+后缀JS
11. 四，Web前端框架的实践
12. 表格Grid-效果图
13. 表格Grid-前端 HTML： <table id="grid"></table> JS ： $('#grid').omGrid({ dataSource : 'res/data/sp-doing-grid.json', colModel : [ {header : 'ID', name : 'id', width : 20, align : 'center'}, {header : '设备类型', name : 'label', width : 50, align : 'center'}, {header : '创建人', name : 'createName', align : 'left', width : 50}, {header : '创建时间', name : 'cDate', align : 'left', width : 80} ] });
14. 表格Grid-后端 JSON： { "rows":[ {“id”:1,“type”:“1”,“label”:“LED“ … }, {“id”:1,“type”:“1”,“label”:“LED“ … }, {“id”:1,“type”:“1”,“label”:“LED“ … }, {“id”:1,“type”:“1”,“label”:“LED“ … } ], "total":16 }
15. 树Tree-效果图
16. 树Tree-前端 HTML： <ul id="mytree"></ul> JS ： $('#mytree').omTree ({ dataSource : 'res/data/sp-tree.json', showCheckbox: true, onBeforeExpand : function(node){ …… } });
17. 树Tree-后端 JSON： [ {"hasChildren":true,"id":"n1",text":"宝山路营业厅1"}, {"hasChildren":true,"id":"n2",text":"宝山路营业厅2"}, {"hasChildren":true,"id":"n3","pid":"","text":"宝山路营业厅3"}, {"hasChildren":true,"id":"n4","pid":"","text":"宝山路营业厅4"} ]
18. 窗口Widnow-效果图
19. 窗口Widnow- 前端 JS： art.dialog.open( „ http://yoururl.jsp?a=1&b=2 ‟ );
20. 日期DatePicker-效果图
21. 日期DatePicker- - 前端 JS： <input type=“text” onfocus=“WdatePicker()” class="Wdate " name="omStartDate" />
22. 表单Form-效果图
23. 表单Form - 前端 //表单验证 var v = $("#atmForm").validate({ rules: { playContentTitle: {required: true}, playContent: {required: true}, …… }, messages: { playContentTitle: {required: '标题不能为空！'}, playContent: {required: '播放内容不能为空！'}, …… }, });
24. 表单Form - 前端 //插件会以ajax方式提交数据，格式类似 ：uname=1&pword=2 $("#atmForm").ajaxSubmit({ beforeSubmit:function(){// 提交前 }, success:function(){// 提交成功 }, error:function(){// 提交失败 } });
25. 文件上传- 前端 HTML： <div id="swfupload-control" > <input type="button" id="button" /> </div> JS: $('#swfupload-control').swfupload({ upload_url: "upload.php", file_size_limit : "10240", file_types : "*.*“ })
26. 五，G3前端框架的实践
27. 等待组件 Loading – 分类 等待组件分为：  遮盖层等待控件 loadingBox；  容器内的等待控件 loadingContainer； 1. loadingBox 即通过使用一个遮盖层盖住整个window，然后弹出一个 box，显示等待信息。多用于整个页面跳转的时候，防止 可以防止用户进行误操作。 2. loadingContainer 即讲一个loading组件放入一个dom容器，在该容器内进 行loading组件的显示隐藏。多用于ajax局部刷新容器内容 的时候使用，提高用户体验。
28. 遮蔽层等待组件 loadingBox – 前端 使用方法 var loading = new $.loadingBox(message); 默认显示的提示文字是“Loading…”，可以通过传 message（选填）来控制loading控件显示的提示文字。
29. 容器内的等待组件 loadingContainer – 前端 使用方法 var loading = new $.loadingInContainer(container, message); container是必须的参数，设置该等待控件是放置在那个容器中。 默认显示的提示文字是“Loading…”，可以通过传入 message（选填）来控制loading控件显示的提示文字。
30. 数据选择组件 picker – 前端 使用方法 var picker = new $.picker(data, fn); data（必填）用于加载数据，可加载多个数据列表，并设定列表 所占的宽度及样式，其中宽度可以使用“80%”、“80px”，也 可以使用类似-webkit-box-flex的比例算法。 fn（选填）用于执行选择数据后的回调函数, 可以获取传回的选择 结果，多项数据列表传回的是一个数组 使用实例： var picker = new $.picker([ { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], width: “80%” }, { data: ["A", "F", "B", "I", "U", "W", "N", "C", "M"], css: “text-align: left”} ], function(params) { //todo something for params });
31. 数据选择组件 picker – 效果 注：日期选择控件也可以使用picker组件进行自定义实现
32. 导航标签组件 tabs – 前端效果 使用方法$(dom).tabs(tabList, fn, style, pressedIndex); $("#tabs").tabs(["Simple", "Sort", "Grouped"], function(i, oldIndex) { // to do something }, "width: 80%", 0);
33. 滚动条组件 scroll – 前端效果 使用方法$(dom).scroll(options); 该组件会自动寻找dom下包含class=“scroll”的节点，并 为它里面的内容添加一个滚动条。 默认添加的是纵向的滚动条，如果需要使用横向滚动条， 则写法如下： $("#tabs"). scroll({hScroll: true, hScrollbar: true});
34. 登陆组件 loginControl – 前端 使用方法$.loginControl(container, options); Container（必填），设置该登陆控件是放置在哪个容 器中。而该容器则需要由用户自己设定所在的位置。 options（选填），其中包含了用户名输入框的属性， 密码输入框的属性，登陆时的提示信息，及登陆操作时的 ajax参数。 $.loginControl($(“#login”), { username: {inputType: “tel”, maxlength: “11”}, password: {placeholder: “请输入密码”}, message: “正在登陆，请稍候…”, ajax: { url: “…”, success: function(){…}} });
35. 登陆组件 loginControl – 效果
36. 信息提示 messageBox – 分类 信息提示组件分为：  提示控件 alert；  确认控件 confirm；  信息输入控件 prompt； 1. alert 等同于浏览器的alert事件，加入了iphone的样式。 2. confirm 等同于浏览器的confirm事件。 2. prompt 等同于浏览器的prompt事件，并加入了多种不同输入框 类型的选择。
37. 提示控件 alert – 前端 使用方法 $.alert(message, completeCallback, title, buttonLabel); message（必填）用于需要显示的提示文字， completeCallback（选填）则是点击提示框按钮后触发的callback 事件， title（选填）用于显示提示框的标题，默认显示“提示”， buttonLabel（选填）用于显示提示框按钮的文字
38. 确认控件 confirm – 前端 使用方法 $.confirm (message, resultCallback, title, buttonLabels); message（必填）用于需要显示的提示文字， resultCallback（选填）则是点击确认框确定按钮后触发的 callback事件， title（选填）用于显示确认框的标题， buttonLabels（选填）用于显示确认框按钮的文字，这里有两 个按钮，可以用字符串的形式传入，例如“确定，取消”；也 可以用数组的形式，例如["取消", "确定"]
39. 确认控件 confirm– 实例 使用实例： $.confirm('The quick brown fox jumped over the lazy dog.', function(){ //todo something }, “确认”, “取消,确认”);
40. 信息输入控件 prompt – 前端 使用方法 $.prompt (message, resultCallback, inputType, title, buttonLabels); message（必填）用于需要显示的提示文字， resultCallback（选填）则是点击prompt框确定按钮后触发的 callback事件，此处可通过调用返回的text参数获取输入框的输 入内容， inputType（选填）显示输入框的类型，包括"text", "password", "tel", "textarea"，默认为“test”， title（选填）用于显示prompt框的标题， buttonLabels（选填）用于显示prompt框按钮的文字，这里有 两个按钮，可以用字符串的形式传入，例如“确定，取消”； 也可以用数组的形式，例如["取消", "确定"]
41. 信息输入控件 prompt – 实例 使用实例： $.prompt('The quick brown fox jumped over the lazy dog. ', function(text) { //todo something for text }, "password", "输入密码");
42. 操作选择组件 actionsheet – 前端 使用方法 $.actionSheet(data); 通过B/S实现操作选择功能。 data（必填）用于加载标题，及多项操作的名称，样式类型，和回调函 数 使用实例： $.actionSheet({ title: "Move to", list: [ { value: "Compoundee", action: function() { alert($(this).text()) } }, { value: "Noodles", action: function() { alert($(this).text()) } }, { value: "More ...", action: function() { alert($(this).text()) } }, { value: "Trash", highlight: true, action: function() { alert($(this).text()) } } ] }); 其中highlight: true表示该操作按钮显示高亮，用于重点突出。
43. 操作选择组件 actionsheet – 效果
44. 开关组件 switch – 前端效果 使用方法：$(dom).switch(state, callback); 使用实例： $("#others div.js-switch").switch("off");
45. G3前端框架的实践中的问题  G3终端不同尺寸屏幕导致的样式问题。 解决办法：使用<meta>中的属性进行等比缩放，并配合 css3中的@media属性进行不同尺寸，不同分辨率的样式分类 处理。  在android 3.2系统的平板上，通过jquery获取json和html的 方法，以及动态添加js的方法都存在问题。 解决办法： 获取json和html可以使用IMUI的$. getFileDate方 法进行获取，动态添加js需要用原生的js代码进行添加。  android原生的纵向滚动条跟js实现的横向滚动条冲突的问题。 解决办法： 在js的滚动条实现中加入上下左右滑动的判断。 如果是左右滑动则进行e.preventDefault()，执行js的滚动事件， 如果是上下滑动，则执行原生的滚动事件。
46. G3前端框架的总结 此G3框架既可以用于纯B/S的系统开发，也可以用于 C/S + B/S的开发模式。 目前参与开发的G3营业厅项目用的就是C/S + B/S的开 发模式。C/S负责历史记录和跳转动画，滚动条用的也是 原生态的。 在这样的项目中B/S框架的工作也就相对轻松，包含：  简单快捷的组件调用，实现项目的功能；  数据模板的加载；  动态加载css，js等功能； 目前的终端环境中，纯B/S的项目实现，还是存在很多 的限制。所以C/S + B/S的开发方式还是目前的主流。
47. Q&A Thanks