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

前言 在平时日常使用css的时候，最容易忽略的个人认为就是这个字体了，关于字体的使用，一般没有什么特殊的要求的话，都是使用的用户代理，也就是用户浏览器自身设置的字体，而不会去使用其他的字体；也没有多大的必要去使用一些特殊的字体，特别是一不小心就侵权了，因为有部分字体人就是依托这个字体来让自己公司盈利，这里具体怎么盈利就不多说，只希望在使用某些字体之前，需要再三斟酌了！！本文也仅针对平常关于字体使用过程的两三个点进行记录学习，以便于后续查阅！ font-family 声明web程序中使用的字体为某一字体族的字体，可同时声明多个字体进行使用 @font-face @font-face的目的是让我们的程序使用自定义的字体，借助于@font-face可以定义一个专门的字体族名称，并对应于服务器上的一个字体文件，用户浏览器将自动下载那个文件，并使用它来渲染页面中的文本！ 1234567@font-face { font-family: 'my-font'; // 指定的自定义的字体名称 src: url("***.otf"); // url可以用逗号分隔符来定义，也就是可 ...

前言 在平时的日常编码过程中，对于css属性的使用也仅仅是停留在了简单使用的阶段，但如果出现新的未曾见过的css单位或者比较少用的单位时，则一脸懵逼，也不知道这个单位以及它的值是用来作甚的，目前个人这边的方式是闭着👀开浏览器调试模式，然后按照可视化所看到的效果进行简单的调试，也没有去深究其中的一个原理，作为想要在前端领域精进的一名贫穷孩子，我觉得有必要去了解其中的一个原理，以使自己能够对自己/别人所编写的代码更加的熟悉，造就像以前编写Android代码的布局一样，编写一次即可完成80%～90%的界面效果，且兼容到大部分的机型！！！ 全局关键字 全局关键字，指的是所有的css属性均可以使用的属性值 inherit: 把元素某个属性的值设置为与父元素同一属性的值一样，也就是强制从父元素那边继承属性过来 initial: 把属性的值设置为预定义的初始值，相当于”重置”属性值 unset: 作为inherit与initial关键字的替身，对于继承的属性来说，unset的作用与inherit一样，对于不继承的属性来说，unset的作用与initial一样 针对上述3个关键词仅能够使用的 ...

前言 写久了web前端的样式，基本上都知晓如何编写css，已经对应如何应用到对应的标签上，那么，我们自己有没有想过，为毛这里编写的css久可以直接在界面上展示出我们所编写的效果，浏览器它做了什么事情，使🉐️我们可以编写出排版整齐，配色优美的界面的呢？这里通过对这个浏览器中关于css的原理简单讲解，来更加深入地理解我们所编写地css样式代码，是如何被浏览器所识别并使用到每个节点标签中地！！！ 浏览器中css的工作原理 浏览器中的css的工作原理，是将原本写在一起的css样式规则，通过浏览器自身代理，拆分为一个个分散的独立的css属性，根据每个属性的特指度来进行层叠，然后最终计算出其合并后的css规则，也就是getComputedStyle对象，该对象是不可编辑的，最终展示在界面中 具体流程如下所示： 基础概念要了解关于css中的应用规则，首先需要掌握一下几个基本的概念 特指度(specificity) 选择符的特指度有选择符本身的组成部分决定，一个特指度值由4部分组成：0，0，0，0 对应特指度中的每一位的对应关系图如下： 有以下一个例子可供学习关于特指度： 123html &g ...

前言 之前一直想在网上针对一些三方框架或者方案编写自己的一个使用手册/阅读笔记，原本自己的hexo博客比较适合平时自己的点击积累，但不能够像一本书这样子来浏览，因此，我在网上找相关的，终于发现有这样的一个框架：gitbook，可以用它来编写一样的markdown文件，来组织自己的书籍/手册的一个目录 gitbook介绍 gitbook是一个基于node.js的命令行工具，使用github/git和markdown/asciiDoc来构建精美的电子书。gitbook支持输出静态网页和电子书等多种格式，其中默认输出静态网页格式。 gitbook使用 gitbook主要有三个工具： gitbook命令行工具； gitbook Editor官方编辑器(目前新版已找不到了); gitbook.com官网在线编辑； 这里主要是介绍gitbook命令行工具的方式来创建自己的电子书 gitbook命令行1、初始化项目script1gitbook init 语法说明：初始化项目，如果目录是空的话，就会自动创建README.md以及SUMMARY.md两个文件，如果这两个文件已经存在的话，则会自 ...

前言 平时在用三方UI库的时候，那爽🉐️不要不要的，但是作为一个前端开发者，如果连基本的界面都不能画好的话，又怎么能够胜任得了后续复杂不断的业务变动以及页面的交互呢。之前从来没有考虑过这个问题，认为不懂的内容，只需要简单的度娘就可以了，实际上，更重要的是要关注于基础，凡事多问几个为什么。本文从元素的背景属性：background来进行诠释，向自己解析其中是如何将背景给发挥🉐️淋漓尽致的。 开局先上一幅图，了解一个整体的概况： background-image 设置元素的背景图片 描述 描述 取值 继承性 false 动画性 false <image>中的取值范围为：[<uri>|<linear-gradient>|<repeating-linear-gradient>|<radial-gradient>|<repeating-radial-gradient>] ⚠️ 这里🈶️一个点需要注意的是：background-image允许接收多个不同的参数，代表这不同的背景，同时需要配 ...

前言目标

需求背景 平时在开发过程中，需要针对一些三方UI库进行定制，想要使用三方库的某个控件，然后想在它的基础上，进行一些自有的逻辑的追加，变成自己团队内部使用的控件。达到既使用到三方库原本提供的属性/方法，又能够使用自己额外追加的属性/方法。 目标使用三方控件的同时，又能够补充上自己的控件额外的属性/方法 方案设计 官方提供了一个vue选项属性：inheritAttrs，对于它的一个解释是：默认情况下父作用域的不被认作props的attribute绑定将会”回退”且作为普通的HTML attribute应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置inheritAttrs为false，这些默认行为将会去掉。而通过实例属性$attrs可以让这些attribute生效，且可以通过v-bind显式地绑定到非根元素上。 🤔 啥意思呢？就是说平时我们普通编写的vue组件中，如果该组件的并无定义任何的自定义属性props的时候，与此同时，如果我们直接往这个自定义属性上添加属性attribute时，将会作为普通的未被html识别的html ...

前言最近在熟悉关于vue的公共api的时候，有时真的怀疑关于这个api方法是否真的是这样子执行，执行顺序是怎样的，为什么是这样子的逻辑。带着问题来解读代码，但需要深入到代码中才能够了解到具体的程序执行逻辑。 工欲善其事必先利其器，这里就需要对源码进行调试，那么应当如何进行源码的调试呢？ 配置步骤一、配置文件入口添加source-map 二、执行命令：npm run dev将在dist目录中生成对应的vue.js文件 三、添加调试网页，直接采用cdn方式来使用 四、在浏览器中访问页面，通过在vue源码代码中添加debugger直接加入断点

前言🤔 一般的，我们定义一个对象的属性的时候，可以简单的通过对象字面量来定义并声明对象的属性，如下： var obj = { a : 123 }; 定义了一个obj对象，其属性a的值赋为123。既然JavaScript中已经提供了这种方式来声明定义对象以及其属性，为啥子还要多此一举来提供Object.defineProperty这个静态API来给对象定义属性呢？？ ✨ 首先，对于Object.defineProperty()的定义是：直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象。这里在定义属性的同时，不单单提供属性的值，还提供了属性的数据操作+数据属性描述，该方法允许精确地添加或修改对象的属性，一般通过简单的赋值操作，其属性描述符中的属性都是true的。 var obj = {};Object.defineProperty(obj, ‘a’, { value: 123, writable: ‘boolean，当且仅当该值为true的时候，普通的.属性操作符或者[]属性操作符才可以对a属性进行赋值’, enumerable: ‘boolean, ...

前言 享元模式主要用于减少创建对象的数量，以减少内存占用和提高性能，通过运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销.这种模式尝试重用现有的同类对象，如果未找到匹配的对象，则创建新对象。 意图：运用共享技术有效地支持大量细粒度的对象； 主要解决：在有大量对象时，有可能会造成内存溢出，我们把其中公共的部分给抽象出来，如果有相同的业务请求，直接返回在内存中已有的对象，避免重新创建对象； 何时使用： 系统中有大量的对象时，有可能会造成内存溢出； 这些对象大量消耗内存； 这些对象的状态大部分可以外部化(通过外部传递数据直接完成功能的实现)； 这些对象可以按照内蕴状态分为很多组，当把外蕴对象从对象中剔除出来时，每一组对象都可以用一个对象来代替； 系统不依赖于这些对象身份。 如何使用：用唯一标识码判断，如果在内存中有，则返回这个唯一标识码所标识的对象 应用实例： Java中的String，如果有则直接返回，如果没有则创建一个字符串保存在字符串缓存池里面； 数据库中的连接池 注意事项： 注意划分外部状态和内部状态，否则有可能引起线程安全； 这些类必须有一 ...

前言 Vue中提供了以下几个全局API，供我们来使用，这边做了对应的整理： 部分静态方法专题介绍官方上的针对各个静态方法已做了比较详细的解释，这边仅针对其中的一两个进行延伸学习 Vue.observable 让一个对象可响应。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景。⚠️ 在Vue2.x中，被传入的对象会直接被Vue.observable变更，但其实是属于同一个对象。 🤔 Vue最独特的特性之一，就是其非侵入性的响应式系统，我们普通传递给到组件中的data函数中返回的对象，仅仅是一个普通的js对象而已吖，为什么当我们修改它的值的时候，对应的页面会发生改变，以及对应的声明周期钩子函数也会发生对应的调整，这个是怎样的一个状态管理机制的呢？ ✨ **关于这个机制的实现，采用的是Object.defineProperty**，通过对该静态方法的一个使用，可以对原有对象的属性在发生set赋值操作的时候，额外调用其他逻辑操作，来满足这个架构的功能实现，通过O ...

前言 组合模式，又叫部分-整体模式，将对象组合成树形结构一表示”部分整体”的层次结构。该模式创建了一个包含自己对象的类，该类提供了修改相同对象组的方式，使得用户对单个对象和组合对象的使用具有一致性。 意图：将对象组合成树形结构以表示”部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性； 主要解决：它在树形结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以像处理简单元素一样来处理复杂元素，从而使得客户程序与复杂元素的内部结构解耦； 何时使用： 想表示对象的部分-整体层次结构(树形结构); 希望用户忽略组合对象与单个对象的不同，用户将统一地使用组合结构中的所有对象 如何实现：树枝和叶子统一接口，树枝内部组合该接口 关键代码：树枝内部组合该接口，并且含有内部树形List，里面放Component 优点： 高层模块调用简单； 节点自由增加 缺点：在使用组合模式时，其叶子和树枝的声明都是实现类，而不是接口，违反了依赖倒置原则 使用场景：部分、整体场景，如树形菜单，文件、文件夹的管理。 代码实现 想要实现一个Form表单的表单元素自由组合创建 12345678 ...

前言 函数式组件一般比较简单，没有任何的管理状态，也没有监听任何传递给它的状态，也没有生命周期方法，实际上，它仅仅是接受一些prop的函数，在这样的场景下，我们可以将组件标记为functional，这意味着它将无状态(没有响应式数据)，也没有实例上下文。 函数式组件的定义与使用 官方提供了两种方式来定义函数式组件 函数式组件的定义1、纯代码方式定义12345678910111213141516171819 Vue.component('my-functional-component', { functional: true, props: { // 传递进来的参数 xxx: { type: Object, default: null } }, render(h, context){ // context为传递进来的上下文 } });// 或者我们可以直接是以👇的一个单JS文件来定义，然后再在具体的页面/组件中来使用，个人一般使用以下的方式来创建自己的一个函数式组件export d ...

前言 由于一个对象不能直接引用另外一个对象，所以需要通过代理对象在这两个对象之间起到一个中介的作用。在代理模式中，我们通过创建具有现有对象的对象，以便于向外界提供功能功能接口。 意图：为其他对象提供一种代理以控制对这个对象的访问。 主要解决：在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。 何时使用：想在访问一个类时做一些控制。 如何解决：增加中间层。 关键代码：实现与被代理类组合。 ES5代码实现123<div id="imgContainer"> <img id="realImg" style="width: 80px; height: 80px;"></div> 12345var tempImg = new Image();tempImg.src = 'https://www.91temaichang.com/2022/03 ...

前言 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁，它结合了两个独立接口的功能，这种模式设计到一个单一的类，该类负责加入独立的或者不兼容的接口功能。将一个类(对象)的接口(方法/属性)转换成为另外一个接口，以满足用户需求，使类(对象)之间接口的不兼容问题通过适配器得以解决。🤔这其实是日常业务开发过程中经常出现到的一个问题，为了兼容到不同业务系统不同接口的不同实现方法方案，所进行的适配工作。 意图：将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 主要解决：主要解决在软件系统中，常常要将一些”现存的对象”放到新的环境中，而新环境要求的接口是现对象不能满足的。 何时使用： 1、系统需要使用现有的类，而此类的接口不符合系统的需要。 2、想要建立一个可以重复使用的类，用于与一些彼此之间没有太大关联的一些类，包括一些可能在将来引进的类一起工作，这些源类不一定有一致的接口。 3、通过接口转换，将一个类插入另一个类系中。（比如老虎和飞禽，现在多了一个飞虎，在不增加实体的需求下，增加一个适配器，在里面包 ...

前言 隐藏系统的复杂性，并向客户端提供一个客户端可以访问系统的接口，通过这个接口使得对子系统接口的访问更加容易，提供对客户端系统的简化方法和现有系统类方法的委托调用。其实也是属于面向对象编程中的一种编程思维模式：针对接口编程，在面对不同的复杂对象，仅需要将复杂对象对外提供统一的简单明确调用的业务方法，然后自身隐藏复杂逻辑其中，调用者无须关心内部具体实现业务逻辑 意图：为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。 主要解决：降低访问复杂系统的内部子系统时的复杂度，简化客户端之间的接口。 何时使用： 1、客户端不需要知道系统内部的复杂联系，整个系统只需提供一个”接待员”即可。 2、定义系统的入口。 如何解决：客户端不与系统耦合，外观类与系统耦合。 关键代码：在客户端和复杂系统之间再加一层，这一层将调用顺序、依赖关系等处理好。 ES5代码实现1234567891011121314151617 var A = {g: function(id) { return document.getElementById(id);},css: ...

前言 单例模式(Singleton Pattern)属于创建型模式，它提供了一种创建对象的最佳方式，涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个该类对象被创建，提供了一种访问其唯一的对象的方式，可以直接访问，一般不需要实力话该类的对象 ⚠️ 有以下几个点需要注意： 单例类只能有一个实例； 单例类必须自己创建自己的唯一实例； 单例类必须给所有其他对象提供这一实例。 ✨ 模式具体介绍：意图：保证一个类仅有一个实例，并提供一个访问它的全局访问入口；主要解决：一个全局使用的类频繁地创建于销毁；何时使用：当我们需要控制实例的树木，节省系统资源的时候；如何解决：判断系统是否已经有这个单例，如果有则返回，如果没有则创建；关键代码：真正实例是私有的，无法直接方法的 ES5代码实现123456789101112131415161718// LazySingle.jsvar LazySingle = (function() { // 全局共享的实例 var _instance = null; function Single(){ return { xx: fun ...

前言一切，从以下的两行代码开始说起 12function Foo() {}var foo = new Foo(); ✨ 面向对象编程是一种程序设计范式，它将对象作为程序的基本单元，将程序和数据封装📦其中，以提高程序的重用性、灵活性和扩展性。 上面定义了一函数对象Foo，并利用该构造函数，创建了一个foo实例，该实例对象指向的是Foo Object对象Object是JavaScript中的一种数据类型，用来存储各种键值对集合和更加复杂的实体，Object可以通过Object()构造函数或者直接使用对象字面量的方式来创建。在JavaScript中，几乎所有的对象都是Object类型的实例，它们都会从Object.prototype中继承属性和方法，虽然一部分属性/方法会被重写。 🤔 这里有一个疑问，为什么自定义创建出来的对象，默认就拥有了Object实例中的方法？👉 首先所有的对象都是Object类的实例对象，它们会从Object.prototype中继承属性和方法，而且，每一个实例对象中都拥有一个属性**proto**，该属性代表在实例化一个对象的时候，将会使用__proto_ ...

前言 原型模式用于创建重复的对象，使用于创建新的对象的类共享资源对象的属性以及方法。在JavaScript中，则是基于原型链实现对象之间的继承，这种继承是基于一种对方法/属性的共享，而不是对方法/属性的复制。除非是new来设置子类的原型指向将可复用的、可共享的、耗时久的动作从基类中提取出来，然后放到对应的原型中，然后子类通过组合继承或者寄生组合继承的方式将方法继承下来，对于子类中那些需要重写的方法则进行直接的重写，这样子子类则共享了父类中的原型方法 ES5代码1234567891011121314151617181920212223242526 function LoopImages(imgArr, container){this.imageArray = imgArr;this.container = container; } LoopImages.prototype = {createImage: function() { console.info('LoopImages createImages function' + this.imageArray);},changeIma ...

前言通过对类的工厂抽象使其业务用于对产品类簇的创建，而不仅仅局限于创建某一类产品的实例子。 围绕一个超级工厂来创建其他的工厂，该超级工厂又成为其他工厂的工厂，负责创建一个相关对象的厂(该厂用于创建某一类产品)，每个生成的工行都按照工厂模式去创建各自的对象。 ES5代码⚠️ 由于JavaScript中并不支持抽象类的方式，没有像Java中的abstract关键词来修饰类以及方法，因此这边采取了一种投机取巧的方式，就是将需要被定义为abstract的方法直接抛出一个异常，代表不能直接调用其方法。 123456789// VehicleFactory.js 抽象工厂方法// 这里subType假定是BMW，superType假定是Carvar VehicleFactory = function(subType, superType) { function F() {} F.prototype = new superType(); // 这里采用构造调用，这里以👇的Car为例子，使得F的prototype拥有了实际的getPrice + getSpeed方法，但需要注意的是通过这种 ...