zxl1990_ok的博客_前端页面仔_CSDN博客-js基础,vue源码学习,vue领域博主

原创微信小程序去掉user agent style

在调试小程序组件样式时，发现有user agent stylesheet，只需知道这是浏览器自动加上的格式，层级很低。解决办法：写一份重置样式进行覆盖去掉配置文件app.json中的"style": "v2",

2020-12-30 22:36:51 26

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）vm.$destroy实现原理：第一部分：防止多次执行Vue.prototype.$destroy = function () { var vm = this; if (vm._isBeingDestroyed) { return } callHook(vm, 'beforeDestroy'); vm..

2020-12-27 22:08:45 43

原创 vue源码学习 vm.$forceUpdate方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）vm.$forceUpdate如何实现的？只需要执行watcher的update方法，就可以让实例重新渲染。Vue.js的每一个实例都有一个watcher。当状态发生改变时，会通知到组件级别，然后组件内部使用虚拟DOM进行更详细的重新渲染操作。事实上，组件就是Vue.js实例，所以组件级别的watcher和Vue.js 实例上的watcher说的是同一个wa..

2020-12-27 21:40:10 27

原创 vue源码学习 vm.$mount方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）vm.$mount注：在不同意的构建版本中， vm.$mount的表现都不一样完整版vm.$mount的实现原理：（1）基本结构：var mount = Vue.prototype.$mount;Vue.prototype.$mount = function (el, hydrating) { // 做些什么 return mou..

2020-12-16 23:05:18 59

原创 vue源码学习（十）Vue.nextTick方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.nextTick异步更新队列Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际.

2020-12-10 21:06:44 70

原创 vue源码学习（九）Vue.mixin方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.mixin混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。源码如下：Vue.mixin = function (mixin) { this.options = mergeOptions(this.op.

2020-12-08 20:56:36 72

原创 vue源码学习（八）Vue.component方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.options = Object.create(null);Vue.options['components'] = Object.create(null); Vue.directive = function (id, definition) { // definition参数不存在表示获取组件 if (!definition) { .

2020-12-08 20:34:12 66

原创 vue源码学习（七）Vue.filter方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.options = Object.create(null);Vue.options['filters'] = Object.create(null); Vue.directive = function (id, definition) { // definition参数不存在表示获取过滤器 if (!definition) { .

2020-12-08 20:29:13 52

原创 vue源码学习（六）Vue.directive方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.directive

2020-12-01 21:15:10 63

原创 vue源码学习（五）Vue.delete方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.delete源码如下：function del (target, key) { if (isUndef(target) || isPrimitive(target)) { console.warn(("Cannot delete reactive property on undefined, null, or primitive..

2020-12-01 20:28:52 71

原创 vue源码学习（四）Vue.set方法

function set (target, key, val) { if (isUndef(target) || isPrimitive(target) { console.warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target)))); } if (Array.isArray(target) && isValidArrayInd.

2020-11-30 22:07:02 64

原创 vue源码学习（三）Vue.extend方法

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var Super = this; var SuperId = Super.cid; var cachedCtors = extendOptions._Ctor || (extendOpti.

2020-11-25 22:47:39 112

原创 vue源码学习（二）实例方法 / 事件

vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js）与事件相关的实例方法有4个，分别是vm.$$on，vm.$emit，vm.$once，vm.$off。这四个方法都是挂载在Vue的prototype属性上：

2020-11-24 22:22:24 94

原创 js设计模式之参与者模式

参与者模式参与者模式：在特定的作用域中执行给定的函数，并将参数原封不动地传递。实质上包括函数绑定和函数柯里化。对于函数绑定，它将函数以函数指针（函数名）的形式传递，使函数在被绑定的对象作用域中执行...

2020-11-24 21:00:56 81

原创 Object.defineProperty

对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或者对象字面量的形式：// 使用new操作符后跟Object构造函数var person = new Object();person.name = 'zxx';person.say = function () {};// 使用对象字面量var person = { name: 'zxx', say: function () {}}除了上面添加属性的方式，还可以使用Obje

2020-11-23 22:17:59 75

原创 js设计模式之装饰者模式

装饰者模式装饰者模式（Decorator）：在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。来看第一个例子：// 需要装饰的类（函数）function MacBook() { this.cost = function () { return 997; }; this.screenSize = function () { r

2020-11-18 22:01:42 103

原创 js设计模式之观察者模式

观察者模式观察者模式又叫发布订阅者模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主体对象，这个主体对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。创建一个观察者观察者对象有一个消息容器，还包括三个方法，分别是订阅、发布订阅、取消订阅的消息方法。var Observer = (function () { var topics = {}; // 回调函数存放的数组 return { .

2020-11-17 22:40:03 137

原创 js设计模式之单例模式

单例模式单例模式（Singleton）：又被称为单体模式，是只允许实例化一次的对象类，即保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在就直接返回，不存在则创建了再返回实例，这就确保了一个类只有一个实例对象。有时我们也使用一个对象来规划一个命名空间。...

2020-11-16 20:03:00 103

原创 js函数式编程之pointfree

什么是pointfreepointfree是指函数无须提及将要操作的数据是什么样的。一等公民的函数、柯里化（curry）以及函数组合（compose）协作起来非常有助于实现这种模式。compose实现：function compose(){ var args=arguments; var start=args.length - 1; return function(){ var i = start; var result=arg...

2020-11-15 20:55:03 100

原创 js函数式编程之偏应用函数（Partial Application）

偏应用函数是通过预先填充原始函数的部分(不是全部)参数来创建一个新函数我们直接使用bind函数：function add(a, b, c) { return a+b+c;} add(1, 2, 3); // 6 var add1 = add.bind(this, 1, 2); add1(3); // 6但是bind函数会改变this指向我们来实现偏函数（从左往右应用参数）：function partial(fn) { var args = []

2020-11-05 22:24:35 116

原创学习underscore之restArguments函数

function restArguments(func, startIndex) { startIndex = startIndex == null ? func.length - 1 : +startIndex; return function() { var length = Math.max(arguments.length - startIndex, 0), rest = Array(length), index = .

2020-11-04 22:43:43 126

原创 js中Map、Set、Object、Array、JSON之间的相互转换

Map转为Arrayvar map = new Map();map.set(1, '111').set(2, '222').set(3, '333');// map -> array// 使用Array.fromvar arr = Array.from(map); // [[1, "111"], [2, "222"], [3, "333"]]// 使用...rest运算符 var arr = [...map]; // [[1, "111"], [2, "222"], [3, "

2020-11-04 22:29:54 258

原创 ArrayBuffer

二进制数组由下面三个对象组成： ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过"视图"进行操作。"视图"部署了数组接口，这意味着，可以用数组的方法操作内存。 TypedArray对象：用来生成内存的视图，共包括9种类型的视图，如：Unit8Array（无符号8位整数）数组视图，Init16Array（16位整数）数组视图，Float32Array（32位浮点数）数组视图等等。 DataView对象：用来生成内存的视图，可以自定义格式和字节序，比如第一个字节是Ui

2020-10-30 21:57:32 110

原创 vue + ts 项目中watch的用法

从vue-property-decorator中引入Component、Prop、Watch、Vue import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; 需要监听的数据 @Watch('show')getShowStatus(newVal, oldVal) { console.log("newVal = ", newVal, "oldVal = ", oldVal)}; ...

2020-10-29 22:11:57 1000

原创学习underscore之比较两个元素是否相同

underscore1.11.0中判断两个参数相同的函数为isEqualisEqual 函数重新定义相等：

2020-10-27 18:58:51 160

原创学习underscore之函数缓存

underscore1.11.0中实现方式：function memoize(func, hasher) { var memoize = function(key) { var cache = memoize.cache; var address = '' + (hasher ? hasher.apply(this, arguments) : key); if (!has(cache, address)) cache[address] = fu.

2020-10-25 10:51:31 140

原创学习underscore 之函数节流的实现

function throttle(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : new Date().getTime(); timeout .

2020-10-25 10:29:17 118

原创学习underscore之函数去抖的实现

function debounce(func, wait, immediate) { var timeout, result; var debounced = function () { var context = this, args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow =.

2020-10-23 21:51:09 116

原创 js数组交集、并集、差集

数组交集1. 利用filter + indexOfvar arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9], arr2 = [1, 3, 5];var intersection = arr1.filter(function (val) { return arr2.indexOf(val) > -1;})console.log(intersection); // [1, 3, 5]但这种方法针对是value值比较简单的Number(不包括NaN)、St

2020-10-21 21:59:27 192

原创 js常见错误类型

常见错误Error EvalError：eval函数的错误 InternalError(非标准)：出现在JavaScript引擎内部的错误 RangeError：范围错误，当一个值不在其所允许的范围或者集合中 ReferenceError：引用错误，当一个不存在的变量被引用时发生的错误 SyntaxError：语法错误 TypeError：类型错误 URIError：URI错误Error我们先来看看Error.prototype里面有哪些东西：Error是基类型，其他类型的错

2020-10-15 22:32:21 182

原创前端异常监控

JS异常处理try-catch异常处理window.onerror异常处理Promise错误异常上报方式1. 通过Ajax发送数据；2. 动态创建img标签进行上报

2020-10-13 20:02:10 179

原创 HTTP请求中的Referer和Referrer Policy

RefererReferer请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer（注：正确英语拼写应该是referrer，由于早期HTTP规范的拼写错误，为了保持向后兼容就一直延续下来）请求头识别访问来源，可能会以此统计分析、日志记录以及缓存优化等。注： Referer请求头可能会暴露用户的浏览历史、涉及到用户的隐私问题。Referrer-policyReferrer-policy作用就是为了控制请求头中referer的内.

2020-10-12 22:22:33 536

原创使用vscode调试npm scripts

如何调试非node命令比如我们使用create-react-app初始化完一个react项目，使用npm start执行时，想进行调试跟踪怎么办，我们可以使用vscode来进行调试：1. 配置launch.json文件添加完配置后，我们还需要配置cwd，该配置是指定程序启动调试的目录2. 修改package.json文件，新增一条指令："debug": "node --inspect-brk=9229 ./node_modules/react-scripts/bin/react

2020-09-28 22:25:09 766

原创 react-scripts的工作原理

使用react脚手架工具create-react-app初始化react项目时，打开package.json :在命令行中执行npm run start/yarn start时，相当于执行react-scripts start，我们去node_modules/中去找react-scripts.js文件会根据参数去判断执行哪种构建脚本，比如当前参数是start，那么就会去执行scripts目前下的start.js在start.js中引入了webpack-dev-server，该模块是

2020-09-28 21:13:37 290

原创微信小程序之-NBA赛程小程序开发

项目源码地址：wx-nba-project项目中参考了wx-nba的部分样式及图片，接口数据都是来源于腾讯网效果图如下：

2020-09-27 19:45:02 488

原创 js 数据结构（四）：集合

集合集合是由一组无序且唯一（即不能重复）的项组成。这个数据结构使用了与有限集合相同的数学概念，但应用在计算机科学的数据结构中。我们来实现集合，下面是Set类的骨架：function Set() { var items = {}; this.add = function (value) {}; // 向集合添加一个新项 this.remove= function (value) {}; // 从集合移除一个值 this.has = function

2020-08-25 21:39:26 228

原创 git基本操作

git修改远程仓库地址 1.修改命令git remote set-url origin [url]2.先删后加git remote rm origingit remote add origin [url]3.直接修改config文件

2020-08-06 20:44:52 198

原创 vue 如何监听Array的变化

var hasProto = '__proto__' in {};var arrayProto = Array.prototype;var arrayMethods = Object.create(arrayProto);var methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];function def (obj, key, val, enumerable) { Object.define.

2020-07-27 20:56:49 266

原创 js 作用域

function foo(a) { var b = a * 2; function bar(c) { console.log(a, b, c); } bar(b * 3);}foo(2); // 2, 4, 12在这个例子中有三个逐级嵌套的作用域。

2020-07-23 22:10:09 159

原创学习Vue源码前的基础知识

获取OuterHTML /** * Get outerHTML of elements, taking care * of SVG elements in IE as well. */ function getOuterHTML (el) { if (el.outerHTML) { return el.outerHTML } else { var container = document.createEl

2020-07-01 22:50:32 167

空空如也

空空如也

空空如也