connie_1990的博客

原创 浏览器工作原理学习笔记

浏览器工作原理浏览器架构导航流程渲染流程浏览器架构导航流程从输入URL到页面展示，这中间发生了什么？1，用户输入url并回车2，浏览器进程检查url，组装协议，构成完整的url3，浏览器进程通过进程间通信（IPC）把url请求发送给网络进程4，网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程5，如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：5.1 进行DNS解析，获取服务器ip地址，端口5.2 利用ip地址和服务

原创 如何防止失眠——学习笔记

规律作息：每周五天十点半上床睡觉，可以有2天的机动时间，因为黄金睡眠时间是晚上11点到凌晨2点睡眠与季节春夏：晚睡早起，5-7个小时秋季：早睡早起，7-8个小时冬季：早睡晚起，8-9个小时失眠的 定义入睡时间>30分钟睡眠质量：早睡多梦觉醒次数>=2次持续时间 > 2周如果还是睡不着，控制起床时间，每天8点之前起床，刷牙，洗脸，如果很困再回去睡觉，最后目标调整到7点左右起床午休时间：中午12点到下午两点之间，午休1一个小时足矣，不用太多，实在睡不..

原创 vue elementui 中带字数校验的 textarea组件封装

在form表单中经常会遇到带字数校验的textarea需求，具体效果如下图所示，实现的功能如下：右下角有最大的字数限制实时计算文本框内输入的字数在超过最大字数时自动截断下面我们看一下，希望存在一个如下控件可以供我们使用 <el-form-item label="其它反馈意见:" prop="others"> <text-area v-model="form.others" :max-length="maxLength" :rows="3"/>

原创 字符代码工具函数

在项目开发中经常需要进行数据字典的转化，例如下拉框，或者table中后端返回的代码需要前端转为文字。我们可以定义数据字典的格式如下：// code.js 文件export default { 'taskStatus': { 'items': [ { 'label': '全部任务', 'value': 'all' }, { 'label': '未开始', 'value': '0',

原创 web前端pdf导出

做一个项目需要实现浏览器端pdf的导出功能，在此记录一下整个实现过程以及遇到的一些坑：）当然，解决这个问题有以下几个步骤：确定要导出的dom元素将dom元素转化成canvas( 使用html2canvas库)将canvas转化成图片jpeg，png等都可以将图片导出pdf （使用jspdf库）确定要导出的dom元素如果是原生写法可以直接使用document.getElementById来获取，如果是用vue或者react可以设置要ref, 此处我使用的是react框架 const re

原创 git常用命令笔记——管理、修改、提交规范等

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 // 查看工作区和版本库里面最新版本的区别管理修改工作区——暂存区——版

原创 《node.js设计模式》学习笔记——同步异步调用问题

避免ZalgoZalgo: 一种 JavaScript 开发人员虚构的疯狂恶魔，取名 Zalgo，用来描述 JavaScript 中同步 / 异步的混乱。Zalgo是一个互联网传说，会导致世界错乱，死亡和毁灭的一个不详实体。有兴趣的同学可以在如下网址上找到Isaac Z. Schlueter的原始帖子https://blog.izs.me/2013/08/designing-apis-for-asynchrony不可预测的危险的函数我们来看一下下面这个危险的函数，它希望实现的目的是如果没有缓冲是异

原创 前端常用工具库函数

// 获取url前缀const getUrlPrefix = () => { const { NODE_ENV } = process.env if (NODE_ENV === 'development') { return '/api' } return ''}const prefix = getUrlPrefix()export const urlPrefix = prefix// 调用后端接口，下载文件export const downloadFile =

原创 通过react-app-rewired 重写配置，访问非根目录

