- 博客(84)
- 收藏
- 关注
RSS订阅原创 es6 module总结
CommonJS在运行时才能却确定输入和输出的变量和依赖关系，而es6则是在编译时就能确定。let { stat } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;上面代码的是指是整体加载fs模块（加载fs所有方法）生成一个对象后再从这个对象读取的方法。这种加载称为‘运行时加载’，因为只有在运行...
2019-09-26 10:24:34
291
原创 vue 数据更新，视图未更新，原因，解决方法
复现问题：<template> <div> <p>{{classInfo.number}}<p> <p>{{classInfo.address}}<p> </div></template>export default { da...
2019-09-16 16:41:46
2839
原创 typeScript enum的使用
1.首先看一个官网的例子enum Color {Red, Green, Blue}let c: Color = Color.Green;console.log(c) // 1enum Color {Red = 1, Green, Blue}let c: Color = Color.Green;console.log(c) // 2enum Color {Red, G...
2019-08-25 12:01:09
1609
原创 学习ts记录
/ ts中如果声明变量并赋值，则可以不定义类型，ts会把这个变量类型当作是初始化值的类型，如果声明并且没有进行赋值，则需要进行类型定义,如果没进行定义变量，则是any类型// 像window中已经有的属性，ts文件中不能直接声明的 eg: const name = 'xiaoming'// ts文件中有个鸭子类型，如果他看起来像鸭子，像鸭子一样游泳，像鸭子一样叫，那么他一定是一只鸭子,就像...
2019-08-23 12:58:06
305
原创 react css命名冲突
A组件引入a.css，a.css:{name:{},title:{color: red;padding: 20px},}B组件引入b.css, b.css:{age:{},title:{padding: 10px}}C组件improt A，import B这样的顺序分别引入A，B组件这时，不管A,B组件在C组件的使用顺序，最终打包生成css文件{name:{},age:{},...
2019-08-08 18:46:00
1215
原创 webpack中proxy 中changeOrigin
changeOrigin默认是false：请求头中host仍然是浏览器发送过来的hostproxy:{ "/test/api":{ traget: "www.aaa.com", changeOrigin: true, pathReWrite: {"/test", ""}, }}如果设置成true：发送请求头中host...
2019-08-08 11:59:00
48315
3
原创 devServer.publicPath output.publicPath output.path 区别
devServer.publicPath首先devServer这个字段只在development环境下生效，所以涉及到此字段的都在development模式下。devServer.publicPath默认是‘/’，表示外部用什么路径访问任何文件需要注意的是，如果该字段设置成类型devServer.publicPath=“/demo”，的值，访问所有的文件都会以<script ty...
2019-08-08 11:51:17
350
原创 前端配置webpack dev server
"scripts": { "serve": "vue-cli-service serve", "serve1": "vue-cli-service --serve1", "serve2": "vue-cli-service -serve2", "serve3": "vue-cli-service serve --mode=dev --mobile -config build/ex...
2019-07-11 14:54:08
438
转载 dependencies 和 devDependencies的区别
以前一直在纠结一个npm安装的包依赖管理的问题。是这样的：我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：--save-dev或--save首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思，而dev则是develop（开发）的简写。所以它们的区别在 package.js...
2019-07-02 17:36:27
207
转载 react useCallback 的理解
useCallback把匿名回调“存”起来在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。在Class component当中我们通常将回调函数声明为类成员：class MyComponent extends React.Component ...
2019-07-01 23:05:56
18785
1
原创 react子组件的state数据根据父组件异步获取的数据更新
1.子组件中尽量直接使用props的数据 具体原因看https://blog.youkuaiyun.com/nnxxyy1111/article/details/808325252.如果必须保存在state中可以在componentWillReciveProps这个生命周期中更新constructor(props) { super(props); this.state...
2019-06-27 21:35:14
2684
原创 如何解决前端的flex流动布局中的单个子元素位置？
方法：当使用flex布局时候，要进行单个元素的位置变动时可以借助盒模型外边距：margin. 当对某一个子元素使用margin-x:auto;时候这个元素的某一边沿会尽量占据父元素里更多的空间。例如三个元素最右边的一个元素只需要设置margin-left: 'auto',即可实现第三个元素浮动到最右边...
2019-03-04 12:55:57
5825
1
原创 liunx清理某个端口
1、先找到端口被哪个进程占用：lsof -i:8080之后会显示： COMMAND PID node 97211 2、用kill -9 97211 杀了这个进程
2019-01-11 14:37:31
269
原创 webpack plugin 基本使用
## plugin的使用 Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 上面把通过loader加载了css，下面使用plugin把css单独提取一个单独的文件 ```javascriptconst path = require("path");const MiniCssExtract...
2019-01-10 21:00:37
255
原创 webpack 之loader的基本使用
## 关于Loader * loader作用 >loader 可以看做具有文件转换功能的翻译员，在配置文件的moudle.rules数组中配置了相应为规则，告诉webpack在遇到文件该用声明loader文件加载和转化，例如加载css文件的loader使用如下： ```javascriptmoudle:{rules: [{test: /\.css$/,...
2019-01-10 20:18:18
286
原创 Markdown 语法介绍
# MarkDown学习笔记 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ##### 文本强调： *斜体***加粗*****粗斜体*** ###### 列表： 无序列表：* 无序列表* 子项 + 无序列表+ 子项 - 无序列表- 子...
2019-01-09 20:30:43
385
原创 mac 安装nvm的问题
1.官方推荐的安装方法curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bashor Wget:wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash2....
2018-12-09 10:49:22
173
原创 模块化和组件化
为什么要模块化编程１．耦合度高２．防止污染全局环境３．复用性较低模块：向外提供一定功能的js程序，一般就是一个js文件模块化： 当前应用都以js来编写，这个应用就是模块化应用组件：用于体验功能效果的代码集合（html css js）组件化：当前应用是用多个组件组成的就是组件化应用...
2018-12-03 18:27:56
185
原创 使用quill-image-resize-module报错问题
只需要在webpack.config.js中加上下面就行了new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js'}),
2018-11-21 20:37:19
6927
4
原创 react 生命周期（新）
生命周期就是组件从创建->挂载->销毁的过程，其中在这个过程中提供一些钩子函数，以便能够在适时便于操作，在react生命周期更新后大致的流程就如图所示：生命周期分为三个过程：装载期间（Mounting），更新期间（Updating）和卸载期间（Unmounting）装载期间：组件实例化并挂载到dom树这一过程称为装载，在装载期间调用的生命周期函数以此为：const...
2018-11-15 16:27:02
271
原创 React中的状态提升
React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.import React from 'react'class Child_1 extends React.Component{ constructor(props){ super(props) } render(...
2018-11-12 22:25:45
125
转载 React的无状态和有状态组件
众所周知，React是一个专注于View层的前端框架，组件也】是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成，组件也是React最基础的一部分，学习React就需要先学习组件。React中创建组件的方式在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的三种方式：ES5写法：React.createClass；ES6写法：React.Co...
2018-11-12 22:24:53
211
转载 React 生命周期
React v16.0前的生命周期其实大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，何况16也是基于之前的修改image第一个是组件初始化(initialization)阶段也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生...
2018-11-12 22:22:12
232
转载 深入vue生命周期
这篇博客将会从下面四个常见的应用诠释组件的生命周期，以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期：Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子 1. 生命周期钩子函数...
2018-10-09 17:51:16
143
原创 js 乱序数组
第一种时间复杂度O(n)var arr = [0,1,2,3,4,5,6];var len = arr.length;for(var i=0;i<len;i++) { var index = Math.floor(Math.random()*(len-i)); var tem = arr[index]; arr[index] = arr[len-i-1];...
2018-09-13 16:42:00
1965
2
原创 操作系统复习大纲
1.单道批处理系统2.多道批处理系统：目的；提高资源利用率和系统吞吐量3.分时系统：目的：为了满足人机交互的需求4.实时系统：特点就是及时性并行和并发： 并行性是指在两个或者多个事件在同一时刻发生 并发性是指两个或者多个事件在同一时间间隔发生进程： 是指在系统中能独立运行并作为资源分配的基本单位，它是由一组机器指令数据和堆栈等组成的，是...
2018-09-04 16:10:38
549
原创 前端合理使用图片的格式
JPEG： 定义：是一种有损光栅图像格式，每次使用jpeg都会进行压缩保存，一些信息将发生不可逆转的丢失。 用途：因为jpeg适用于亮度和色彩压缩，所以在图片，以及其他写实或者带阴影的图像上使用效果更好，一般jpg用在允许请为轻微失真的像素色彩丰富的图片中，他不适合用于做简单色彩的图片。GIF：他是一种无损8位图片格式（无损8位图像仅最多只能支持256...
2018-08-30 14:55:20
493
原创 js 双击事件，三击事件，多击事件的原理及其方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button i
2018-08-28 16:44:40
6612
原创 表现层响应式：响应式布局和屏幕适配布局
1.响应式布局： 响应式布局是根据浏览器宽度，分辨率，横屏，竖屏等情况来自动改变元素展示的一种布局方式，一般可以使用栅格方式来实现，一般有两种思路，一种是桌面端浏览器优先，扩展到移动端浏览器适配，另一种是以移动端优先，扩展到桌面浏览器适配。由于移动端网络和计算机资源相对较少，一般推荐从移动端扩展到桌面浏览器适配。2.屏幕适配布局： 在移动端结局内容按照不同屏幕大小自动等比例...
2018-08-13 20:19:20
1599
原创 mac 安装 chrome浏览器vue插件
1. 打开浏览器的扩展程序 把开发者模式打开2.下载vue-devtools插件 可以网上查找到 私聊我也行https://pan.baidu.com/s/1h8AarxDyghE9Izu6hLM73w3.把下载的插件拉入第一步的打开的界面。4.打开插件的目录 ~/Library/Application Support/Google/Chrome/Default/Extensions...
2018-08-09 20:29:04
4468
原创 组件式开发（vue）的小技巧
1. 看一下数据是一个组件用还是多个组件用。 如果是一个组件用就放在子组件中 如果是多个组件用就放在父组件中2. 数据在哪个组件中更新组件的方法就放在哪个组件中3.增加组件数据的步骤 1.哪个数据 2.检查数据的合法性 3.添加数据 4.清空视图中输入框中的数据 ...
2018-07-18 11:09:22
294
原创 Vue生命周期个人理解
先拿个官网的图：vue整个生命周期中可以看到大概有这8个钩子函数：beforeCreatecreatedbeforeMount(mount应该是挂载的意思)mountedbeforeUpdateupdatedbeforeDestroydestroyed 1. 在beforeCreate和created钩子函数之间的生命周期在这个生命周期之间...
2018-07-15 15:45:04
987
原创 命令式和声明式开发的区别
命令式开发：是关注计算机的执行步骤，告诉计算机一步一步怎么做然后计算机再一步步做声明式开发：是告诉计算机做什么，但不告诉计算机怎么命令式： js操作dom就是命令式，需要告诉计算机一步一步的怎么做 var dom1 = document.querySelector('div');var input = document.querySelector('input');...
2018-07-13 19:23:49
2187
原创 在JavaScript中，为什么10..toString()正常，而10.toString()出错呢？
console.log(10..toString());//10console.log(10.toString());//SyntaxError: Unexpected token ILLEGAL为什么前者正常，而后者报错呢。原因就是，在JavaScript中，数字后面的"."操作符是的意义是不确定。因为它既可能是一个浮点数的标志，又可能是取一个对象的属性的运算符。但是JavaScript的解释...
2018-07-12 21:29:46
1530
转载 webpack4的使用及其更新说明
1.安装要安装最新版本或特定版本，请运行以下命令之一： npm install --save-dev webpack npm install --save-dev webpack@<version>12如果使用 webpack 4+ 版本，还需要安装 CLI。 npm install --save-dev webpack-cli1基本使用 mkdir webpack-demo...
2018-07-10 10:46:18
884
原创 es6里面处理多层回调的多种方法及其缺点
const fs = require('fs');//第一种的常用的回调函数，本身没有什么问题，但是问题是出现多个回调函数的嵌套式时，会形成回调地狱，既不利于读也不利于管理function fn() { fs.readFile('./req.html',(err,data)=>{ if(err){ return err; ...
2018-06-16 18:33:39
1790
原创 es6中的Math.trunc()和parseInt()以及对比Math.ceil()和Math.floor()的优点
1.Math.trunc()作用就是去除一个数的小数部分。2.Math.trunc()和parseInt()，乍一看这个方法完全可以用parseInt()代替，但是对于Math.trunc()如果参数的字符串内部会先使用Number将其先转为数值console.log(parseInt('13.14g'));//13console.log(Math.trunc('13.14g'));//NaN...
2018-06-13 08:55:14
6022
转载 js数值精度和表示的范围
1、整数和浮点数JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。1 === 1.0 // true这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运算，参见《运算符...
2018-06-12 16:15:00
1492
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人