第四章 对象的创建

命名空间在ESM模块化还未出来之前,用于减少全局变量名污染的一种做法就是使用命名空间,其做法也非常简单,就是创建一个全局的变量,然后将内容都赋值给这个变量,从而减少对全局变量的使用。//创建命名空间 var MYAPP = {}; //构造函数 MYAPP.Parent = function(){}; MYAPP.Child = function(){}; // 一个变量 MYAPP.some_var =1; // 一个对象容器 MYAPP.modules ={}; // 嵌套的对象 MYAPP.modules.module1 ={}; MYAPP.modules.module1...

220 0 0

第三章 函数

背景简介JavaScript中函数有两个主要特点使其变得特殊:函数是“第一类对象”,更久之前也称之为“第一等公民”函数可以提供作用域什么是第一类对象第一类对象(First-class object)这个名称可以追溯到1960年,原称为第一类公民(First-class citizen),简单点来总结来说,可以在该语言中做到其他元素都能进行的所有操作(你们能干的我也都能干),就可以称为一等公民。一等公民的概念在《计算机程序的构造和解释》书籍中提及,而我们JavaScript的一等公民的概念是因为Brendan Eich(布兰登·艾奇 - JS之父)在设计语言是借鉴了Scheme语言,在Sc...

239 0 0

第二章 字面量与构造函数

前言JavaScript中可以使用字面量的形式去声明对象,相比较使用构造函数去声明,更加准确且不容易出错,代码也更加简洁,这里讨论常见的类型中,为什么基于字面量的形式更加可取。对象字面量当我们考虑创建一个键-值对哈希表时(在其他语言被称为关联数组),我们可以从一个“空”对象开始,然后再根据需要向其添加所需要的内容,对于按需对象创建方式而言,对象字面量表示法是一种非常理想的选择方法。var dog = {}; dog.name = "jingmao"; dog.getName = function() { return dog.name; } //删除和复写也...

273 0 0

第一章 基本技巧

尽量少用全局变量全局变量污染是一个老生常谈的问题,在es5时代常见的做法就是使用函数作用域隔离,es6时const、let出现,我们还可以直接在块级作用域中声明。相对于使用,我们通过一些代码来回顾一下全局变量污染所带来的问题。全局作用域中是存在this的,this就等于window,只是浏览器为了方便,用window来表示全局对象本身。function sum(x, y) { result = x + y; return result; } console.log(result); //Uncaught ReferenceError: result is not def...

317 32 0

代理模式

目录什么是代理模式?代理模式常见的两种实现方式为什么要使用代理而不是直接在源对象做修改呢?代理与适配器和装饰器之间的区别什么时候使用代理什么是代理模式?为一个对象提供一个替身对象(代理对象),以便对于源对象的控制和访问,某些时候我们没法直接引入源对象或者源对象不满足需要时,可以通过替身对象来进行中介和控制。代理模式主要分为三个角色:客户端(我),代理类,目标类;客户 ------> 源对象客户 ------> 代理 -------> 源对象比如说我有一个业务需求,我需要一个能自动过期数据的一个数据存储对象,那么从所有能存数据的对象中,map是最佳的,因为它有has,s...

297 18 0

关于1px边框问题的探索

1px在不同设备的一个探究其实我们要搞明白两个问题:为什么有时候边框无法在部分手机显示?我们真的要小于1px吗为什么有时候边框无法在部分手机显示?有两种设置方式:0.5px0.22rem首先0.5px在老手机是不支持的,特别是安卓,0.5px(小于1px)会被视为1px渲染。0.22rem或者0.22em他们都是相对父级或者根元素进行换算的,最终他们也得变成px单位渲染,有可能是大于1px,有可能会小于1px,最终也会出现部分手机边框是粗的,原因也是因为不足1px被当1px渲染了。还有一个原因,但是需要先了解一些屏幕像素的知识了!我们可以将屏幕的像素视为一个个小方格,一排可能就n个这种大...

497 38 0

弹窗队列管理器

