avatar
文章
86
标签
166
分类
25
首页
随机文章
归档
关系网
导航栏
列表
友情链接
关于我
娱乐
工具平台
相册集
向阳榆木
首页
随机文章
归档
关系网
导航栏
列表
友情链接
关于我
娱乐
工具平台
相册集
前端理论知识笔记
|前端技术
阅读量:|评论数:

JavaScript、Ajax、JQuery和JSON简介

1.javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
2.JavaScript 为页面提供更多功能，是页面交互功能的基础语言。此外它的语言规范和引擎还被用于其他领域，比如 Node 等。
3.jQuery是javascript的一个库，简化js编程，兼容性更强，写的更少，做的更多
4.jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
5.jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便
6.Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
7.Ajax 技术提供了一种新的前后端数据交互方式，不需要刷新页面，而且不阻塞页面执行流程，异步的去请求去获取、交互数据。
8.Ajax的优点：
1.无需刷新页面即可实现数据的请求和响应，用户体验非常好。
2使用异步方式与服务器通信，具有更加迅速的响应能力。
3.基于标准化的技术，不需要下载插件或者小程序。
10.JSON 用来描述前后端数据交互的内容格式，有了 JSON 这样的一套统一的描述规则，前后端解析数据的成本变低，使用非常简单。
JSON 属于 JavaScript 的一个子集，类似于javascript对象的一种数据格式。
json的作用：在不同的系统平台，或不同编程语言之间传递数据。
11.详情链接
    https://blog.csdn.net/jediael_lu/article/details/38312685

JavaScript部分

1.定义：JavaScript是一种基于对象和事件驱动的脚本语言，在客户端执行。

2.特点：

1. 是一种边解释边执行的脚本语言，不需要编译。
2. 主要用来向HTML页面添加交互行为。
3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4. 平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

3.JavaScript组成：
1.ECMAScript:描述了该语言的语法和基本对象
2.DOM:操作Html标签的方法和接口
3.BOM:操作浏览器的方法和接口

4.JavaScript日常用途：

1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies，包括创建和修改等。
7.基于Node.js技术进行服务器端编程。

5.什么是函数？
    函数的含义：类似于Java中的方法，是完成特定任务的代码语句块；
    使用更简单：不用定义属于某个类，直接使用；
    函数分类：系统函数和自定义函数

6.BOM和DOM具体内容：https://blog.csdn.net/qq877507054/article/details/51395830

BOM编程：
1.BOM可实现功能：
      1.弹出新的浏览器窗口
      2.移动、关闭浏览器窗口以及调整窗口的大小
      3.页面的前进、后退
具体地址：https://blog.csdn.net/nanjinzhu/article/details/82718317

DOM编程：
1.    特点：任何一个节点都有若干个子节点，但却只有一个父节点。
2.    地址：https://blog.csdn.net/yanyan965914478/article/details/90209377

JavaScript作用域：
在JavaScript中，作用域为可访问变量，对象，函数的集合。
变量在函数内部声明即为局部变量，在函数外部定义即为全局变量。
局部变量只能在函数内访问，全局变量在网页中所有脚本和函数均可访问。
（注意：如果变量在函数内没有使用var关键字，该变量自动为全局变量）
生命周期：局部变量在函数执行完毕后销毁，全局变量在页面关闭后销毁。

部分方法解释

1.Window对象的定义和用法：
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回true，否则返回false。

2.JavaScript decodeURI() 函数定义和用法：
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

提示： 使用 encodeURI() 函数可以对 URI 进行编码。

3.onfocus 事件
定义和用法
onfocus 事件在对象获得焦点时发生。

Onfocus通常用于 input, select, 和a

提示： onfocus 事件的相反事件为 onblur 事件。

4.input中 autocomplete 属性
定义和用法
autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注意：autocomplete 属性适用于下面的 input 类型：
    text、search、url、tel、email、password、datepickers、range 和 color。

5.onblur 事件
定义和用法
onblur 事件会在对象失去焦点时发生。

Onblur 经常用于Javascript验证代码，一般用于表单输入框。

提示：onblur 相反事件为 onfocus 事件 。

JQuery框架

1.简介：jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。
2.JQuery具有以下特点：
2.1快速获取文档元素
2.2提供漂亮的页面动态效果
2.3创建AJAX无刷新网页
2.4提供对JavaScript语言的增强
2.5增强对事件处理
2.6更改网页内容

3.方法分析：
1..attr() 方法：设置或返回被选元素的属性和值。
2..change() 方法：当元素的值改变时发生 change 事件（仅适用于表单字段）。触发change 事件，或规定当发生 change 事件时运行的函数。
3..ready() 方法：规定当 ready 事件发生时执行的代码。
4..slideToggle()方法：下拉显示或上升隐藏

详细地址：https://blog.csdn.net/msyqmsyq/article/details/82018218

