大大黄的博客

原创 Vue 原理实现

实现vue中的数据驱动视图变化自己实现一套简易框架来完成和vue相似的功能jvue.js// new JVue ({data:{...}})class JVue { constructor(options) { this.$options = options; // 数据响应化 this.$data = options.data; this.observe(this.$data); // // 模拟watcher创建 // new Watcher(

原创 关于electron打包的坑

首先electron打包的方式有两种通过electron-builder通过electron-package两种方式，electron-builder打包的话扩展性更强，包也较小，electron-package打出来的包相对扩展性更小，且包容量较大，一般都会选择electron-builder进行打包。注意electron和electron-build版本的问题1.两者配套使用，如果两者的包不是配套的，版本不适配那么就会导致打包失败，因此我们使用electron-build打包的时候一定要注

原创 简易实现VueRouter和Vuex

简易实现VueRouter和Vuex两个Vue插件

原创 tree-shaking理解

一句话就是可以将无引用的代码或者文件不打包进项目，从而优化项目。如果这个文件存在副作用，则副作用的代码将会 被打包进项目，当然。中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。已经自带了这个功能了，当打包环境为。什么是tree-shaking？

原创 pnpm带来了什么

以上是A,B两个依赖使用pnpm安装后的 node_modules 结构，可以看到首先会去全局的store中查找A,B两个依赖是否存在，不存在则下载存入这个公共store, 然后对声明的A,B两个依赖通过软连接.pnpm文件夹下的各自依赖A,B，进行关联，而.pnpm则以平铺形式存储所有包，而真正包 则会硬链接形式链接到项目。寻找包的机制，如果 A 和 C 都依赖了 B，那么 A 和 C 在自己的 node_modules 中未找到依赖 C 的时候会向上寻找，并最终在与他们同级的。和文件资源进行关联。

原创 vuejs设计与实现-4.1/4.2响应式数据与副作用函数

以上就是简单的一个响应式实现过程。但是整体仍有许多缺陷。基于以上等问题4.3节，实现一个完善的响应式系统。实现， Vuejs3.x 则是实用。将原始数据进行代理，实现。函数时，会触发对应数据的。操作时，会触发对应数据的。Vuejs2.x使用的是。中，等待在未来某时刻执行。1.什么是副作用函数？2.什么是响应式数据？

原创 手写日历【发布订阅】

发布者订阅者模式手写日历，方便后续自定义日历

原创 前端架构分析

前端架构分析前端的价值到底在哪里实现界面交互提升用户体验总结就是能写交互页面，写的交互页面用户用的爽前端的进阶前端不局限于前端【当然优先前端技术需要如何进阶】性能优化​ 推荐阅读掘金文章**《移动web性能优化从入门到进阶》**首先是如何发现问题。发现问题之后，是如何分析其中原因找到原因之后，采用的解决办法。解决之后，是否真实的对用户体验有所提升。对框架的理解流行框架的API调用是最基本的要求，理解框架原理，理解思想可以让你在前端的路上走的更远，以vue为例Vue中的

原创 Promise 笔记

Promise含义异步编程的一种解决方案，比传统的解决方案【回调函数和事件】更合理。Promise对象两个特点对象不受外界影响。 共有三个状态pending， fulfilled ， rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。即：一旦发生无法改变一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：pending => fulfilled 或者 pending => rejec

原创 前端用户行为分析

前端用户行为分析监控模式数据监控监听用户行为PV/UV（浏览量和点击量）用户每个页面停留时间用户访问网页的入口用户在各个页面触发的行为性能监控监听网页或者说产品在用户端的体验不同用户，机型，系统首屏加载的时间http请求等待时间静态资源加载时间各页面渲染时候前端埋点方案代码埋点以嵌入代码的形式进行埋点，监听用户点击事件，输入事件等将数据保存发送给server端可在任意时刻，精确的发送或者保存所需要的数据代码侵入性较强可视化埋点通过可视化交互的手段，代替代码

