中级前端知识点提要

其他 2019-03-02 13:51:26 阅读次数: 0

中级前端知识点提要

标签（空格分隔）： JavaScript HTML 基础

1 Restful API

Representational State Transfer（表现层状态转移）。
URL定位资源，用HTTP动词（GET POST PUT DELETE）描述操作。
资源、统一接口、URI、无状态。
应该将API的版本号放入URL；URL中只能有名词而不能有动词；API应该提供参数。

2 CommonJS/AMD/CMD/ES6 Module

2.1 CommonJS

是Node.js模块系统具体实现的基石

  • JavaScript: not just for browsers any more!
    为解决JavaScript没有模块系统，标准库较少，缺乏包管理工具。
  • 定义的模块
    • 模块引用（require）
    • 模块定义（exports）
    • 模块标识（module）
  • 运行环境
    • 服务端JavaScript应用程序
    • 命令行工具
    • 图形界面应用程序
    • 混合应用程序
  • 特点
    • 所有代码运行在模块作用域，不会污染全局作用域
    • 模块可以第一次加载，只在第一次加载时运行一次
    • 模块按照其在代码中出现的顺序加载（同步）
  • 包结构
    • package.json包描述文件，存在于包根目录下
    • bin存放可执行二进制文件的目录
    • lib存放js代码的目录
    • doc存放文档的目录
    • test存放单元测试用例代码的目录

2.2 AMD Asynchronous Module Definition(异步模块定义)

浏览器端的模块，不能采用“同步加载（synchronous）”，只能采用“异步加载（asynchronous）”。这就是AMD规范诞生的背景。
典型代表require.js

  • 模块定义

    define(id?: String, dependencies?: String, factory: Function|Object);
    • id是模块的名字。
    • dependencies是依赖模块列表，默认值是["require", "exports", "module"]。
    • factory是模块的具体实现。

  • 模块加载

    require([module], callback);
  • require.js
    • 实现js文件的异步加载，避免网页失去响应。
    • 管理模块之间的依赖性，便于代码的编写和维护。

2.3 CMD Common Module Definition（通用模块定义）

一个模块就是一个文件，依赖就近；懒加载（延迟执行）；没有全局require。
典型SeaJS

  • 模块定义

    define(factory);

    • factory是函数时，表示是模块的构造方法。

      define(function(require, exports, module) {
    // 模块代码
});

  • SeaJS和RequireJS的差异

    • 定位有差异
      RequireJS目的是同时作为浏览器端和服务器端的模块加载器。
      SeaJS专注于浏览器端。
    • 遵循规范不同
      RequireJS遵循AMD规范。
      SeaJS遵循CMD规范，更贴近CommonJS和Node Modules。
    • 执行方式不同（AMD和CMD的差异）
      RequireJS依赖前置，预执行（异步加载：依赖先执行）（RequireJS从2.0开始，也改成可以延迟执行）。
      SeaJS依赖就近，懒执行（运行到需加载，根据顺序执行）。
    • 对开发调试的支持有差异
      SeaJS有更多的调试插件。
    • 插件机制不同
      RequireJS采取源码中预留接口形式，插件类型比较单一。
      SeaJS采取通用事件机制，插件类型更丰富。

2.4 ES6 Module

ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
这一点不同于CommonJS和AMD模块。因此也不能实现动态加载（提案import([path])用于解决这个问题）。
一个文件就是一个模块。该文件内部的所有变量，外部无法获取，使用export关键字输出指定变量。

  • export命令

    • 使用as关键字重命名导出变量。

    • 对外的接口，必须与模块内部的变量建立一一对应的关系。比如：

      export 1; // 报错
var m = 1;
export m; // 报错
// 因为1只是一个值不是接口
// 正确应该是这样
export var m = 1;
export { m };

  • import命令

    • 使用as关键字重命名变量名。
    • import命令输入的变量是只读的，不能改写接口（比如重新赋值）；但是如果变量是个对象，修改属性是允许的（不建议这么做）。
    • from关键字指定模块文件的位置（相对/绝对路径）；.js后缀可以省略。
    • import命令具有提升效果，率先执行。
    • import命令是静态执行，不能使用表达式、变量或者在结构语句中。
    • 重复import只执行一次。

    • 使用*实现所有导出值都加载在as的对象上，比如：

      import * as obj from './module';
