online阳光-专注于大前端行业领域

前言 将一个复杂对象的构建层与表示层互相分离，同样的构建过程可采用不同的表示。虽然建造者模式也是为了创建一个对象，但该模式更专注与对象的一个创建过程，而之前所习🉐️的工厂类模式则专注于结果，更关注是创建对象的细节通过将对象的不同组成部分，交由每个不同的对象来实现，也可以说这种模式所创建出来的对象是一个复合对象⚠️ 这种方式在无形中会增加对象的复杂性，因此如果对象的颗粒度很小的话，或者模块之间的复用率很低并且变动不大的话，优先采用创建一整个对象。 意图: 将一个复杂的构建与其表示分离，使得同样的构建过程可以创建不同的表示主要解决: 主要解决在软件系统中，有时候面临一个”复杂对象”的创建工作，其通常由各个部分的子对象用一定的算法构成；由于需求的变化，这个复杂对象的各个部分经常面临剧烈变化，但将他们组合在一起的算法却相对稳定何时使用: 一些基本不见不会变，而其组合经常变化的时候应用实例: 去M记，汉堡、可乐、薯条、炸鸡等基本不变，而其组合是经常变化的，从而生成出所谓的”套餐” ES5代码1234567891011 // Picture.js 抽象图片信息类，包含卡片信息、组合方式信息 f ...

