前端初学基础知识 1

时间 2019-12-10

标签前端初学基础知识繁體版

原文原文链接

前端学习记录 week 1

基础知识

CSS盒模型

全部HTML元素能够看做盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容javascript

Margin - 清除边框外的区域，外边距是透明的。
Border - 围绕在内边距和内容外的边框。
Padding - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
CSS3新增box-sizing；border-box：将padding、border的宽度计算在宽度width里面。

html5标签

template: 经过 JavaScript 在运行时实例化内容的容器。
header: 定义页面或章节的头部。它常常包含 logo、页面标题和导航性的目录。
footer: 定义页面或章节的尾部。它常常包含版权信息、法律信息连接和反馈建议用的地址。
aside: 定义和页面内容关联度较低的内容——若是被删除，剩下的内容仍然很合理。
section: 定义文档中的一个章节。
nav: 定义只包含导航连接的章节。
audio：定义音频内容(属性：autoplay、controls、loop、muted、preload)
video: 定义视频（属性同上）

- JavaScript数据类型及数据结构

JavaScript是一种弱类型语言html

6种原始类型前端
- Bool
- Object
- String
- Null
- Undefined
- Number

*可使用typeof 判断数据类型，数组以及null都属于Object
*Object属于引用类型，具备：constructor、hasOwnProperty、isPropertyOf、propertyIsEnumerable等方法。vue

对象的属性html5
- 数据属性：包含一个数据值的位置，能够读写包含Configurable、Enumerable、Writable、Value 4个特性
- 访问器属性: 不含数据值能够包含getter、setter函数，读取以及写入会分别触发这两个方法，包含Configurable、Enumerable、get、set特性

修改默认特性使用defineProperty（），访问器属性不能直接定义，只能调该用方法。java

对象的建立git
- 工厂模式
- 构造函数
- 原型模式

构造函数：正则表达式

function Person(name, age ,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);
    }
  }
  
  let person1 = new Person("name", 20, "job");

原型模式:数组

function Person(){
  }
  
  Person.prototype.name = "name";
  Person.prototype.age = 20;
  Person.prototype.job = "job";
  Person.prototype.sayName = function(){
     console.log(this.name);
  }
  
  let person1 = new Person();

JavaScript经常使用的字符串操做浏览器
- substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
- substr() - 返回字符串的一个子串。传入参数是起始位置和个数。
- replace() – 用来查找匹配一个正则表达式的字符串，而后使用新字符串代替匹配的字符串。
- slice() – 提取字符串的一部分，并返回一个新字符串。
- split() – 经过将字符串划分红子串，将一个字符串作成一个字符串数组。
- length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
- toLowerCase() – 将整个字符串转成小写字母。
- toUpperCase() – 将整个字符串转成大写字母。
- concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
- indexOf() – 返回字符串中一个子串第一处出现的索引。若是没有匹配项，返回 -1 。
- charAt() – 返回指定位置的字符。
- match() – 检查一个字符串是否匹配一个正则表达式

JavaScript经常使用的数组操做

