月光恋九霄的博客

原创 vue双向绑定原理

vue双向绑定原理分析当我们学习angular或者vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理。简易vue源码地址：https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.

原创 前端常用函数实现

1:创建一个指定长度的可遍历的数组var a = Array.apply( null, { length: 3 } ); // [ undefined, undefined, undefined ]

转载 怎样挑选一个好的NPM包？

我最近写了一篇关于如何加快 React 开发的文章，其中提到使用包而不是重新造轮子。例如，你几乎肯定希望使用一个 modal 库，而不是构建你自己的实现。（我说“几乎肯定”，是包括那些受虐狂在内。）我之前的推荐有限定条件。使用第三方库会带来风险。每周都有恶意软件包的新闻。从一个废弃的包迁移代码花费了数百万开发工时。作为一个例子，我将比较一些比较流行的 React 组件库，评估它们在可持续性、性能和安全方面的风险。我不会深入比较主观方面的问题，例如 APIs 和 UI，尽管这些无疑是选择一个包的主要因素。

原创 js 内置对象目录

值属性这些全局属性返回一个简单值，这些值没有自己的属性和方法。Infinity NaN undefined globalThis函数属性全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。eval() uneval() isFinite() isNaN() parseFloat() parseInt() decodeURI() decodeURIComponent() encodeURI() encodeURIComponent()

原创 判断一个数字是整数

x === Math.floor( x ); // 或者 Number.isInteger( 4 ); // 新增api在 JavaScript 中，4、4.、4.0 或者 4.0000 之间并没有区别。所有这些都会被 当作“整型”并且从 Number.isInteger(..) 中返回 true。

原创 vue中如何实现鼠标定位 $event 应用