前言工厂方法模式是通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例，按照之前的介绍，如果随着业务的开展，需求不断的增加，假如使用简单工厂模式，那么我们需要添加对应的类，以及在工厂函数中新增对应的case分支代码，来创建对应的实例。将原本的工厂方法，当作一个类对象，需要新增的需求，都只需要通过在该类中的不同属性来对应创建不同的实例对象即可，且不同的实例对象它们之间共享着由工厂方法提供的共同属性。⚠️ 由于是工厂方法，有可能在使用过程中，不小心当作普通的方法来调用了，因此可以采取将方法保护起来的方式 安全的方法工厂类123456789var Factory = function(type, content) { if(this instanceof Factory){ // 正常使用了new关键词来调用Factory方法对象 return this[type](content); }else{ // 若不是正常 return new Factory(type, content); }} ES5代码1234567891011121314151617 ...

前言 在Vue2.0中，代码复用和抽象的主要形式是组件，然而，有时候需要对普通DOM元素进行底层操作，这个时候就可以使用自定义指令，来满足业务诉求。 指令钩子函数和参数说明 如何使用指令 自定义指令需要使用，则必须先注册，Vue自定义指令，可以有局部注册和全局注册两种方式， 全局注册：Vue.directive(id, [definition])，然后在入口文件中调用Vue.use() 局部注册：在对应的*.vue组件文件中的directive属性中编写 ✨ 一般情况下，需要使用到指令说明是需要全局公用的，不然就没有太多的必要来定义这个指令了，而且一般这个指令可以有多个，这边可以是编写一个统一的入口文件，实现指令的一个批量注册，以便于后续直接使用,比如有以下的一个入口文件： 123456789101112import copy from './modules/copy';import longpress from './modules/longpress';const directives = { copy, longpress};export default { inst ...

前言简单工厂模式(Simple Factory)，又叫静态工厂方法，由一个工厂方法决定创建某一种产品对象类的实例，主要用来创建同一类对象。使用者无须知道这些对象的一个依赖关系，而仅仅需要知道关于这个工厂方法即可。一般🈶️两种方式： 通过类实例化对象来创建 通过创建一个新对象，然后包装增强其属性和功能来实现的 两种方式所造成的不同点在是否做到了将公共部分进行抽离的目的。 ES5代码以下主要提供两种简单工厂模式来创建不同的对象 方式一1234567891011121314151617181920212223242526272829303132 var Basketball = function() { this.intro = '我是篮球'; } Basketball.prototype = {getNum: function (){ console.info('每只球队需要5人参赛');},getBallWeight: function() { console.info('篮球很重');} }; var Football = function() { this.intr ...

前言面向对象编程是一种程序设计范型，它将对象作为程序的基本单元，将方法和数据封装其中，以提高程序的重用性、灵活性和扩展性。想要通过学习JavaScript设计模式，让自己的代码在满足正常业务迭代的前提下，让自己的代码更加富有灵活性，享受编写代码的乐趣，而不是枯燥无味地来完成工作任务，从而来提升自身的一个编码水平。 JavaScript中的函数是一等对象 var foo = function(){}typeof foo; // object 从上述可知，函数也是一对象，它与普通的object对象的区别在于它是可执行的，我们知道，对象可定义属性，属性可以是数据，也可以是方法，通过函数将属性与方法实现隐藏其中，对外暴露api的方式，即可达到面向对象编程的基本思维。 ✨ 函数一般只能被调用，但是如果我们的函数返回的是一个对象，而该对象又封装了一些函数以及属性的话，那么我们可以利用该对象来赋予对应的操作，对应的示例代码如下： 1234567891011 function Foo(){return { x: 123, y: 456, fun: function(content){ ...

前言 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、以上所有的流程通过后，微信将会安排对应的客服人员进行一次电话回访，对所填写的信息的一个确认，⚠️这里需要需要注意的是需要确保资料都填写无误，若多次填写错误，将导致认知费用无效，🉐️继续重新支付认证的支付费用。 微信支付商户开通指引介绍 微信支付，是微信向有出售物品/提供服务需求的商家 ...

前言为提高前端快速定位线上问题，减少跟用户/测试拿账号+密码进行bug的重现，这边利用Sentry来搭建了内部的一套日志监控系统，目前可以满足于APP + WEB/H5端 + 小程序的一个日志监控服务，记录线上程序脚本异常，通过收集浏览器相关信息环境，且针对业务方面的异常进行数据的采集，并提交到日志服务器中，提供邮箱告警机制，主动快速响应处理线上问题，保证线上问题的正常运作。访问地址：https://monitor.zhidianlife.com/ 一、账号注册(公司邮箱) 注册公司邮箱账号，点我查看注册流程 进入sentry网站，点击请求加入入口，然后输入完整地址，完成加入申请操作 待请求加入成功后，重新进入sentry，然后点击密码丢失，完成密码设置流程 根据自行维护的账号密码，登录进入系统 进入系统后，需要配置对应的视图展示 设置浏览的语言以及时区 重新验证自己的邮箱账号 二、项目接入(Vue)由于目前的项目大都使用的vue开发框架，因此这边前端暂时仅提供vue的使用 安装依赖 script1npm install --save @sentry/vu ...

前言 重新认识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 ...

前言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、 对于有列表、详情功能的页面，列表界面，统一展示一标题即可，带色块的标题，效果如下： 而对于详情页面的标题，需要在正中间展示一标题，并在右侧提供返回至上层页面的按钮视图，效果如下： 且在详情页面中 ...

前言🤔 为什么要学习脚本化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属性，更 ...

前言 浏览器提供了异步事件驱动编程模型，通过对特定元素、特定事件(比如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等等，这也就印 ...

前言 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)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被 ...

前言首先先来看一下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的过程中，我们所编写的代码都是基于web浏览器来进行运行的，web浏览器是提供的javascript的一个宿主环境，通过对该宿主环境的学习，可以很清楚地了解到宿主是如何执行JavaScript的，以及宿主提供了什么环境来执行JavaScript程序的 以下是对应的一个浏览器解析并执行js的一个过程： 从这里可以看出web浏览器是如何对JavaScript进行执行的。为了防止肆意地对浏览器进行操作，浏览器自身也提供了针对javasc的一系列限制条件： 一、浏览器对JavaScript的一个限制条件 JavaScript程序可以打开一个新的浏览器窗口，但是为防止广告商滥用弹出窗口，使得只有响应了用户的触发事件才能够允许打开窗口，不能通过程序自动打开窗口； JavaScript程序可以也仅能关闭自己所打开的窗口，不能通过程序关闭其他人打开的窗口； Html中的FileUpload元素中的value属性是只读的，假如设置了这个属性，那么可以偷偷地将想要的信息上传到自己的服务器，会造成用户隐私信息的泄漏； 根据同源策略，不能以不同的文档中读取内容。而根据不 ...

JavaScript中的数组

前言采用通用模块来组织和复用代码，能够显著提高代码的可读性与可礼节性。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新增的语法架构图 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 ...

前言 JavaScript是单线程的，如果需要进行多线程的话，一般是不可能的，因为从头到尾只有一个线程在执行，对于多线程则需要协同配合，分享可执行时间，线程A执行一段时间，然后线程B执行一段时间，能否就是新开一个线程，可以从头到尾来执行，而不会影响到原本的JS主线程呢？ 引入👉在宿主浏览器中提供了以下这样子的一套机制：浏览器提供多个不同的js引擎实例，每个实例都各自运行在自己的所属线程中，来执行不同的程序，程序中每一个这样子的独立多线程部分被称为是一个WebWorker，每个WebWorker都可以与js主线程进行通讯。 现状WebWorker目前的一个兼容性： worker使用🧠这个有点想像安卓开发中的UI主线程与非UI线程之间，非UI线程主要做一些耗时长、繁琐的逻辑运算，然后通过消息通讯机制的方式进行通讯。 1、 以下是Js主线程与WebWorker之间的一个通讯过程：从上面我们可以看出js主线程与webworker之间的通讯方式是对称的。worker与主线程之间的数据传递通过这样的消息机制来进行：双方都使用postMessage方法发送各自的消息，使用onmessage事件 ...

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、 ...