4.JQuery代码写法解释：
    $("tr:eq(1)  td:eq(2)"):这代表了要选中表格的第二行中的第三个单元格，如果在后面再加上.text() 代表要取出这个单元格中的文本。

5.prop()方法获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
6.部分方法解释：$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);
7.jQuery ready() 方法:
7.1定义和用法
当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。使用 ready() 来使函数在文档加载后是可用的。
提示：ready() 方法不应该与 `<body onload="">` 一起使用。
JQuery中$(function(){})和$(document).ready(function(){})是等价的，jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
8.jQuery change() 方法:
8.1定义和用法
当元素的值改变时发生 change 事件（仅适用于表单字段）。
change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
9. jQuery post() 方法
9.1定义和用法：$.post() 方法使用 HTTP POST 请求从服务器加载数据。

AJAX异步通信

1.定义：是一种无需加载整个网页的情况下，实现部分网页的更新的技术。
2.用途：在不用提交整个页面的情况下，进行局部刷新，从而进行客户端与服务端的数据交互。
3.优点：
使用异步方式与服务器进行通信，具有更加迅速的响应能力。
   最大的优点是页面无刷新即可实现数据的请求与响应，用户体验非常好。
   基于标准化的并被广泛支持的技术，不需要下载小插件或程序。
4.缺点：
异步请求不会在浏览器中产生后退历史，而同步访问会对浏览器产生后退历史。
   使用JavaScript作Ajax的引擎，JavaScript的兼容性和Debug需要特别注意。
5.什么是异步？
异步和同步是对应的关系。
    同步是指在网页中，当一个请求发出后，服务器没有响应结束之前，不允许对当前页面进行其他操作（如点击链接），相当于多任务串行。
异步是指当一个请求发出后，在服务器没有响应结束之前，可以对当前页面进行其他操作，相当于多任务并行。
1.同步现象：当客户端向服务器发送请求，在服务器返回响应之前，客户端处于等待，卡死状态。
2.异步现象：客户端向服务器发送请求，无论服务器是否返回响应，客户端随时可以做其他事情，不会被卡死。

ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据技术。

ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。

所以开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
axios或者jQuery提供的ajax，本质上就是XMLHttpRequest对象操作的封装。

地址：AJAX详解

暂存笔记

不可枚举属性

在 JavaScript 中，对象的属性可以分为两种：可枚举属性和不可枚举属性。可枚举属性是可以通过 in 运算符或 for in 循环遍历的属性。不可枚举属性是不能通过 in 运算符或 for in 循环遍历的属性。

prototype 属性是不可枚举的，这意味着它不能通过 in 运算符或 for in 循环遍历。这是因为 prototype 属性是对象的原型属性，它是从对象的原型链继承来的。原型链是对象继承属性和方法的途径。

不可枚举属性通常用于以下目的：

  • 隐藏属性：不可枚举属性不能通过 in 运算符或 for in 循环遍历，因此可以用于隐藏属性。
  • 防止属性被修改：不可枚举属性不能被 delete 操作符删除，因此可以用于防止属性被修改。

以下是 prototype 属性是不可枚举的示例：

JavaScript

1
2
3
4
5
6
const obj = {
  name: "John Doe",
};

console.log("name" in obj); // true
console.log("prototype" in obj); // false

输出：

1
2
true
false

从输出结果可以看出，name 属性是可枚举的，prototype 属性是不可枚举的。

JSON.stringify和JSON.parse

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串。JSON.parse() 方法将一个 JSON 字符串转换为 JavaScript 对象。

因此，JSON.stringify(JSON.parse(对象)) 的作用是将对象序列化为 JSON 字符串，然后再将 JSON 字符串反序列化为对象。

这个操作可以用于以下目的：

  • 深拷贝对象 ：JSON.stringify() 和 JSON.parse() 可以将对象的所有属性和值都复制到新对象中，因此可以用于深拷贝对象。
  • 将对象转换为 JSON 字符串 ：JSON.stringify() 可以将对象转换为 JSON 字符串，然后可以将 JSON 字符串保存到文件或传输到其他应用程序。

以下是使用 JSON.stringify(JSON.parse(对象)) 进行深拷贝的示例：

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
  name: "John Doe",
  age: 30,
  address: "123 Main Street"
};

const newObj = JSON.stringify(JSON.parse(obj));

console.log(newObj === obj); // false
console.log(newObj.name === obj.name); // true
console.log(newObj.age === obj.age); // true
console.log(newObj.address === obj.address); // true

输出结果：

1
2
3
4
false
true
true
true

在这种情况下，我们使用 JSON.stringify(JSON.parse(obj)) 将对象 obj 序列化为 JSON 字符串，然后再将 JSON 字符串反序列化为对象 newObj。newObj 与 obj 具有相同的属性和值，但是 newObj 与 obj 是两个不同的对象。

