大前端开发第二阶段知识点回顾总结

举报
运气男孩 发表于 2021/08/22 23:15:00 2021/08/22
【摘要】 大前端开发第二阶段总体来说可以分为三个板块:AJAX篇、H5篇、小程序篇。现在我带着大家回忆一篇,也算对自己这个阶段的总结和收获。AJAX篇什么是Ajax?AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与...

大前端开发第二阶段总体来说可以分为三个板块:AJAX篇、H5篇、小程序篇。现在我带着大家回忆一篇,也算对自己这个阶段的总结和收获。

AJAX篇

什么是Ajax?

  • AJAX = Asynchronous JavaScript and XML异步的 JavaScript 和 XML)。

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

  • AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

AJAX 能做什么?

  • 运用 XHTML+CSS 来表达资讯;

  • 运用 JavaScript 操作 DOM(Document Object Model)来执行动态效果;

  • 运用 XML 和 XSLT 操作资料;

  • 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换;

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open()  send() 方法:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText  获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

GET 还是 POST

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)

  • 向服务器发送大量数据(POST 没有数据量限制)

  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

还有AJAX的实战:https://bbs.huaweicloud.com/blogs/288623,收获挺多。

H5篇

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。HTML5是构建Web内容的一种语言描述方式,也是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。

画布

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,你必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制.

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

视频

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了 播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。

音频

control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

滚轮事件与滑动事件的区别:
 1.scroll事件在window对象上绑定,通过混合模式下的document.body或者标准模式下的document.documentElement的scrollLeft和scrollTop属性监控滚动条的位置。
 2.滚轮事件即可绑定到window或者document上,也可绑定到Element上。
 3.scroll事件必须出现滚动条才会触发,而滚轮事件只是普通的鼠标事件,滚动滚轴就可触发。

小程序篇


微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

微信小程序这个词可以分解为“微信”和“小程序”两部分。其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。“小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

结构:

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

总结:

在学习和开发的过程中,我主要会参考开发文档和视频里老师的介绍当我遇到一个自己不会的知识点时,我会进行百度,进行泛读,充分结合各个大神的文章,进行理解,重点是自己个人的理解.做笔记.辩证的看待每个人的文章,然后提炼到自己的笔记里。遇到难点时,我会询问列表里的大神,是否在工作中也是这个做法.得到答案. 整理以后,可以用自己的话描述出这些知识点. 在讲的过程中,就会发现自己的话有瑕疵,就会去寻找正确的说法,不断修正自己。最后的最后,第二阶段的学习也给我带来了不少的收获,查漏补缺,温故知新。继续加油!!!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200