入驻掘金当天，以及回顾过去两年多来前端开发的经验

01的保护者
485 阅读10分钟

总结每一天工作学习当中的主要知识点，给自己一个知识的储存处，作为前端路上的奋斗者也可以跟更多大神一起交流，一起学习进步

@过去两年的回顾

HTML篇：

<!DOCTYPE html>
<html lang="en">//lang属性设置搜索引擎，经常可在网页中看到英转中的翻译提示
<head>
	<meta charset="UTF-8">//utf-8为国际编码
	<title>Document</title>//title网页标题
</head>
<body>
<!-- 网页内容区域 --></body>
</html>

上述使我们之前一开始学习前端的最基础的html代码，从最开始使用的的编辑器sublime开始到现在用的vscode，从传统的html初始模板到现在使用的的vue框架的template模板等，中间前端的发展也日新月异，在这两年当中，一开始最让我烦恼的大概是开始初要考虑的ie的兼容性，以及后来的适配问题，从最初的使用的淘宝的布局适配到后来的js适配到后来的ui框架使用，越来越简化了我们写代码的时间，当然各种UI框架也层出不穷，从一开始耳熟能详的bootstrap，到现在vue，react的崛起， Mint UI、We UI、ivew UI、Element UI等常用的UI框架，极大的简化了我们编写html代码的时间与复杂度，从最初的的js的表单校验到html5的表单属性的简单验证，再到现在类似iview等组件框架里面的validate表单校验，从复杂度从代码量上面极大的减少了我们的工作量，UI框架的崛起从各个方面来说是必然，之前最开始的代码编写相对已走远，只需要我们再现有的UI框架的基础上进行补充与改写就行。

CSS篇：

自己常用的css reset代码

    html, body, div, span, applet, object, iframe, h1, h2, h3,
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
    address, big, cite, code, del, dfn, em, font, img, ins,
    kbd, q, s, samp, small, strike, strong, sub, sup, tt,
    var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    :focus { outline: 0;}
    a, a:link, a:visited, a:hover, a:active{text-decoration:none}
    table { border-collapse: separate;border-spacing: 0;}
    th, td {text-align: left; font-weight: normal;}
    img, iframe {border: none; text-decoration:none;}
    ol, ul {list-style: none;}
    input, textarea, select, button {font-size: 100%;font-family: inherit;}
    select {margin: inherit;}
    hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

之前说到UI框架，当然也包含了其自己的css样式,之前用jQ时，一开始是单纯的写css，后来接触到less和sass这些预处理的css，再从一开始考虑ie兼容性的浮动式布局=》flex布局，也是从中学习到了很多，说到浮动式布局，有以下几种简单的清除浮动的几种方式=》

1、给父级元素定义高度

<style>
.parent{
    height:200px;
    border:1px solid #000;
}.childOne,.childTwo{
    float:left;width:200px;height:200px;
}
</style>
<body>
    <div class="parent">
        <div class="childOne"></div>
        <div class="childTwo"></div>
    </div>
</body>

优点：代码简单，容易理解

缺点：子元素的高度不能高于父元素，只适合用于高度固定的布局

2、在标签结尾处加空div标签 clear:both（一开始我用的清楚浮动的方式）

<style>
.parent{
    border:1px solid #000;
}
.childOne{
    float:left;width:200px;height:200px;
    background:#00f;
}
.childOne{ 
    float:left;width:200px;height:200px;
    background:#ff0;
}.clear{
    content:'';
    display:block;
    clear:both;
}
</style>
<body>
    <div class="parent">
        <div class="childOne"></div>
        <div class="childTwo"></div>
        <div class=""clear></div>
    </div>
</body>

优点：兼容性好、不容易出现别的什么问题

缺点：对于初学者不友好，当页面浮动比较多的时候，不利于页面优化

3、父级div定义 overflow:hidden

<style>
.parent{    border:1px solid #000;    overflow:hidden;
}
.childOne,.childTwo{
    float:left;width:200px;height:200px;
}
</style>
<body>
    <div class="parent">
        <div class="childOne"></div>
        <div class="childTwo"></div>
    </div>
</body>

优点：代码少，兼容性好

缺点：不能和position配合使用，超出边界的尺寸会被隐藏

4、父级div定义 伪类:after 和 zoom（推荐）

<style>
    .parent{
        border:1px solid #000;
    }
    .childOne,.childTwo{
        float:left;width:200px;height:200px;
    }
    .parent:after{
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0;    
    }
    .parent{
        zoom:1;
    }
</style>
<body>
    <div class="parent">
        <div class="childOne"></div>
        <div class="childTwo"></div>
    </div>
</body>

优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用

缺点：代码量比较多，不好理解

除了浮动，还有一些动效的css写法比如CSS3中的transition和@keyframes动画，这些一般都是在手风琴或者下拉菜单中用的比较多，对于一些动效的css样式，后来发现有一个叫animate.css（daneden.github.io/animate.css…）的库，可以试着百度download一下，试着让自己的页面更加的酷炫吧。

在我们现今的框架当中也有这一些动画的属性，比如通过Vue中的标签<transition></transition>和其独有得进场出场的calss，如下代码所示可以简单的实现一些比较简单的动画

