前端系统设计
前端三大件:html、css、js,万变不离其中,不管我们使用的是vue、react、angular还是其他什么,都是要提高我们代码的复用性、可读性、可维护性以及可拓展性。
html
-
语义化的标签,在不借助任何前端框架的情况下,
<header> <section> <nav> <ul> <li> <a href="#"> 菜单1 </a> </li> <li> <a href="#"> 菜单2 </a> </li> </ul> </nav> </section> </header>
这种方式能有一定的可读性,但在更为复杂的页面的结构之下是不是缺失了可读性和可维护性。
-
组件化控制html结构,运用组件化架构的方式将一个页面划分为多个组件,包括项目级组件(在整个范围都会使用到的)和页面级组件
组件化的优势点:
-
提高复用性
举例:按钮组件,整个系统的按钮风格应该大致差不错,拥有的行为也差不多。我们将按钮单独抽离出来作为一个单独的组件,它拥有自己独立的结构、样式、行为,遵从单一职责、开闭原则,当我们在构建下一个页面的时候,直接引入既可以使用,达到了提高复用性的效果。
-
提高可读性
举例:我们一个页面有很多的内容,以上图来看,我们这个页面的结构大致是,头部,导航栏,搜索框,按钮组,而每一个部分又涵盖更细小的点位,在到这个页面的时候,我们的html结构就清晰明了,是由哪几部分组成的,这样同时避免了我们的页面行数过多的问题,内容简小精炼。
-
提高可维护性
举例:每一个组件之间的关联关系很弱,基本一个独立的,那我们对一个组件的修改只会对这个组件起效果,不会太多的影响到其他组件。再者,当我们接收到新的需求改动的时候,产品说我们的input、select不好看,换一种风格,由于我们的所有表单元素都是引用的我们自己的组件,那么我们只需要对我们当前的input和选择框组件进行修改,在进行一些细微的调整,就可以快速的响应。
css
-
分离结构和外观
一个样式在确定这一块内容的结构,什么样的布局,一个样子控制它的外观。达到外观的复用性
<div class="toggle toggle-simple"> <div class="toggle-control toggle-control-active"> <h2 class="toggle-title">标题3</h2> </div> <div class="toggle-details toggle-details-active"> ... </div> ... </div>
例子的toggle就是控制结构的,toggle-simple就是控制外观的,
-
分离容器和内容
用一个样式类来控制这个容器的样式,不管你用div还是h1她的外观都不变。
上例的toggle-title样式类就是控制容器样式的,内容不变。在需要同样样式的地方加入toggle-title可以达到样式的复用。
js
-
分层思想
借鉴于后端mvc分层结构,将请求接口拿到数据这个流程分解为三个步骤,一个是service(对应C)作为服务。也就是专门处理服务调用的js,一个是models(对应M),对拿到的数据做处理,最后一个是pages(对应V),根据数据渲染出我们想要的页面。
-
抽取共用函数
searchASNItems(condition = {}) {
const {
form: { validateFields }, route: { categoryCode }, dispatch, pagingCondition,
} = this.props;
validateFields((err, values) => {
const payload = {
...pagingCondition,
categoryCode,
status: 'APPROVED',
...values,
...condition,
};
dispatch({
type: 'sourceASNSimple/searchASNForINRequirement',
payload,
});
});
}
// 分页查询项次列表
currentPageChange = pageIndex => {
const { pagingCondition } = this.props;
this.searchASNItems({
...pagingCondition,
pageIndex,
});
};
// 分页查询项次列表
onShowSizeChange = (pageIndex, pageSize) => {
const { pagingCondition } = this.props;
this.searchASNItems({
...pagingCondition,
pageIndex,
pageSize,
});
};
// 分页查询项次列表
onSubmit = (e) => {
e.preventDefault();
const { pagingCondition } = this.props;
this.searchASNItems({
...pagingCondition,
pageIndex: 1,
});
};
// 点击一行弹出该asn的项次对话框
showLine=(record, index) => {
return {
onClick: (e) => {
this.setState({
ASNLineVisible: true,
asnDetail: record,
});
},
};
}
// 点击asn单号显示asn详情
showDetailModal=(record, e) => {
e.stopPropagation();
this.setState({
ASNDetailVisible: true,
asnDetail: record,
});
}
来源:CSDN
作者:点了个汤
链接:https://blog.csdn.net/luo_qianyu/article/details/103760874