总结前端基础模块分类

Demi
1,188 阅读7分钟

在我刚开始想入门学习前端的时候，完全不知道如何下手，从什么地方开始着手学习，也不知道前端工程师都应该具备什么知识能力，在学习了一段时间的前端后，根据查阅的资料文章，对前端的模块进行了总结。

前端模块

读书笔记.png

CSS和HTML

HTML指的是文本标记语言，不是一种编程语言，他定义了网页内容的含义和结构。HTML包含了语言、元素、补充标准等，元素又包含文档元素信息、表单、表格等。

CSS则是用来给基础的HTML的一些内容增加一些颜色的。语言分为：选择器、单位。功能：布局、绘制、交互等方面的。

  • css和HTML都是前端入门学习非常基础的部分，可以通过浏览、w3school、菜鸟教程等网站，通过阅读文章动手实践，就能快速掌握。

JavaScript

JavaScript和ECMAScript通常被人用来表达相同的意思，但JavaScript的含义去比ECMA-262中规定的多得多。一个完整的JavaScript实现应由三个部分组成：

1.核心（ECMAScript）

2.文档对象模型（DOM）

3.浏览器对象模型（BOM）

ECMAScript

　　由ECMA-262定义的ECMAScript其实与Web浏览器没有依赖关系。Web浏览器只是ECMAScript实现可能的宿主环境之一。ECMA-262定义的只这门语言的基础，而在此基础上可能构建更完善的脚本语言。说回宿主，它不仅提供基本的JavaScript的实现，同时也会提供该语言的扩展，比如DOM。其他宿主环境还包括Node和Adobe Flash。

ECMA-262标准主要规定了这门语言的以下组成部分：

1.语法，2.类型，3.语句，4.关键字，5.保留字，6.操作符，7.对象。

文档对象模型（DOM）

文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

比如下面这个页面：

<html>
    <head>        
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>   
    </body>          
</html>

可以通过下面这个分层节点树表示：

通过DOM创建的这个表示文档的树形图（通常也被称作文档树），程序员可以通过DOM提供的API，轻松的对其中的任何节点进行删除、添加、修改等操作。

浏览器对象模型（BOM）

　　开发人员可以使用BOM来控制浏览器显示页面以外的部分。而BOM真正与众不同或者说经常导致问题的地方在于它是JavaScript实现的一部分却不像DOM有着相关的标准。这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入规范。HTML5发布后，很多关于BOM的困惑也就消失了。从根本来讲，BOM只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分。下面就是一些这样的扩展:

  • 弹出新浏览器窗口的功能；移动、缩放和关闭浏览器窗口的功能；
  • 提供浏览器详细信息的navigator对象；
  • 提供浏览器所加载页面的详细信息的location对象；
  • 提供用户显示器分辨率详细信息的screen对象；
  • 对cookies的支持；
  • 像XMLHttpRequest和IE的ActiveXObject（AJAX的核心实现）这样的自定义对象。

前端框架

目前我觉得应用最多的前端框架就是 vue、 react 以及 Angular.

vue

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

vue的渐进式表现为：

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

vue的主要特点

  1. 双向数据绑定-当数据发生变化是，vue自动更新视图
  2. 轻量级
  3. 组件化-划分组件可维护、可重用、可测试.
  4. 状态管理
  5. MVVM模式
M： model （数据层，也就是指数据）
V：view ( 用户界面 )
VM : view-model (处理数据和界面的中间层)

react

在 React 问世之前，已经有 backbone.js 与 Angular.js 等成熟的大型前端框架了，然而 Facebook 的工程师们发现，在面对复杂的业务场景（例如：频繁操作DOM）时，这些框架都无法带来良好的页面性能，于是他们打算着手自己开发一个框架解决这一问题，所开发出的框架就是 React。

react的主要特点

  1. 单向数据流
  2. 纯粹的JavaScript语法
  3. 也具有组件化-划分组件可维护、可重用、可测试.

Angular

Angular的主要特点

  1. 依赖注入
  2. 数据双向绑定
  3. 测试驱动开发
  4. MVC模式
M:Model：数据，其实就是angular变量($scope.XX);
V:View：数据的呈现，Html+Directive(指令);
C:Controller：操作数据，就是function,数据的增删改查;

前端工程化

在日常开发的过程中，怎样使编写的项目更高效的进行多人合作，确保项目的可维护行，提高开发的质量。前端工程化主要就是为了解决上述大部分问题的。 前端工程化应该从模块化、组件化、规范化、自动化这四个方面来考虑。

模块化

模块化就是将大文件拆分为互相依赖的小文件，在进行统一的拼装加载，模块化只是在文件层面上的，对于代码或者资源的拆分。

组件化

组件化是在设计层面上的，是对于UI的拆分，在UI上拆分下来的每个包含模板+样式+逻辑功能完善的结构单元，我们称之为组件。

规范化

初期的规范制定的好坏对后面的集体开发很有影响 一般会有的规范内容：

  • 目录结构的制定
  • 编码规范
  • 前后端接口规范
  • 文档规范
  • 组件管理
  • Git分支管理
  • Commit描述规范
  • 定期CodeReview
  • 视觉图标规范

自动化

  • 自动化构建
  • 自动化部署
  • 自动化测试

前端性能优化

  • 减少HTTP请求
  • 使用HTTP2-多路复用、解析速度快、首部压缩、可设置优先级、流- 量控制、服务器推送
  • 使用服务端渲染
  • 静态资源使用CDN
  •  将 CSS 放在文件头部，JavaScript 文件放在底部
  • 使用字体图标 iconfont 代替图片图标
  • 使用缓存，不重复加载相同的资源
  • 压缩文件
  • 图片优化 -图片延迟加载、降低图片质量、使用css代替图片、使用webp格式图片
  • 通过 webpack 按需加载代码、提取第三方库代码、减少ES6转为ES5的多出的代码
  • 减少重绘和重排
  • 使用事件委托减少内存
  • 使用webWorkers
  • 使用transform 和opacity属性更改动画

typeScript

typeScript是JavaScript的一个超集，支持ECMAscript6标准，现有的JavaScript代码能与typeScript一起工作不需要修改。

Node

node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。能够编写高性能网络服务器的Javascript工具包，单线程运行、异步等特点。

网络

  • HTTP协议
  • tcp三次握手
  • 四次挥手
  • 跨域

设计模式

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。 设计模式大概可以分为：创建型模式、结构性模式、行为型模式、J2EE设计模式。

创建型模式

创建型模式.png

结构型模式

模式.png

行为型模式

读书笔记 (1).png

J2EE设计模式

读书笔记 (2).png

数据结构/算法

  • 栈
  • 队列
  • 链表
  • 串
  • 快速排序
  • 冒泡排序
  • 选择排序
  • 插入排序

web安全

  • XSS
  • CSRF
  • 点击劫持
  • URL跳转漏洞
  • SQL注入
  • OS命令注入攻击
avatar
文章
阅读
粉丝