obj.a();

      虽然obj是个对象，但是不允许修改它的属性，比如：obj.a = 'Hello'; // 报错。

    • import默认输出（export default）时候不需要大括号，而其它的则需要。

    • 想要在一条import语句中同时导入默认接口export default和其它接口，可以用_实现：

      import _, { momduleA, moduleB as moduleC } from './module';

  • export default命令

    • 为用户指定默认输出。

    • 其它模块加载该模块时，import命令可以为该匿名导出接口指定任意名字（即便export时候是具名接口，在外部模块视为无效）。

      export default function foo() { };
import bar from './foo';
    • 一个模块只能使用一次export default。
    • 本质上export default就是输出一个叫做default的变量或方法，然后允许你为它取任意名字。
    • export default后面不能跟变量声明语句。

    • 可以直接把一个值或变量export default，比如：

      export default 123;
var a = 1;
export default a;

  • export与import复合写法

    export { foo as bar } from './module'; // 接口改名转发
export { default } from './module'; // 转发默认接口
export { foo as default } from './module'; // 转发具名接口为默认接口
export { default as foo } from './module'; // 转发默认接口为具名接口

  • 模块的继承

    假设有一个moduleA模块，继承了moduleB模块。

    // @file moduleA.js

export * from 'moduleB';
export var e = 123;
export default function() { };

    export *表示输出moduleB的所有属性和方法，且忽略default方法。

  • 跨模块常量

    建立一个constants文件夹，各个文件保存不同类型的常量，加一个index.js来合并（转发）这些常量，使用的时候直接加载index.js就可以了。

  • import()提案

    • 用于解决无法动态加载模块的问题。
    • 返回一个Promise对象。
    • import()与Node的require方法差异在于：异步加载。
    • 使用场景：按需加载、条件加载、动态模块路径。

    • 加载完成后模块会作为一个对象成为then方法的参数。
      可以使用对象解构赋值语法：

      import('module.js').then((export1, export2) => {
    // TODO
});

    • 同时加载多个模块

      promise.all([
    import('moduleA.js'),
    import('moduleB.js')
]).then(([moduleA, moduleB]) => {
    // TODO
});

3 三大框架底层原理

前端三大框架数据流动和原理

3.1 Angular2+

  • Angular2+是通过zone.js代理原生异步事件，事件发生触发tick()去执行变化检测。
  • Angular2+脏值检测（存储所有变量的值，每当有变量发生变化时，就将所有变量的旧值与新值比较，不相等就说明检测到变化），Angular每个组件都有自己的变化检测器；数据流从上到下（从根组件向下）。

3.2 Vue2+

  • Vue是通过Object.defineProperty()来劫持数据的getter/setter实现数据绑定。
  • 实现一个数据监听器observer，对所有属性进行监听，有变化通知订阅者。
  • 实现一个指令解析器compile，根据指令模板替换数据。
  • 实现一个watcher连接以上两者的联系。

3.3 React

  • Virtual DOM（虚拟DOM）。

4 跨域

跨域资源共享 CORS 详解

CORS Cross-Origin Resource Sharing(跨域资源共享)。
它允许向跨源服务器发出XHR请求。
实现关键是服务器实现了CORS接口，就可以跨源通信。

4.1 简单请求

同时满足两个条件：

  • 请求方法时以下三种之一
    • HEAD
    • GET
    • POST

  • HTTP头信息不超出以下几种字段

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type(仅限值为application/x-www-form-urlencoded、multipart/form-data、text/plain)。
4.1.1 基本流程

浏览器请求时，在head信息中增加Origin字段。
服务器根据Origin指定的源，判断是否在许可范围内：

  • 如果不在Response Headers中就不会有Access-Control-Allow-Origin字段，触发XHR的onerror回调。
  • 如果在，会返回以下字段：
Access-Control-Allow-Origin: https://www.google.com  // 必有字段， *（接受任意域名）或者是Request Headers里的Origin字段值

