前端必要技能

用户6683436872293
94 阅读5分钟

一、 AJAX

1、概念：

同步交互：用户向服务器端发起请求的时候，直到服务器进行响应的全过程，用户是不可以做其他事情的（等）
	 典型：网址请求、表单请求 - 目前我们一直都在使用同步交互

异步交互：用户向服务器端发起请求的时候，直到服务器进行响应的全过程，用户是可以做其他事情的（不等）
	 典型：ajax请求
ajax：asynchronous JavaScript and XML; 直译：异步的js和xml - 前端技术
        不严格的定义：页面不会完整的刷新，只会导致局部页面发生变化
           异步技术/代码：
	1、定时器：定时器里面的内容再耗时也不会卡住后续代码 - 做特效
	2、ajax：目的：再不刷新页面的情况下就和服务器端进行交互/沟通 - 不用表单提交也能和服务器端交流了，可以将服务器端的数据放到前端

2、如何使用：固定4步骤

1、创建ajax的核心对象XMLHttpRequest;
	var xhr=new XMLHttpRequest();
2、建立和服务器端的连接
	xhr.open("GET","路由");
3、向服务器端发送请求
	xhr.send();
	特殊：GET请求：xhr.send()会失效，但是还不能省略，必须写为xhr.send(null); 请求消息需要放到路由后面
		xhr.open("GET","路由?key=value&key=value");
4、绑定状态监听事件
	xhr.onreadystatechange=()=>{
		if(xhr.readyState==4&&xhr.status==200){
			xhr.responseText; - 得到服务器端响应的文本，难就难在你拿到你想要的东西要干嘛（数据渲染、判断...）
		}
	}

二、常用的数据格式

1、XML数据格式：

面试题：HTML\XHTML\DHTML\XML分别是什么？
	HTML - 网页
	XHTML - 更严格的网页
	DHTML - 动态的网页：D：Dynamic - 不是新技术、新概念，只是现有技术整合的统称，让我们的网页在离线版依然具有动态特效
                   DHTML：HTML+CSS+JS(dom)
	XML - 配置文件|数据格式
	保存数据有两种方式：
		1、把数据放到数据库
		2、把数据保存在一个文件之中.xml文件 - low

1、如何使用xml：
	1、创建xx.xml文件
	2、必须写上声明标签<?xml version="1.0" encoding="utf-8"?>
		version - 版本号：目前的版本只有1.0和1.1，但是1.1升级的并不理想，所以市场上还是主流使用1.0版本，学完过后以后也不需要在学了，因为他不会更新了，淘汰了
	3、必须写上【一个】根标签，而且只能写一个根标签（标签），没有任何的预定义标签，所有的标签都是自定义的，意味着你想写啥子标签随便你
	4、里面随你，想放啥子就放啥子
	5、恭喜你学完了

	需要使用node.js去读取存储好的xml文件，响应给前端，
	前端依然使用ajax去访问node.js，接住响应的数据必须写为xhr.responseXML - 得到的就是一个dom对象，可以使用核心DOM来进行解析
	缺点：核心DOM语法解析XML非常繁琐

2、***JSON数据格式：

JavaScript Object Notation：js对象表示法，本身就是js的一部分
        作用：数据格式 类似 XML
        优点：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式/结构能极大的提升我们程序员的开发效率
        属于【字符串】数据表示法

1、后端：哪些数据JSON字符串：后端把数据库的数据取出来，整理为一个JSON字符串：
	1、先要认识哪些叫做JSON字符串：
		1、'[1,2,3,4,5]'
		2、'{"key":value}'
		3、'[{},{},{},{},{}]'
		4、'{"names":["xxx","xxx","xxx"]}'
	2、怎么才能变为JSON字符串：
		*JSON.stringify(x);
2、前端：依然使用ajax去获取数据，但是真正重要的是xhr.responseText;
               拿到JSON字符串并不能直接使用，需要解析
		1、eval("("+jsonTxt+")"); - 只要外层是{}，优先级就会出现问题，导致解析报错
		2、*JSON.parse(jsonTxt);

3、h5十大新特性：

一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图 - 数据可视化，如饼状图，柱状图，曲线图... 这些都有现成的框架，echars.js
五、SVG绘图 - 画小图标 - 我们画的丑，但是网上一大堆
六、拖拉API
七、WebWorker
八、WebStorage：客户端存储技术/前端存储技术：
	1、其实有两种：
		1、把数据放在location的查询字符串里面
		2、cookie技术：几乎淘汰了，解析方式非常麻烦，能存储的大小2kb
		3、WebStorage：使用起来简单快速，解析方便，能存储4mb
			作用：1、能在客户端存储数据
			          2、跨页面也能使用
			分两大类：
				1、sessionStorage - 会话级，浏览器一旦关闭数据就被删除了
				2、localStorage   -  本地级，永久存储此数据

			操作：xxxStorage是一个对象
			    保存：xxxStorage.属性名=属性值;
			    读取：xxxStorage.属性名
			    删除：xxxStorage.removeItem("属性名");
			    清空：xxxStorage.clear();

九、WebSocket
十、地理定位 - 百度/高德地图
    1、为什么你们现在开发这么缓慢？
1、不够熟悉 - 解决：多敲多练，猛肝自然强
2、我们目前学习的所有的东西都需要自己纯手敲，我们学的都是原生的东西 - 最值钱

三、框架

1、简介

目的：来简化开发
        底层就是原生JavaScript，一定进行了简化开发，比如：vue和react提供了虚拟DOM
当今社会最流行的3大框架：
	vue.js（国人自己开发，鱿鱼须开发的，借鉴了react和angular，三大框架中最简单）
	react.js（如果原生JS学的越好，这个就越简单）
	angular.js（国外很多）

jquery框架：3大框架出现之前，全球最流行的，只有一些老项目可能用到：淘宝

node.js的框架：简单的如插件库+express框架

2、简单的插件库：

1、日期插件：
        一、wdatepicker.js：- 不好看
        使用方法：
                1、下载引入：<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
                2、书写js：
		inp.onfocus=function(){
			WdatePicker({
			el:"inp",//el -> element 你的日期选择器选择的元素是哪个
			//更多的键值对可以看源代码
			});
			}

        二、layUI.js - 插件库：提供了HTML/CSS/JS，那我们只需要下载，梭代码
		组件：组成网页一部分的部件（比如：导航条...）
		插件：跟组件差不多，但是有js功能（比如：轮播、选项卡...）
		框架：包含各个方面
                    
		插件的固定使用步骤：
			1、引入该引入的
			2、选择你喜欢的梭到你的项目中
			3、根据设计图修改css
			4、ajax拿数据进行渲染

2、无敌的插件库：
        1、jQuery插件库 - 尽量使用简单易用的插件，方便以后修改 - 缺陷：每日免费下载2个
        2、jQuery之家 - 免费的
avatar
文章
阅读
粉丝