<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[connie_1990的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/connie_1990</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; connie_1990]]></copyright><item><title><![CDATA[浏览器工作原理学习笔记]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/115718972</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/115718972</guid><author>connie_1990</author><pubDate>Thu, 15 Apr 2021 11:35:20 +0800</pubDate><description><![CDATA[浏览器工作原理浏览器架构导航流程渲染流程
浏览器架构

导航流程
从输入URL到页面展示，这中间发生了什么？
1，用户输入url并回车
2，浏览器进程检查url，组装协议，构成完整的url
3，浏览器进程通过进程间通信（IPC）把url请求发送给网络进程
4，网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
5，如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
5.1 进行DNS解析，获取服务器ip地址，端口
5.2 利用ip地址和服务]]></description><category></category></item><item><title><![CDATA[如何防止失眠——学习笔记]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/111808020</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/111808020</guid><author>connie_1990</author><pubDate>Sun, 27 Dec 2020 16:03:06 +0800</pubDate><description><![CDATA[规律作息：每周五天十点半上床睡觉，可以有2天的机动时间，因为黄金睡眠时间是晚上11点到凌晨2点



睡眠与季节
春夏：晚睡早起，5-7个小时
秋季：早睡早起，7-8个小时
冬季：早睡晚起，8-9个小时


失眠的 定义
入睡时间&gt;30分钟
睡眠质量：早睡多梦
觉醒次数&gt;=2次
持续时间 &gt; 2周


如果还是睡不着，控制起床时间，每天8点之前起床，刷牙，洗脸，如果很困再回去睡觉，最后目标调整到7点左右起床


午休时间：中午12点到下午两点之间，午休1一个小时足矣，不用太多，实在睡不..]]></description><category></category></item><item><title><![CDATA[vue elementui 中带字数校验的 textarea组件封装]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/107518091</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/107518091</guid><author>connie_1990</author><pubDate>Wed, 22 Jul 2020 17:33:20 +0800</pubDate><description><![CDATA[在form表单中经常会遇到带字数校验的textarea需求，具体效果如下图所示，实现的功能如下：

右下角有最大的字数限制
实时计算文本框内输入的字数
在超过最大字数时自动截断


下面我们看一下，希望存在一个如下控件可以供我们使用
    &lt;el-form-item label="其它反馈意见:" prop="others"&gt;
      &lt;text-area v-model="form.others" :max-length="maxLength" :rows="3"/&gt;
   ]]></description><category></category></item><item><title><![CDATA[字符代码工具函数]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/107045138</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/107045138</guid><author>connie_1990</author><pubDate>Tue, 30 Jun 2020 16:33:59 +0800</pubDate><description><![CDATA[在项目开发中经常需要进行数据字典的转化，例如下拉框，或者table中后端返回的代码需要前端转为文字。我们可以定义数据字典的格式如下：
// code.js 文件
export default {
  'taskStatus': {
    'items': [
      {
        'label': '全部任务',
        'value': 'all'
      },
      {
        'label': '未开始',
        'value': '0',
      ]]></description><category></category></item><item><title><![CDATA[web前端pdf导出]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/107042782</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/107042782</guid><author>connie_1990</author><pubDate>Tue, 30 Jun 2020 16:09:35 +0800</pubDate><description><![CDATA[做一个项目需要实现浏览器端pdf的导出功能，在此记录一下整个实现过程以及遇到的一些坑：）
当然，解决这个问题有以下几个步骤：

确定要导出的dom元素
将dom元素转化成canvas( 使用html2canvas库)
将canvas转化成图片jpeg，png等都可以
将图片导出pdf （使用jspdf库）

确定要导出的dom元素
如果是原生写法可以直接使用document.getElementById来获取，如果是用vue或者react可以设置要ref, 此处我使用的是react框架
  const re]]></description><category></category></item><item><title><![CDATA[git常用命令笔记——管理、修改、提交规范等]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/107042321</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/107042321</guid><author>connie_1990</author><pubDate>Tue, 30 Jun 2020 14:51:02 +0800</pubDate><description><![CDATA[git 常用命令管理修改撤销修改其他命令操作分支bug分支Feature分支设置别名commit message规范
git add readme.txt   // 添加文件
git commit -m “wrote a readme file”  // 提交文件
git status   // 查看git仓库当前状态
git diff readme.txt  // 查看文件版本修改内容
git diff HEAD – file  // 查看工作区和版本库里面最新版本的区别
管理修改
工作区——暂存区——版]]></description><category></category></item><item><title><![CDATA[《node.js设计模式》学习笔记——同步异步调用问题]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/106919274</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/106919274</guid><author>connie_1990</author><pubDate>Tue, 23 Jun 2020 11:57:52 +0800</pubDate><description><![CDATA[避免Zalgo
Zalgo: 一种 JavaScript 开发人员虚构的疯狂恶魔，取名 Zalgo，用来描述 JavaScript 中同步 / 异步的混乱。Zalgo是一个互联网传说，会导致世界错乱，死亡和毁灭的一个不详实体。
有兴趣的同学可以在如下网址上找到Isaac Z. Schlueter的原始帖子
https://blog.izs.me/2013/08/designing-apis-for-asynchrony
不可预测的危险的函数
我们来看一下下面这个危险的函数，它希望实现的目的是如果没有缓冲是异]]></description><category></category></item><item><title><![CDATA[前端常用工具库函数]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/106214678</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/106214678</guid><author>connie_1990</author><pubDate>Tue, 19 May 2020 14:55:38 +0800</pubDate><description><![CDATA[// 获取url前缀
const getUrlPrefix = () =&gt; {
  const { NODE_ENV } = process.env
  if (NODE_ENV === 'development') {
    return '/api'
  }
  return ''
}

const prefix = getUrlPrefix()
export const urlPrefix = prefix

// 调用后端接口，下载文件
export const downloadFile =]]></description><category></category></item><item><title><![CDATA[通过react-app-rewired 重写配置，访问非根目录]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/106214468</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/106214468</guid><author>connie_1990</author><pubDate>Tue, 19 May 2020 14:51:21 +0800</pubDate><description><![CDATA[在项目根目录下创建config-overrides.js文件
const { override, fixBabelImports } = require('customize-cra');
const path = require("path")

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  fixBabelImports(]]></description><category></category></item><item><title><![CDATA[H5页面对接React Native App]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/106213142</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/106213142</guid><author>connie_1990</author><pubDate>Tue, 19 May 2020 14:40:14 +0800</pubDate><description><![CDATA[H5页面开发笔记
本次开发一个H5页面，H5页面用的框架是ant design mobile，对接的是react native 开发的App 程序，其中遇到了一点坑，在此记录一下。
移动端调试神器vconsole
// 安装vconsole 
npm install vconsole --save

// 引入项目当中
import Vconsole from 'vconsole'
const vConsole = new Vconsole()  

// 然后console.log()的日志就可以通过vc]]></description><category></category></item><item><title><![CDATA[vue-cli源码学习分享]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/104780999</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/104780999</guid><author>connie_1990</author><pubDate>Tue, 10 Mar 2020 19:20:40 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[vue-cli 调试配置]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/104779602</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/104779602</guid><author>connie_1990</author><pubDate>Tue, 10 Mar 2020 19:18:46 +0800</pubDate><description><![CDATA[vue-cli-service 调试配置vue-cli 调试配置项目准备配置launch.jsonvue-cli-service 调试配置准备项目配置launch.json配置package.json
在这里，我们使用开发工具vscode，工具怎么使用这里就不描述了，直接进入主题。
vue-cli 调试配置
项目准备

下载vue-cli 项目
进入vue-cli\packages@vue\cli...]]></description><category></category></item><item><title><![CDATA[Vue源码学习笔记——组件挂载及创建]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/100548586</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/100548586</guid><author>connie_1990</author><pubDate>Wed, 04 Sep 2019 23:01:44 +0800</pubDate><description><![CDATA[准备工作
备注：案例中使用的vue版本全部为2.6.10
git clone https://github.com/vuejs/vue.git
npm install

进入package.json，在script中增加"dev:read"命令,具体如下
  "scripts": {
  	// 方便源码阅读
    "dev:read": "rollup -w -c scripts/config...]]></description><category></category></item><item><title><![CDATA[vue unit及e2e问题记录]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/78489765</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/78489765</guid><author>connie_1990</author><pubDate>Thu, 09 Nov 2017 14:57:53 +0800</pubDate><description><![CDATA[为了快速上手vue项目，一般我们会使用脚手架vue-cli帮助我们创建项目模板。 vue init webpack my-project  // 创建 my-project项目
 npm install   // 下载依赖包
 npm run dev   // 编译开发环境
 npm run unit  // 启动单元测试
 npm run e2e   // 启动端到端测试
 npm run bui]]></description><category></category></item><item><title><![CDATA[web性能调优法则笔记]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/78462575</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/78462575</guid><author>connie_1990</author><pubDate>Mon, 06 Nov 2017 22:07:28 +0800</pubDate><description><![CDATA[性能黄金法则    只有10%~20%的最终用户响应时间花在下载HTML文档上。剩下的80%~90%时间花在了下载页面中的所有组件（图片、脚本、样式表、Flash等）上。 
1、减少HTTP请求例如：图片地图、CSS sprites、内联图片（data:）、合并脚本和样式表。
实际应用这些技术估计响应时间可以减少到50%左右。
2、使用内容发布网络   如果应用程序web服务器离用户更近，则一个HT]]></description><category></category></item><item><title><![CDATA[MySQL用户管理笔记——权限管理，创建、查询、删除用户，修改用户密码]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/78244681</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/78244681</guid><author>connie_1990</author><pubDate>Sun, 15 Oct 2017 21:59:26 +0800</pubDate><description><![CDATA[权限表user、db、host、tables_priv、columns_priv、procspriv创建用户-- 1、省略密码,则用户登录时不能输入密码
create user 'test';-- 2、省略访问主机名,主机名为%，表示允许任何主机登录
create user 'test' identified by 'mypass';
drop user 'test';
drop user 'tes]]></description><category></category></item><item><title><![CDATA[【转载】《JAVA与模式》之单例模式]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/77864763</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/77864763</guid><author>connie_1990</author><pubDate>Wed, 06 Sep 2017 11:58:13 +0800</pubDate><description><![CDATA[在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的：
　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。单例模式的结构
　　单例模式的特点：单例类只能有一个实例。
单例类必须自己创建自己的唯一实例。
单例类必须给所有其他对象提供这一实例。　　饿汉式单例类public class EagerSingleton {    pri]]></description><category></category></item><item><title><![CDATA[【转载】《JAVA与模式》之原型模式]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/77864747</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/77864747</guid><author>connie_1990</author><pubDate>Wed, 06 Sep 2017 11:56:52 +0800</pubDate><description><![CDATA[在阎宏博士的《JAVA与模式》一书中开头是这样描述建造（Builder）模式的：
　　建造模式是对象的创建模式。建造模式可以将一个产品的内部表象（internal representation）与产品的生产过程分割开来，从而可以使一个建造过程生成具有不同的内部表象的产品对象。产品的内部表象
　　一个产品常有不同的组成成分作为产品的零件，这些零件有可能是对象，也有可能不是对象，它们通常又叫做产品的内部]]></description><category></category></item><item><title><![CDATA[【转载】《JAVA与模式》之建造模式]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/77864714</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/77864714</guid><author>connie_1990</author><pubDate>Wed, 06 Sep 2017 11:53:53 +0800</pubDate><description><![CDATA[在阎宏博士的《JAVA与模式》一书中开头是这样描述建造（Builder）模式的：
　　建造模式是对象的创建模式。建造模式可以将一个产品的内部表象（internal representation）与产品的生产过程分割开来，从而可以使一个建造过程生成具有不同的内部表象的产品对象。产品的内部表象
　　一个产品常有不同的组成成分作为产品的零件，这些零件有可能是对象，也有可能不是对象，它们通常又叫做产品的内部]]></description><category></category></item><item><title><![CDATA[【转载】《JAVA与模式》之抽象工厂模式]]></title><link>https://blog.youkuaiyun.com/connie_1990/article/details/77864675</link><guid>https://blog.youkuaiyun.com/connie_1990/article/details/77864675</guid><author>connie_1990</author><pubDate>Wed, 06 Sep 2017 11:50:23 +0800</pubDate><description><![CDATA[场景问题
　　举个生活中常见的例子——组装电脑，我们在组装电脑的时候，通常需要选择一系列的配件，比如CPU、硬盘、内存、主板、电源、机箱等。为讨论使用简单点，只考虑选择CPU和主板的问题。
　　事实上，在选择CPU的时候，面临一系列的问题，比如品牌、型号、针脚数目、主频等问题，只有把这些问题都确定下来，才能确定具体的CPU。
　　同样，在选择主板的时候，也有一系列问题，比如品牌、芯片组、集成芯片、总]]></description><category></category></item></channel></rss>