前端学习路线(三)

简介: 往期回顾↓↓↓前端学习路线(一)前端学习路线(二)在前两章中,我们讲了如何去学习前端三剑客、js高级和bootstrap的重点,得到了很多前端初学者的好评,收藏量也是每天都在增加,所以今天博主想写一下第三章,主要想讲一下学习ajax和webpack的问题,ajax是前端学习的重点,如果不会ajax,写出再好的页面也只是一个空壳,而webpack则是一个打包工具,对于项目的上传具有重要的作用。

到目前为止,我们的学习路线是 HTML→CSS→JS→JS高级→JQ→ES6→ajax→webpack

ajax

在我们没有接触前端的时候,很大程度上会不知道什么叫接口,不知道前端和后端是怎么交互的,经常听别人说接口,API,自己一脸懵逼,去百度API得到的回到也是一脸懵逼

c6d6a5c9f72c4c6ca582a58fecedbd1f.png

其实在前端接口和api是同一个东西,就是一个地址,可以从后端获取数据的一个地址,所以有人也说是接口地址

在开发项目中,后端程序员通常会给前端开发者一个接口文档,里面有各种各样的接口地址供前端程序员使用,接口文档如下图所示:

20156080bd334a4195a7721d18699899.png

简单介绍了下什么是接口和接口文档,那我们来说一下要不要学ajax

要不要学ajax


博主的回答是肯定的要学ajax,ajax的课程是使用接口的基础课程,不管以后是使用es6的promise还是async await,如果没有ajax的知识做底子,理解起来是比较抽象的,所以学习ajax是为了以后使用各种封装好的异步编程解决方案,可以更好的去理解ajax和其他异步封装的解决方案之间的不同点,最重要的一点是面试的时候必问ajax


ajax其实很简单

ajax其实很简单,就四个步骤

①创建 XMLHttpRequest 对象

②设置请求信息

③发送请求

④接收响应

var xhr = new XMLHttpRequest()
xhr.open(method, url);
xhr.send(body) //get 请求不传 body 参数,只有 post 请求使用
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
  }
}

webpack

web是网络的缩写,pack是包的缩写,简而言之,webpack就是对网络的东西进行一个打包,对于我们前端来说,什么需要打包呢,打包成什么东西呢? 这也就是我们为什么要学webpack的原因,学习webpack可以让我们对前端的知识有更深的认识,更深入的理解,才能写好更好的项目


对于简单的页面来说,我们可以只有3个文件,就是.html文件,.css文件和.js文件,html文件是内容框架,.css对页面内容进行样式的修改,.js文件进行一些交互操作使得静态页面可以变成动态页面


但我们现在很少使用原生的前端三剑客去开发,更多的是使用vue,react和angular等框架去开发项目,那浏览器不认这些文件,例如index.vue,以vue结尾的文件,人家浏览器不认识,怎么办,这就需要webpack打包工具去进行打包


504734d86ad34f888f7c338becb983df.png

如图,通过webpack的打包,sass文件可以变成css文件,同理,.vue文件也会根据里面的内容被分解成html,css和js结尾的文件


同时通过webpack的一些功能,可以让我们开发的更便捷,比如hmr热加载,对代码进行压缩减少我们项目的体积等,这些都是webpack能给到我们的东西


博主有精简的笔记,如有需要可以添加下方微信私聊博主


前端学习路线博主打算更四章内容,涵盖前端三剑客到ajax等接口类的和到 vue等框架的,对其中的主要的一些问题和重难点做个梳理,对想学前端的,转行前端的同学们和未来的同行们给个建议,少走一些弯路


如在开发问题中遇到问题,可私聊博主

如有错字,还请原谅!近日会下一章:前端学习路线(四),同时也会更新前端静态页面开发思路(三),让学前端不再害怕英语单词(三)

相关文章
|
11月前
|
前端开发 JavaScript 小程序
2022年前端学习路线(个人认为)
本文提供了一条前端工程师的学习路径,分为三个阶段。第一阶段(1-2个月)重点掌握HTML、CSS、JavaScript及H5+CSS3,目标是能够构建基本的静态网页。第二阶段(2-3个月)深入Node.js、Git、Webpack及相关工具和规范,提升项目管理和构建能力。第三阶段(4-6个月)专注于Vue、React、Angular等主流框架,以及uni-app和微信小程序的开发,旨在实现跨平台应用的开发能力。每个阶段都有详细的课程推荐,帮助初学者逐步成长为合格的前端工程师。
146 1
|
JavaScript 前端开发 关系型数据库
前端node学习路线
【8月更文挑战第21天】前端node学习路线
358 8
|
前端开发 数据可视化 JavaScript
前端 three学习路线
【8月更文挑战第21天】前端 three学习路线
344 2
|
移动开发 前端开发 JavaScript
大前端完整学习路线(详解)
大前端完整学习路线(详解)
676 0
|
移动开发 前端开发 Linux
进阶攻略|前端完整的学习路线
进阶攻略|前端完整的学习路线
352 0
|
缓存 JavaScript 前端开发
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
学会使用插值、什么是表达式、了解什么是指令、什么是动态属性已经v-html标签(注意:v-html这个标签会有XSS风险,它会将我们的子组件覆盖掉)
36839 1
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
|
移动开发 前端开发 JavaScript
前端入门 前端自学路线 web开发前端如何学习
前端入门 前端自学路线 web开发前端如何学习
415 0
前端入门 前端自学路线 web开发前端如何学习
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
168 0
|
缓存 JavaScript 前端开发
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
webpack所谓的拆分的配置就是将webpack分为common(公共配置)、dev(开发环境下的配置)、prod(生产环境下);然后还需要的是在dev当中将它引入我们的common,再在prod当中引入common,这个时候我们要做的就是安装webpack-merge,比如通过这个方法module.export = smart将其导入common的时候对应的配置的命名。
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
|
JSON 小程序 JavaScript
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)
小程序文件类型分别有:样式(WSCC)、骨架(WXML)、业务(js)、配置(json)。但是注意的是:其实小程序开发虽然和web开发方式差不多,但是底层的原理根本不一样。
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)

热门文章

最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 9
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 10
    前端如何禁止用户打开 F12 开发者工具