认识达内从这里开始

在网页设计师和程序开发员之间还存在一个岗位，而这个就是web前端工程师。今天我们就给大家简单介绍一下，web前端开发技术的一些基础知识都有哪些，希望对大家能够有所帮助。

1. ES6

1.1. 箭头函数：

函数内的this对象，是定义时所在的对象，不是使用时所在的对象

不可当构造函数

用rest代替argument

this指向一般可变，但在箭头函数中固定

简单，单行，不会复用的函数建议使箭头函数

复杂，行多，使用传统

1.2. promise

解决异步回调多层嵌套的问题

pending 进行中

resolved 已完成

rejected 已失败

是一个容器;

包含某个未来结束的事件

是一个对象：

从它可获取异步操作的消息

特点

状态不受外界影响，只有事件结果决定

状态改变不会再变

缺点：

无法取消promise，一旦建立立即执行，中途无法撤回

无回掉函数的话，错误不反应到外部

pending时，状态无法得知

Promise.all

在不同的接口请求数据然后拼合成自己所需的数据，通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数)

Promise.race

它同样接收一个数组，不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回

1.3. interator

是一种接口，为所有数据结构提供一种统一的访问机制，即for...of 循环

作用：

一是为各种数据结构，提供一个统一的、简便的访问接口;

二是使得数据结构的成员能够按某种次序排列;

三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

interator遍历过程：

创建一个只针对象，指向当前数据结构的起始位置(遍历器对象本质是指针对象)

调用指针对象的next方法

使用场合：

解构赋值

扩展运算符(...)

yield*

for...in

为遍历对象设计，不适用数组

key

以字符串作为键名

遍历数字键以及手动添加的其他键

可能会以任意顺序遍历键名

for...of

语法简洁，无以上缺点

循环value

不同用于foreach方法，可以与break，continue，return配合使用

提供了遍历所有数据结构的统一操作接口，循环普通对象结合 bject.keys() 搭配使用

可自动遍历generator函数生成的iterator对象

除了遍历数组元素以外,还会遍历自定义属性

1.4. generator 函数

一种异步解决方案(一种封装了多个内部状态的状态机)

返回的不是函数运行结果，而是指向内部状态的指针对象

调用next方法，从停止地方开始执行，移向下一个状态

1.5. yield 与 return

相似：都能返回紧跟在语句后面那个表达式的值

区别：记忆功能，执行次数，返回值数量

1.6. 回调函数

JavaScript对异步编程的实现

1.7. ES6 Object.assign

将源对象(source)的所有可枚举属性，复制到目标对象(target)

Object.assign(target, source1, source2);

后面属性覆盖前面同名属性

一个参数时，返回该参数

参数不是对象，转成对象(undefined，null会报错)，若为源对象位置，则跳过

可用来操作数组，将数组视为对象

浅拷贝非深拷贝(若源对象的有对象属性值，则拷贝的是该引用)

用途：

为兑现添加属性/方法

克隆对象

合并对象

为属性指定默认值

2. 通信

2.1. JSONP

被包含在一个回调函数中的 json

核心是： 动态添加script标签调用服务器提供的js脚本

2.2. cors

使用自定义的http头部让浏览器与服务器进行沟通，确定该请求是否成功

核心：由服务器发送一个响应标头

2.3. web安全

1) 将重要的cookie标记为http only

2) 只允许用户输入期望值

3) encode

4) 过滤或移除特殊标签

5) 过滤JavaScript事件标签

3. 架构

3.1. 模块化

原理： 将复杂系统分解为代码结构更合理，可维护性更高，可管理的模块

目的： 只需完成自己的业务代码

发展过程：

commonjs

模块为单独的文件，require，同步使用

nodejs主要用于服务器进程，加载内容在本地磁盘

异步情况：浏览器环境中需要从服务器加载模块，需要采用异步模式

AMD(Asynchronous Module Definition)

允许输出模块兼容commonjs规范

require([module], callback);

模块加载与调用不同步，浏览器不会发生假死

requirejs curljs

CMD

seajs推广中对模块定义的产出

CMD与AMD区别：

amd推崇依赖前置(定义模块时申明其依赖的模块)，cmd推崇依赖就近(用时再require)

amd的api默认一当多，cmd推崇职责单一(amd中require分全局和局部)

requirejs 与 seajs 分析：

定位，requirejs想成为浏览器端的模块加载器，也想成为rhino/node等环境的模块加载器

seajs专注web浏览器端，通过node扩展方式方便跑在node端

标准，requirejs醉醺amd规范，seajs遵循cmd，api不同

理念，requirejs尝试让第三方类库修改自身来支持requirejs，seajs不强推，采用资助封装方式，已较成熟封装策略

质量，require

插件

作者：超然haha

来源：博客园

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!