大前端
文章平均质量分 58
从html5,css3,js到Vue.js前端工程化开发之路
智者_若愚
这个作者很懒,什么都没留下…
展开
-
基于Promise 自己实现一个 async,await。从此异步编程变得更简单!
碎碎念:亲爱的读者:你好!我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。 如果我的文章能给你带来一些收获,你的点赞收藏将是对我莫大的鼓励!我的邮箱:thinker_changlon@163.com我的Github: https://github.com/Changlon参考文章:Generator 函数的含义与用法MDN Generatorgithub源码地址:myasync自从有了Promise这个好用的技术,我们的..原创 2021-10-25 18:23:02 · 575 阅读 · 0 评论 -
Promsie源码解析一步到位
碎碎念:亲爱的读者:你好!我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。 如果我的文章能给你带来一些收获,你的点赞收藏将是对我莫大的鼓励!我的邮箱:thinker_changlon@163.com我的Github: https://github.com/Changlon本章我将带领大家手写一个符合promise/a+ 规范的Promise。可以说这是前端工程师必须要掌握的一个技术,在项目中使用到的非常多。那么promsie究..原创 2021-10-23 14:23:25 · 256 阅读 · 0 评论 -
手写一个响应式vue系统,一篇带你精通vue
碎碎念:亲爱的读者:你好!我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。 如果我的文章能给你带来一些收获,你的点赞收藏将是对我莫大的鼓励!我的邮箱:thinker_changlon@163.com我的Github: https://github.com/Changlon项目源码:myvue github源码地址本章我们通过手写实现一个简单的Vue响应式系统,只用300多行代码实现包括Vue的响应式系统,模板解析,指令解析,d..原创 2021-10-05 19:22:44 · 1186 阅读 · 0 评论 -
Vue03_自定义Vue开发环境
自定义Vue开发环境1. 搭建基本开发环境1). 下载依赖包 yarn add -D webpack webpack-cli yarn add -D html-webpack-plugin yarn add -D webpack-dev-server yarn add -D babel-loader @babel/core @babel/preset-env yarn add -D css-loader style-loader yarn add -D原创 2021-10-01 15:31:23 · 201 阅读 · 0 评论 -
Vue02_用webpack搭建环境
1. 初始化项目1). 生成package.json yarn init -y2). 创建入口js: src/index.js console.log('Hello Webpack!') document.getElementById('root').innerHTML = '<h1>Hello222</h1>'3). 创建页面文件: index.html <div id="root"></div>2. webpa原创 2021-10-01 15:30:53 · 204 阅读 · 0 评论 -
Vue01_vue基础知识
1. Vue.js是什么?1). 一位华裔前Google工程师(尤雨溪)开发的前端js库2). 作用: 动态构建用户界面3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术5). vue包含一系列的扩展插件(库): * vue-cli: vue脚手架 * vue-原创 2021-10-01 15:30:28 · 118 阅读 · 0 评论 -
04_axios
axios从入门到源码分析1. 前后台交互的基本过程1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)3. 浏览器端接收到响应, 解析显示响应体/调用监视回调2. HTTP请求报文1. 请求行: 请求方式/url2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头3. 请求体3. HTTP响应报文1. 响应行: 响应状态原创 2021-10-01 15:29:22 · 124 阅读 · 0 评论 -
03_promise
Promise从入门到深入1. 准备1.1. 函数对象与实例对象1. 函数对象: 将函数作为对象使用时, 简称为函数对象2. 实例对象: new 函数产生的对象, 简称为对象1.2. 回调函数的分类1. 同步回调: 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise的excutor函数2. 异步回调: 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax回调 / P原创 2021-10-01 15:28:52 · 88 阅读 · 0 评论 -
02_跨域问题总结
跨域问题总结1. 为什么会有跨域这个问题?原因是浏览器为了安全,而采用的同源策略(Same origin policy)2. 什么是同源策略?1. 同源策略是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。2. Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。3. 所谓同源,也称之为同域,是指:协议,域名(IP),端口必须要完全相同 即:协议、域名(IP)、端口都相同,才能算是在同一个域里。备注:规则举例如原创 2021-10-01 15:28:21 · 166 阅读 · 0 评论 -
01_ajax
AJAX1. 原生AJAX1.1 AJAX简介 AJAX 全称为Asynchronous Javascript And XML,就是异步的 JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据 。AJAX 不是新的编程语言,不是新的一门独立的技术,而是一种使用现有标准的新方法。1.2 XML简介 XML ——可扩展标记语言。 XML 被设计用来传输和存储数据。 XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标原创 2021-10-01 15:28:05 · 88 阅读 · 0 评论 -
HTTP07_经典面试题-从用户输入url
问题:从用户输入URl按下回车,一直到用户能看到界面,期间经历了什么?一、DNS解析----域名翻译成IP地址(优先走缓存): 1.找浏览器DNS缓存解析域名 2.找本机DNS缓存:(备注:查看本机DNS缓存命令:ipconfig/displaydns > C:/dns.txt) 3.找路由器DNS缓存 4.找运营商DNS缓存(80%的DNS查找,到这一步就结束) 5.递归查询 (查询全球13台根DNS服务器) 二、进行TCP(协议)连接,三次握手(根据原创 2021-10-01 15:26:06 · 128 阅读 · 0 评论 -
HTTP06_http状态码
Http状态码(服务器给客户端的东西)作用:告诉客户端,当前服务器处理请求的结果http状态码的分类1xx : 服务器已经收到了本次请求,但是还需要进一步的处理才可以。2xx : 服务器已经收到了本次请求,且已经分析、处理等…最终处理完毕!3xx : 服务器已经接收到了请求,还需要其他的资源,或者重定向到其他位置,甚至交给其他服务器处理。4xx :一般指请求的参数或者地址有错误, 出现了服务器无法理解的请求(一般是前端的锅)。5xx :服务器内部错误(不是因为请求地址或者请求参数不当造原创 2021-10-01 15:25:34 · 611 阅读 · 0 评论 -
HTTP04_POST请求报文
POST请求报文(给服务器看的)-- 通过form表单发送的POST请求POST http://localhost:3000/ HTTP/1.1Host: localhost:3000Connection: keep-aliveContent-Length: 22Pragma: no-cacheCache-Control: no-cacheOrigin: http://localhost:63347Upgrade-Insecure-Requests: 1DNT: 1Content-Typ原创 2021-10-01 15:24:54 · 907 阅读 · 0 评论 -
HTTP03_GET请求报文
GET请求报文(给服务器看的)-- 通过form表单发送的GET请求GET http://localhost:3000/?name=kobe&password=123 HTTP/1.1Host: localhost:3000Connection: keep-alivePragma: no-cacheCache-Control: no-cacheUpgrade-Insecure-Requests: 1DNT: 1User-Agent: Mozilla/5.0 (Windows NT 1原创 2021-09-30 16:39:39 · 1155 阅读 · 0 评论 -
HTTP02_http协议的说明
http协议是什么?是什么:超文本传输协议(属于应用层协议)特点:无状态,现在cookie解决了无状态的问题(早期网页开发时,用cookie解决,现在是cookie和session配合使用)作用:规定了服务器和客户端传递信息的规则(统称为报文,分为:请求报文、响应报文。)版本:http 1.0 (老版本) ---------- 不支持长连接http 1.1 (主流版本)--------- 优点:支持长连接,弊端:同时发送资源的数量过小。http 2.0 (最新版) ----------原创 2021-09-30 16:38:49 · 165 阅读 · 0 评论 -
HTTP01_GET请求与POST请求
GET请求与POST请求前言HTTP设定了八种发送请求方式(也称为八大“动作”)。这八种方法没有任何本质上的区别。只是让请求,更加有语义化而已。八种方法分别为:OPTIONS、HEAD、GET、POST、PUT、DELETE、TRACE、CONNECT这八种方法最终经过“岁月沉淀”后,最常用的是这两种:GET、POSTGET1. 含义:从指定的资源获取数据(一种“索取”的感觉)。2. 什么时候使用GET请求较为合适? (1)单纯获取数据时。 (2)请求非敏感数据时。PO原创 2021-09-30 16:38:27 · 131 阅读 · 0 评论 -
Node面试06_express中操作cookie和session教程
express中操作cookie和session教程一、操作cookie:1. 设置cookie(给客户端“种”cookie): 直接使用res.cookie('','',{})即可。 2. 获取cookie(要第三方中间件): * 安装:npm i cookie-parser * 引入:const cookieParser = require('cookie-parser') * 使用:app.use(cookieParser())3.原创 2021-09-30 16:37:40 · 550 阅读 · 0 评论 -
Node面试05_cookie + session
会话控制 HTTP协议是一个无状态的协议,它无法区分多次请求是否发送自同一客户端。而我们在实际的使用中,却有大量的这种需求,我们需要通过会话的控制来解决该问题。Cookie1.是什么? 本质就是一个【字符串】,里面包含着浏览器和服务器沟通的信息(交互时产生的信息)。 存储的形式以:【key-value】的形式存储。 浏览器会自动携带该网站的cookie,只要是该网站下的cookie,全部携带。2.分类: --会话cookie(关闭浏览器后,会话cookie原创 2021-09-30 16:37:21 · 78 阅读 · 0 评论 -
Node面试04_路由、中间件、ejs模板
导语:Express 是一个自身功能极简,完全是由路由和中间件构成的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。路由1. 路由的定义: 我们可以将路由定义为三个部分: 第一部分:HTTP请求的方法(get或post) 第二部分:URI路径 第三部分: 回调函数2. 路由的实现 Express中提供了一系列函数,可以让我们很方便的实现路由:app.<method>(path,callback) 语法解析:method指的是原创 2021-09-30 16:35:42 · 127 阅读 · 0 评论 -
node原生+express服务器
Node原生服务器以下代码要求能手写:/* 不借助任何第三方库,去搭建Node原生服务器 *///1.引入Node内置的http模块let http = require('http')//2.创造一个“服务员” ---- 创建服务对象let server = http.createServer(function (request,response) { response.setHeader("content-type","text/html;charset=utf-8") respo原创 2021-09-30 16:35:08 · 146 阅读 · 0 评论 -
数据库面试02_数据库
数据库1. 数据库的分类(1) 关系型数据库(RDBS) 代表有:MySQL、Oracle、DB2、SQL Server... 特点:关系紧密,都是表 优点: 1、易于维护:都是使用表结构,格式一致; 2、使用方便:SQL通用,可用于复杂查询; 3、高级查询:可用于一个表以及多个表之间非常复杂的查询。 缺点: 1、读写性能比较差,尤其是海量数据的高效率读写; 2、有固定的表结构,字段不可随意更改,灵活度稍欠; 3、高并发读写需求,传统关系原创 2021-09-30 16:34:46 · 129 阅读 · 0 评论 -
常用数据结构和算法总结
算法知识总结本部分主要是笔者在学习算法知识和一些相关面试题所做的笔记,如果出现错误,希望大家指出!目录常用算法和数据结构总结排序冒泡排序选择排序插入排序希尔排序归并排序快速排序堆排序基数排序快速排序相对于其他排序效率更高的原因系统自带排序实现稳定性排序面试题目总结树二叉树相关性质满二叉树完全二叉树平衡二叉查找树(AVL)B-树B 树数据库索引红黑树Huffman 树二叉查找树求解二叉树中两个节点的最近公共祖先节点链表反转单向链表原创 2021-09-26 19:28:26 · 2693 阅读 · 0 评论 -
剑指offer
剑指 offer 思路总结本部分主要是笔者在练习剑指 offer 时所做的笔记,如果出现错误,希望大家指出!题目二维数组中的查找题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。思路:(1)方法一:选取数组中合适的位置与目标值比较,逐步缩减范围。 这个合适的位置可以选择数组右上角/左下角位置(本题选用右上角位置)。这一种方式最坏情况下的时间复杂原创 2021-09-26 19:27:31 · 155 阅读 · 0 评论 -
计算机操作系统
计算机操作系统本部分主要是笔者在学习现代操作系统和一些相关面试题所做的笔记,如果出现错误,希望大家指出!现代操作系统阅读笔记第一章 引论1. 操作系统定义操作系统是运行在内核态的软件,它执行两个基本上独立的任务。隐藏计算机底层硬件的实现,为用户及应用程序提供一个资源集的清晰抽象。管理计算机硬件资源。任何操作系统的核心是它可处理的系统调用集。这些系统带欧阳真实地说明了操作系统做的工作。2. 计算机运行模式多数计算机有两种运行模式:内核态和用户态。软件中最基础的部分是操作系统,原创 2021-09-26 19:26:39 · 1493 阅读 · 0 评论 -
计算机网络
计算机网络知识总结本部分主要是笔者在复习计算机网络相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!目录应用层HTTP 协议概况HTTP 请求报文HTTP 响应报文首部行HTTP/1.1 协议缺点HTTP/2 协议二进制协议多路复用数据流头信息压缩服务器推送HTTP/2 协议缺点HTTP/3 协议HTTPS 协议HTTP 存在的问题HTTPS 简介TLS 握手过程实现原理DNS 协议概况域名的层级结构查询过程DNS原创 2021-09-26 19:26:14 · 1023 阅读 · 0 评论 -
webpack4配置教程
webpack快速入门教程1、了解Webpack相关什么是webpackWebpack是一种前端资源构建工具,一个静态模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源五个核心概念Entry:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。Output:output 属性告诉 webp原创 2021-09-26 19:25:30 · 272 阅读 · 0 评论 -
linux的几个命令
Linux的几个命令mkdir xxx 新建文件夹vi x.txt 新建文件(Visual editor)输入 i 进入编辑模式ESC + :+ wq 保存并退出ESC + :+ q! 不保存并退出cd xxx 进入xxx目录cd … 返回上一级目录ls 列出当前文件夹中所有文件pwd 显示当前目录cat x.txt 显示文件内容clear 清屏...原创 2021-09-26 19:24:49 · 60 阅读 · 0 评论 -
less知识点总结
less less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言, 增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。less的中文官网:http://lesscss.cn/less初次使用:1.定义变量(@zero:0)并运用,凡是页面中使用0,都用@zero代替;2.子元素需要放在父元素中,此时子元素可以放心使用class,因为他已经有前提条件是父元素不用再继续担心对同原创 2021-09-26 19:24:08 · 560 阅读 · 0 评论 -
git工具知识点总结
常用工具知识总结本部分主要是笔者关于常用工具所做的笔记,如果出现错误,希望大家指出!目录GIT1. git 与 svn 的区别在哪里?2. 经常使用的 git 命令?3. git pull 和 git fetch 的区别4. git rebase 和 git merge 的区别GIT1. git 与 svn 的区别在哪里?git 和 svn 最大的区别在于 git 是分布式的,而 svn 是集中式的。因此我们不能再离线的情况下使用 svn。如果服务器出现问题,我们就没有办法使原创 2021-09-26 19:23:32 · 97 阅读 · 0 评论 -
JS模块化6_ES6模块化教程
ES6-Babel-Browserify模块化教程0. ES6模块化语法暴露模块: - 分别暴露:export 暴露内容 - 统一暴露:export {xxx, yyy} - 默认暴露:export default 暴露内容引入模块: - 默认暴露的引入:import xxx from './xxx' - 几乎所有的第三方模块都用默认暴露的方式 - 分别暴露和统一暴露的引入:import {xxx, yyy} from './xxx' - 必须加{}1. 创建项目结构|-原创 2021-09-26 19:21:56 · 117 阅读 · 0 评论 -
JS模块化5_CMD-SeaJS模块化教程
sea.js简单使用教程1. 下载sea.js, 并引入官网: http://seajs.org/github : https://github.com/seajs/seajs将sea.js导入项目: js/libs/sea.js2. 创建项目结构|-js |-libs |-sea.js |-modules |-module1.js |-module2.js |-module3.js |-module4.js |-main.js|-i原创 2021-09-26 19:21:23 · 92 阅读 · 0 评论 -
JS模块化4_AMD-RequireJS模块化教程
require.js使用教程0. 基本语法AMD:Asynchronous Module Definition 异步模块定义暴露模块: - 定义没有依赖的模块:define(function() {return 模块}) - 定义有依赖的模块:define(['module1','module2'], function(m1, m2) {return 模块}) 引入模块: - 入口js配置:requirejs.config({ // 项目中所有要用到原创 2021-09-24 20:18:03 · 95 阅读 · 0 评论 -
JS模块化3_CommonJS-Browserify模块化教程
CommonJS浏览器端模块化教程0. 语法与CommonJS服务器端语法完全一致1. 创建项目结构|-js |-dist //生成编译完js的目录 |-src //源码所在的目录(我们编写的、没经过工具处理的代码,叫做源码) |-module1.js |-module2.js |-module3.js |-app.js|-index.html|-package.json { "name": "test-0719", "version":原创 2021-09-24 20:17:13 · 154 阅读 · 0 评论 -
JS模块化2_CommonJS_Node模块化教程
CommonJS服务端模块化教程(Node.js模块化教程)0. 基本语法CommonJS是唯一的双端模块化规范在服务器端:模块的加载是运行时同步加载的在浏览器端:模块需要提前编译打包处理(异步加载)暴露模块: - module.exports = value - exports.xxx = value 引入模块: - require(xxx) - 若引入的是第三方模块,则xxx为文件名 - 若引入的是自定义模块,则xxx为模块文件路径,必须写'./'1. 安装Node.j原创 2021-09-24 20:16:41 · 96 阅读 · 0 评论 -
JS模块化1_模块化进化史
JS模块化什么是模块?将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信一个模块的组成数据—>内部的属性操作数据的行为—>内部的函数模块化编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目模块化进化史1. 全局function模式module1.js//数据let data = 'atguigu.com'//操作数据的函数fu原创 2021-09-24 20:16:06 · 128 阅读 · 0 评论 -
JS模块化0_node与npm(必看)
模块化课程Node相关知识铺垫1. Node是什么?是一个js运行环境2.Node与npm是什么关系?我们在开发时,经常会用到很多别人已经写好的代码或第三方库,我们一般会这样操作:搜索,下载,解压,引入。如果每次都这么做势必很麻烦,于是Node.js的设计者打造了一个包管理器:npm,一些第三方库的作者把代码放在npm上。当我们想要使用时,直接通过npm命令去安装即可,不用去理会应该下载什么?放在哪里?一切都处理好。而且如果我们要用的模块A,而模块A又依赖模块B,模块B又依赖模块C和D,那原创 2021-09-24 20:15:46 · 70 阅读 · 0 评论 -
前端性能优化07_函数防抖与节流
函数防抖(debounce)概念: 在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。生活中的实例:电脑无操作1分钟之内如果没有操作会进入休眠,当第40秒时鼠标被移动一下,重新计时1分钟。实现:定时器。应用:搜索时等用户完整输入内容后再发送查询请求。 let inputNode = document.getElementById('user_input'); let timer; inputNode.addEventListener('keyup',function原创 2021-09-24 20:07:54 · 187 阅读 · 0 评论 -
前端性能优化06_缓存机制
缓存1. 缓存理解1. 缓存定义: 1. 浏览器在本地磁盘上将用户之前请求的数据存储起来,当访问者再次需要改数据的时候无需再次发送请求,直接从浏览器本地获取数据2. 缓存的好处: 1. 减少请求的个数 2. 节省带宽,避免浪费不必要的网络资源 3. 减轻服务器压力 4. 提高浏览器网页的加载速度,提高用户体验2. 缓存分类强缓存1. 不会向服务器发送请求,直接从本地缓存中获取数据2. 请求资源的的状态码为: 200 ok(from memory c原创 2021-09-24 20:07:18 · 99 阅读 · 0 评论 -
前端性能优化05_浏览器本地存储
浏览器存储Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!注意:session和SessionStorage不是一个概念!!!在服务端有一种存储方式叫做:session会话存储,常常被简称session后期Node课程中会对cookie和后端所使用的session会话存储进行详细讲解session:会话SessionStorage:浏览器端用于存储数据的容器,常常被前端人员简称为session。sess原创 2021-09-24 20:06:48 · 113 阅读 · 0 评论 -
前端性能优化04_CDN
什么是CDN?工作原理是什么?网站通常将其所有的服务器都放在同一个地方,当用户群增加时,公司就必须在多个地理位置不同的服务器上部署内容为了缩短http请求的时间,我们应该把大量的静态资源放置的离用户近一点。内容发布网络CDN(Content Delivery Networks)CDN是一组分布在多个不同地理位置的web服务器集群,用于更加有效的向用户发布内容基本思路: 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。 通过在网络各处放置节点原创 2021-09-24 20:05:57 · 129 阅读 · 0 评论