Access-Control-Allow-Credentials: true  // 可选字段，表示允许发送cookie；如果不发送删除该字段

Access-Control-Expose-Headers: FooBar  // 可选字段，XHR的getResponseHeader方法只能拿到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段，想要其他字段在这里指定

Content-Type: text/html;charset=utf-8
4.1.2 withCredentials属性

允许CORS发送cookie和http认证信息，服务器需要设置Access-Control-Allow-Credentials为true；浏览器端XHR请求需要设置：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

如果要发送cookie，Access-Control-Allow-Origin不能设置为*，必须指定明确，与请求网页一致的域名。同时，cookie依旧同源策略，只有服务器域名设置的cookie才会上传，浏览器端document.cookie无法读取服务器域名下的cookie。

4.2 非简单请求

非简单请求，会在正式通信之前增加一次HTTP查询请求，叫“预检请求(preflight)”。
用以询问服务器当前浏览器端网页所在域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定答复才会发起正式请求，否则报错。

  • Preflight请求方法是OPTIONS，表示询问请求。
    关键字段Origin。

    Access-Control-Request-Method  // 必有字段 表示CORS请求的HTTP方法

Access-Control-Request-Headers // 逗号分隔字符串，指定CORS请求额外发送头信息的字段

  • Preflight请求的Response。

    Access-Control-Allow-Origin  // 表示允许请求的源

Access-Control-Allow-Methods  // 必有字段，逗号分隔字符串，表示服务器支持的跨域请求的所有方法

Access-Control-Allow-Headers  // 如果request时包含Access-Control-Request-Headers字段，则此response字段必有。逗号分隔字符串，表示服务器支持的所有头信息字段

Access-Control-Allow-Credentials  // 是否允许cookie

Access-Control-Max-Age  // 可选，单位是秒，表示该条回应缓存时间

  • 浏览器正常请求和回应
    与简单请求一致。

4.3 与JSONP跨域的区别

JSONP只支持GET请求，其优势在于支持老版本浏览器。

5 同源策略

浏览器同源政策及其规避方法

Same-Origin Policy(同源策略)
1995年网景公司引入浏览器。目的是保证用户信息安全，防止恶意网站窃取数据。

  • 概念
    • 协议相同
    • 域名相同
    • 端口相同
  • 限制范围
    • cookie localStorage和indexDB
    • DOM
    • Ajax请求
  • 规避限制
    • cookie
      如果一个网站一级域名相同，二级域名不同。两个网页设置相同的document.domain共享cookie。
    • iframe

      • 片段标识符
        Fragment Indentifier指的是URL中#后面的部分
        父窗口可以把信息写入子窗口的片段标识符

        var src = './page-1.html' + '#test';
setTimeout(() => {
    document.getElementById('iframe').src = src;
}, 1000);

        子窗口通过监听hashchange事件得到通知：

        window.onhashchange = function() {
    console.log('Page-1 print fragment identifier: ', window.location.hash);
}

        同样的，子窗口也可以改变父窗口的片段标识符：

        parent.location.href = target + '#' + hash;

        demo如图所示：

        1.png-28.2kB

      • window.name
        无论同源，只要在一个窗口里，前一个网页设置了这个属性，后一个网页就可以读取它。

      • window.postMessage
        HTML5新API：跨文档通信（Cross-Document Messaging）。
        它允许跨窗口通信，不论是否同源。

    • ajax
      JSONP
      WebSocket
      CORS

6 闭包

闭包是函数和声明该函数的词法环境的组合。
闭包（closure）就是能够读取其它函数内部变量的函数（定义在一个函数内部的函数）。
本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

  • 作用
    • 读取函数内部的变量
    • 让这些变量的值始终保持在内存中
    • 实现私有属性
  • 不能滥用
    • 闭包在处理速度和内存消耗方面对脚本性能具有负面影响
    • 造成内存溢出

7 面向对象

