csdn_girl的博客

原创 设计模式的概念

设计模式主要分为三类：创建类的设计模式、结构型设计模式、行为型设计模式。创建类的设计模式：简单工厂，工厂模式，抽象工厂，建造者，单例，原型结构型设计模式：代理模式、享元模式行为型设计模式：观察者模式。

原创 rush 功能特性梳理

如B、C都依赖F1，E、F都依赖于F2，那么 node_modules 的数据结构有两种方式：要么安装两次F1(B、C node_modules下)，一次F2(一级node_modules目录下)，要么安装两次F2(E、F node_modules下)，一次F1(一级node_modules目录下。该指令会去检查每个项目的 package.json 文件并保证所有的依赖都是同一个版本，该配置可以避免版本不一致导致的问题，因此推荐你打开。基于幻影依赖和npm包分身，可以指定使用 pnpm 包管理器。

转载 VSCode 与 WebStorm 横向对比

https://segmentfault.com/a/1190000020244810

原创 pm2 相关介绍

PM2（Process Manager 2 ）是具有内置负载均衡器的Node.js应用程序的生产运行时和进程管理器。它允许您永久保持应用程序活跃，无需停机即可重新加载它们，并促进常见的Devops任务。此时可以通过 http://localhost:9090 访问文件夹 /static/build 下的文件了。该命令可用来启动一个服务。

原创 技术基本功 - 排查前端常见问题

原创 技术基本功 - 整洁代码

一些书写代码的规范好的代码简单、可测试性、solid((设计模式)codelf工具查询命名写函数（函数名）注意两点：1、2、异常关于异常记住三点：1、区分异常还是bug2、异常处理逻辑要与业务解耦3、每层拿到异常信息后，包装一层在向上抛出，让最上层的抛出来。注释-是否要写？能用函数或变量表示含义的就不用注释，否则就加。本次课程重点记住两点：1、代码要在同一个抽象层面上；2、圈复杂度：不用理解计算公式。记住一种体现-缩进会影响圈复杂度，缩进越多，圈复杂度

原创 技术基本功 - Code Review

目的与意义CR的方式CR的流程CR的标准

原创 比较通用的移动端开发UI组件库整理

Mint UIMint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。中文文档在线预览Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。中文文档在线预览Cube-UI滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库中文文档在线预览Mand-Mobile面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品。中文文档..

原创 Vue中Watch

@Prop({ required: false, default: [] }) watchedValue: any@Watch(‘watchedValue’, { immediate: true })onWatchWatchedValue(val) {// val}第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）第三个是immediate：

原创 Vue扩展用法

装饰器基本概念装饰器类型分为两种，基于类的：在类之前调用（@装饰器名称），此时target指Class本身基于类属性的：在属性之前调用，此时target指Class.prototype原理Object.defineProperty(target, name, descriptor);即相当于给类或类原型添加了一个方法，用来操作类属性或类原型属性。使用ts中才能用。定义@ex...

原创 nuxt-ssr 服务端渲染

nuxt.js 框架自己会判断是进行客户端渲染还是服务端渲染，依据是根据代码中是否是用户操作，是用户操作（由客户端完成html的完整拼接），则进行客户端渲染，不是用户操作（由服务端完成html的完整拼接），则进行服务端渲染。一、如何判断一个页面是客户端渲染还是服务端渲染？（转载）什么是服务器端渲染和客户端渲染？互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器拿到这个html文件之后就可..

原创 vue 实现表格table滚动翻页

在了解它的原理前，你需要分清楚三个属性：scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。就是下图中，54条数据的高度，但是因为有滚动条，所以屏幕看不到这么高scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。就是下图中红色框的高度clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。就

原创 ES 装饰器

ES6 decorator 装饰器装饰器由 “@” + 函数名 构成，作用是给类class或类属性添加额外功能。类装饰器@testableclass MyTestableClass { // ...}function testable(target) { target.isTestable = true; target.prototype.isOtherable = true;}// 可执行如下MyTestableClass.isTestable // true

原创 CommonJS + AMD + CMD + ES6 模块分析

CommonJS模块加载：require导出模板：module.exports(require的就是module.exports属性对应的值)、exports(指向module.exports)CommonJS模块的特点如下：所有代码都运行在模块作用域，不会污染全局作用域。 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。 模块加载的顺序，按照其在代码中出现的顺序。 模块都是同步加载同步执行的。

原创 git 学习笔记

官网文档https://guides.github.com/activities/hello-world/版本库介绍工作区有一个隐藏目录 .git (执行git init 会生成) ，这个不算工作区，而是Git的版本库。Git的版本库里存了很多东西，其中最重要的就是称为 stage（或者叫index） 的暂存区，还有Git为我们自动创建的第一个分支 master，以及指向master的一个指针叫 HEAD。git 的存储形式是对象，对象类型有三种：commit（是一个文件）、tree（是一个目

原创 Vue 中 props 和 attrs 概念与区别

Vue 中的区别：Vue中的attrs和attrs和attrs和listenerVue-- attrs与attrs与attrs与listeners的详解在 vue 中，对于在父组件中传递的属性，若在子组件中使用@Prop声明了属性如@Prop name，则 name 属性只会在 this.props中出现，不会出现在this.props 中出现，不会出现在 this.props中出现，不会出现在this.attrs 中；若在子组件中没有使用@Prop声明属性，则属性会默认在 this.attrs中

原创 git 使用中问题收集

问题一问题描述执行 git push origin 时报错，如下：解决办法执行git remote add code-na2 [email protected]:code-na2/mos-mss.git即发现远程仓库有问题，所以重新关联到新的远程仓库。解决过程查看本地配置git config -- list 查看当前项目下所有 git 相关配置配置结果：credential.helper=osxkeychainuser.name=赵娜user.email=zhaona1

原创 Git 发布一个项目

Npm 用来发布一个 Node 包，发布流程详见 npm关键点之npm包编写与发布。Git 用来管理一个项目仓库，发布流程见下面。Git 项目编写Git 项目发布

原创 echarts legend太多且每个legend名称太长，导致legend与图表grid重叠问题临时解决方案

<template> <ve-line :legend-visible="true" :toolbox="toolbox" :after-config="afterConfig" :data-empty="dataEmpty" :loading="loading" /></template&gt...

原创 moment 基本使用方法 -日期转化

moment 常用方法的值new Date()Mon Mar 30 2020 16:35:37 GMT+0800 (中国标准时间)moment()moment(new Date())moment(new Date()).unix()1585560937moment().format(‘YYYYMMDDHH’) – 当前日期，精确到小时2020033...

转载 git fork 相关

git fork 在协助开发时使用。fork 别人的仓库，clone到本地后修改，提交到远端，提pr到别人的仓库。GitHub的Fork的作用

转载 Mac OS 下 NVM 的安装与使用

https://www.jianshu.com/p/622ad36ee020

原创 babel详解

babel 是什么？官方解释：是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 能为你做的事情：语法转换通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)源码转换 (codemods)更多！官网：https:...

原创 babel7的使用

转自：https://www.jianshu.com/p/cbd48919a0cc

原创 Vue的一些经典写法

1、利用继承创建公共类，调用时实例化并使用重点是：复用实例化方法set-account-modal.vue/*** 一个普通的vue组件选项对象*/<template> <mtd-modal width="450px" :visible="visible" :title="title" closable @inp...

原创 关于Cookie

cookie介绍存储cookie的文件内容格式用node读取的“存储cookie的文件”的内容

原创 cheese/amis实现一个form渲染的简易分析

技术栈：vue/mtd-vue其它渲染分析见 AMIS实现渲染一个button的源码分析-Vue一、schema{ "type": "form", "title": "", "api": "get:/mock/saveForm?a=11", "mode": "horizontal", "actions": [ {...

原创 Vue插槽slot的用法

2.6.0中，使用v-slot（以前具名插槽：slot，作用域插槽：slot-scope）。v-slot的几种用法用法一 插槽内容核心：承载组件的分发内容。// 定义，在 <navigation-link> 的模板中<a v-bind:href="url" class="nav-link"> <slot></slot>&lt...

原创 AMIS实现渲染一个button的源码分析-Vue

使用schema转为对应的button渲染出来。输入：schema输出：button Vue组件核心过程：schema经过渲染引擎解析成button渲染器。语法：tsx（与jsx类似）schema{ "label": "编辑 Button", "type": "button", "actionType": "dialog", "className": "m-l-md"...

原创 Vue生命周期函数详解

转自：https://segmentfault.com/a/1190000008010666

原创 在Vue中使用JSX

转自：https://juejin.im/post/5affa64df265da0b93488fdd

原创 Promise处理异常

promise.catch()可以捕获promise所有状态的异常。包括：1、resolve()和reject()对应的promise.then(()=>{},()=>{}) 中的俩回调函数中的异常2、Promise.resolve(err)触发的3、Promise.reject(err)触发的所以在promise后一般都要加catchconst initPromise = ...

原创 Vue中的key的作用

<div v-for="item in list" :key=item.id>{{item.value}}</div>几个关键词：是否有key，key是否唯一，diff性能Vue diff算法中与key相关的逻辑：/*** oldKeyToIdx：旧虚拟节点的key-index的映射对象，如{ key0: index0, key1: index1,... }*...

原创 npm关键点之npm包编写与发布

编写的一个组件可以发布为一个npm包来让其它项目使用。以@mosfe/beam为例，发布一个npm包大概需要以下4步：1、编写写好一个组件，新建一个index.js文件作为该组件的入口文件，index.js可以作为组件的唯一入口，即package.json main属性值。代码如下：index.jsmodule.exports = require('./lib/bone');./l...

原创 上传图片预览实现方案分析

一般有两种方式：1、window.URL.createObjectURL(file)2、new FileReader().readAsDataURL(file)二者对比：1、返回值FileReader.readAsDataURL(file)可以得到一段 base64的字符串。URL.createObjectURL(file)可以得到当前文件的一个 内存URL。2、内存使用FileR...

原创 Vue中响应式更新

Vue响应式渲染的原理是：data中各根属性对应的getter/setter方法的监听。即：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue在实例化时将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触...

原创 CORS与Options相关

关于跨域跨域概念同域（同源）策略：相同协议、域名、端口号的url属于同源的，反之属于跨源。出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。所有不同域之间的访问都要解决跨域问题；无论简单请求还...

原创 JS中数组对象的深浅拷贝

浅拷贝赋值操作完成的是引用的创建。深拷贝数组的深拷贝对于数组的深拷贝常规的有三种方法：方法一：遍历赋值var arr = ["a", "b"], arrCopy = [];for (var item in arr) { arrCopy[item] = arr[item];}arrCopy[1] = "c";arr // => ["a", "b"]arrCopy...

原创 前端模块化：CommonJS,AMD,CMD,ES6

1

原创 一个完整html的加载执行过程

在浏览器输入地址按回车后，执行如下操作：1、加载html文件包括：排队-》与代理服务器连接通讯-》DNS解析（不同域名）-》建立连接-》发送请求-》等待服务器相应，即第一个字节发过来-》接受相应数据，即整个html文档内容数据-》直到接收到最后一个字节。注：加载文件即指上述过程2、开始解析html2.1 解析meta信息，构建基本DOM树。2.2 浏览器匹配出所有引用文件，使它们都处于...