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 ...
jenkins+gradle+pgyer+email => 安卓持续集成打包apk流程
前言以前开发的时候，一般流程是开发调试，提测的时候，给测试甩安装包或者是安装的二维码，各测试同时自行下载安装验证，但提供安装包的过程又臭又长，如果对于频繁需要修改bug并进行快速回归的话，单单通过android studio开发工具来提供的话，不仅效率低，而且打包时间大大占据了开发者的bug调试时间，因此，需要jenkins等持续集成平台来提供，也就是app的开发者，不再提供apk安装包，由测试同事自行到jenkins上索取安装包进行安装
jenkins环境的安装首先，先安装jenkins环境，访问jenkins网址 https://www.jenkins.io/zh/，选择适合自己的版本进行下载并安装，这边选用的是mac环境下的jenkins
通过brew命令来安装jenkins：
安装最新的jenkins LTS 版本：brew install jenkins-lts
或者安装指定版本的LTS：brew install jenkins-lts@VERSION
启动jenkins服务：brew services start jenkins-lts
重启jenkins服务：brew ...
在你的项目代码层面中加入git提交代码的规范
前言大家在日常的coding生活中，不免需要提交代码，然后每次代码commit的message，是否有认真地描述过呢？
我想不少童鞋应该是直接随便编写点简单的描述内容就直接提交上去了，但是，要是遇到下图这个情况：
作为项目管理员，在做这个代码的code reviewing的时候，要看每次提交的代码具体都是做了什么事情的时候，估计心里会有一顿F开头的话语。
那么作为一个项目的负责人，有必要对开发人员每次提交的message进行维护，不同的开发人员对每次commit的描述都有不同的格式。
根据业界开发人员整理了关于这个commit的规范，且在相关的IDE开发工具中提供的相关的插件
供我们方便的使用。
防范于未然，我们总不能在每个项目的各个阶段来跟进到代码提交的规范，更应该让每个开发人员在提交代码的时候都有这个意识。
针对👆这个情况，对于web前端项目，我们可以提供一简单的工具，在每个开发人员在提交代码的时候，自动拦截不符合规范的git commit message。
validate-commit-message 插件工具的使用validate-commit-message的安装sc ...