前端工程化

前端工程化是指将前端开发作为一种工程化的流程来管理和实施，强调自动化、标准化和团队协作。它的核心目标是提高开发效率、减少出错率、保证代码质量，并使得项目更容易维护和扩展。

前端工程化的主要特点

  1. 构建工具 ：使用Webpack、Gulp、Grunt等工具自动执行编译、压缩、合并等任务。
  2. 版本控制 ：通过Git等版本控制系统管理代码变更。
  3. 自动化测试 ：编写单元测试、集成测试等，确保代码质量。
  4. 持续集成/持续部署 (CI/CD) ：自动化构建、测试和部署过程。
  5. 代码规范 ：制定并遵循统一的代码风格和规范。
  6. 模块化开发 ：将项目拆分成多个可重用的模块。
  7. 文档生成 ：自动生成API文档或其他形式的技术文档。
  8. 性能优化 ：使用懒加载、资源压缩等技术提高页面加载速度。

模块化开发

模块化开发是一种将应用程序分解为一系列独立的功能单元（模块）的设计方法。每个模块负责单一职责，并且能够独立于其他模块进行开发和测试。这种做法有助于提高代码的可读性、可维护性和复用性。

模块化开发的特点

  1. 单一职责原则 ：每个模块只负责一个功能点。
  2. 可复用性 ：模块可以在多个项目或页面中重复使用。
  3. 解耦 ：模块之间尽量减少依赖，提高系统的灵活性。
  4. 异步加载 ：按需加载模块，减少初始加载时间。
  5. 命名空间 ：使用命名空间来避免全局变量冲突。
  6. 依赖管理 ：通过包管理器（如npm、Yarn）管理模块间的依赖关系。

模块化开发的实现方式

  1. CommonJS ：用于Node.js环境中的模块化标准。
  2. ES Modules (ESM) ：ECMAScript 6+标准中的模块化语法。
  3. AMD (Asynchronous Module Definition) ：一种用于浏览器的异步模块定义标准。
  4. UMD (Universal Module Definition) ：一种兼容CommonJS、AMD和全局变量定义的模块格式。
  5. Webpack、Parcel等构建工具 ：支持多种模块格式，并能处理复杂的依赖关系。

示例

假设您正在开发一个电商网站，可以将项目分为以下几个模块：

  • 用户模块 ：处理用户登录、注册等功能。
  • 商品模块 ：展示商品信息、分类等。
  • 购物车模块 ：管理用户的购物车状态。
  • 订单模块 ：处理订单创建、支付等流程。

每个模块都可以独立开发和测试，并通过接口与其他模块交互。这样，当需要修改或扩展某个功能时，只需关注该模块即可，而不会影响到其他部分。

总结

前端工程化和模块化开发是现代前端开发的重要组成部分，它们通过标准化的开发流程和模块化的编码方式，提高了开发效率和代码质量。通过采用这些实践，开发者可以更高效地构建复杂的应用程序，并确保项目的长期可维护性。

pnpm与npm的区别

pnpm 是一个 JavaScript 包管理器，旨在解决 npm 在依赖管理方面的一些问题，尤其是在大型项目和多项目工作空间中。它通过独特的依赖管理方式，提供了更快的安装速度、更少的磁盘占用以及更可靠的依赖管理。

如列表所示：

特点 npm pnpm
依赖安装 在每个项目中单独安装依赖 在一个共享的存储中安装依赖，并使用链接指向项目
node_modules 结构 树形结构 扁平化结构
磁盘占用 较高 较低
安装速度 较慢 较快
工作空间支持 较弱 较强

总结

  • 何时使用 pnpm:
    • 大型项目：可以显著减少磁盘占用和安装时间。
    • 多项目工作空间：方便共享依赖，提高开发效率。
    • 对性能和磁盘空间有较高要求的项目。
  • 何时使用 npm:
    • 小型项目：npm 足以满足需求。
    • 对 pnpm 的工作方式不熟悉或有特殊需求的场景。

Vue3 和 Vite

  • Vue 3 是一个前端框架，用于构建应用逻辑和 UI。
  • Vite 是一个构建工具，专注于开发环境中的快速反馈和打包优化。

核心区别对比

特点 Vue2 + Webpack Vue3 + Vite
开发哲学 以构建工具为中心，配置灵活 以浏览器原生能力为中心，配置简洁
构建速度 相对较慢 非常快
开发体验 配置复杂，学习成本较高 配置简单，开发体验流畅
核心技术 Webpack打包，模块打包 原生ES模块，按需编译
文章作者: PanXiaoKang
文章链接: http://example.com/2020/04/21/%E5%89%8D%E7%AB%AF%E7%90%86%E8%AE%BA/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 向阳榆木！
工程化模块化学习笔记理论知识
打赏
  • 微信
    微信
  • 支付宝
    支付宝
评论
繁