首页  思维导图  详情

前端开发

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

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

......

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，又爱又恨~）

<div class="example_code">a:link {color:#FF0000;} /* 未访问的链接 */ <div class="hl-main">a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标悬浮在链接上 */ a:active {color:#0000FF;} /* 已选中的链接 */</div> button:active{} /*点击时的按钮，效果类似JavaScript的click事件*/ button:hover{} /*鼠标悬浮在按钮上*/ </div>

其它伪类

: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布局

<figure class="highlight"><pre><code class="language-css" data-lang="css">.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }</code></pre></figure>

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

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

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

animation

<pre>用法：animation: name duration timing-function delay iteration-count direction;</pre>

过渡

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方法

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

事件机制

事件冒泡

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

阻止事件冒泡：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范围

函数的参数默认值

如<code>: function log(x, y = 'default') {</code> <code></code><code>  console.log(x, y);</code> <code></code><code>}</code>

rest 参数

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

... 变量名

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

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

扩展运算符

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

主要用于函数调用传参

<pre class=" language-javascript"><code class=" language-javascript">function add(x, y) { return x + y; } add(...</code><code class=" language-javascript">[4, 38]</code><code class=" language-javascript">) // 42</code></pre>

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

<pre class=" language-javascript"><code class=" language-javascript">// 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); </code></pre>

变量的解构赋值

包括数组、对象等

数组解构赋值

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：<pre class=" language-javascript"><code class=" language-javascript">let [x, y, z] = new Set(['a', 'b', 'c']); // x,y,z分别被赋值为a,b,c</code></pre>

应用

交换两个变量的值

[a, b] = [b, a]

函数参数解构赋值

<pre class=" language-javascript"><code class=" language-javascript">function add([x, y]){ return x + y; } </code><code class=" language-javascript">add([1, 2]); // 3</code> <code class=" language-javascript"></code></pre>

Set、Map数据结构

Set

<code>Set</code>与<code>Array</code>类似，但<code></code>没有索引，其中的元素不能重复，因此可用于数组去重。 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

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

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

如<pre class=" language-javascript"><code class=" language-javascript">function testable(isTestable) { return function(target) { target.isTestable = isTestable; } } @testable(true) class MyTestableClass {}</code></pre>

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

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

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

箭头函数

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

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

Object对象扩展

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

新增Symbol数据类型

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

Proxy 对象

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

通过<code class=" language-javascript"> new Proxy(target, handler) 产生代理对象</code>

target：目标对象

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

Reflect 对象

异步编程

Promise

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

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

Generator 函数

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

yield 表达式

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

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

如 <pre class=" language-javascript"><code class=" language-javascript">function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; }</code></pre>

实际应用

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

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

async 函数

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

本质是 Generator 函数的语法糖

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

其返回值是一个Promise对象

如 <pre class=" language-javascript"><code class=" language-javascript">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); </code></pre>

框架

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 值可以是以下几种: <ul><li><code>E</code> 作为元素名使用，即标签。如<hello-directive></hello-directive> </li><li><code>A</code> 作为属性使用。如 文本 </li><li><code>C</code> 作为类名使用。如 <div class="hello-directive"></div> </li><li><code>M</code> 作为注释使用。如  </li></ul>restrict 默认值为 <code>EA</code>, 即可以通过元素名和属性名来调用指令

作用域

实际上是包含属性和函数的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: '自定义组件',    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实例方法。

<ul><li>子组件中使用$emit(eventName, [... args])触发一个自定义事件。如 this.$emit('change-name', 'Tom')，其中第一个参数changeName是一个自定义事件，后面的参数'Tom'就是要传递给父组件的数据。</li></ul><ul><li>父组件可以通过两种方式接收：</li></ul>1）使用v-on指令进行接收，适用于$emit只有事件名的情况（如子组件调用@click="$emit('change')", 父组件使用@change="changeFunc"）； 2）使用$on(event, callback)监听该自定义事件，当有数据传过来时就用回调函数进行接收处理。 如 this.$on('change-name', function(name) {   this.name = name; })

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

在父组件中定义prop，如<code class="hljs handlebars has-numbering"> props: ['name']</code>

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

兄弟组件

指令directive

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

自定义指令

全局指令

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

组件内指令，使用directives属性

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

$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 = [<div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-12">  {path:'/',component: Index},</div><div class="crayon-line" id="crayon-5b325f7e19f53056924892-13">  {path:'/login',component: Login}</div><div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-14"> ] </div><div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-16"> const myRouter = new VueRouter({</div><div class="crayon-line" id="crayon-5b325f7e19f53056924892-17">  routes: myRoutes</div><div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-18"> })</div><div class="crayon-line" id="crayon-5b325f7e19f53056924892-19"> </div><div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-20"> new Vue({</div><div class="crayon-line" id="crayon-5b325f7e19f53056924892-21">   router: myRouter</div><div class="crayon-line crayon-striped-line" id="crayon-5b325f7e19f53056924892-22"> })</div>

路由跳转

声明式：<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，不同在于：<ul><li>Action 提交的是 mutation，而不是直接变更状态。</li><li>Action 可以包含任意异步操作。</li></ul>

Action 通过 <code>store.dispatch</code> 方法触发：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组件

可重用

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

可维护

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

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

创建组件

<code>React.createElement(type, config, ...children)</code> 函数

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 是 <code>React.createElement(type, config, ...children)</code> 函数的语法糖

Hello World

<pre class="gatsby-code-jsx"><code>ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );</code></pre>

该代码在页面中渲染了一个 “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

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

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

拦截器

请求拦截

响应拦截

fetch API

 收藏

立即使用

Java 8新特性

 收藏

立即使用

Java 9新特性

 收藏

立即使用

Python学习

 收藏

立即使用

前端开发

June X

职业：无

去主页





0 条评论

下一页

为你推荐

查看更多



开发流程

发票前端

前端