原创 结合公司项目对目前vue项目整体框架总结

1.框架周边生态使用框架限于vue2.x目前公司研发中台，交付中台均属于中大型项目，因此vuex 和 vue-router必须使用UI基于elementui ，使用体验设计部开发的md-ui 后续开发剔除掉elementui工具库使用lodash，包括青鸟组件库的 md-hooks的使用2.脚手架目前项目框架搭建由体验设计部提供通用框架，部门工具需求进行一定的自定义修改部门可以搭建 npm 私服，结合通用框架使用Node环境开发CLI工具，提供一套部门的通用框架可根据需求完善开发的

转载 vue3 学习（一）

vue3学习（一）setupsetup函数是一个新的组件选项，座位再组件内使用Composition API 的入口点调节时机创建组件实例，然后初始化props 紧接着就调用setup函数。从生命周期钩子视角来看，他会再beforeCreate钩子之前被调用模板中使用如果setup返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文<template> <div>{{ count }} {{ object.foo }}</div>

原创 重学node(一)

01.重学node js1.node.js定义Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。【node不是语言】也就是说Node.js基于V8引擎来执行JavaScript的代码，但是不仅仅只有V8引擎V8可以嵌入到任何C ++应用程序中，无论是Chrome还是Node.js，事实上都是嵌入了V8引擎 来执行JavaScript代码在Chrome浏览器中，还需要解析、渲染HTML、CSS等相关渲染引擎，另外还需要提供支持浏览器操作 的API、浏览

原创 前端常用学习社区

技术社区中文社区[荐] 掘金[荐][安全] freebuf[荐] GitChat链滴cnode思否v2ex超级产品经理****英文社区[英][荐] stackoverflow[英] dev.to前端周刊中文周刊****每日时报阮一峰 - 科技爱好者周刊前端精读360 奇舞周刊infoQ 前端频道前端和UX技巧推酷 - 编程狂人印记中文周刊腾讯 TNT

转载 Git常用命令

Git命令参考手册(文本版)git init # 初始化本地git仓库（创建新仓库）git config --global user.name “xxx” # 配置用户名git config --global user.email “[email protected]” # 配置邮件git config --global color.ui tru

原创 一张图理解js的Event Loop机制

原创 JS的执行顺序

JS执行顺序基本1.所有代码放入执行栈中自上而下执行2.遇到异步函数，则将回掉函数添加到任务队列中（定时器，DOM事件，ajax，Promise，process.nextTick）3.执行栈中代码执行结束，开始 循环任务队列中函数4.将任务队列中函数放入执行栈中执行5.如此往复，称之为事件循环任务队列1.任务队列分为宏任务和微任务2.任务队列将任务放到执行栈中执行宏任务宏任务，macrotask ,也叫tasks, 异步任务的回调会依次进入macro task queue，等待后续被调

