手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

前端梳理总结

时间:2021/6/11 12:10:25|来源:|点击: 次

这里写目录标题

  • 对C3 、H5的理解?
    • C3
    • H5
  • ES6
    • H5
  • JS、JQ、JSON
    • JS
    • JQ
    • JSON
  • 对Vue的理解?
    • Vue和React对比
    • vue-cli
    • vue-router
    • axios
    • vuex
  • element-UI
  • lay-UI
  • scss/sass

对C3 、H5的理解?

C3

H5

ES6

H5

JS、JQ、JSON

JS

JQ

JSON

对Vue的理解?

Vue和React对比

vue-cli

vue-router

axios

vuex

element-UI

lay-UI

scss/sass

对C3 、H5的理解?

C3:称为层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)的计算机语言。
可以静态地修饰网页,可以配合各种脚本语言动态地对网页各元素进行格式化。

H5就像一个很大的容器,可以存放文本、图片、音视频等,主要体现在移动网页上。h5新增了些语义化标签(功能更加便于理解、布局更清晰),表单元素、音视频、Web存储、渐变、过渡、动画等。

ES6?

ES6是续ES6之后的一次改进,相对于ES5更加简洁,提高了开发效率。
ES6新增方法:
新增命令let和const,let生命变量、const表示常量,都是块级作用域,不存在变量提升,只能先声明再使用。
特点:
const声明的是一个只读常量,在声明时就需要赋值。

JS、JQ、JSON?

JS:是一种轻量级的解释执行的非编译的脚本语言。
组成:ECMAScript,描述该语言的语法和基本对象。
文档对象模型DOM,描述处理网页内容的方法和接口。
浏览器对象模型BOM,描述与浏览器进行交互的方法和接口。
JS对象:
Array 数组
Boolean 布尔对象
Date 日期对象
Math 数字对象
Number 数值对象
String 字符串对象
RegExp 正则表达式对象
Functions 函数构造器
Events 事件

JQ:JQuery是一个轻量级的js框架,极大的简化了js的编程。
1、提供了强大的元素选择器:基本选择器、层次选择器、过滤选择器、表单选择器
2、提供了对css样式操作的支持,对class属性的增加删除、切换操作。
3、有DOM操作的封装,简化了dom节点的操作。
4、是一个为事件处理特点设计的框架,提供静态绑定事件和动态绑定事件,完善了事件的处理机制。
5、解决了大量浏览器的兼容性的问题:像常见的火狐浏览器不支持window对象的一个event属性,我们只能从html页面中显示的传入。还有像ie获取事件源使用的是srcElement而标准dom使用的是target。ie在停止冒泡时使用的是cancelbubble这个属性,而标准dom使用的是stopPropotation这个方法。像插件的还有在获取ajax对象时,ie使用的ActiveXObject而标准dom使用的是xmlHttpRequest对象。

常见的火狐浏览器不支持window对象的event属性,只能从html页面中显示的传入。
IE获取事件源----srcElement
标准DOM-----target
IE—停止冒泡—cancelBubble
标准DOM—stopPropotation
IE–获取ajax对象—ActiveXObject
标准DOM—XMLHttpRequest

6、极大的简化ajax编程,提供了一种更加简洁、统一的编程方式。
7、内置了一些简单有用的内置动画,像常见的slideDown/slideUp、hide/show、fadeIn/fadeOut等。支持基于定位机制使用animate来自定义动画。

JSON :简单的理解为js中的对象{ }和数组[ ],比较常用的是将JSON转换成字符串,字符串转为对象。是一种数据交换的文本格式,目的是取代繁重的xml。

json.stringify({a:10,b:20})  json转换为字符串  
将json对象转换为JSON字符:obj.toJSONString()
json.parse('{"a":10,"b":20'}')  字符串转换成json  eval()

在数据传输流程中,json是以文本,即字符串的形式传递,而JS操作的是JSON对象,使用,JSON对象和JSON字符串之间的相互转换是关键。

对Vue的理解?
总结:vue是一个开源的js框架,也是一个创建单页面应用的web应用框架。vue的单页面应用基于路由和组件的,路由用于设定访问路径。

Vue:是一个用于创建用户界面的开源JS框架,也是一个创建单页面应用的Web应用框架,能够更好的组织和简化Web开发。核心是MVC模型中的视图层,能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
Model:模型层,负责处理业务逻辑以及服务器端进行交互。
View:视图层,负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面。
ViewModel: 视图模型层,用来连接Model和View,是Model和View之间的通信桥梁。

组件化:将vue中的每一个.vue文件都可以视为一个组件。

优势:
1、降低系统的耦合度,在接口不变的情况下,可以替换不同的组件完成需求。
2、调试方便,由于整个系统是通过组件组合起来,出现问题时,直接排除组件问题,方便修改。
3、提高可维护性,每个组件负责的职责比较单一,可以被重复使用,使用对组件优化,就可以获得整个系统的整体提升。

常用的指令:响应式的作用于DOM
条件渲染: v-if
列表渲染:v-for
属性绑定:v-bind
事件绑定: v-on
双向绑定:v-model

Vue所有的界面事件,都是只操作数据的,JQuery操作DOM。
Vue所有界面的变动,都是根据数据绑定出来的,JQuery操作DOM。

Vue和React对比:
都有组件化
都支持服务器端端渲染
都有虚拟DOM
数据驱动视图
都有自己的构建工具。

vue-cli:是vue的脚手架工具

vue-router:是vue框架的一个路由插件,主要处理路由的跳转,返回值是一个构造函数。单页面中的路径切换就是组件的切换。路由的本质就是建立起URL和页面之间的映射关系。
在实现单页面前端路由时,提供了两种方式:Hash模式和 History模式。根据mode参数决定采用哪一种方式。

路由跳转页面的方式:
1、直接修改地址栏
2、this.$router.push(‘路由地址’)

单页面应用(SPA)核心之一:更新视图而不更新请求页面。
单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。

axios:基于Promise的一个库。
特征:

  1. 从浏览器中创建XMLHttpRequest
  2. 从node.js发出http请求
  3. 支持PromiseAPI
  4. 拦截请求和响应
  5. 取消请求
  6. 自动转换JSON数据

请求:

  1. get
  2. post
  3. put
  4. patch
  5. delete
  6. all

vuex:是一个专为Vue.js应用程序开发的状态管理模式。

属性:

  1. State
  2. getters
  3. mutations
  4. actions

vuex详解

Element-UI:是基于vue封装的组件库,简化了常用组件的封装,提高了重用性。
vue与elementUI的关系

layUI:是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

Layui官网

Bootstrap:是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap官网

scss/sass:是一个CSS的预处理器,用于辅助进行CSS开发。

scss与sass的区别
Sass官网
scss详解

Copyright © 2002-2019 某某自媒体运营 版权所有