你不知道的JavaScript
你不知道的JavaScript短路运算的妙用:||会把为真的值a赋给f，先看||左边的是否为真，再看||右边的是否为真
若是不输入性别，则||左边为假，右边为真，若输入性别，则先选择||左边的
1234<script> let sex =prompt("请输入性别")||"保密" console.log(sex); </script>
123let a = 6 b = 0let f = a || b //6
&& 和 ||&& 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
123456789 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 * 56789); // 0 console.log('' ...
网络基础(三)
键入网址到网页显示，期间发生了什么？HTTP
对 URL 进行解析
浏览器做的第一步工作就是要对 URL 进行解析，从而生成发送给 Web 服务器的请求信息。
要是上图中的蓝色部分 URL 元素都省略了，那应该是请求哪个文件呢？
当没有路径名时，就代表访问根目录下事先设置的默认文件，也就是 /index.html 或者 /default.html 这些文件
生产 HTTP 请求信息
对 URL 进行解析之后，浏览器确定了 Web 服务器和文件名，接下来就是根据这些信息来生成 HTTP 请求消息了。
DNS-真实地址查询通过浏览器解析 URL 并生成 HTTP 消息后，需要委托操作系统将消息发送给 Web 服务器。
但在发送之前，还有一项工作需要完成，那就是查询服务器域名对应的 IP 地址，因为委托操作系统发送消息时，必须提供通信对象的 IP 地址。
比如我们打电话的时候，必须要知道对方的电话号码，但由于电话号码难以记忆，所以通常我们会将对方电话号 + 姓名保存在通讯录里。
所以，有一种服务器就专门保存了 Web 服务器域名与 IP 的对应关系，它就是 DNS 服务器。
...
再识Vue2(二)
vuex
在vue中,我们想要实现父子组件中的传值,通过props和自定义事件可以可轻松的办到,如果是两个没有关联的组件,通过$bus事件公交也能实现兄弟子件的传值,但是在大型项目中,使用$bus容易导致代码繁琐,且不容易阅读.这个时候,vuex的出现可以很好的帮助我们解决我们这种问题
vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据)
Vuex的核心概念包括state（状态）、getters（获取器）、mutations（突变）和actions（动作）。State代表应用程序的状态数据，Getters用于从state中派生出一些新的状态，Mutations是用于修改state的方法，而Actions则是用于提交mutations的方法，可以包含任意异步操作。
使用Vuex的好处在于，它可以帮助开发者更好地组织和管理应用程序的状态，避免了状态分散在各个组件中导致的混乱和 ...
Vue2实战项目_尚品汇
尚品汇项目配置
在后面加 –open可以使网页自动打开
项目的其他配置
v-if和v-show选择v-show和v-if是Vue中用于条件渲染的两个指令，它们的作用是根据条件来控制元素的显示和隐藏。虽然它们最终都能实现类似的效果，但它们的工作原理有所不同。
v-show指令会根据条件来切换元素的CSS属性”display”，当条件为true时，元素显示；当条件为false时，元素隐藏。这意味着无论条件如何变化，元素始终保留在DOM中，只是通过改变CSS属性来控制显示和隐藏。
v-if指令则是真正的条件渲染，当条件为true时，元素被渲染到DOM中；当条件为false时，元素从DOM中移除。这意味着当条件变化时，v-if会销毁或重新创建元素，而不仅仅是改变CSS属性。
一般来说，如果需要频繁切换元素的显示和隐藏，可以使用v-show；如果条件在运行时不经常变化，可以使用v-if。另外，v-if还可以与v-else和v-else-if结合，实现更复杂的条件逻辑。
路由元信息
路由传参在 Vue Router 中，有两种主要的参数传递方式：params 参数和 query 参数。
1 ...
Less
什么是Less？Less是一种更加简洁的样式代码，它非常像CSS，但又不太一样，它让编写样式变得更容易
下面是css代码和Less代码的对比，他们都表达了一样的含义
node环境Less代码虽好，但它无法被浏览器识别，因此需要一个工具将其转换为血统纯正的css代码
由于node环境具有读写文件的能力，于是在node环境中可以轻松的完成文件的转换
npm上有一个包叫做less,它运行在node环境中，通过它可以完成对Less代码的转换
node环境在前端工程化中，充当了一个辅助的角色，它并不直接运行前端代码，而是让我们编写前端代码更加舒适便利
转换代码，称之为编译(compile),转换代码的工具，称之为编译器(compiler)
Less的核心语法Less提供了非常多的功能，帮助我们更加轻松的编写css代码
其中，我们最常用的功能有下面3个:
变量
嵌套
混合
另外，你需要关注Less的特殊注释
包管理器
概念1.什么是包？包 (package) 是一个或多个JS模块的集合，它们共同完成某一类功能,可以简单的认为每一个工程就是一个包
有些包是为了给别人用的，这种包也叫第三方库
2.什么是包管理器？
包管理器是一个管理包的工具，前端常见的包管理器有npm、yarn、cnpm、pnpm等
包管理器具备以下能力：
让开发者可以轻松的下载包
让开发者可以轻松的升级和卸载包
能够自动管理包的依赖
3.什么是cli?
cli是一个命令行工具，它提供一个终端命令，通过该命令可以完成一些功能
node查找包的顺序1require("a")
1.查找是否有内置模块a
2.查找当前目录的node_modules中是否有a
3.依次查找上级目录的node-modules中是否有a,直到根目录
配置源查看源1npm config get registry
配置淘宝镜像源1npm config set registry https://registry.npm.taobao.org
配置官方源1npm config set registry https://registry. ...
模块化
模块化在这个学习过程的位置如上：
JS没有模块化时会产生的问题：1.经常容易造成全局变量的污染
2.容易发生JS的依赖混乱
模块化的标准1.CommonJS 社区标准
2.ES Module 官方标准
CommonJSCommon JS 规范：1.所有的js文件均是一个模块，运行的模块入口模块2.所有的模块中的全局变量、函数，均不会产生污染3.当一个模块需要提供一些东西给别的函数使用时，需要把这些东西「导出」4.当一个模块需要用到别的模块的东西的时候，需要「导入」（模块路径必须以/或./开头）5.模块有缓存，第一次运行模块后，导出结果会被缓存，之后再使用该模块，直接使用缓存结果
标准类型：社区规范
支持环境：node
依赖类型：动态依赖
Common JS 导出和导入导出：1module.export = 导出的值
导入：1require("模块路径")//函数返回模块导出的值
Common JS例子：config.js:
123456789module.exports = { wordDuration: ...
Echarts
Echarts引入方式如下：
1<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
123456789101112131415161718192021222324252627282930313233343536//入门实例<body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main ...
Axios
AxiosAxios是干什么的上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊
为什么需要Axios
原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
原生XMLHttpRequest实现ajax请求如下：
123456789101112131415161718192021var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象//ajax是异步的，设置回调函数request.onreadystatechang ...
JavaScript原型和原型链
原型链如上：
JavaScript原型众所周知，JS的复杂类型都是对象类型（Object），而JS不是一门完全面向对象编程的语言，所以如何涉及继承机制，就是一个问题。
构造函数因为JS中没有类（Class）这个概念，所以JS的设计者使用了构造函数来实现继承机制。
ES6中的class可以看作只是一个语法糖，它的绝大部分的功能，ES5都可以做到，新的class写法只是让原型的写法更加的清晰、更像面向对象编程的语法而已。
123456789// 构造函数function Person(name, age) { this.name = name; this.age = age;}// 生成实例const p = new Person('zhangsan', 18);
JS通过构造函数来生成实例。但是又出现了一个新的问题，在构造函数中通过this赋值的属性或者方法，是每个实例的实例属性以及实例方法，无法共享公共属性。所以又设计出了一个原型对象，来存储这个构造函数的公共属性以及方法。
构造函数创建一个实例的过程
创建一个新对象
将构造函数的 ...