JavaScript中的浏览器学习(存储篇)
前言
WEB应用允许使用浏览器客户端所提供的API，将网页应用所需的数据存储到浏览器客户端，按照不同的源进行各自维护，也就是不同源域名下的数据各自分离，各自管理，从而使得网页应用能够”记住”上一次所做的一些操作，提升用户体验，完善业务闭环，目前较为常见的浏览器存储方式有：
WEB存储(localStorage + sessionStorage)
Cookie
离线WEB应用(已废弃)
WEB数据库(indexdb)
文件系统
一、storage存储(localStorage + sessionStorage)
在window对象中定义了两个只读属性：localStorage + sessionStorage，两者在使用上并无太大的区别，只是在于浏览器存储的时间有效期和作用于的区别🤔区别：localStorage存储的数据，是永久性存储的，只要没有显示地修改/删除，就算关闭浏览器，所缓存的数据依旧存在，localStorage是限制在文档源(http协议 + 域名 + 端口号)，所存储的内容，都是以字符串形式来存储的，因此如果需要做通用性的api的话，需要将其中的不同类型的val ...
关于申请开通微信支付的文档描述
前言由于需要在目前的区域平台开通微信支付功能，提供给到企业区域平台配置自有收款业务，因此特别整理关于微信小程序/公众号注册、微信支付商户开通指引流程
资料准备上述是需要准备的相关资料，由于需要同时注册公众号/小程序 + 微信商户号，因此，需要同时准备上述资料。
小程序/公众号开通指引1、小程序注册流程，点我查看，若其中流程有使用企业对公打款动作的话，需要在注册成功后，用对应企业的对公银行账号进行打款，有类似以下的一个打款效果图：2、小程序认证申请流程，点我查看，认证过程需要下载一pdf的公函，需要将该pdf给下载下来，然后签名盖章，填写对应的日期，然后将整张图片进行拍照，并在认证流程过程中来提交上传，公函3、提交完成认证信息后，需要进行一次300费用的支付，用对应公函上的实名认证的微信账号进行扫码付款4、以上所有的流程通过后，微信将会安排对应的客服人员进行一次电话回访，对所填写的信息的一个确认，⚠️这里需要需要注意的是需要确保资料都填写无误，若多次填写错误，将导致认知费用无效，🉐️继续重新支付认证的支付费用。
微信支付商户开通指引介绍
微信支付，是微信向有出售物品/提供服务需求的商家 ...
Sentry前端/APP日志监控的使用
前言为提高前端快速定位线上问题，减少跟用户/测试拿账号+密码进行bug的重现，这边利用Sentry来搭建了内部的一套日志监控系统，目前可以满足于APP + WEB/H5端 + 小程序的一个日志监控服务，记录线上程序脚本异常，通过收集浏览器相关信息环境，且针对业务方面的异常进行数据的采集，并提交到日志服务器中，提供邮箱告警机制，主动快速响应处理线上问题，保证线上问题的正常运作。访问地址：https://monitor.zhidianlife.com/
一、账号注册(公司邮箱)
注册公司邮箱账号，点我查看注册流程
进入sentry网站，点击请求加入入口，然后输入完整地址，完成加入申请操作
待请求加入成功后，重新进入sentry，然后点击密码丢失，完成密码设置流程
根据自行维护的账号密码，登录进入系统
进入系统后，需要配置对应的视图展示
设置浏览的语言以及时区
重新验证自己的邮箱账号
二、项目接入(Vue)由于目前的项目大都使用的vue开发框架，因此这边前端暂时仅提供vue的使用
安装依赖
script1npm install --save @sentry/vu ...
JavaScript中的浏览器学习(Http篇)
前言
重新认识Ajax，是Asynchronous JavaScript and XML的缩写(异步JavaScript和XML)，用来描述一种使用现有技术集合的‘新’方法，使用脚本操控Http与WEB服务器进行数据交换，而不用重新加载页面的机制。包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest
通过上述的一个C/S之间的数据交互图，可以清楚了解到客户端与服务端的一个通信机制，web浏览器提供了XMLHttpRequest对象来进行通信，该对象提供了操控Http的API，比如有get、post请求方式等等。
一、XMLHttpRequest的使用
EventTarget主要提供了XMLHttpRequest所需的对网络请求的一个监听机制，方便我们可以直接使用addEventListener对网络请求结果状态进行监听
XMLHttpRequestEventTarget是一个描述事件处理程序的接口，你可以在一个用于处理 XMLHttpRequest 事件的对象中使用到该事件处理程序
on ...
UI以及交互体验规范
前言PC网站公共的要求：
同一个方向上，有且只能有一个滚动条，比如横向/纵向；
对于表格类型的视图，需要限制表格的最低高度，但不用限制表格的最高高度，避免表格仅展示一两条数据的情况；
对于使用的七牛云的图片资源，都必须使用filter过滤器来将图片展示缩略图，避免图片加载慢；比如图片链接应该是追加参数展示的：https://img2.zhidianlife.com/temp/cy/shop/2022/01/21/84eda732-4bc0-41c4-a48d-88fdcaabc687.jpg?imageMogr2/thumbnail/480x480!/quality/50
对于公共的协议、隐私等协议的说明，均放到单独的1⃣️html文件中来维护，加快访问速度；
一、WEB后台管理系统1.1、所有的后台操作菜单，都必须有面包屑视图功能效果如下：
上述这里的首页、订单管理均可点击
1.2、 对于有列表、详情功能的页面，列表界面，统一展示一标题即可，带色块的标题，效果如下：
而对于详情页面的标题，需要在正中间展示一标题，并在右侧提供返回至上层页面的按钮视图，效果如下：
且在详情页面中 ...
JavaScript中的浏览器学习(Css篇)
前言🤔 为什么要学习脚本化CSS？脚本化CSS是什么？如何使用CSS脚本化？
脚本化CSS可以将一些动画效果，利用js来配合css进行实现出来，也可以单独仅使用js来将其实现出来。CSS即为Cascading Style Sheet层叠样式表，这里的层叠，代表了应用于文档document中元素的样式规则，是来源于各个”来源”的层叠，这里的”来源”有多个：
浏览器默认样式表1⃣️
文档的样式表2⃣️
元素的样式表
内联样式表3⃣️
外联样式表4⃣️根据上述样式表的层层属性的覆盖，来达到最终的效果，当未出现重复的属性的覆盖的时候，一般覆盖顺序是：3⃣️ > 4⃣️ > 2⃣️ > 1⃣️
✨ 在document中的外联样式，可以有两种方式来定义
单独的XXX.css文件管理，在文档中通过<link>节点来引用，并指定源地址为链接到XXX.css文件
在文档中直接引用，通过在<head>节点中定一个的一个<style>节点，在<style>节点中包含对于的样式表定义
如何脚本化CSS一、利用style属性，更 ...
JavaScript中的浏览器学习(Event篇)
前言
浏览器提供了异步事件驱动编程模型，通过对特定元素、特定事件(比如document.onload、XMLHttpRequest.onreadychange)等进行监听，来达到对该元素/事件的一个响应动作，这个动作即为一事件，我们称之为event，该event并不是javascript内的对象，而是抽象封装了一个基础类
通过上图可以得知，浏览器中的事件Event对象由以下几个元素组成：
一、事件类型一般的浏览器事件类型包括有：
传统事件类型
表单事件：form表单的sumbit、reset事件
window事件：window.onload事件
鼠标事件：mouseover事件
键盘事件
DOM事件
HTML5事件
移动设备事件
二、事件目标EventTarget是一个DOM接口，由可以接收事件、并且可以创建监听器的对象实现，而我们所熟知的Element、Document和window都是最常见的EventTarget，继承于该接口，像其他的对象，也是可以做为EventTarget，比如XMLHttpRequest、AudioNode、AudioContext等等，这也就印 ...
JavaScript中的浏览器学习(Document篇)
前言
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。描述了任何类型的文档的通用属性与方法。根据不同的文档类型（例如HTML、XML、SVG，…），还能使用更多 API：使用 “text/html” 作为内容类型（content type）的 HTML 文档，还实现了 HTMLDocument 接口，而 XML 和 SVG 文档则（额外）实现了 XMLDocument 接口。
零、Document与DOM文档对象模型1、DOM文档对象模型
DOM 树包含了像 <body> 、<table> 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被 ...
JavaScript中的浏览器学习(Window篇)
前言首先先来看一下window的一个组成部分，如下图：
一、location(浏览器定位与导航)window对象的location属性，引用的是Location对象，它表示该窗口中当前显示的文档的URL，并定义了对应的方法来操作新的文档。
Document对象中的location属性也引用到Location对象，这两者指向的是同一个对象：
1window.location === document.location;
1.1、组成部分看以下图片的展示，关于location的一个组成成分：通过上述的标注，我们可以很方便的看出location的组成部分，以及在实际的项目中来使用他们。
hash：返回的是URL中的”片段标识符”部分，一般是#之后的内容search：返回是的URL中?后面的参数内容，一般可以使用&来将参数与key给分离开来
如有以下的一个输出结果来说明上述场景：
1.2、location提供的api方法
assign：跳转至下一个页面；
replace：替换当前链接；
reload：重新载入当前页面
二、navigator
window.navigator属性引 ...
JavaScript中浏览器的学习
前言
在学习了关于javascript的过程中，我们所编写的代码都是基于web浏览器来进行运行的，web浏览器是提供的javascript的一个宿主环境，通过对该宿主环境的学习，可以很清楚地了解到宿主是如何执行JavaScript的，以及宿主提供了什么环境来执行JavaScript程序的
以下是对应的一个浏览器解析并执行js的一个过程：
从这里可以看出web浏览器是如何对JavaScript进行执行的。为了防止肆意地对浏览器进行操作，浏览器自身也提供了针对javasc的一系列限制条件：
一、浏览器对JavaScript的一个限制条件
JavaScript程序可以打开一个新的浏览器窗口，但是为防止广告商滥用弹出窗口，使得只有响应了用户的触发事件才能够允许打开窗口，不能通过程序自动打开窗口；
JavaScript程序可以也仅能关闭自己所打开的窗口，不能通过程序关闭其他人打开的窗口；
Html中的FileUpload元素中的value属性是只读的，假如设置了这个属性，那么可以偷偷地将想要的信息上传到自己的服务器，会造成用户隐私信息的泄漏；
根据同源策略，不能以不同的文档中读取内容。而根据不 ...
JavaScript中Array的属性以及api
JavaScript中的数组
ES6的特性(二)
前言采用通用模块来组织和复用代码，能够显著提高代码的可读性与可礼节性。ES6较ES5还是增加了不少的方便开发者组织代码结构的知识点的，具体描述如下：
一、生成器二、迭代器
什么是迭代器？为什么要使用迭代器？如何使用迭代器？
1、迭代器额概念迭代器是一种结构化的模式，用于从源头一次一个的方式来取得数据，有序的、连续的、基于拉取的用于消耗数据的组织方式。ES6实现的是为迭代器引入一个隐士的标准化协议，使得我们可以自己来实现这样一个接口，达到进行该模式下的数据组装以及数据提取模式
2、迭代器的组成2.1、迭代器协议123456789 Iterator[required]{next(){}[required] //:取得下一个IteratorResultreturn(){}[optional] // 停止迭代器并返回IteratorResultthrow(){}[optional] // 报错并返回IteratorResult } IteratorResult{value; //当前迭代值或者最终返回值done; //布尔值代表当前迭代器完成状态 }
IteratorResult指 ...
ES6的特性(一)
前言
从本章节开始，这边将会将ES6的新增的语法以及规范加入到学习的行列中，提高团队编码能力，提高代码可读性，提高代码运行效率，优化项目架构等！！！
ES6整体一览
根据以上ES6整体一览表，这边从各个节点进行每个章节的学习，从第一章语法开始
ES6新增语法首先先来看一下一整张图关于ES6新增的语法架构图
1、块级作用域在ES6之前，我们表示一个块级作用域的方式有：function，利用IIFE将变量给保护起来，达到局部块级作用域的目的在ES6之后，出现了let + const，并以for、if、function等角色结合，实现了一个个的块级的作用域，我们可以知道let关键词主要是夹持上下文，达到访问局部作用域的目的。具体如何使用，这个就不在详细描述了。
1234567891011let a = 123;if(a > 0){ // a作用域 let b = 234; if(b > 0){ // b作用域 let c = 345; console.info(a, b, c); // 这里在形成块级作用域的同时，也满足块级作用域的访问规则 } c ...
WebWorker的学习与使用
前言
JavaScript是单线程的，如果需要进行多线程的话，一般是不可能的，因为从头到尾只有一个线程在执行，对于多线程则需要协同配合，分享可执行时间，线程A执行一段时间，然后线程B执行一段时间，能否就是新开一个线程，可以从头到尾来执行，而不会影响到原本的JS主线程呢？
引入👉在宿主浏览器中提供了以下这样子的一套机制：浏览器提供多个不同的js引擎实例，每个实例都各自运行在自己的所属线程中，来执行不同的程序，程序中每一个这样子的独立多线程部分被称为是一个WebWorker，每个WebWorker都可以与js主线程进行通讯。
现状WebWorker目前的一个兼容性：
worker使用🧠这个有点想像安卓开发中的UI主线程与非UI线程之间，非UI线程主要做一些耗时长、繁琐的逻辑运算，然后通过消息通讯机制的方式进行通讯。
1、 以下是Js主线程与WebWorker之间的一个通讯过程：从上面我们可以看出js主线程与webworker之间的通讯方式是对称的。worker与主线程之间的数据传递通过这样的消息机制来进行：双方都使用postMessage方法发送各自的消息，使用onmessage事件 ...
nuxt入门以及实战
1⃣️、nuxt的概念
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、 ...
吃掉那只青蛙读后感
序言
在每天都有做不完的重复性的工作，我们如果一只保持这种状态下去的话，我们将不能很好地将所有的事情都在既定的时间内处理，我们就得要根据时间的优先级进行排序，通过这种方式，我们将那些复杂又耗时的事情进行集中处理，然后保证工作、家庭生活互不冲突，更好地来管理我们地时间，腾出更多的时间出来陪同家人、加强自身的学习、进行体育锻炼，而不是将有限的生命风险给无限的时间。
因此，我们提议，吃掉那只青蛙！我们为什么要吃掉一只🐸呢？不可以是其他的吗？这里的🐸其实是用比喻的方式，指的是那些又难啃又复杂的任务，按照一定的规则，来将这些任务进行合理的分配，然后集中时间精力，来吃掉一只又一只的青蛙。
🤔️那么我们应当怎样做，才能够吃掉那只🐸呢？？这里需要以下几个方面的一个流程，如果能够将其固化成为我们的一个长期习惯，那么，我们每天将能够腾出更多的时间精力，分配到其他的事情上。
如何吃掉一只🐸？答案很简单，就是一口一口地来吃，那么又如何一口一口地来吃掉这只🐸呢？
这么大的🐸，可以是将任务(🐸)拆分为不同的子任务，比如我们原本是一个年度的一个计划，那么我们可以拆分为季度计划，再拆分为月度计划，再拆 ...
高效学习
前言
社会不断前进发展，我们会很明显的发现，如果自己和5年前的自己相比，没有任何增长，包括技能、价值、积累资金等，那么可以认为在者5年的时间内，自己没有半点增长，没有进步，自己还是和5年前的自己一样没有成长，那么最后就只有被社会所淘汰，社会不断往前发展，以前用的诺基亚称霸手机市场，现在都是苹果、华为、小米等平台的天下了，所以，如果不进步，就只有被社会所淘汰。现在信息量如此爆棚的时代，谁能够快速掌握更多的知识，谁就能够获取足够多的竞争力，就能够在企业/事业单位中夺得头筹。那么信息变化这么快，比如vue/react从刚出来，到现在到处都使用，前后不到两年的时间，而且现在市面上招的前端都需要足够多的vue/react运用技巧，甚至于源码的精通，好像就是还没入门就已经被淘汰了。那么我们如何快速吸收更多的知识，高速学习掌握吃透更多的知识，就需要高效的学习。
如何高效学习？举个🌰 –> 我们平时熟悉一些知识点，主要靠的是死记硬背，通过这种方式可以在短时间内，应付考试，但有可能造成信息的错乱，可能会记错知识点，而且在后面，可能时间久了，就忘了这个了。那么，我们如何来记住这些知识点呢？？这 ...
前端技术架构
技术架构
根据上述的蜘点大平台架构图，我们对应划分为以下几大块进行详细描述
1. 协同工作
开发规范
为了低成本高效率的提高代码质量，基于公司实际情况，定制化开发了一个 webpack 脚手架，解决了以下问题：
避免了无限制引入第三方库：无限制引入第三方库，是一种常被忽略，但却很容易带来问题的行为（例如 vue+jquery 等）。因为开发人员通常并不会阅读第三方库的源代码，不能保证其是安全可靠的。而定制脚手架，提供了所有开发中需要的依赖，并严控新依赖的引入，则确保整个工程是安全的。约束开发人员代码规范：开发最常见问题是代码规范混乱，各写各的，导致维护成本高企。而通过引入 eslint，强行规定代码风格，自动对不符合规范的代码报错，解决了这些问题。并且由于 IDE 支持通过应用 eslint 规则，自动格式化代码。也降低了对开发人员的约束成本，降低推行代码规范的难度。方便提供给其他开发使用标准的脚手架，并提供技术支持（比如可以统一大前端的技术栈）。
git分支管理、code review创建项目时，一般会针对不同的环境，来创建三个常设分支：
develop：开发环境的稳定分支，公开 ...
jquery源码解读
前言现在的童鞋估计一上手项目，就不是以前直接用jquery来撸项目，而是使用的vue，react等快速开发框架，虽然jquery已经渐渐地淡出现阶段的项目，但它霸屏了长达好几年的浏览器，很值得我们具体来学习其中的缘由。
框架预览首先我们先看下jquery的总体架构，如下图：
首先它通过类工厂模式，创建了一个jquery对象，通过立即执行函数IIFE包裹，提供requirejs的方式引入jquery，可以在nodejs中包含document对象属性的环境中运行，最终也就是执行的factory(window, noGlobal)方法，来将window作为参数进行传递！
其次，为兼容amd环境使用jquery，同样地在框架中支持amd方式调用jquery
框架源码问题一一解读这里有一个点，就是为毛我们能够在引入了jquery库的环境中，可以使用window.$呢？原因就是它在全局环境中用$来指向了new出来的jquery对象，具体如下
从👆 我们可以看出这里将定义出来的jquery对象由window中的$来指向，因此，我们使用$()方法其实就是使用的jquery()方法
jquery ...