网站建设礻金手指下拉十二,成都公司注册流程完整版,wordpress 发表文章,做网站的无锡无论使用哪种框架开发#xff08;vue、react、...#xff09;#xff0c;前端开发终究是结构#xff08;HTML#xff09;、样式#xff08;CSS#xff09;、逻辑#xff08;用户操作数据处理对接后端API#xff09;。那么开发过程中都需要注意哪些事项#xff0c;本文…无论使用哪种框架开发vue、react、...前端开发终究是结构HTML、样式CSS、逻辑用户操作数据处理对接后端API。那么开发过程中都需要注意哪些事项本文总结一下。
一、静态样式
开发过程中一定要提取公共组件封装时注意通用性结构有少量区别就定义一些属性进行控制。封装出来的组件既可以锻炼我们的代码能力也可以减少后续工作量。
如果后续需要进行更改只需要更改组件即可不用改很多个页面了。有一些基础组件有现成的UI库例如element-ui、antd、...但是有时结构样式和UI设计冲突太大在这个基础上改样式有时不了解他的结构一个一个样式的更改也很麻烦不如自己花些时间封装一个改起来也很简单。
1.结构HTML
写结构的时候有哪些重点 ①常用标签的默认属性需要了解比如 div 的 display 默认是 block ,占用整行。span 标签默认 display 是 inline ,此时设置宽高无效可以把 span 的 display 设置为 inline-block 即可又不占用整行又可以设置宽高。 ②input 的所有 type 类型需要熟练都是常用的可以自行封装一些组件搜索框、多选等。 ③一些规则比如 tr 标签不能嵌套在 div 里面。
2.样式CSS
无论用 scss 、less 、stylus 只是多了一些方便程序员的写法和函数用的还是 css 本身。学会css本身属性学会 scss 、less 、stylus 的简便写法以及minxin 加快开发速度。
拿到UI设计后我们最需要做的事
提取公共的变量字大小颜色、通用的按钮样式、主题色。其实就是做主题不仅让我们开发时减少代码量而且方便后期项目主题更改。
写样式时一些注意事项 ①像按钮这种通用样式不要设置宽度用padding这样不管多少字样式一样。 例如
.button-same-style{padding: 2px 15px;height: 34px;line-height: 34px;text-align: center;border-radius: 6px;background: #00B498;color: #FFF;cursor: pointer;
}
效果如下 ②定位方式必须牢牢掌握position 的几个属性值熟练运用。比如弹窗都需要使用 fixed 去定位。 ③对于伪类选择器必须熟练hover、active 、active 、focus 等需熟练运用。 ④响应式布局和移动端适配必须会。电脑有大小屏手机屏幕也不同。这些必须牢牢掌握。了解清楚屏幕适配时哪些部分随着大小屏改变。 例一项目PC端网页如果设计图两侧有留白就是没有实际内容只有一些背景图那么这个区域会随着屏幕变小进行减小直到消失。而后台管理系统没有留白那么大小屏适配都需要铺满屏幕但字号不变这时需要将主体内容做成弹性的。比如主题内容是一个表格那就是大屏时表格间距变大小屏时变小。表格按照百分比设置宽度即可。 例二移动端则需要根据UI设计稿的宽度改变跟字体大小使用 rem 去适配。 ⑤不同浏览器因为内核不同存在一些默认样式所以做项目第一件事清除默认样式例如
*{
margin:0;
padding:0;
}
也需要解决浏览器适配性问题,是指由于不同的浏览器对同一段代码有不同的解析造成页面显示效果不统一的情况。使用不同浏览器(Firfox、Chrome、IE6、IE7等)访问同一个网站或者页面时候显示混乱便是不兼容。使用css hack 去解决这个问题
/*Mozilla内核浏览器firefox3.5*/-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器Safari and Chrome*/-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/-o-transform: rotate | scale | skew | translate ;
/*W3C标准*/transform: rotate | scale | skew | translate ;二、逻辑javascript
1.用户操作
不要一个函数写了所有逻辑每个小功能写成一个函数进行调用。这样逻辑更清晰后期好更改。有些方法一样一定要提取封装为通用的函数进行调用不要重复多次。
对于常用的HTML事件必须牢牢掌握 以及页面监听也需要会,addEventListener是DOM元素对象的一个方法在JavaScript中可用于给元素添加事件监听器。
element.addEventListener(event, callback, useCapture);2.对接API
一定要先确定接口是否能跑通参数是否有问题。
同一个局域网访问使用浏览器确认一下如果在服务器则使用 postman 试一下接口。
有些数据通用则请求一次接口保存数据在本地。不要发很多次请求。
了解接口的状态码代表的含义也就是HTTP请求的结果 1xx - 信息响应这些状态码表示临时的响应等待客户端继续操作。 2xx - 成功这类状态码表示客户端的请求被成功接收、理解和接受。 3xx - 重定向客户端需要采取进一步的操作才能完成请求。 4xx - 客户端错误这类状态码表示客户端似乎有错误例如请求信息有误或请求无法执。 5xx - 服务器错误这类状态码表示服务器在尝试处理请求时内部出错或者无法完成请求。
