前端总结

Posted on | In |
Words count in article: 1.2k

JAVASCRIPT

JavaScript是一门解释性语言，定义变量时统一使用let。

Array

  • filter({condition})——筛选数组中某一部分元素
  • concat({list})——将两个数组组合，返回组合后的数组
  • map((listItem, index)=>{})——对array中的每一个元素执行操作，可以接受两个参数，第二个参数代表当前元素的下标。并将结果保存在当前数组。
  • forEach()——与map类似，但不返回结果到当前数组
  • some({condition})——如果数组存在满足条件的元素则返回true，否则返回false
  • every({condition})——如果数组每个元素都满足条件，则返回true，否则返回false

解构赋值

  • let [a, b] = [1, 2, 3] ==> a = 1, b = 2——自动将元素按顺序赋值，多余的舍弃
  • let [c, d] = [{item: apple, count: 1}, 23]==>c = {item:apple, count: 1}, d = 23——粒度可以自由变化
  • let props={a: 1, b: 2, c: 3}; {...props}==>{a: 1}， {b:2}， {c:3}—— ...表示将一个可迭代对象的元素展开为参数序列。

模板字符串

Hello ${Variable} 模板字符串使用()包裹内容，可以在字符串中添加变量，简化代码。

assign

Object.assign(src1, src2...)使用assign可以连接多个相同类型的数据，如{}，[]等对象，并返回组合对象的深拷贝。对于{}对象，assign会自动找到相同的key，并使用后面的value替换之前的value（eg.Object.assign({value:2, text:'test'}, {value:1})==>{value:1, text:'test'}）

HTML

HTML语言不是编程语言，而是一种标记语言，其通过标签与属性和其中包裹的内容组成。

根据HTML从上到下的渲染机制，在HTML中引入.css文件需要将其添加在内部，保证内的样式能够正确渲染。

Emmet

使用Emmet插件极大的提升编写HTML代码的效率。eg. ul>li*4表示在ul标签下连续创建4个li标签。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

BootStrap

BootStrap是一种前端框架，其自带的栅格系统可以很方便的解决HTML中的布局问题，其主要通过在块级元素

中添加class属性进行实现，行元素使用class=’row’，列元素使用class=’col-sm-{N}’实现，需要注意的是每个row包裹下的所有元素块都需要有col属性，否则会出现排版混乱的问题。

CSS

CSS用于控制HTML内容的样式，语法非常简单，只有一种语法：selector {declaration1;declaration2;...}

display属性

  • block:块级显示。一个块级元素会新开一行并尽可能撑满容器
  • inline:行内显示。宽高无用
  • none:隐藏显示。不会保留该元素的占位。visiblility则保留
  • inline-block:行内块元素，同时具有块元素的宽高属性和行内元素的同行属性
  • table:此元素会作为块级表格显示，表格前后带有换行符
  • inline-tabel:此元素会作为内联表格显示。表格前后没有换行符

盒子模型

html文档中的每一个元素都被描绘成矩形盒子，该盒子通过一个模型来描述其占用空间的大小，这个模型就叫做盒子模型。盒子模型通过四个边界描述：margin（外边界），border（边框），padding（内边界），content（内容）。

对于行内元素的非替换元素，eg.a, span标签等。

  1. 可以设置margin-left, margin-right属性，无法设置margin-top, margin-bottom属性。
  2. 行内元素border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加。

对于替换元素，eg. input, img标签等则margin，border，padding都有效果。

React

React主要作用在于View层的渲染，Redux则负责数据的储存和传递。在使用React构建网站时需要遵循以下原则：

  1. 构建组件树
  2. 为组件数添加相应的state和props
  3. 编码实现静态组件树
  4. 为静态网页架构添加数据
  5. 编写数据交互逻辑

在使用React时，需要特别注意将所有的数据与HTML架构分离，数据统一由state或者Redux储存，然后通过props进行传递。

相较于webpack繁杂的配置步骤，使用npx create-react-app {repo_name}可以快速构建React环境进行编码。

Redux

Redux的核心概念包括三部分：action，reducer，store。

特别需要注意的是reducer中，；不能对store中储存的状态进行任何更改，需要使用Object.assign对元素进行深拷贝。

React-Redux

使用过程中需要在React的根标签部分包裹部分。

一个React与Redux通信的代码示例如下：

reducer.js:

const initState = [{...}, {...}];
const reducer = (prevState, action) => {
    switch(action.type){
        case "ACTION_TYPE":
            return Object.assign([],prevState, ...);
    }
    default:
        return prevState;
}

component.js:

import React from 'react';
import {connect} from 'react-redux';

const Component = (props) => {
    return <tag>
        ...
        </tag>
}

const mapStateToProps = state => {
    return {
        prop1:state.prop1,
        prop2:state.prop2
           };
}

const mapDispatchToProps = dispatch => {
    return {
        handleClicked:(params)=>{
            dispatch({
                type:"ACTION_TYPE",
                ...
            })
        }
    }
}

const VisibleComponent = connect(mapStateToProps, mapDispatchToProps)(Component)

export default VisibleComponent;