整理一份前端业务开发入门文档吧

置顶曹天笑

已于 2022-08-04 14:48:24 修改

阅读量479

点赞数 1

分类专栏：整理文章标签：前端 javascript 开发语言

于 2022-08-02 18:00:17 首次发布

本文链接：https://blog.csdn.net/weixin_42532633/article/details/126123401

版权

整理专栏收录该内容

13 篇文章 0 订阅

订阅专栏

整理一份前端业务开发入门文档吧

前言：在我看来，JavaScript自然是前端最重要也是最强大的语言，是与后端进行数据交互必备的工具。但我觉得前端最原始也是最优美的是要尽可能的100%还原UI设计师的设计稿，以及交互动画。大部分的业务场景里，前端的数据交互，基本是一些字符串，数组，等的数据处理，echart图表数据处理，以及增删改查，表单提交等。处理逻辑大同小异，主要区别在于代码是否简洁高效，逻辑是否严谨。而静态页面开发，既还原UI设计稿，及交互动画，这部分的html布局、css样式才是前端基石。

1. 配置前端开发环境

前端开发，目前大概率包括，PC端网页，微信应用(小程序，公众号等)，H5页面，桌面应用，uniapp出来甚至要写APP！其他或许还有类似浙里办，赣服通这些平台上的应用。
所以一套完善的前端开发环境是必不可少的，node，npm，git，svn，浏览器这些是必不可少的；一款好用的编辑器也是十分必要的，推荐Visual Studio Code，webStorm等，当然够牛逼的话，你用TXT编辑器都行；同时开发微信应用时需要使用到微信开发者工具。在实际的开发过程中，往往会碰到前端跨域等问题，这时候需要一套代理工具，如whistle等；与后端进行接口联调时需要一个接口调试工具，如postman等。以前开发PC端网页需要兼容IE低浏览器，这时候需要一个IEtest来进行调试。还有很多东西，在实践项目中具体问题具体解决吧。

2. 静态页面的编写

a、在编写静态页面前，大多情况下需要重置一下html标签的默认样式，比如input标签默认的border，outline等样式，p标签的margin，padding等，body标签的默认背景颜色background等，所以往往需要一个reset.css。
b、在拿到UI设计的设计稿后，先仔细分析产品的结构，再来确定书写html时候用什么布局，公用的模块使用同一套css样式，减少冗余代码。
c、现在前端开发规范里要求尽量使用语义化标签，增加代码可读性。比如页面头部使用<header>，底部使用<footer>，标题使用<h1> <h6>等等，这个需要平时养成习惯，用惯了<div>泪崩。
d、初入前端开发的时候，对于html的编写很多人都是随心所欲的，对于html的布局和结构不削一顾，这对于后面的交互开发和数据展示往往是一个大坑，好的页面布局和结构才能实现好的交互和页面展示。
e、注意<head></head>标签内的<title><meta>信息，特别是<meta>标签，弄清楚meta元素各个属性代表的意义：name，content，author，description，keywords，viewpoint，robots，renderer，http-equiv，X-UA-Compatible，content-type，cache-control等等，这些对页面的SEO和展示都是很有意义的

3. CSS的编写

css里有几个基本概念，选择器，三大特性，盒模型
a、选择器里，有几个选择器用好了能达到意想不到的效果，如子选择器 >, 伪类选择器:hover；:first-child；:focus；:after等等，兄弟选择器 +，并集选择器 ~，比如以下一个用例：

.nav .navItem{
   padding: 0 15px;
    height: 40px;
    line-height: 40px;
    float: left;
    color: #000;
    text-align: center;
    list-style: none;
    position: relative;
    cursor: pointer;
}
.navItem::before{
   content: "";
   display: block;
   width: 0%;
   height: 2px;
   background: #000;
   position: absolute;
   bottom: 0;
   left: 100%;
   transition: all 0.3s linear;
}
.navItem:hover::before{
   width: 100%;
   left: 0;
}
.navItem:hover ~ .navItem::before {
    left: 0;
}

伪类选择器的妙用
b、三大特性：
层叠性、相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式
继承性、标签会继承父标签的某些样式，如文本颜色和字号
优先级、当同一个元素指定多个选择器，就会有优先级的产生
c、盒模型box-sizing：
标准盒模型border-box、页面内容content(盒子)=margin+border+padding+content （content = width | height）
IE盒子模型content-box、页面内容content(盒子)=
margin + content （content = border + padding + width | height）
d、css动画编写，@keyframes，transition，transform等等标签的使用，css3出来以后，要学的东西多咯。
总之，css搭配html可以实现很多不可思议的效果出来！

4. 数据交互

在实际项目中，基本会选择一个前端框架进行开发，集成自动化构建工具，增加开发效率。
开发PC端需要兼容低版本IE的项目，可以考虑使用低版本JQuery+gulp；
开发后台管理系统，可以考虑使用ant-design+webpack或者element+webpack等；
开发移动端H5页面，可以考虑vue、react等；
开发桌面应用，可以考虑electron等；
通过后台接口获取到服务端数据，数据的处理是交互的重点。
这里列举一下常用的方法：
new Set(),new Map(),filter(),map(),。。。。。。。。。