首先了解： 使用不带圆括号的形式，event 对象将被自动当做实参传入； 使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。 <div id="app"> <button v-on:click="click">click me</button></div>...var app = new Vue({ el: '#app', methods: { click(eve

原创 全面了解 ASCII编码 Unicode编码 URL编码 及其相关函数

一： ASCII码ASCII第一次以规范标准的型态发表是在1967年，最后一次更新则是在1986年，至今为止共定义了128个字符，其中33个字符无法显示（这是以现今操作系统为依归，但在DOS模式下可显示出一些诸如笑脸、扑克牌花式等8-bit符号），且这33个字符多数都已是陈废的控制字符，控制字符的用途主要是用来操控已经处理过的文字，在33个字符之外的是95个可显示的字符，包含用键盘敲下空白键所产生的空白字符也算1个可显示字符（显示为空白）ASCII控制字符二进制 十进制 十六进制

转载 数组常用方法总结 一张图秒懂js数组

原创 js 运算符优先级

优先级 运算类型 关联性 运算符 21 圆括号 n/a（不相关） ( … ) 20 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 从左到右 … (…) 可选链（Optional chaining） 从左到右 ?. 19 new(无参数列表) 从右到左 ...

原创 迭代器 生成器 使用小技巧

迭代器1：是一个 iterable，它产生的迭代器可以消耗其自身值一些内置类型拥有默认的迭代器行为，其他类型（如Object）则没有。下表中的内置类型拥有默认的@@iterator方法：Array.prototype[@@iterator]() TypedArray.prototype[@@iterator]() String.prototype[@@iterator]() Map.prototype[@@iterator]() Set.prototype[@@iterator]()..

原创 Element ui 表格拖拽排序

首先引入import Sortable from 'sortablejs';mounted () { // this.setSort(); this.rowDrop(); }, methods: { rowDrop () { const tbody = this.$refs.dragRelationTable.$el.querySelectorAll('.el-table__body-wrapper tbody'); // const

原创 正则表达式总结

使用正则表达式的方法 方法 描述 exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。 test 一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。 match 一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。 matchAll 一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。 sear...

原创 面试题: ListToTree AND TreeToList 实现 扁平结构和树状结构互转

const list = [ {id: 1, pid: 0}, {id: 2, pid: 0}, {id: 3, pid: 0}, {id: 11, pid: 1}, {id: 12, pid: 1}, {id: 13, pid: 1}, {id: 21, pid: 2}, {id: 22, pid: 2}, {id: 23, pid: 2}, {.

原创 宏任务 微任务 陷阱

console.log('script start')async function async1() { await async2() console.log('async1 end')}async function async2() { console.log('async2 end')}async1()setTimeout(function() { console.log('setTimeout')}, 0)new Promise(resolve => {.

原创 箭头函数与 this指向

const controller = { makeRequest: () => { console.log(this) // this 是 window }, helper: () => { console.log(this) } };const controller = { makeRequest: function(){ console.log(this) // this 是 controller }, helper: (.

原创 ES6新增特性

1:变量定义 const let2: 解构3:箭头函数 核心 this的指向4:模板字面量 ``5:spread/rest 对象展开6:子符串 数组新增方法console.log(str.includes("de"));//true,字符串是否包含deconsole.log(str.endsWith("ef"));//true,字符串是否以ef结尾console.log(str.startsWith("cd"));//true,字符串是否以cd开头conso...

原创 视频技术 直播之Flv.js

static probe(buffer) { let data = new Uint8Array(buffer); let mismatch = {match: false}; if (data[0] !== 0x46 || data[1] !== 0x4C || data[2] !== 0x56 || data[3] !== 0x01) { return mismatch; }0x46 0x4c ...

原创 判断this的方法

顺序来进行判断： 1. 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。 var bar = new foo() 2. 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是 指定的对象。 var bar = foo.call(obj2) 3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上 下文对象。 var bar = obj1.foo() 4. 如果都不是

原创 视频技术相关概念

OTT（over-the-top）在影音产业中泛指透过网络提供视频点播(VoD)的影音平台；VoD（Video On Demand）视频点播是一套可以让使用者透过网络选择自己想要看的视频内容的系统。用户选定内容后，VOD系统可以用流媒体的方式进行实时播放，也可以将内容完全下载后再进行播放；Live streaming网络直播，是指随着线上影音平台的兴起，在互联网上公开播出实时影像的娱乐形式；在 VoD 与 Live Streaming 中的应用，常见的影音编码格式包括MPEG-4,

原创 js 解构技巧和陷阱

// 定义function foo() { return [1,2,3]; }function bar() { return { x: 4, y: 5, z: 6 }; }// 1: 不只是声明var which = "x", o = {}; ( { [which]: o[which] } = bar() ); console.log( o.x ); // 4// 2: 重复复制var { a: { x: X, x: Y }, a } = .

原创 for 循环迭代 陷阱

1: for 循环迭代 var 定义不会不是每个迭代的函数会封闭一个 新的 ivar funcs = []; for (let i = 0; i < 5; i++) { funcs.push( function(){ console.log( i ); } ); } funcs[3](); //3var funcs = []; for (var i = 0; i < 5; i++) { funcs.push( function(){ console.l.

原创 electron集成sqlite3 MVC封装使用

一：添加依赖 配置环境1: yarn add sqlite3@latest --build-from-source --runtime=electron --target=8.5.2 --dist-url=https://atom.io/download/electron2: yarn add electron-rebuild node > 12.19.0 需要升级最新node版本3: yarn add aws-sdk 需要先安装aws-sdk 不然 rebui.

原创 electron 主进程与渲染进程通信（promise 封装）

1：渲染层事件中心const ipcRenderer = require('electron').ipcRenderer;const sendBridge = (msg = { active: '', data: {} }) => { return new Promise((resolve, reject) => { ipcRenderer.on(msg.active, (event, arg) => { resolve(arg); });

原创 electron 常见问题解决

1:在使用脚手架 搭建electron程序的时候 webpack配置一定中 target 需要使用 electron-系列，不然是开发能正常开发，打包之后不能使2:2: NODE_MODULE_VERSION 是版本冲突的问题，一般出现与 使用第三方需node编译的环境，需要使用同一个node环境3:Electron打包出错Can't locate Mac/Memory.pm in @INC 解决办法是升级 Electron builder4: 开发electron 一不小心程序假死导致...

原创 js中的假值 js 判断为空

js中的假值• undefined • null • false • +0、-0 和 NaN • ""拓展价值： [] {}/** * 判断变量是否空值 * undefined, null, '', false, 0, [], {} 均返回true，否则返回false */export const empty = (v) => { switch (typeof v) { case 'undefined' : return tr...

原创 js中判断相等（非严格 隐式转换）

非严格相等==相等操作符比较两个值是否相等，在比较前将两个被比较的值转换为相同类型。在转换后（等式的一边或两边都可能被转换），最终的比较方式等同于全等操作符 === 的比较方式。相等操作符满足交换律。相等操作符对于不同类型的值，进行的比较如下图所示： 被比较值 B Undefined Null Number String Boolean Object 被比较值 A Undefined true true ...

原创 JS字符串截取函数slice(),substring(),substr()的区别

一、substring()substring()方法返回一个索引和另一个索引之间的字符串，语法如下：str.substring(indexStart, [indexEnd])下面有六点需要注意：substring()从提取的字符indexStart可达但不包括 indexEnd 如果indexStart 等于indexEnd，substring()返回一个空字符串。 如果indexEnd省略，则将substring()字符提取到字符串的末尾。 如果任一参数小于0或是NaN，...

原创 即标量基本类型值 和 对象的复制差异

var a = 2;var b = a; // b是a的值的一个副本b++;a; // 2b; // 3var c = [1,2,3];var d = c; // d是[1,2,3]的一个引用d.push( 4 );c; // [1,2,3,4]d; // [1,2,3,4]简单值（即标量基本类型值，scalar primitive）总是通过值复制的方式来赋值 / 传递，包括 null、undefined、字符串、数字、布尔和 ES6 中的 symbol。复合值（co..

原创 Object.create 和 new 区别

var Base = function () { this.a = 2}Base.prototype.a = 3;Base.prototype.fun = function(){console.log(this.a)};Base.prototype // {a: 3, fun: ƒ, constructor: ƒ}var o1 = new Base();var o2 = Object.create(Base);var o3 = Object.create(Base.prototy.