<style scoped>
 a {
    color: #42b983;
    display: block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    background: blue;
  }
  /*定义两组样式实现动画*/  /*v-enter是元素进入前的状态是一个时间点*/  /*v-leave-to元素离开前的终止状态*/  
.v-enter,  .v-leave-to{
    opacity:0;    transform: translateX(70px);
  } 
 /*v-enter-active[入场动画的时间段]*/  /*v-leave-active[出场动画的时间段]*/
.v-enter-active,  .v-leave-active{
   transition:all 0.8s linear;
  }  
/*不同组使用自定义实现*/
  .hdj-enter,
  .hdj-leave-to{
    opacity:0; 
   transform: translateY(70px);  
}  
/*v-enter-active[入场动画的时间段]*/  /*v-leave-active[出场动画的时间段]*/  
.hdj-enter-active,  .hdj-leave-active{
   transition:all 0.8s linear;  
}
</style>
<template>
  <div>   
    <!-- 使用过度类名 实现动画 -->
    <!--1. 使用transition元素把要动画的元素包起来 -->
    <button @click="flag=!flag">显示/隐藏{{content1}}</button>
    <transition>
      <h3 v-if="flag" @click="log">你看我现不现实</h3>
    </transition>
    <button @click="flag1=!flag1">显示/隐藏</button>
    <transition name="hdj">
      <h2 v-if="flag1">你看我显示不显示 {{content}}</h2>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      flag:false,
      flag1:false
    }  },
  methods:{
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

我相信我们肯定都一样购物过，大家添加购物车的时候肯定会发现点击添加购物时会有一个购物车动画，一个小小的球划过屏幕，Vue中也可以通过它的半场动画来实现这类效果，代码如下图所示

<style scoped>  .ball{    width: 20px;    height: 20px;    border-radius: 50%;    background-color: red;  }</style><template>  <div>    <input type="button" @click="flag=!flag" value="快到碗里来">    <transition    @before-enter="beforeEnter"     @enter="enter"     @after-enter="afterEnter">       <div class="ball" v-if="flag">      </div>    </transition>  </div></template><script>export default {  data () {    return {      flag:false,    }  },  methods:{    //动画钩子函数第一个参数el，表示要执行动画的那个元素，是个js原生的dom对象    beforeEnter(el){      //动画入场之前，此前动画尚未开始，可以再beforeEnter中设置元素开始之前的起始样式      //设置小球开始之前的起始位置0,0      el.style.transform="translate(0,0)"    },    enter(el,done){      el.offsetHeight      //表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态      el.style.transform = "translate(150px,450px)"      el.style.transition = "all 1s ease"      done()//小球立即会消失  没有停顿    },    afterEnter(el){      //动画完成之后      this.flag=!this.flag    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only -->

JS篇：

先从js角度来进行开头（HTML+CSS+JS），HTML可以说是我们的VIEW视图层，JS是我们的控制器（CONTROLLER），当JS通过事件监听到用户视图的操作，通过AJAX(MODEL层)进行数据操作交互，向服务器随时接收和发送请求，以获取最新的数据。这是之前刚开始进入前端最初始的数据交互方式。

js中之前最早的肯定是从原生js开始学起，js最多的操作就是dom操作，后来学习到了jQuery,也是极大的简化了我们的dom操作，jquery最多的就是字符串的拼接，后来学到es6，接触到了模板字符串的应用（`...`）简化不少，再到近两年崛起的三大马车，前端从真正意义上的操作Dom到操作数据，从angular（ionic）的MVC模式到Vue和react的MVVM模式。从多页应用，到单页应用，在这个过程中，都是值得我们所深入学习的。之前第一家公司用的是ionic框架，它是基于angular框架的，用于手机端的单页应用，17年毕业前，有幸进入一家正在做当时最火的共享单车的项目的公司，从中也学习到了很多，深刻的认识到了MVC模式对于传统js（jq）的冲击，MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写.

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
　　通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。
　　通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。
　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 分层有助于管理复杂的应用程序，因为可以在一个时间内专门关注一个方面。可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

而与之相同的MVVM框架更进一步分离了或者说更加专注了数据层的增删改查，现在我用的MVVM框架是VUE框架，这也是大多数公司的首选把，目前也在看关于React的东西，name什么MVVM呢，对于MVC它又有啥区别呢？

Model-View-ViewModel

Model: 域模型，用于持久化

View: 作为视图模板存在

ViewModel: 作为视图的模型，为视图服务

MVVM与MVC最大的区别就是：MVVM实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

我目前使用的框架是Vue.js，也是目前可以说是最火的前端框架，但想要真正去理解一个框架是很难得，我还有很大的一段路要走，底层的源码有些要懂的哈市必须得懂，比如它是如何实现数据绑定的（Object.defineProperty( )的get和set方法、监听器、订阅者、解析器）这边有一篇文章很好的解释了什么叫做双向绑定推荐大家去看一下www.cnblogs.com/libin-1/p/6…

有不对的地方希望指正，希望看到的朋友可以关注一下哈哈哈哈哈哈哈

希望大家能够拥有自己满意的工作，我也会一直更新自己的博客，把自己新学的和觉得重要的都分享到这边，溜了溜了*-*



avatar
文章
阅读
粉丝