常见问题
常见问题git 开启 git 大小写敏感git config core.ignorecase false
处理后端数据循环问题123456789101112131415let parent = { name: 'parent', friends: ['p1', 'p2', 'p3'], getName: function () { console.log(this.name); }, forEach: () => { console.log('custom forEach'); },};parent.map?.();parent.getName?.(); // parentparent.getTitle?.(); //不会执parent?.forEach();parent?.map();
plop .hbs handlebars 模板handlebars 模板和 react JSX 语法一起使用时 ...
protobuf
Protocol Buffer(protobuf)是 Google 提供的一种数据序列化协议官方解释:
Protocol Buffers are a language-neutral, platform-neutral,extensible way of serializing structured data for use in communications protocols,data storage, and more, originally designed at Google
译:Protocol Buffers 是一种轻便高效并且和语言、平台无关、可扩展的序列化结构数据格式,很适合作为数据存储或者通信交互的格式。
序列化是将对象的状态信息转换为可以存储或传输的形式的过程,前端接触最多的就是 JSON 序列化的 api;如下
123const obj = { message: 'Hello World!' };const str = JSON.stringify(obj);const res = JSON.parse(str);
...
switchOmega 配置
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768[SwitchyOmega Conditions]@with result*.gravatar.com +proxy*.crisp.chat +proxy*.cloudflare.com +proxy*.telegram.org +proxy*.jsdelivr.net +proxy*.gstatic.com +proxy*.google.com +proxy*.raw.githubusercontent.com +proxy*.npmjs.com +proxy*.github.com +proxy*.xpoet.cn +direct*.baidu.com +direct*.iconshock.com +proxy*.facebook.com +proxy*.d30y9cdsu7xlg0.cloudfront.net +proxy*.t ...
js数据结构
stack 栈在 JavaScript 中,栈和队列的实现一般都依赖于数组。栈是一种遵循后进先出(LIFO)原则的有序集合。新添加或待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。两者的区别在于,它们各自对数组的增删操作有着不一样的限制。在现实生活中也能发现很多栈的例子。例如,一摞书或者餐厅里叠放的盘子。栈的实际应用非常广泛。在回溯问题中,它可以存储访问过的任务或路径、撤销的操作。
模拟栈之前我们需要了解栈的特性:
能够让元素入栈和出栈
能够返回栈顶和栈底的元素
含有能够判断自身是否为空
能够得到自己的长度
能够清空栈
12345678910111213141516171819202122232425262728293031323334class Stack() { construct() { this.stackArr = []; } // 入栈 push(item) { return this.stackArr.push(item); } // 出栈 ...
npm install 原理
npm 介绍npm 是一个包管理器也可以说是最大的软件仓库,它让 JavaScript 开发者分享、复用代码更方便在程序开发中我们常常需要依赖别人提供的框架。这些可以重复的框架代码被称作包(package)或者模块(module)一个包可以是一个文件夹里放着几个文件,同时有一个叫做 package.json 的文件。一个网站里通常有几十甚至上百个 package,分散在各处,通常会将这些包按照各自的功能进行划分.但是如果需要重复造轮子,每个开发者都会疲惫不堪.而 npm 的作用就是提供了开源的库让我们发布、下载 JS 轮子更加方便。
npm install 原理
检查配置: .npmrc
手动执行附带参数 npm install --registry=https://registry.npm.taobao.org
项目级的 .npmrc 文件 ./.npmrc 文件
用户级的 .npmrc 文件 路径: npm config get userconfig 设置: config set registry https://registry.npm.taobao.org
全局级的 .n ...
.npm-init.js 配置
用于自定义构建 npm init
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 ...
认识 package.json
定义如果使用 JavaScript、或者曾经与 JavaScript 项目、Node.js 或前端项目进行过交互,那么对 package.json 文件一定也不会陌生。package.json 文件有一下这些功能和作用:
是项目的清单。
列出了项目依赖的包以及依赖包的版本
使用语义版本控制项目可以使用的包的版本
使构建可复制,因此更容易与其他开发人员共享
是工具的配置中心。
npm 和 yarn 管理项目的依赖项以及项目的元数据文件。
字段解析package.json 配置的字段有很多需要对其有一个系统的认识。
注意: package.json 必须是一个严格的 json 文件,而不仅仅是 js 里边的一个对象。很多属性可以通过 npm-config 生成。
namename 属性就是模块的名称package.json 中最重要同时也是必须的属性是 name 和 version 两个属性,否则模块就无法被安装,而这两个属性一起形成了一个 npm 模块的唯一标识符。模块中内容变更的同时,模块版本也应该一起变化。而命名也有其规则:
name 必须不超过 214 个字节,包括前 ...
mono-repo VS multi-repo
多仓库 VS 单仓库近期公司内部需要开发前端可复用的 UI 业务组建库,需要一个库来涵盖公司里不同的项目。同时满足各个项目中的组建能够互相引用, 并且各自独立, 兼容不同项目的 antd 版本等要求.从而衍生出对多仓库和单仓库的思考;
带着问题思考
什么是单体仓库(mono-repo)?
为什么诸如 Google/Facebook/Bilibili 的大厂会采用单体仓库?
单体仓库(mono-repo)和多仓库(multi-repo)分别解决了哪些问题?
单体仓库(mono-repo)和多仓库(multi-repo)在解决问题的同时又引入了哪些问题?
单体应用在早期,实际上是不用区分单体仓库和多仓库的,因为在早期的时候包括目前大部分的情况都是一个应用就把所有功能打包了。哪怕使用多个仓库也是根据公共模块方式来区分,仓库数量也是比较少的。这时候的应用我们一般叫他单体应用, 而这样的单体应用就被存放在一个 git 仓库(虽然是一个但和我们要聊的单体仓库的概念是不同的)中进行管理。主要的特点就是一个程序就打包所有功能,全家桶。这样的开发模式有很多优点:
易于理解项目整体。开发人员可以把 ...
forEach
小 forEach 大学问定义1arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
介绍: forEach() 方法将对数组的每个元素执行一次给定的函数。
callback: 为数组中每个元素执行的函数,该函数接收一至三个参数:
currentValue: 数组中正在处理的当前元素。
index 可选: 数组中正在处理的当前元素的索引。
array 可选: forEach() 方法正在操作的数组。
thisArg 可选: 当执行回调函数 callback 时,用作 this 的值。‘forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.’,即 forEach 不会直接改变调用它的对象,但是那个对象可能会被 callback 函数改变。因为总是返回 undefined,所以不可链式调用;
不对未初始化的 ...
Array.from()
Array.from()Array.from() 是 ES6 语法中的 api, 并不像它的同窗们受人青睐,但在一些特别的用法上 出乎意料的方便和实用
定义1Array.from(arrayLike[, mapFunction[, thisArg]])
arrayLike:必传参数,想要转换成数组的伪数组对象(以 dom 节点为代表)或可迭代对象。
mapFunction:可选参数,mapFunction(item,index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。这个参数很少使用。
1234567891011121314151617// 让我们将类数组的每一项乘以 2:const someNumbers = { 0: 10, 1: 15, length: 2 };Array.from(someNumbers, (value) => value * 2); // => [20, 30]// 在一般情况下正常对象是没有length的 需 ...