Alien's Blog

Git 概念概念：Git是一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码 作用：记录代码内容，切换代码版本，多人开发时高效合并代码内容 个人本机使用：Git 基础命令和概念 多人共享使用：团队开发同一个项目的代码版本管理 在Git官网下载 验证安装是否成功： 打开git bash终端 输入命令：git --version 配置用户名和邮箱，用于每次提交代码版本时表面身份： git config --global user.name "M78Alien" git config --global user.email "1193133105@qq.com" 查看以配置的用户名和邮箱： Git 仓库Git 仓库（repository）：记录文件状态内容的地方，存储着修改的历史记录 创建： 把本地文件夹转换成 Git 仓库：命令 git init 从其他服务器上克隆 Git 仓库 Git 的三个区域Git 使用时： 工作区：实际开发时操作的文件夹 暂存区：保存之前的准备区域（暂存改动过的文件） 版本库：提交 ...

Webpack简介定义：Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 _bundles_，它们均为静态资源，用于展示你的内容。 静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件 打包：把静态模块内容，压缩，整合，转译等（前端工程化） 把 less / sass 转成 css 代码 把 ES6+ 降级成 ES5 支持多种模块标准语法 步骤： 新建项目文件夹，初始化包环境，得到package.json文件 1npm init -y 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用 12345678// src/utils/check.jsexport const checkPhone = phone => phone.le ...

模块化简介定义：CommonJS 模块是为Node.js打包JavaScript代码的原始方式。Node.js 还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。在Node.js中，每个文件都被视为一个单独的模块。 概念：项目是由很多个模块文件组成的 好处：提高代码复用性，按需加载，独立作用域 使用：需要标准语法导出和导入进行使用 CommonJS标准因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准 使用： 导出：module.exports = {} 导入：require('模块名或路径') 模块名或路径： 内置模块：直接写名字（例如：fs，path，http） 自定义模块：写模块文件路径（例如：./utils.js） 12345678910111213// 自定义模块，封装求数组和的函数，并导出const URL = 'https://m78alien.github.io/'const getArraySu ...

Node.js 简介定义： Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器的JavaScript应用程序 作用：使用Node.js编写服务器端程序 编写数据接口，提供网页资源浏览功能等等 前端工程化：为后续学习vue和React等框架做铺垫 前端工程化：开发项目直到上线，过程中集成的所有工具和技术，Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容） 浏览器能够执行JS代码，依靠的是内核中的V8引擎（C++程序） Node.js是基于Chrome V8引擎进行封装（运行环境） 区别是都支持ECMAScript标准语法，Node.js有独立的API，但是Node.js环境没有DOM和BOM等 Node.js 安装Node.js下载：官网下载地址 注意事项： 安装在非中文路径下 无需勾选自动安装其他配套软件 成功验证： 在cmd终端，输入node -v命令查看版本号 显示版本号即为安装成功 Node.js 使用操作：新建.js文件，编写代码后在node环境下执行 命令：在cmd终端当前目录下，输入node xxx ...

同步和异步 同步代码：逐行执行，需原地等待结果后，才继续向下执行 异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果 12345678910111213<!--这里用延时器模拟需要异步的操作--><button class="btn">按钮</button><script> const result = 0 + 1 console.log(result) setTimeout(() => { console.log(2) }, 2000) document.querySelector('.btn').addEventListener('click', () => { console.log(3) }) console.log(4)</script> 结果就是先打印1、4，两秒之后打印2，最后点击按钮打印3 常见的异步操作： 回调函数 Promise async/a ...

XMLHttpRequest定义：XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用 关系：axios内部采用XMLHttpRequest与服务器交互 基本使用 创建 XMLHttpRequest 对象 配置请求方法和请求 url 地址 监听 loadend 事件，接收响应结果 发起请求 12345678const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => { console.log(xhr.response) const data = JSON.parse(xhr.response) document. ...

AJAX概念和axios使用AJAX概念 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页 axios使用语法： 引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 使用axios函数 传入配置对象 再用.then回调函数接收结果，并做后续处理 123456axios({ url: 'http://hmajax.itheima.net/api/province' // 目标资源地址}).then((result) => { // 对服务器返回的数据做后续处理 console.log(result)}) URL查询参数定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据 语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2 ...

深浅拷贝在开发中经常需要复制，就会出现这种情况 两个对象都指向同一个地址，所以修改一个的制，另一个也会变化 浅拷贝首先浅拷贝和深拷贝只针对引用类型 浅拷贝：拷贝的是地址 常见方法： 拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象 拷贝数组：Array.prototype.concat() 或者 [...arr] 如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题) 深拷贝首先浅拷贝和深拷贝只针对引用类型 深拷贝：拷贝的是对象，不是地址 常见方法： 通过递归实现深拷贝 lodash/cloneDeep 通过JSON.stringify()实现 通过递归实现深拷贝： 123456789101112131415161718192021222324252627282930313233343536const obj = { uname: 'kun', age: 18, hobby: ['唱', & ...

面向对象编程在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对象的特性： 封装性 继承性 多态性 构造函数封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的 12345678910111213141516171819// 创建对象function Person() { this.name = '无名氏' this.age = '0' this.set = function(name, age) { this.name = name this.age = age } this.get = () => { console.log(`${this.name}今年${this.age}岁了`) &# ...

深入对象创建对象创建对象有三种方式 利用对象字面量创建对象 123const o = { name: '柯南'} 利用new object创建对象 12const o = new Object({ name: '柯南' })console.log(o) // {name: '柯南'} 利用构造函数创建对象 构造函数构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。 构造函数： 时一种特殊的函数，主要用来初始化对象 使用场景： 常规的{…}语法允许创建一个对象。比如我们创建了柯南的对象，继续创建小兰的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象 构造函数语法： 大写字母开头命名 实例化执行过程： 创建新对象 构造函数this指向新对象 执行构造函数代码，修改this，添加新的属性 返回新对象 12345678910111213// 定义函数function foo()
...