面向对象程序设置(OOP)的目的是在编程中促进更好的灵活性和可维护性、

  • Namesoace（命名空间）
    一个独特、应用相关名字的名称下捆绑所有功能的容器。
    在js中，命名空间只是一个包含方法、属性、对象的对象。
  • Class（类）
    定义对象的特征。它是对象的属性和方法的模板定义。
    js通过定义函数来声明类(ES6之前)。
  • Object（对象）
    类的一个实例。
    js中的每个对象都是Object对象的实例且继承它所有的属性和方法。
  • Property（属性）
    对象的特征。
    通过this关键字调用类中的属性。
  • Method（方法）
    对象的能力（方法）。
    将函数赋值给类的prototype属性。
  • Constructor（构造函数）
    对象初始化的瞬间，被调用的方法。通常它的名字与包含它的类一致。

  • Inheritance（继承）
    一个类可以继承另一个类的特征。

    // 子类
// 调用父类构造器，确保（使用Function#call）“this”在调用过程中设置正确
Parent.call(this, args);
// 同时需要显示的继承父类的prototype
Child.prototype = Object.create(Parent.prototype);
// 设置constructor属性指向子类
Child.prototype.contructor = Child;

// Object.create()仅支持现代浏览器（IE9+），有shim方案
functuon createObject(proto) {
    function ctor() {}
    ctor.prototype = proto;
    return new ctor();
}

    通用方法：

    function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype; // uber 是在模拟 class 时用来表示 super 的(因为super是关键字所以不能直接用)
}
  • Encapsulation（封装）
    一种把数据和相关方法绑定在一起使用的方法。
  • Abstraction（抽象）
    结合复杂的继承、方法、属性的对象能够模拟现实的模型。

  • Polymorphism（多态）
    多意思是“许多”，态是“形态”。不同类可以定义相同的方法或属性。

8 继承与原型链

js只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为[[prototype]]）指向它的原型对象（prototype）。该原型对象也有一个自己的原型对象，层层向上直到一个对象的原型对象为null。根据定义，null没有原型，并作为这个原型链中的最后一环节。
几乎所有的js中的对象都是位于原型链顶端的Object的实例。

prototype属性属于构造函数，这个属性包含一个对象（prototype对象），所有实例对象需要共享的属性和方法，都放在这对象里；那些不需要共享的属性和方法，放在狗仔函数里。

9 前端优化