在项目根目录下创建config-overrides.js文件const { override, fixBabelImports } = require('customize-cra');const path = require("path")module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), fixBabelImports(

原创 H5页面对接React Native App

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

原创 vue-cli源码学习分享

原创 vue-cli 调试配置

vue-cli-service 调试配置vue-cli 调试配置项目准备配置launch.jsonvue-cli-service 调试配置准备项目配置launch.json配置package.json在这里，我们使用开发工具vscode，工具怎么使用这里就不描述了，直接进入主题。vue-cli 调试配置项目准备下载vue-cli 项目进入vue-cli\packages@vue\cli...

原创 Vue源码学习笔记——组件挂载及创建

准备工作备注：案例中使用的vue版本全部为2.6.10git clone https://github.com/vuejs/vue.gitnpm install进入package.json，在script中增加"dev:read"命令,具体如下 "scripts": { // 方便源码阅读 "dev:read": "rollup -w -c scripts/config...

原创 vue unit及e2e问题记录

为了快速上手vue项目，一般我们会使用脚手架vue-cli帮助我们创建项目模板。 vue init webpack my-project // 创建 my-project项目 npm install // 下载依赖包 npm run dev // 编译开发环境 npm run unit // 启动单元测试 npm run e2e // 启动端到端测试 npm run bui

原创 web性能调优法则笔记

性能黄金法则 只有10%~20%的最终用户响应时间花在下载HTML文档上。剩下的80%~90%时间花在了下载页面中的所有组件（图片、脚本、样式表、Flash等）上。 1、减少HTTP请求例如：图片地图、CSS sprites、内联图片（data:）、合并脚本和样式表。实际应用这些技术估计响应时间可以减少到50%左右。2、使用内容发布网络 如果应用程序web服务器离用户更近，则一个HT

原创 MySQL用户管理笔记——权限管理，创建、查询、删除用户，修改用户密码

权限表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

转载 【转载】《JAVA与模式》之单例模式

在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的：　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。单例模式的结构　　单例模式的特点：单例类只能有一个实例。单例类必须自己创建自己的唯一实例。单例类必须给所有其他对象提供这一实例。　　饿汉式单例类public class EagerSingleton { pri

转载 【转载】《JAVA与模式》之原型模式

在阎宏博士的《JAVA与模式》一书中开头是这样描述建造（Builder）模式的：　　建造模式是对象的创建模式。建造模式可以将一个产品的内部表象（internal representation）与产品的生产过程分割开来，从而可以使一个建造过程生成具有不同的内部表象的产品对象。产品的内部表象　　一个产品常有不同的组成成分作为产品的零件，这些零件有可能是对象，也有可能不是对象，它们通常又叫做产品的内部

转载 【转载】《JAVA与模式》之建造模式

在阎宏博士的《JAVA与模式》一书中开头是这样描述建造（Builder）模式的：　　建造模式是对象的创建模式。建造模式可以将一个产品的内部表象（internal representation）与产品的生产过程分割开来，从而可以使一个建造过程生成具有不同的内部表象的产品对象。产品的内部表象　　一个产品常有不同的组成成分作为产品的零件，这些零件有可能是对象，也有可能不是对象，它们通常又叫做产品的内部

转载 【转载】《JAVA与模式》之抽象工厂模式

场景问题　　举个生活中常见的例子——组装电脑，我们在组装电脑的时候，通常需要选择一系列的配件，比如CPU、硬盘、内存、主板、电源、机箱等。为讨论使用简单点，只考虑选择CPU和主板的问题。　　事实上，在选择CPU的时候，面临一系列的问题，比如品牌、型号、针脚数目、主频等问题，只有把这些问题都确定下来，才能确定具体的CPU。　　同样，在选择主板的时候，也有一系列问题，比如品牌、芯片组、集成芯片、总

转载 【转载】Java包（package）的命名规范，java中package命名规则

【转载】Java包（package）的命名规范，java中package命名规则  Java的包名都有小写单词组成，类名首字母大写；包的路径符合所开发的 系统模块的 定义，比如生产对生产，物资对物资，基础类对基础类。以便看了包名就明白是哪个模块，从而直接到对应包里找相应的实现。     由于Java面向对象的特性，每名Java开发人员都可以编

转载 log4j2配置文件详解

1.关于配置文件的名称以及在项目中的存放位置    log4j 2.x版本不再支持像1.x中的.properties后缀的文件配置方式，2.x版本配置文件后缀名只能为”.xml”,”.json”或者”.jsn”.     系统选择配置文件的优先级(从先到后)如下：　　　　　　(1).classpath下的名为log4j2-test.json 或者log4j2-test.jsn的文件.　　　　　　(

原创 fis3 精灵图制作

为什么要使用精灵图？ 为了合并http请求，提高网页性能。

原创 html5+nodejs多文件上传

最近学习文件上传，网上例子大多数是HTML5+python的，可惜本人不会python，暂时也没有时间和兴趣研究python，所以用node.js做后台接收文件上传。

原创 webpack js压缩插件

Webpack js 压缩插件

原创 webpack模块加载介绍

webpack模块加载函数介绍

原创 webpack css加载和图片加载

css加载器在webpack中，所有的资源（js文件、css文件、模板文件，图片文件等等）都被看成是一个模块，因此多有的资源都是可以被加载的。加载这些资源我们要在module属性定义这些加载配置（指定加载器）。 在module属性中，通过定义loaders定义加载器，其属性值是一个数组，每一个成员代表一个配置。通过test定义匹配的规则（正则表达式）通过loader定义加载器，可以通过！级联多

原创 webpack安装以及基本配置

webpack 简介 webpack是基于模块化开发的一个工程化开发工具，因此在webpack中，任何资源（图片、css等等）都可以作为模块加载进来（当然加载的时候需要一些load加载机）。