原创 Typescript(二）

注：Typescript 中的面向对象TS面向对象面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个

原创 Typescript学习（一）

注：主要是TS使用的配置，TS数据类型，以及TS结合webpack0.什么是TSTypeScript（TS） 是Javascript 的超集（JS有的TS都有）；TypeScript = Type + JavaScript (为JS添加了类型系统)typescript相比js的优势： JS的类型系统存在“先天缺陷” ， 绝大部分错误都是类型错误（Uncaught TypeError）优势一：类型化思维方式，是的开发更加严谨，提前发现错误，减少改Bug时间优势二：类型系统提高了代码可读性，

原创 react知识点总结---react-router和hooks （六）

react-router前端路由的原理前端路由是如何做到URL和内容进行映射呢？监听URL的改变URL发生 变化，同时引起页面的刷新有另个办法：通过URL的hash改变URL通过HTML5的history模式修改URLURL的hashURL的hashURL的hash也就是锚点（#），本质是改变window.location的href属性我们可以通过直接复制location.hash来改变href，但是页面不发生刷新HTML5的historyhistory接口是HT

原创 react知识点总结 -- redux（四）

Redux 使用前言：javascript 开发的应用程序，已经变得越来越复杂了javascript需要管理的状态越来越多，越来越复杂这些状态包括服务器返回的数据，缓存数据，用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页管理不断变化的state是非常困难的状态之间会相互存在依赖，一个状态的变化会引起另一个状态的变化， view页面也会引起状态的变化当应用程序复杂的时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化

原创 react样式，请求，动画相关知识点（三）

React (样式,axios,动画)组件化天下的CSS前面说过整个端已经是组件化的天下：而css的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的css解决方案在组件化中选择合适的CSS解决方案应该符合以下条件可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的原生可以编写动态css:可以获取当前组件的一些状态，根据状态的变化生成不同的css支持所有的css特性：伪类，动画，媒体查询编写起来简洁方便，最好符合一贯的css风格特点Re

原创 react组件知识点总结（二）

不可变数据的力量总之不要直接更改state的数据因为浅层比较的时候，会比较前后的数据是否变化，一但没有变化，则不会更新UI事件总线前面通过Context主要实现的是数据的共享，但是在开发中如果有跨组件之间的事件传递，应该如何操作呢？在Vue中我们呢可以通过Vue的实例，快速实现一个事件总线，来完成操作在React中，我们可以来一个使用较多的库events 来完成对应的操作我们可以通过npm或者 yarn来安装eventsevents常用的API创建EventEmit

原创 react组件基础知识点（一）

React开发依赖开发React必须依赖三个库react：包含react所必须的核心代码react-dom：react渲染在不同平台所需要的核心代码babel：将jsx转换成React代码的工具第一次接触React会被它繁琐的依赖搞蒙，对于 Vue 来说我们只依赖一个Vue.js文件，但是react居然要依赖三个库cdn引入本地引入npm包管理snippet-generator.app //代码片段生成器认识JSXconst element =

原创 微信小程序知识点总结

小程序文件结构APPapp.js 创建App实例代码以及一些全局相关的内容app.json 全局的一些配置，比如 window/tabbarapp.wxss 全局的一些样式配置Pagepage.js 创建Page 实例的代码， 以及页面相关内容page.json 业务单独的配置，比如页面对应的 window配置，usingComponentspage.wxml 页面的 wxml 布局代码page.wxss

原创 Vue2.x模块化开发知识点总结

模块化开发常见的 模块化的规范CommonJS AMD CMD 也有 ES6的 ModulesCommonJS需要底层支撑commonJS的导出：module.exports = { flag:true, test(a,b){ return a+b }, demo(a,b){ return a*b }}commonJS的导入：let {test,demo,flag} = require('modu

原创 webpack 简单配置知识点总结

webpack基本使用起步webpack基于node环境，如果想要使用webpack管理自己的项目，那么就需要先安装 node.js安装webpack有两个作用域，一个是全局，一个是项目作用域【局部】接下来就可以打包了打包第一步有唯一 的入口文件main.js 出口文件 bundel.js入口文件可以对其他文件做依赖，使用 es6模块化，commenJS 都可以命令 webpack 入口文件main.js路径 出口文件bundel.js路径这样 就可以打包出来

原创 vue2.x进阶知识点总结

组件化高级注：可以先看vue基础篇插槽1.slot组件模板定义的时候需要插槽的话 给一对 <slot> </slot> 标签即可， 在使用子组件的时候，组件内部填充的所有内容，元素就会被匹配到这个插槽上本身 <slot> </slot> 可以给一个默认值，该默认值 在使用这个组件 没有给插槽内容的时候会自动使用2.具名插槽 slot组件模板定义的时候插入 <slot> </slot> 插槽，此时

原创 Vue2.x基础

`第一遍Vue：MVVMModel View ViewModelview（视图层）在我们前端开发中，通常就是DOM层，主要是给用户展示各种信息Model （数据层） 数据可能使我们固定死的数据，更多的是来自我们服务器，从网络上请求下来的数据，在我们计数器案例中，就是后面抽取出来的obj，当然，里面的数据可能没有那么简单、VueModel（视图模型层）视图模型层是View和Model沟通的桥梁，一方面它实现了DataBinding，也就是数据绑定，将Model的改变实时的反应

原创 jquery基础知识点总结

jquery 的入口函数方式一$(function () { ... //此处是页面DOM加载完成的入口 }) 方式二$(document).ready(function () { // ... //此处是页面DOM加载完成的入口 })注意：使用jquery获取的对象叫做jquery对象，只能使用jquery的方法，使用原生js获取的对象叫做DOM对象，只能使用原生方法，两者不能混用因此可以让jque

原创 git基本使用

git基本使用安装下载https://npm.taobao.org/mirrors/git-for-windows/ 淘宝镜像 本身git下载较慢下载好之后 一直 next , 安装好后 右键 gitBash Here 打开命令 输入 git version 查看git 版本使用前配置使用git之前 ，我们需要告诉git 我是谁，我的一些信息，因为，在向git仓库提交代码时候需要知道这个代码是谁提交的，基本的一个信息git config --global user.

原创 Electron知识点总结

Electron简介electron 由 chromium ,Node.js , Native APIGITHUB开发的开源框架，允许使用web技术开发桌面应用开发环境搭建​ electron 基于node环境，我们需要安装node， npm（可以通过npm安装包）npm insatll electron --save-dev 通过 npx electron -v 进行检验第一个程序// electron 主进程var electron = require('electron')

原创 flutter知识点总结

第一个flutter应用flutter中布局等已经不再等同于web页面的开发方式了，首先我们需要引入material 包，那么什么是material呢？material是谷歌公司推行的一套设计风格，或者叫做设计语言，设计规范等里面有很多规范，比如颜色文字排版，响应式动画与过度，填充等等在Flutter中高度集成了 Material风格的 widget, 在我们应用中，我们可以直接使用这些Widget来创建我们的应用第一个程序 Hello World注意一个坑，flutter项目路径中包含中

原创 Dart 的使用(基础)

Dart 的使用https://juejin.im/post/5d7a36ac6fb9a06ad5474b50 掘金 codeWhy 知识点总结安装配置1.使用Dart 语言 首先需要配置Dart环境，那么我们就需要下载 dart SDK ，然后找到bin文件夹路径，配置到环境变量2.编辑器的选择，我们用什么去书写dart。 选择vscode ,可以安装插件 dart ，后续还会用到flutter ,因此一起安装，方便运行编译，安装下 run code插件简单使用1.dart

原创 react-navigation 5X版本总结

react-navigation V5 总结注： 5x版本不同于4x版本，包括包，以及使用方法都有较大的改变。安装yarn add react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/nativeyarn add react-native-gesture-handler react

原创 解决React-native升级导致的：Unable to load script.Make

解决React-native升级导致的：Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release[link]： https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-

转载 vue项目的mode:history模式打包空白

Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式：hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hell...

转载 封装axios，带请求头和响应头

import axios from "axios";import qs from "qs"; //处理参数import router from '../router';import { Loading } from 'element-ui';import { Message } from 'element-ui';let loading = null;//开始加载动画functi...

转载 axios配置及使用（发起请求时带上token）

1.安装利用npm安装npm install axios --save2.引入即可使用import axios from 'axios'3.目录4.各个文件设置：（1）env.jsexport default { // 接口地址 baseURL: 'http://localhost:8090/scheduleweb/', isDev: true}（2）index....

原创 Vue3新特性

Vue3 新特性vue3新增了很多新的特性，目前可以使用 安装 vue-compisition-api 包进行尝鲜，vue3将会对vue2进行向下兼容，因此不必担心因为使用vue3 后 vue2的特性不能够使用安装包、使用包npm install @vue/composition-api --saveimport VueCompositionApi from '@vue/comp...