雅虎前端优化

  • Content
    • 减少HTTP请求次数
      • 合并文件
      • CSS Sprites(雪碧图)
      • image maps
      • inline images 使用data:url scheme内联图片
    • 减少DNS查询
      缓存DNS查询。
    • 避免重定向
      最浪费的重定向发生在url尾部slash(/)缺失。
    • 使Ajax可以缓存
      Add an Expires or a Cache-Control Header.
    • 延迟加载组件
      考虑什么是页面初始化必须的，剩下的内容和组件都可以延迟加载。包括隐藏的内容、折叠起来的图片等等。
    • 预加载组件
      • 无条件(Unconditional )预加载
        一旦onload触发，你立即获取另外的组件。比如谷歌会在主页这样加载搜索结果页面用到的雪碧图。
      • 有条件(Conditional)预加载
        基于用户动作，推测用户下一步会去哪里并加载相应的组件。
      • 预期的(Anticipated)预加载
        You can mitigate this side effect by preloading some components before you even launched the redesign.
    • 减少DOM数量
    • 跨域拆分组件
      使用2-4个域名来拆分前端资源。比如可以把HTML和动态内容部署在www.example.com，拆分静态资源到static1.example.com和static2.example.com。

    • 减少iframe数量
      iframe优点：
      * 解决缓慢的第三方内容的加载
      * 安全沙盒
      * 并行下载脚本

      iframe缺点：
      * 空的也消耗资源和时间
      * 阻塞了页面的onload
      * 非语义化
    • 不要404
      http请求是昂贵的，发出http请求但获得没用的响应（404）是完全不必要的。
  • Server
    • 使用CDN(Content Delivery Network)内容分发网络
      CDN是一群不同地点的服务器，可以更高效地分发内容到用户。
    • 在头信息使用Expires或是Cache-Control
      • 对静态组件：通过设置Expires头部来实现“永不过期”策略，比如图片。当组件更新后，必须更改文件名。
      • 对动态组件：用合适的Cache-Control来帮助浏览器进行有条件请求

    • Gzip压缩组件
      针对文本类型的文件（html，脚本，样式，xml和json等）。图片或pdf等不应该被gzip。
      可以减小http响应的大小从而减少响应时间。

      Content-Encoding: gzip

    • 配置Etag
      实体标记（Entity Tag, ETag）是服务器和浏览器之间判断浏览器缓存中某个组件是否匹配服务器端原组件的一种机制。实体就是组件：图片、脚本、样式等。ETag被当做验证实体的，且比last-modified（最后更改）更高效地机制。服务器这样设置组件的ETag:

      HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

      浏览器通过If-None-Match验证组件，如果ETag匹配，服务器返回304：

      GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
    • Flush the Buffer Early
    • Use GET for AJAX Requests
      获取数据应该用GET，提交数据到服务器用POST。
    • 避免空src的img
      • IE，向页面所在的目录发请求。
      • Safari和Chrome，请求实际的页面。
      • FireFox3及之前和Safari/Chrome一样，但从3.5开始修复问题，不再发请求。
      • Opera遇到空图片src不做任何事。
  • Cookie
    • 减小cookie体积
      • 消除不必要的cookie
      • 尽可能减小cookie的大小降低响应时间
      • 注意设置cookie到合适的域名级别，则其它子域名不会被影响
      • 适当设置Expires日期。
    • 为静态资源设置不同域名(Use Cookie-free Domains for Components)
      请求静态资源 不必传输cookie，所以启用一个新域名来托管静态资源。
  • CSS
    • 把样式文件放在顶部<head>。

    • 避免使用CSS表达式（CSS Expressions）

      // 背景颜色可以设置成每小时轮换
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
    • 避免使用@import
      在IE用@import等效于样式文件放到页面底部。
    • 避免使用过滤器(Filters)
      放弃IE的AlphaImageLoader。用PNG8来优雅降级。
  • JavaScript
    • 把脚本放在底部
      当脚本在下载，浏览器不会再下载其他组件，即使在不同域名下。
      一个替代建议是使用异步脚本。defer和async。
    • 使用外部CSS和js。
    • 压缩js和css
    • 删除重复脚本
    • 最小化DOM访问
      用js访问DOM元素是缓慢的:
      * 缓存访问过的元素的引用
      * 在DOM树外更新节点，然后添加到DOM树
      * 避免使用js实现固定布局
    • 使事件处理更灵活
      考虑使用事件委托。
      另外不必等到onload事件来开始处理DOM树，DOMContentLoaded更快。onload包含图片都被下载完毕才执行。
  • Images
    • 优化图片
      • 检查gif图片的palette size（调色板大小）是否匹配图片颜色数。
      • 可以把fig转成png看看有没有变小。gif一般可以转成png8，动画除外。
      • 运行pngcrush或其它工具压缩png。
      • 运行jpegtran或其它工具压缩jpeg。
    • 优化雪碧图(CSS Sprites)
      • 把图片横向合并而不是纵向，横向更小。
      • 把颜色近似的图片合并到一张雪碧图，这样可以让颜色数更少，如果低于256就可以用png8。
      • “Be mobile-friendly”并且合并时图片间的间距不要太大，这样对客户端解压时需要的内存更少。
    • 不要把大图片缩成小图片
      比如使用100x100的图片就使用这么大的，而不应该是500x500。
    • 使favicon.ico小且可缓存
      • 最好1k以下
      • 设置Expires头部，也许可以安全设置为几个月。
  • Mobile
    • 保持资源小于25k
      这个限制于iPhone不缓存大于25k的组件息息相关。而且注意是非压缩(uncompressed)的文件大小。
    • Pack Components into a Multipart Document