原理全局存在一个弹窗管理器,他管理着一个数组,所有的弹窗触发全部包成一个函数,交给管理器,管理器去查看队列是否有内容,如果有内容就不触发,无内容就将本次函数push进数组中,然后触发next方法弹出下一个弹窗。当弹窗关闭后,触发管理器的remove方法,数组首位出栈,触发next方法,弹出下一个弹窗示意图源码四个文件:dialogMap.ts 弹窗数据,可能这个弹窗这次需要队列,下次就不需要,通过这个配置index.ts 入口文件queueManager.ts 管理器types.ts 类型声明types.ts/* * @Author: mulingyuer * @Date: 20...

345 27 0
弹窗队列管理器

vue2 使用@vue composition-api的一些问题

引入组件的方式传统模式import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')这种方式在vue组件中使用 c...

428 7 0

pnpm 搭建monorepo环境

前言只是搭建一个用于打包模块的环境,更多细节还需要自己查询资料。monorepo快速了解如果有所了解,应该会知道安卓的repo仓库,他是MultiRepo模式,一个git仓库下面会有多个git仓库,通过主仓库的配置命令来批量管理,但是呢,在window上这种模式有着不小的缺陷,甚至没法正常使用。于是后面又有了一种思路,这个就是Monorepo,它不再分多个git仓库,而是在一个git仓库里面管理多个项目,每个项目有自己的package.json文件,有自己的node_modules目录。这也会产生一个问题,重复的依赖以及依赖层级过深的问题,于是这个问题就可以通过pnpm包管理器解决,首先...

651 58 0

什么是面向对象与设计模式

面向对象对于面向对象的理解,千人千面,不同的人有不同的解读,这里就以我个人所了解的知识给大家解释一下面向对象。历史角度我们先从历史的角度去看!计算器在发明之初,处理的能力是有限的,所有的代码编辑都需要根据“机器语言(二进制)”来进行编写。这显然非常痛苦。那么如果我们把二进制换成一个个单词(助记符单词),是不是又更好一点了呢,于是“汇编语言”诞生了,但是使用上也就被机器语言强那么一点点。那么有没有比汇编语言更好用的呢?于是面向过程的C语言出现了,c的位置处于机器与人的中间点,既没有偏向人的思维模式,也没有偏向机器语言思维。可以说c语言的底层结构是机器语言,但是它将机器语言封装成自己的语法,...

437 0 0
什么是面向对象与设计模式

vue cli异步路由加载原理

webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...

452 0 0

映射类型,对象属性批量设置约束

批量设置属性全部只读interface ObjInterface { a: number; b: number; c: number; } //全部设为只读 type readonlyObj = Readonly<ObjInterface>;鼠标移动到readonlyObj可以发现所有的属性全部设置为只读了。type readonlyObj = { readonly a: number; readonly b: number; readonly c: number; }我们按住ctrl+鼠标左键点击Readonly;可以看到...

469 1 0

索引类型,key的约束

再for循环中我们经常遇到类似这种写法const obj = { a: 1, b: 2, c: 3 }; //遍历obj拿到指定key对应的val数组 function getObjVal(obj:any,keys:string[]) { return keys.map(key => obj[key]); } console.log(getObjVal(obj, ["a", "b"])); console.log(getObjVal(obj, ["d", "e"]...

477 0 0

npm与yarn的一些知识

依赖嵌套地狱虽然新版本的npm也和yarn一样使用了扁平化管理依赖,但是其依赖依旧取决于安装的顺序。比如A依赖中它依赖一个公共库H 1.0版本,那么安装A时同时也会安装H,此时node_modules不存在A、H,那么A和H处于同级关系。过段时间我们需要安装B模块,B模块依赖H的2.0版本,但是node_modules依旧存在了1.0,于是它2.0只能再B模块下的node_modules目录。此时我们存在了两个版本的H公共库。又过一段时间,我们需要安装C模块,C模块也需要H 2.0,那么他也只能将H存放再自己的node_modules目录下。此时我们的H公共库存在了三个,那么还有更多呢,...

461 5 0

docker 网络

在linux中输入 ip addr可以看到有三个网络配置:lo 127.0.0.1 # 本机回环地址eth0 172.17.90.138 # 阿里云的私有IPdocker0 172.18.0.1 # dockerdocker会自行创建一个类似路由器一样的网络处理层,所有启动的容器都会自动分配一个基于172.18.0.1的ip地址,也正因为如此,我们容器之间是可以相互ping通的,因为都在同一个网关下。但也仅限于利用ip地址进行通信。原理每一个安装了Docker的linux主机都有一个docker0的虚拟网卡。这是个桥接网卡,使用了veth-pair技术! 每启动一个容器,linux主...

522 16 0
docker 网络

docker 本地保存和读取镜像

保存到本地docker save --help Usage: docker save [OPTIONS] IMAGE [IMAGE...] Save one or more images to a tar archive (streamed to STDOUT by default) Options: -o, --output string Write to a file, instead of STDOUT很简单的一个命令,只有一个-o表示镜像要输出的路径以及镜像名.tardocker images my-centos 1.0 fef5d23d0bd1 ...

330 45 0

docker 发布镜像

发布到DockerHub官方首先我们需要注册一个DockerHub的账号链接:https://hub.docker.com/signup注册完毕后我们本地登录PS C:\Users\13219\Desktop> docker login --help Log in to a Docker registry or cloud backend. If no registry server is specified, the default is defined by the daemon. Usage: docker login [OPTIONS] [SERVER] [flags...

427 0 0

docker dockerfile

什么是DockerFiledockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。构建步骤:编写DockerFile文件docker build 构建镜像docker run我们从docker的镜像页面点击版本号时,可以访问到github上dockerfile的文件。以centos为例,大概如下:FROM scratch ADD centos-7-x86_64-docker.tar.xz / LABEL \ org.label-schema.schema-version="1.0" \ org.label-schem...

403 1 0
docker dockerfile

Promise失败重试,可指定重试次数

//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...

711 5 1

docker 容器数据卷使用

什么是容器数据卷其作用就是方便容器与外部宿主机的文件交互,毕竟容器可以重启启动一个,但是数据只有一份啊,所以如果能将数据存在宿主机上,容器随便换,宿主机本身再定时备份,问题不就解决了。作用卷就是目录或者文件,存在一个或者多个容器中,由docker挂载到容器,但不属于联合文件系统,因此能够绕过 Union File System , 提供一些用于持续存储或共享数据的特性:卷的设计目的就是数据的持久化,完全独立于容器的生存周期,因此Docker不会在容器删除时删除其挂载的数据卷。特点数据卷可在容器之间共享或重用数据卷中的更改可以直接生效数据卷中的更改不会包含在镜像的更新中数据卷的生命周期一直...

400 0 0

docker 打包镜像

打包命令docker commit # 这个和git的commit提交差不多 # 例子 docker commit -m="提交的描述信息" -a="作者" 提交的容器id 打包后的镜像名:tag版本号注意:实战测试以之前的Tomcat为例,默认情况下官方在webapps目录中是没有任何文件的,官方把默认的web文件放置在webapps.dist目录下,我们就可以把文件搬过来,生成一个自己的镜像。安装并搬运web文件docker pull tomcat # 下载完毕后运行 docker run -d -p 8080:8080 --name t...

467 0 0

docker 镜像讲解

整体文本引入b站UP主遇见狂神说的docker教程文档镜像是什么镜像是一种轻量级、可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码、运行时、库、环境变量和配置文件。镜像加载的原理UnionFS (联合文件系统)UnionFS(联合文件系统):Union文件系统(UnionFS)是一种分层、轻量级并且高性能的文件系统,它支持对文件系统的修改作为一次提交来一层层的叠加,同时可以将不同目录挂载到同一个虚拟文件系统下(unite several directories into a single virtual filesystem)。...

404 0 0
docker 镜像讲解

docker 常用命令 作业

安装nginxdocker pull nginx # 下载完成后运行 docker run -d --name nginx1 -p 8080:80 nginx # 后台运行,容器命名为nginx1,将容器的80映射到主机的8080端口此时我们访问:localhost:8080就能看到Welcome to nginx!页面安装Tomcatdocker镜像里面的tomcat官方文档有这么一段命令:docker run -it --rm tomcat:9.0run可以直接自动下载对应的镜像,所以后面可以像pull那样接tag;-it是交互,--rm表示交互结束后,比如exit退出后,容器...

457 0 0
docker 常用命令 作业

docker 常用命令

帮助命令docker version #版本信息 docker info #更加详细的系统信息 docker 命令 --help #万能命令文档地址:官方命令文档镜像命令docker images #查看所有镜像后面还可以接一些可选项Name, shorthandDefaultDescription--all , -a Show all images (default hides intermediate images)--digests Show digests--filter , -f Filter output based on conditions provided-...

450 0 0

animation 动画的三个事件

const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次,适用用多次动画 }); div.addEventListener("animationend", function() { //...

509 36 0