首页  思维导图  详情

前端开发

2019-01-04 10:36:28   5  举报





AI智能生成

对所学前端知识的简单总结，包括HTML、CSS、JavaScript以及常用的框架技术

前端开发

JavaScript

HTML

CSS

作者其他创作

大纲/内容

HTML

基础标签

html、body、div、p、span、a、ul等

表单元素

form、input、select、radio、checkbox、textarea等

HTML5

语义化标签

header、nav、main、aside、section、article、footer等

新增input类型

color、range（滑块控件）、email、url、日期时间控件（date, month, week, time, datetime, datetime-local）

新增属性

placeholder

文字占位提示，通常用于表单输入框

required

必填项，通常用于表单输入框

pattern

规定用于验证 input 域的正则表达式

form

指定表单input域所属表单的id

scoped属性：CSS 的组件作用域，如<style scoped>

......

Canvas

画布，通过JavaScript来实现绘制图像

SVG

Scalable Vector Graphics (可伸缩矢量图形) 的缩写，是W3C的一个标准

采用XML格式定义图形

SVG 图像可伸缩，在放大或改变尺寸的情况下其图形质量不会失真

web存储

比起cookie可以保存较多的数据。以键/值对的形式，通常以字符串存储

分类

sessionStorage

会话级别的数据存储（只在当前浏览器窗口有效，关闭后数据就会被清除）

localStorage

只要不清除，数据就会永久存在

操作的API

存取数据

sessionStorage.setItem(key,value)

sessionStorage.getItem(key)

也可以直接sessionStorage.key的形式存取数据

删除数据

删除单条数据：sessionStorage.removeItem(key)

删除所有数据：sessionStorage.clear()

获取某个索引的key

sessionStorage.key(index)

WebSocket协议

基于TCP的全双工通信协议

首先借用HTTP协议建立连接，然后升级为WebSocket协议进行通信

适用于聊天室等实时通信场景

用法

Web Worker

为了弥补JavaScript的单线程问题

Web Worker程序由Javascript主线程创建，但独立于主线程、在后台执行，因此可以提高程序执行效率

用法

创建Web Worker

var worker = new Worker('worker.js');

主线程与 Web worker线程通信（传参）

主线程发送数据到web worker：
worker.postMessage('hello')

主线程接收来自 web worker 的数据：
worker.onmessage = function(event) {
console.log('接收到的数据', event.data);
}

结束Web worker

worker.terminate();

CSS

语法规则

由两个主要的部分构成：选择器，以及一条或多条声明
如 p {height:10px;}

基础知识

选择器

标签/元素选择器

div：选择所有div元素

id选择器

#container：选择所有id属性为container的元素

class选择器

.nav：选择所有class属性为nav的元素

属性选择器

input[type=text]：选择所有type属性为text的input表单元素

a[src^="https"]选择其 src 属性值以 "https" 开头的所有a元素

a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有a元素

子元素选择器

div > p：选择div下所有子元素p

后代选择器

如 ul li { list-style: none; }

兄弟选择器

相邻

如 h1 + p { font-size: 14px; }

非相邻

如 h1 ~ p { font-size: 14px; }

通配符选择器

*表示选择所有元素

伪类选择器

a标签的常用伪类