10 浏览器兼容性

  • 推荐一个reboot样式表Normalize.css。
  • html5shiv.js 解决IE9以下浏览器对HTML5标签不识别的问题。
  • respond.js 解决IE9以下不支持媒体查询的问题。
  • picturefill.js 解决IE9 10 11等不支持<picture>标签的问题。

  • 条件注释

    操作符 范例 含义
    lt [if lt IE 10] 小于
    gt [if gt IE 9] 大于
    lte [if lte IE 6] 小于等于
    gte [if gte IE 5.5 ] 大于等于
    ! [if !IE] 不等于
    () [if !(IE 7)] 子表达式
    & [if (gt IE 5)&(lt IE 7)] AND
    竖线(md表格语法问题) [if (IE 6)竖线(IE 7)] OR

    比如：

    <!--[if !IE]> 除IE外都可识别 <![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

  • 浏览器CSS兼容前缀

    -o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

  • a标签CSS状态顺序
    1 :link 平常状态
    2 :visited 被访问过之后
    3 :hover 鼠标悬浮
    4 :active 链接被点击

  • 求窗口大小

    // 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop || document.body.scrollTop;

11 浏览器内核

五大流浏览器内核及其代表
各主流浏览器内核介绍

浏览器的内核分为两个部分，一个是渲染引擎（Rendering Engine），一个是js引擎。现在就是引擎比较独立，内核更加倾向于说渲染引擎。

  • Trident(三叉戟)内核
    代表作是IE浏览器。
    281921581803533.jpg-254.4kB
  • Gecko(壁虎)内核
    代表作是Firefox。开源项目。
  • Webkit(引擎)内核
    苹果公司基于KDE的KHTML引擎开发的内核。
    由WebCore和JSCore构成。严格意义上来讲不仅仅是Rendering Engine。
    代表作是Safari、曾经的Chrome，开源项目。
    谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的Webkit作为浏览器内核原型，是Webkit的一个分支，可以称之为Chromium引擎。
  • Presto(说变就变)内核
    代表作是Opera(v7.0-v12.16)。13年Opera弃用了Presto转为WebKit分支上的Chromium。
  • Blink(闪亮)内核
    有Google和Opera Software开发的，2013年4月发布的浏览器排版引擎。现代Chrome(v28.0.1469.0~)内核是Blink。

12 经典算法和原理

13 TCP/IP协议

Transmission Control Protocol/Internet Protocol（传输控制协议/因特网互联协议）又名网络通讯协议，是Internet最基本的协议，Internet国际互联网的基础，由网络层的IP协议和传输层的TCP协议组成。

14 HTTP协议

HyperText Transfer Protocol（超文本传输协议），是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信基础。万维网协议（World Wide Web Consortium, W3C）。
通过HTTP或HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers, URI）来标识。

15 OSI模型

有国际标准化组织提出的使各种计算机在世界范围内互连为网络的标准框架。
Open System Interconnection Reference Model(开放式系统互联通信参考模型)

  • 第1层 物理层
  • 第2层 数据链路层
  • 第3层 网络层
  • 第4层 传输层
  • 第5层 会话层
  • 第6层 表达层
  • 第7层 应用层

16 MVC设计模式

  • Model
    数据模型
  • View
    视图
  • Controller
    数据模型和视图之间的控制器。用户和应用产生交互时，控制器中的事件触发器触发工作，更新视图或者更新数据。

17 MVVM设计模式

  • Model
    数据层的域模型，域模型同步，主要用于抽象出ViewModel中视图的Model。
  • View
    视图动态模板。处理状态，数据绑定的声明、指令的声明、事件绑定的声明。
  • ViewModel
    处理View层的具体业务逻辑。底层做好绑定树形的监听，实现双向绑定。

18 分层架构模式

分层架构（3-tier architecture）：界面层、业务逻辑层、数据访问层。
为了高内聚低耦合的软件设计思想。

19 三次握手

20 call & apply

是为了动态改变this而生（重新定义函数的执行环境）。

21 Map

Map

Map对象保存键值对。任何值（对象或原始值）都可以以为一个键或一个值。
new Map([iterable]);
iterable可以是一个数组或者其他iterable对象，其元素或为键值对，或为两个元素的数组。每个键值对都会添加到新的Map。null会被当做undefined。

22 this

javascript this

this指的是函数运行时所在的环境。
由于函数可以在不同的运行运行环境中执行，所以需要一种机制，能够在函数体内部获得当前运行环境（context）。这就是this的由来，它设计的目的就是在函数体内部，指代函数当前的运行环境。

23 undefined和null区别

  • null表示没有对象（此处不应该有值）
    • 作为函数的参数，表示该函数的参数不是对象
    • 作为对象原型链的终点
  • undefined表示缺少值（此处应该有一个值，但是还没有定义）
    • 变量被声明了，但是没有赋值，就等于undefined；像GoLang里的零值
    • 调用函数时，应该提供的参数没有提供，这个参数等于undefined
    • 对象没有赋值的属性，该属性值为undefined
    • 函数没有返回值时，默认返回undefined

24 HTML5之websocket

HTML5 WebSockets Api

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

  • webSockets
    用于连接websocket服务器的主要接口，之后可以在这个连接上发送和接受数据。
  • closeEbent
    连接关闭时wensocket对象发送的事件。
  • messageEvent
    当从服务器获取到消息时websocket对象触发的事件。

25 HTML5之history

HTML5 history Api

26 HTML5之canvas

27 HTML5之picture

HTML5 picture

是一个容器，用来为其内部特定的<img>元素提供多样的<source>元素。浏览器会根据当前页面的布局以及当前浏览的设备区从中选择最合适的资源。

<picture>
    <source srcset="./img/1.jpg" media="(max-width: 992px)">
    <source srcset="./img/2.jpg" media="(max-width: 1200px)">
    <img src="./img/3.jpg" alt="3">
</picture>

gif2233.gif-16307.2kB

微信截图_20190302125546.png-44.3kB

28 HTML5之localStorage和sessionStorage

29 W3C标准

W3C标准文档

  • 网页设计和应用
    • HTML和CSS
      • HTML
        HTML is the language for describing the sticture of web pages.
        用途：
        * 发布带有头部、文字、表格、列表、图片等的在线文档
        * 点击按钮通过超文本链接检索在线信息
        * 设计表单，用于和远程服务进行交易，用户搜索信息，预定，订购产品等
        * 直接在其文档中包含电子表格，视频剪辑，声音剪辑和其它应用程序
      • XHTML
        XHTML is a variant(变种) of HTML that uses the syntax(语法) of XML, the Extensible Markup Language(可扩展标记语言).
      • CSS
        CSS is the language for describing the presentation(呈现) of web pages, including colors, layout, and fonts.
        It allows one to adapt(适应) the presentation to different types of devices, such as large screens, small screens, or printers(打印机).
      • WebFonts
        WebFonts is a technology that enables people to use fonts on demand(按需) over the Web without installation in the operating system(操作系统).
    • JavaScript Web APIs
    • Graphics
      png, SVG, Canvas API. WebCGM
    • Audio and Video
    • Accessibility(无障碍)
      W3C的Web Accessibility Initiative(WAI 网页可访问性计划)发布了Web Content Accessibility Guidelines(WCAG 网页内容可访问性指南)，以帮助开发者创建对残障人士可访问的内容。
    • Internationalization(国际化)
    • Mobile Web
    • Privacy(隐私)
    • Math on the Web

30 自动化发布，前端自动化

31 前端工程化

32 微信小程序

33 前端架构设计

34 ES6/ES7常用

35 cookie操作

36 函数和变量的预解析

函数和变量声明会置顶，函数声明在变量声明之上。所以即便书写的代码变量声明在函数声明之上，变量声明也不会被覆盖。

以下是个典型的题目：

function Foo() {
    // 没有用var，变量提升
    bar = function() {
        console.log(1);
    };
    return this;
}

Foo.bar = function() {
    console.log(2);
};
Foo.prototype.bar = function() {
    console.log(3);
};
var bar = function() {
    console.log(4);
};

bar = function() {
    console.log(6);
};

function bar() {
    console.log(5);
}


Foo.bar(); // 2
bar(); //** 6
Foo().bar(); // 1
bar(); //** 1
new Foo.bar(); // 2
new Foo().bar(); // 3
new new Foo().bar(); // 3

37 CSS3新增伪类

38 HTML5遗弃的元素

39 event对象

40 XMLHttpRequest基础

41 Ajax基础

42 src和href属性

43 Web应用实现推送的方式

44 CSS盒模型

猜你喜欢

转载自www.cnblogs.com/jehorn/p/10460740.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022