- concat - 合并数组
- push、pop - 分别为添加、删除元素，堆栈形式
- unshift、shift  - 添加、删除元素，队列形式
- reverse - 反转
- sort() - 排序， arr.sort(function(a,b){return a-b;} 输入比较函数
- slice、splice - 删除，参数为起始位置和个数，slice不改变原素组，返回新数组，splice会改变原素组，返回被删除的数组。
- substring、substr - 截取数组，相似于上面字符串中的这两个方法。

JavaScript模块化

为了避免让分块的代码污染全局，以及更好地使用别人的代码因此产生了JavaScript模块化的需求

可使用当即执行函数

var params = 'test';
  
  var module = (function(params){
    var mod = function(){
      //...
    };
    return {mod: mod};
  })(params);

外部不能直接访问模块内部的变量，传入外部变量后，在内部改变它的值也不影响全局。

闭包

CSS3部分新特性

border-radius: 边框圆角
box-sizing：border-box、content-box
box-shadow：阴影
background-size
background-origin：背景显示区域，content-box、padding-box 或 border-box
text-shadow：文字阴影
word-wrap：文本强制换行
@font-face：字体
transform：2D，3D转换 ratate、translate、scale、skew
transition：过分
animation：动画
@keyframes：建立动画规则

vue基础

经常使用指令

v-if、v-else-if、v-else
v-show
v-on 缩写@
v-bind
v-model
v-for
v-html
v-text

特性

ref：在元素上添加该属性，替代原生JavaScript获取dom操做 this.$refs.name

绑定内联样式以及类

如下写法涉及到了全部样式以及类名的绑定方式，不详细说明了

样式

:style=“[item.a,item.b]” 
:style="{width:item.value+'px'}"   
:style="{color: activeColor, fontSize: fontSize + 'px' }"
:style="item.titlefont"
:style="a<0? 'color:red':'color:black'"
:style="item.choosetype==3?{width:ul_width+'px'}:''"

:class="{a:item.x==1}"     
:class="[b ,{a:item.x==1}]"    
:class="{a:item.x==1, b:item.x==2}"    
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

实践

1、我的中心-生活馆页面

遇到的问题以及学习到的知识点

1. 内层div的margin-top属性转移到了外层div上

<div class="member-card">
        <!--header外边距体如今外层div上-->
      <header>{{constellation}}</header>
        <footer>
        <div>{{memberGrade}}</div>
        <div>{{memberName}}</div>
      </footer>
    </div>

缘由：

当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素包含在另外一个元素中时（若是没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
空元素，它有外边距，可是没有边框或填充，则上下边距会发生合并

解决方法

给外层元素加内边距边框
去掉内层元素的mqrgin改成直接设置外层元素padding

2.事件冒泡

<div class="root">
    <div class="father">
      <div class="child"></div>
    </div>
  </div>

let root = document.getElementsByClassName('root')[0];
  let father = document.getElementsByClassName('father')[0];
  let child = document.getElementsByClassName('child')[0];

  root.onclick = function () {
    console.log("root");
  };
  father.onclick = function () {
    console.log("father");
  };
  child.onclick = function () {
    console.log("child");
  };

点击最内层div时控制台依次显示：child、father、root。按照DOM层次结构像至低向上直到顶端，这就是事件冒泡。

3. 阻止冒泡

实现弹窗，而后点击空其余任意地方隐藏弹窗

<!--html-->
  <div class="father">
    <div class="child"></div>
  </div>

/*javascript*/
  let father = document.getElementsByClassName('root')[0];
  let child = document.getElementsByClassName('child')[0];

  father.onclick = function () {
    console.log("father");
  };
  child.onclick = function (e) {
    let ev = e||window.event;
    ev.stopPropagation();
  };

<!--vue-->
  <div class="father">
    <div class="child" @click.stop=""></div>
  </div>

2、根据现有项目学习编码规范以及项目结构并尝试编写

*模仿网易云音乐播放器页面
地址：https://gitee.com/zhangweiqin...

代码规范

tab = 2Space
移动端使用rem布局
生命周期排列顺序：name、props、components、data、create、mounted、computed、watch、beforedestroy、methods
自定义组件使用小驼峰命名

目录结构

根组件App.vue
页面组件：src/view
页面模块：src/view/modules
路由：src/router
通用组件：src/components

rem自适应布局

先了解：rem、em、px

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em：是相对长度单位,是所在元素的字体大小，没设置则一层层往上直获取字体大小至浏览器默认字体大小。
rem：相对长度大小，相对于根元素字体大小

由于rem大小只和根元素字体大小有关因此只要根据设备设置不一样的根元素大小，而后以相同的rem做单位获得的实际大小是不一样的，实现自适应。

document.documentElement.style.fontSize = document.documentElement/375*20 + 'px';
/*
这样 若是在宽度为375（iphone6/7/8）的环境下1rem = 20px.
也能够选择在宽度为360（大部分1080p屏幕）的环境下开发则相应的除以360，
根据设计稿的宽度不一样选择方便计算的方式。
*/

项目路由

App.vue下目前只有主页面以及歌单页面，主界面下两个子路由：个人音乐、发现，两个组件：我的设置页面、播放控制条。

{path: "/", redirect: "/index/myMusic"}, //重定向
  {//主界面
    path: '/index',
    name: 'index',
    component: index,
    children: [
      {//个人音乐
        path: '/index/myMusic',
        name: 'myMusic',
        component: myMusic
      }, {//发现
        path: '/index/findMusic',
        name: 'findMusic',
        component: findMusic
      }
    ]
  },
  {//歌单页面
    path: '/songList',
    name: 'songList',
    component: songList
  }

路由的使用以及传参：（两种方式）

{
  path: 'helloWorld',
  name: helloWorld,
  component: ···
}
this.$router.push({path: '/helloWorld',query: {msg: 'hello'}});
<router-link :to="{ name: 'helloWorld', query: { msg: 'hello!' }}"></router-link>

this.$router.push({ name: 'helloWorld', params: { msg: 'hello'}});
 <router-link :to="{ name: 'helloWorld', params: { msg: 'hello' }}"></router-link>

console.log(this.$route.query);  //{msg:hello},不一样的是query传递参数会被附加到url地址上
console.log(this.$route.params); //{msg:hello}

组件的使用以及组件数据传递

引入组件,两种加载方式

1. import userSetting from '@/view/modules/userSetting.vue';
  2. const userSetting = resolve => require(['@/view/modules/userSetting.vue'],resolve);  //懒加载

异步加载，优势：最大化的实现随用随载，减小首页加载延迟；缺点：可能会形成网页显示过慢且渲染良莠不齐的问题

组件注册

//单文件组件
    components: {
      userSetting
    },

数据传递

父组件->子组件：

<!--发送-->
  <userSetting :data="'msg from father'">
  </userSetting>

//接收
  export default {
    name: "user-setting",
    props:['data']
  }

子组件->父组件：

<!--发送-->
  <div class="set-item" 
       @click="$emit('msgFromSon','msg from son')">
       高级设置
  </div>

<!--接收-->
  <userSetting
    v-show="setting"
    @msgFromSon="recive">
  </userSetting>

methods: {
    recive(msg) {
      console.log(msg);  //msg from son
    }  
  }

Vue.extend()、$mount()

Vue.extend(): 使用基础 Vue 构造器，建立一个“子类”。参数是一个包含组件选项的对象。

let alertOptions = {
    data:function(){
      return {
        title: title,
        text: text,
      }
    },
    methods:{
      close() {
        resolve('ok');
        dialogClose(vm);
      }
    },
    template: '<alert @close="close" :title="this.title" :text="this.text"></alert>',
      components: {alert}
  }

  let creator = Vue.extend(alertOptions)

vm.$mount()：手动地挂载一个未挂载的实例。

//挂在到#app下
  new creator().$mount('#app')
  
  //在文档以外渲染而且随后挂载
  vm = new creator().$mount()
  dialogContainer.appendChild(vm.$el)