a:link、a:visited、a:hover、a:active
注意：
在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才有效。
（顺序记忆方式：love hate，又爱又恨~）

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬浮在链接上 */
a:active {color:#0000FF;} /* 已选中的链接 */

button:active{} /*点击时的按钮，效果类似JavaScript的click事件*/
button:hover{} /*鼠标悬浮在按钮上*/

其它伪类

:first-child（选择元素的第一个子元素）
:last-child（选择元素的最后一个子元素）
:checked（input:checked 选择所有选中的表单元素）
:disabled（input:disabled 选择所有禁用的表单元素）
:nth-child(n)（选择元素的第n个子元素）
:nth-last-child(n)（选择元素的倒数第n个子元素）
.....

伪元素选择器

::before、::after

通常与content属性一起使用

选择器分组

多个具有完全相同CSS样式的选择器合并简写方式

如 h1, h2, h3 { color: #000; }

布局

传统布局

盒子模型

margin（外边距）

border（边框）

content（内容）

padding（内边距）

元素宽度/高度=外边距+边框+内容+内边距

table布局

div布局

三栏布局

flex布局

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

实现居中布局（垂直&水平）

grid布局

定位position

static

默认定位属性

absolute

相对于父元素的位置，由top(距离上方)、bottom(距离下方)、left(距离左边)、right(距离右边)四个属性指定

relative

相对于该元素的初始位置，由top、bottom、left、right四个属性指定

fixed

相对于浏览器窗口的位置，由top、bottom、left、right四个属性指定

浮动float

使元素脱离文档流，浮于文档流上方

元素居中

水平居中

行内元素

span { text-align: center; }

块级元素

div { margin: 0 auto; }

垂直居中

单行文本

span { height: 20px; line-height: 20px; }

多行文本

p { display: table-cell; vertical-align: middle; }

阴影效果

text-shadow

用于给文字添加阴影效果

p { box-shadow: 10px 10px 5px #ccc; }

box-shadow

用于给盒子添加阴影效果

div { box-shadow: 10px 10px 5px #ccc; }

CSS3

动画

关键帧@keyframes

用法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname：动画名称
keyframes-selector：动画时长的百分比。取值：0-100%，from（与 0% 相同），to（与 100% 相同）
css-styles：一个或多个合法的 CSS 样式属性。

animation

用法：animation: name duration timing-function delay iteration-count direction;

过渡

transition属性

用法：transition: property duration timing-function delay;

2D/3D变换

transform属性

translate(x,y)/translateX()、translateY()、translateZ()

旋转指定度数：rotate(deg)/rotateX(deg)、rotateY(deg)、rotateZ(deg)

缩放指定倍数：scale()

圆角边框

border-radius属性

flex弹性布局

Bootstrap框架

网格式布局

响应式布局

基于媒体查询@media

.container/.container-fluid、.row、.col-xs-2/.col-md-4

CSS预处理器

Less、Sass

工具

构建工具

webpack、gulp、grunt等

依赖包管理

npm、bower

JavaScript

语法基础

变量

分类

局部变量/全局变量

数值Number、字符串String、数组Array、Function函数、布尔boolean、对象Object、null、undefined

变量声明提升

JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面

数据类型

基本类型：number、string、boolean

Object、Array、Function、null、undefined

作用域

全局作用域、函数(即function)内作用域，此外ES6中增加了块级作用域

运算符

算术运算符

+、-、*、/、%、++、--

关系运算符

==、===（值和类型均相等）、!=、!==、>、<、>=、<=

逻辑运算符

&&逻辑与

||逻辑或

在ES6之前用于给变量赋默认值，如：arg = arg || 0; 在ES6中可以使用默认参数替代

！逻辑非

true：空字符串、0、null、NaN、undefined
false：对象、非空字符串、非0数值（Infinity）

连续两次!，可将任意类型转换成bool类型，如!!obj

位运算符

&（位与）、|（位或）、^（异或）

对象运算符

in（判断左侧运算数是否是右侧运算数的成员）、instanceof（判断对象是否属于某个类或构造函数）、
delete（删除对象的属性、数组元素或变量）、.与[]（获取对象或数组元素）等

类型判断typeof

判断变量类型，如 typeof "213" // 结果是"string"

隐式类型转换

1、基本数据类型间进行+、-、*、/、%操作
①加号运算符时，String和其他类型时，其他类型都会转为 String；
其它情况，都转化为Number类型，注： undefined 转化为Number是NaN（Not a Number），任何Number与NaN相加都为NaN。
②其它运算符时，基本类型都转换为 Number，String类型的带有字符的比如： '1a' ,'a1' 转化为 NaN 与undefined 一样。
2、Object与基本数据类型运算
Number类型会先调用valueOf(), String类型会先调用toString(), 如果结果是原始值，则返回原始值，否则继续用toString 或 valueOf(),继续计算，如果结果还不是原始值，则抛出一个类型错误

函数

调用函数：func.apply(obj, argArr)、func.call(obj, arg1, arg2, ...argN)

arguments对象

表示实参列表，不是数组Array类型，而是被称为“类数组ArrayLike类型”。
可以通过Array.prototype.slice.apply(arguments)转换成真实的Array类型

指针标识

this

指向当前操作对象

callee

指向当前正在调用的函数

prototype

指向函数的原型

constructor

指向创建该对象的构造函数

IIFE（Immediately-Invoked Function Expression，立即执行函数表达式）

可以看成是模块化的表现形式

全局函数

window对象常用的函数

定时器setTimeout()和setInterval()

对setTimeout函数理解的误区：
如：setTimeout(function(){
console.log('setTimeout is running');
}, 2000)
表示在2秒钟后，setTimeout中的回调函数才会被放到任务队列里，等待主线程空闲后才会从任务队列中取出执行（因为JavaScript没有多线程，相当于模拟多线程）。因此不一定是2秒后执行，可能会等待更长时间。

数组

常用函数

添加、删除

类似栈操作，先进后出：push（向数组末尾添加元素）、pop（删除并返回数组末尾元素）

类似队列“先进先出”操作：push和shift（删除并返回数组第一个元素）、unshift（往数组头部添加元素）

子数组

slice函数：从原数组中选取部分元素构成新数组，用法：var newArr = arr.slice(fromIndex, toIndex)

splice函数：
1、删除数组中任意数量的元素，用法：arr.splice(fromIndex, length)
2、向指定位置插入指定元素，用法：arr.splice(fromIndex, 0, item)
3、替换数组中任意数量的元素，用法：arr.splice(fromIndex, count, item)

concat：合并两个数组，如arr1.concat(arr2)

数组转换

join：将数组用指定分隔符转换成字符串，用法：arr.join(',')。不带参数默认以逗号分隔，arr.join()等同于arr.join(',')

toString：转换成字符串

数组排序

reverse：反转数组元素顺序

sort：默认比较字符串；将数组按升序排序

查找元素

indexOf、lastIndexOf

迭代函数

some/every（返回true或false）、filter（过滤掉不满足条件的数组元素）、
forEach（无返回值，用法如data.forEach(function(val,index,arr){})）、map（返回每次函数调用的结果数组）

Object常用函数

Object.create(prototype[, descriptors])：按指定原型创建对象。
注：Object.create(null)用于创建一个空对象（没有任何属性），而通过 var o = new Object()和 var o = {}两种方式创建的对象是有一个__proto__ 属性的

Object.defineProperty(obj, prop, descriptor)：在obj对象上定义新的或修改原有的属性名称为prop的属性，类似的还有Object.defineProperties

字符串

字符串方法

str.toUpperCase/toLowerCase（大小写转换）

split函数

与数组对象的join函数互为逆运算，如'test'.split('')结果为['t', 'e', 's', 't']

全局函数

escape/unescape（常规编/解码）、encodeURI/decodeURI（URI字符串编/解码）、
encodeURIComponent/decodeURIComponent（URI组件编/解码）

String.fromCharCode函数接受一个指定的 Unicode 值，然后返回一个字符串。
比如String.fromCharCode(65, 66, 67) 返回“ABC”，其中65,66,67分别是A，B，C对应的ASCII码值

DOM模型

即Document Object Model（文档对象模型），其中包含了对于HTML/XML文档对象（比如document）的各种操作。
Document根节点包含的子节点：form、body、a、image、link等

BOM模型

即Browser Object Model（浏览器对象模型），其中包含了对浏览器的各个元素的操作，比如最常见的window对象。
window对象包含的属性有：document、location、navigator、screen、history、frame等

URL.createObjectURL()：根据参数（File/Blob类型）创建一个URL，字符串类型
URL.revokeObjectURL(objectURL)：释放创建的objectURL

原型/原型链

Object与Function：都是构造函数，因此 Function.__proto__ == Function.prototype && Object.__proto__ == Function.prototype 结果为true

__proto__：所有对象中都有一个__proto__属性，指向其原型对象

Function.prototype.__proto__ == Object.prototype //true
Object.__proto__ == Function.prototype //true，因为Object是一个构造函数
Object.prototype.__proto__ == null //true

当访问对象obj的属性时，如果obj对象自身没有该属性，则沿着原型链向上查找（即一直往上查找__proto__中是否有该属性）。
如果找到，则返回；如果到了Object.prototype.__proto__这一层还没找到，则返回undefined

constructor：它是原型对象的一个属性，指向其构造函数

Function.prototype.constructor == Function //结果为true

prototype：它是构造函数对象的属性，指向其原型对象

原型

Object.prototype：所有对象的原型

Function.prototype：所有函数对象的原型

原型链

原型链是一种为了方便实现对象继承的机制，所有对象中都有一个__proto__属性，指向其原型对象，形成链状结构

Object.prototype.__proto__ == null //true，原型链的末端

作用域/作用域链

作用域：在ES6前，javascript只有两个作用域：全局作用域、function作用域，分别对应全局变量和局部变量

闭包

当两个函数嵌套，内层函数里使用了外层函数中的临时变量，并且外层函数的返回值是内层函数的引用。这样就构成了闭包。

作用：
1、用于获取函数内部的变量，同时不暴露变量到函数外部（避免变量全局污染）；
2、将变量值长驻内存中（由于变量被引用不会被垃圾回收）

继承/扩展

基于原型prototype，如Number.prototype.add = function() {} 给所有Number对象增加add方法

对象属性拷贝：
Object.extend = function(dest, src) {
  for (var prop in src) {
    dest[prop] = src[prop];
  }
  return dest;
}

事件机制

事件冒泡

当父、子元素有相同事件的触发顺序：子元素 -> 父元素

阻止事件冒泡：event.stopPropagation(); 它会阻止捕获和冒泡阶段中当前事件的进一步传播

事件捕获

当父、子元素有相同事件的触发顺序：父元素 -> 子元素

事件委托

事件可以委托给父级元素，即进行事件处理时可以使用该元素的父元素代为处理

事件委托是利用事件的冒泡原理来实现的

事件监听

addEventListener、removeEventListener

如 el.atddEventListener("click", clickFunc, useCapture)：其中第三个参数为Boolean类型，表示是否使用事件捕获，默认是false

attachEvent、detachEvent

如 el.attachEvent("onclick", clickFunc)

阻止默认事件

event.preventDefault();或 return false;

注：return false相当于event.preventDefault();加上event.stopPropagation的作用，即阻止默认事件、事件冒泡和事件捕获

NodeJS

Express框架

ECMAScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

ECMAScript 6

即ECMAScript 2015，是2015年发布的ECMAScript新版本

新特性

let、const命令

let命令要求变量必须“先声明后使用”

const命令用于声明一个常量

块级作用域

ES6之前只有两个作用域：全局与function范围

函数的参数默认值

如

:
function log(x, y = 'default') {

console.log(x, y);
}

rest 参数

类似于Java中的可变长参数，使用rest参数后就不需要使用arguments来获取参数列表了

... 变量名

function(x, ... args) {
console.log(args.length);
}

注：
1、rest参数是真正的数组，而arguments对象是类数组，需要使用Array.prototype.slice.call(arguments)转换成真实数组。
2、跟Java中可变参数类似，rest参数只能是参数列表中的最后一个

扩展运算符

它好比 rest 参数的逆运算，用于将一个数组转为用逗号分隔的参数序列

主要用于函数调用传参

function add(x, y) {
  return x + y;
}
add(...[4, 38]) // 42

可以用于替代函数的apply方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

变量的解构赋值

包括数组、对象等

数组解构赋值

let [a, b] = [1, 2, 3]; //a,b分别被赋值为1,2，而3由于没有变量接收，因此被丢弃

let [a, b, c] = [1, 2]; //a,b分别被赋值为1,2，而 c 由于解构不成功，因此为undefined

对象解构赋值

let { foo, bar } = { bar: "lorem", foo: "ipsum" }; // foo = "ipsum", bar = "lorem"

注：变量必须与属性同名，才能取到正确的值，与对象属性顺序无关

解构赋值允许指定默认值

let [x = 0] = []; // x值为0

只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值，比如Set：

let [x, y, z] = new Set(['a', 'b', 'c']); // x,y,z分别被赋值为a,b,c

应用

交换两个变量的值

[a, b] = [b, a]

函数参数解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

Set、Map数据结构

Set

Set与Array类似，但没有索引，其中的元素不能重复，因此可用于数组去重。
Set本身是一个构造函数，该函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化，如var set = new Set(['foo', 'bar'])

操作函数

元素操作：add(value)、delete(value)、has(value)、clear()

遍历操作：forEach()、keys()、values()、entries()

返回Set中的元素个数：size属性

Map

Map与Object类似，不同的是，Map中的key可以为任意数据类型，而Object中key只能是字符串。
Map本身是一个构造函数，该函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化，如new Map([[1, 'a'], [2, 'b']]),
注意：其中的每个entry也是一个数组结构

操作函数

元素操作：add(value)、delete(value)、has(value)、clear()

遍历操作：forEach(callbackFn[, thisArg])、keys()、values()、entries()

返回Set中的元素个数：size()

操作函数

元素操作：set(key, value)、delete(key)、has(key)、clear()

遍历操作：forEach(callbackFn[, thisArg])、keys()、values()、entries()

返回Map中的元素个数：size属性

模板字符串

避免了字符串拼接，书写和阅读起来更容易

类似 `My name is ${name}, I'm ${age} years old.`

类Class

class关键字、extends关键字、constructor方法（相当于Java中的构造方法）

Mixin 模式

将多个类的接口“混入”（mix in）另一个类，也就是可以将多个对象合成为一个类

装饰器Decorator

用于扩展类的行为。通常用于日志记录、权限验证等场景。

如果觉得一个参数不够用，可以在装饰器函数外面再封装一层带参函数。

如

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}

装饰器本身是一个函数，该函数的第一个参数是被装饰的目标对象，如以上代码内层函数中的target即为目标对象

一个类或类的方法上可以同时有多个装饰器，将先从外到内进入，然后由内向外执行。

语法类似于Java中的注解，但是：装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

箭头函数

函数的简化写法，形如 (args) => {statements}

如 array.forEach(a => console.log(a));

Object对象扩展

增加Object.defineProperty(obj, prop, descriptor)（操作对象属性）、Object.keys(obj)、Object.entries(obj)、
Object.values(obj)、Object.assign等函数

新增Symbol数据类型

用于防止属性名冲突，因为每个Symbol都是唯一的

Proxy 对象

运用了代理模式的思想，控制外部对目标对象的访问行为

通过 new Proxy(target, handler) 产生代理对象

target：目标对象

handler：对目标对象执行拦截行为的处理函数

Reflect 对象

异步编程

Promise

为解决大量的回调函数嵌套问题，使用链式的方式进行调用

三种状态：pending（进行中）、fulfilled（已成功）和 rejected（失败）

Generator 函数

生成器，借鉴了Python中的generator的概念和语法

yield 表达式

1、yield 是一个类似 return 的关键字，只是return的是个迭代器；
2、一旦一个generator 执行到yield语句，generator函数将会暂停执行，然后返回一个迭代器对象；
3、当调用next()方法或使用for...of...循环进行迭代的时候，函数中的代码才会开始被执行；
最终，generator函数终止，再调用generator将会引发StopIteration异常

两个特征：
1、function

关键字与函数名之间有一个星号（*），用于与普通函数区分开来；
2、函数体内部使用yield表达式，定义不同的内部状态

如

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

实际应用

Generator 函数可用于处理异步操作，改写回调函数

保证多个同步操作依次执行

async 函数

在函数声明时加上async关键字

本质是 Generator 函数的语法糖

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await

其返回值是一个Promise对象

如

function timeout(delay) {
  return new Promise((resolve) => {
    setTimeout(resolve, delay);
  });
}

async function asyncPrint(value, delay) {
  await timeout(delay);
  console.log(value);
}

asyncPrint('hello world', 50);

框架

ExtJS

重量级的前端UI框架

MVC框架

AngularJS

MVC

Model

模型，即数据

View

视图，即HTML页面

Controller

控制器，即用于操作模型数据的函数

表达式{{expression}}

指令directive

内置指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

其它如ng-bind、ng-if、ng-show、ng-repeat等

自定义指令

var app = angular.moudule('myApp', []);
app.directive('helloDirective', function() {
   return {
      restrict : 'E',
      template : '<h1>hello，directive!</h1>'
   }
})

其中 restrict 值可以是以下几种:

E 作为元素名使用，即标签。如<hello-directive></hello-directive>
A 作为属性使用。如 <p hello-directive>文本</p>
C 作为类名使用。如 <div class="hello-directive"></div>
M 作为注释使用。如

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

作用域

实际上是包含属性和函数的JavaScript对象

$scope（controller范围）、$rootScope（根作用域，即整个应用）

使用：作为参数传入Controller中

如：app.controller('myCtrl', function($scope) {
// do something
$scope.test = function() {}
})

服务Service

常用内置服务

$http

处理HTTP请求、响应

$location

对应JavaScript中的 window.location 对象

$timeout/$interval

分别对应JavaScript中的 window.setTimeout()/window.setInterval()函数

自定义服务

定义：app.service(name, fn)形式，其中name表示服务名，fn实际上就是该服务的构造函数

如：
app.service('print', function() {
   return function(msg) {
      console.log(msg);
   }
})

使用：作为参数传入Controller中

如：
app.controller('myCtrl', function($scope, print) {
$scope.print = print;
})

注：其中的$scope, print参数将由依赖注入器Injector自动完成实例化并传入

路由

基于hash，ngRoute 模块

主要是为SPA（Single Page Application，单页面应用）引入的，不需要页面刷新就能改变页面URL。通常是以#开头的hash形式

ng-view指令

定义路由的容器

$routeProvider

用于配置路由的内置服务

模块module

一个Angular应用可以包含多个模块，一个模块中可以包含多个控制器Controller、过滤器Filter、服务Service及指令Directive

定义及使用模块

语法格式：angular.moudule(name, [dependencies...])
注：当没有依赖模块时必须写成 angular.moudule(name, [])形式，其中[]不能省略

如：angular.module("myApp", ['ngRoute']);
其中myApp是模块名，ngRoute是依赖的模块

组件Component

定义组件：app.component(name, props)

如：
app.component('myComponent', {
   template: '<p>自定义组件</p>',
   controller: function($scope) {
       $scope.name = 'test';
   }
})

使用：作为HTML标签，如<my-component></my-component>

模板template

一般是包含angular表达式的HTML代码片段

双向数据绑定

模型与视图中的数据，其中一个发生变化，另一个随之改变

ng-model指令

过滤器

管道字符 ”|“，用于数据格式化

本质是一个函数，至少有一个参数，当然也可以有多个。默认会将管道字符前的作为第一个参数传入

常用内置过滤器

lowercase/uppercase

如 {{lastName | uppercase}}表示将lastName格式化为大写形式

currency

将数字格式化成货币表示形式

如：{{ 200 | currency: '￥' }} 格式化后结果为￥200

date

日期格式化

orderBy

数组元素排序

number

数字格式化

自定义过滤器

定义形如 app.filter(name, fn)

如：
app.filter('reverse', function() {
return function(text) {
return text.split('').reverse().join('');
}
})

注：该过滤器用于字符串反转

在模板中使用：{{'hello' | reverse}} 结果为 'olleh'

事件

ng-click、ng-change等指令，对应于JavaScript中的事件，如ng-click对应点击（onclick）事件

依赖注入

DI（Dependence Injection），IOC（Inverse of Control）

Angular

基于TypeScript

依赖注入

模块化

基于ECMAScript6模块规范：import、export命令

数据绑定

默认：单向数据绑定

BackboneJS

VueJS

表达式{{expression}}

生命周期

常用钩子函数：beforeCreate、created、mounted（挂载元素，获取到DOM节点）、updated

组件化

创建组件

通过Vue.component('组件名称', 属性)

通过new Vue({})函数

定义独立的.vue文件

包含HTML、CSS、JavaScript

组件间通信

父子组件

子组件=>父组件：基于事件触发的方式，使用vm.$emit实例方法。

子组件中使用$emit(eventName, [... args])触发一个自定义事件。如 this.$emit('change-name', 'Tom')，其中第一个参数changeName是一个自定义事件，后面的参数'Tom'就是要传递给父组件的数据。

父组件可以通过两种方式接收：

1）使用v-on指令进行接收，适用于$emit只有事件名的情况（如子组件调用@click="$emit('change')", 父组件使用@change="changeFunc"）；
2）使用$on(event, callback)监听该自定义事件，当有数据传过来时就用回调函数进行接收处理。
如
this.$on('change-name', function(name) {
this.name = name;
})

父组件=>子组件：使用prop传值

在父组件中定义prop，如 props: ['name']

子组件中直接使用该prop，如 <input name="url"/>

兄弟组件

指令directive

如v-model、v-bind、v-for、v-if、v-show等，与AngularJS类似

自定义指令

全局指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

组件内指令，使用directives属性

export default {
  data: function() {
    return {}
  },
  directives: {
    focus: {
      // v-focus指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
}

$nextTick

模块

使用ES6模块规范组织模块

事件支持

onclick事件

v-on:click，可简写为@click

onchange事件

v-on:change，同理可简写为@change

......

过滤器

管道字符 |，如{{lastName | uppercase}}表示将lastName格式化为大写形式

路由

主要是为SPA（Single Page Application，单页面应用）引入的，不需要页面刷新就能改变页面URL。
通常是以#开头的hash形式，也可以是普通的基于history模式的URL，后者更利于网站SEO

在VueJS中使用Vue-Router模块进行路由管理

定义路由

定义路由容器：<router-view></router-view>

// 创建路由对象，并挂载到Vue实例上，方便使用this.$router操作
const myRoutes = [

{path:'/',component: Index},

{path:'/login',component: Login}

]

const myRouter = new VueRouter({

routes: myRoutes

})

new Vue({

router: myRouter

})

路由跳转

声明式：<router-link :to="路由地址"></router-link>

编程式：this.$router.push({ path: '路由地址', name: '路由对应的name', query: {}, params: {} })

不带参数跳转：this.$router.push('路由地址')

路由嵌套

子路由

子路由的地址为父子路由地址拼接组成

如
{
path: '/',
name: 'index',
component: Index,
children: { path: '/login', name: 'login', component: Login }
}

路由传参

通过URL路径传参

路由配置：
{
path：'/detail/:id',
component: Detail
}

传参：this.$router.push({ path: '/detail/2'})
接收：this.$route.params.id

通过query对象

即通过查询字符串传参，参数会显示在URL上，类似HTTP的GET请求传参

路由配置：
{
path: '/detail',
component: Detail
}
传参：this.$router.push({ path: '/detail', query: { id: 2 }})
接收：this.$route.query.id

通过params对象

必须要指定目标路由的name属性。参数不会显示在浏览器地址栏上，类似HTTP的POST请求传参

路由配置：
{
path: '/detail',
name：'detail',
component: Detail
}
传参：this.$router.push({ name: 'detail', params: { id: 2 }})
接收：this.$route.params.id

虚拟DOM

对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。减少了真实DOM的更新次数，提高了效率。

数据绑定

默认：单向数据绑定

v-model指令：双向数据绑定

v-html指令：可绑定HTML元素内容

核心插件

Vue Router

路由管理

Vuex

状态数据管理

使用 new Vuex.Store({}) 创建一个Vuex实例

核心概念

State

保存应用级别的状态数据

通过this.$store.state获取状态数据

Getter

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler，用于更改状态，并且它会接受 state 作为第一个参数)

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Action 通过 store.dispatch 方法触发：store.dispatch('ADD')

使用

通常通过注入到根组件，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

UI框架

iview

具有丰富的UI组件

element-ui

库

jQuery

选择器

同CSS选择器

DOM操作

事件处理

动画

功能扩展

$.extend

类级别

$.fn.extend

对象级别

Ajax封装

类似的还有axios

ReactJS

用于构建用户界面UI，允许HTML和JavaScript混合着写，适用于构建较复杂的UI

Virtual DOM

对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。减少了真实DOM的更新次数，提高了效率。

组件化

将UI上每一个功能相对独立的模块定义成组件

组件的特征

可组合

简单的组件间可以进行组合，形成复杂的组件。反之，一个复杂的UI可以拆分成多个简单的UI组件

可重用

每个组件都是具有独立功能的，可用于多个场景

可维护

每个小组件仅包含自身的逻辑，更容易被维护

组件实现一个 render() 方法，它接收输入数据并返回显示的内容。输入数据可以通过 this.props 传入组件，被 render() 访问

创建组件

React.createElement(type, config, ...children) 函数

type : HTML标签类型，如 'div'

config: 属性，如 { className: '' }

children：子元素

字符串或ReactElement对象

返回值：ReactElement对象

渲染界面

ReactDOM.render(ReactElement element, DOMElement container[, function callback]) 函数

element：需要渲染的元素，ReactElement对象

container：渲染的目标容器，DOMElement对象

无返回值

JSX语法

JSX 是一个看起来很像 XML 的 ECMAScript 语法扩展

它允许在JavaScript中直接写HTML代码，而不需要字符串拼接，甚至可以直接在HTML中使用JavaScript变量以及表达式，只需要使用大括号{}包裹即可。

从本质上讲，JSX 是 React.createElement(type, config, ...children) 函数的语法糖

Hello World

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

该代码在页面中渲染了一个 “Hello, world!” 标题

模块化思想

AMD规范

用define定义模块，require引入模块

CommonJS规范：运行时模块

用exports向外暴露模块，require引入模块

ECMAScript6模块规范：编译时模块/静态模块

用export向外暴露模块，import引入模块

JavaScript引擎运行机制

JavaScript是单线程语言

这是为了避免多个线程同时对同一个DOM进行操作

执行栈

主线程上执行的任务栈

任务队列

一个存放等待主线程执行的异步/定时任务的事件队列

任务分类

同步任务

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务

异步任务

不在主线程上，而是被存放在任务队列中的任务，当主线程上的任务执行完后才会开始被执行

宏任务（macro-task）

包括整体代码script、setTimeout、setInterval

微任务（micro-task）

包括Promise、process.nextTick（NodeJS中的）

Event loop（事件循环）

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

执行顺序

同步任务在异步任务之前被执行，当主线程执行完同步任务后，会去任务队列里看是否有异步任务需要执行，如果有则取出来执行。

JSON

JavaScript Object Notation, JS 对象标记，即JavaScript对象的表示方法。
它是一种轻量级的数据交换格式，且浏览器天生支持，因此被广泛应用于网络数据传输。通常与Ajax技术一起使用

原生JavaScript API

JSON.parse()函数将字符串转换成json对象

JSON.stringify()函数将json对象转成字符串

Ajax

异步JavaScript和XML（Asynchronous Javascript And XML）。通过与服务器进行少量数据交换，实现网页局部刷新

开发库

jQuery

包括$.ajaxSetting、$.ajax、$.get、$.post等函数

axios

比jQuery轻量，当处理请求不多的时候，可以使用
基于Promise语法标准
支持nodejs
自动转换JSON数据

包括get、post、put、delete等函数

拦截器

请求拦截

响应拦截

fetch API

 收藏

立即使用

Java 8新特性

 收藏

立即使用

Java 9新特性

 收藏

立即使用

Python学习

 收藏

立即使用

前端开发

June X

职业：无

去主页





0 条评论

下一页

为你推荐

查看更多



前端系统流程