编程实现的对比，编码风格，编码思想

编程实现的对比，编码风格，编码思想

讲述，举例说明同一功能的不同实现写法的优劣，根据具体问题，自己选择对应的编码实现，具体问题，具体分析，具体选择

html前端实现时，复杂前端页面的处理实现

如一个功能（显示订单页面），不同角色（订单创建者=》创建生成订单数据，订单审批者=》审核订单数据，订单分配者=》分配订单给处理人员，订单处理者=》处理订单），业务时序如上
实现一：用一个页面order.html来实现四种角色访问显示控制，即四种角色都用同一个order.html，在order.html通过各种变量标识来控制哪个按钮给哪个角色看，哪个div块给哪个角色看。。。
实现二：为4个角色建立4个order_XXX.html页面，通过角色去调用不同页面，页面代码里也就不会有很多判断控制显示了
实现一=》当修改数据字段名时，只需修改一个html；多个角色共用同一个html，那么这个html会有很多根据角色判断显示；html代码量多，修改难；一个页面怎么流水线啊，代码冲突啊；
实现二=》当修改数据字段名时，需要修改多个html页面；一个角色对应一个html；html代码量少，修改简单；多个页面可以同时分给多个人并发开发；流水线工作；

html前端中使用<template>标签来创建模板

其实就是html前端的组件化的一种实现方法，其他实现方法有JSX，用JavaScript框架或工具来进行交互；
上面<template> 或 JSX是基础技术
下面介绍已经成型的框架工具
如JQuery+JQUI；JQuery+EasyUI；React+AWT；。。。

JavaScript中定义公共方法/常用方法

常用功能代码的复用，如表单验证，表单数据转为json数据。。。

前端javascript与html的绑定

javascript要获取html dom才能控制前端交互，那么javascript用什么样的选择器来获取呢（原生的document.getElementByXX()，新的浏览器支持的原生document.querySelect()，JQuery提供的$(“XX”) 等等都是同一个概念不同的工具支持而已 ），我们讨论的是选择器用那种方式获取
我自己的习惯是
普通的元素如<div>,<a>,<form> 等非表单元素用 id来标识并获取；（id在页面中标识唯一）
表单元素如<input>,<select>,<checkbox> 等等元素用 name来标识获取；（因为name属性是表单元素独有的属性）；
可以使用 id和name同时使用来获取不同form表单下的具有同属性值name的元素；
class尽量不要用于与javascript关联获取（即通过class来获取元素），但还是经常有javascript来获取元素（如全选的checkbox，相同的class绑定同一javascript方法 等等），看看有哪些方法来代替这种写法
相同的class绑定同一javascript方法 =》 在元素上html中添加事件（<a href=”javascript:void(0);” οnclick=”function1()”>点击调用function1方法</a>）
其他的就只能在class属性值命名规范下，通过代码规范文档通知其他人，如跟javascript相关的用 js-XXX。这样做是为了防止css编写人员与javascript编写人员冲突

方法命名与与方法语义

根据Java规范，同一概念的方法用相同方法名（同一方法名会有不同实现=》将方法名在接口中声明）；
不同概念的方法当然用不同方法名（一个方法只做一件具体的专业的粒度小的事，编程原则）；
不关那种编程语言都同理

前端html，css，JavaScript文件的设计

前端也是按模块去设计的，有一级模块（目录），二级模块（目录）。。。
粒度设计可以精细到某个页面，也可以粗一点到某个模块
如用户模块（对应用户表）user
细一点设计可以分
userManage.html（用户管理页面，就是列表）+userManage.css+userManage.js，
addUser.html（添加用户页面）+addUser.css+addUser.js，
editUser.html（编辑用户页面）+editUser.css+editUser.js，
粗一点设计可以分
userManage.html（用户管理页面，就是列表）+user.css+userManage.js，
addUser.html（添加用户页面）+user.css+userManage.js，
editUser.html（编辑用户页面）+user.css+userManage.js，
其实这要来到代码复用（用粗一点设计）和文件设计的问题（用细一点设计）

前端表单提交设计

用name属性来标识，然后JavaScript获取某个表单下的所有表单元素数据，ajax与后端通讯=》这里“JavaScript获取某个表单下的所有表单元素数据” 可以写出一个公共方法，就是遍历某个表单下的所有含有name属性的元素，然后形成一个json数据（这里是一维的，复杂的json数据那就自己拿表单数据写入json中吧）

前后端数据交互统一为json

对于图片，文件这种数据，那就先上传文件，获取后端返回存放这个文件后的地址标识，然后提交表单时就提交这个地址标识，有地址标识就能获取这个文件嘛