- 博客(153)
- 收藏
- 关注
RSS订阅原创 React当中使用TS
使用JS开发时，大部分错误都是在runtime（运行时）的时候发现的我们希望在静态代码中就能找到其中的一些错误这就是强类型带给我们的好处把js改造成jsd.ts是给js打补丁函数的定义：参数可以不传值TS知识梳理、总结与提高使用unknown代替any泛型使用hook + ts + ts泛型实现useArray...
2022-04-01 23:09:17
1709
1
原创 React--自定义hook
setParam({…param, name: evt.target.value})相当于setParam(Object.assign({}, param, {name: evt.target.value}))
2022-04-01 19:33:24
715
原创 React --Json Server
常见mock方案1.代码入侵2.请求拦截代表mock.js3.接口管理工具代表：rap\swagger\moco\yapi4.本地node服务器json server配置安装：npm i json-server -g在根目录生成一个db.json启动json-server json-server --watch db.json访问红框内命名的接口，就可以在postman中访问了在postman增删改查在项目中我们可以设置一个__json_server_mock__.
2022-03-26 16:30:01
553
原创 react实战开发--开发前配
https://github.com/sindu12jun/imooc-jira。创建react项目npx create-react-app jira --template typescriptsrc: 源代码文件夹，参与打包工具打包的文件夹，入口文件是index.tsx，这个文件要做一些准备工作，而App.text.tsx主要是则描述app本身，react-app-env.d.ts文件为我们引入了一些预先定义好的typescript类型，reportWebVitals.ts文件是用来做埋点上报，
2022-03-25 16:11:14
948
原创 React+ React hook +Ts深度学习技术栈
react17版本技术栈React Hook 技术栈typeScript4技术栈–其他
2022-03-25 13:40:55
2330
原创 react基础
React Fiber： react16之后的版本react环境搭建1.安装node，（安装了node，自动安装npm）2.打开react官网https://reactjs.org使用脚手架快速生成一个react项目执行红框内的代码，可以快速生成一个react项目项目工程代码精简react项目的入口src目录下面的index.js文件，它引入了app.js文件，app.js文件显示出了首页内容什么是组件react是一个基于组件开发的框架把页面的每个模块都可以看作组件，组件就是网页的
2022-03-25 01:23:06
404
原创 TypeScript入门
为了搭建一个比较现代的前端应用，似乎目前唯一的选择是JavaScript，但是传统的JavaScript存在着缺陷，人们总结出来了JavaScript的拓展语言，这就是TypeScriptTypeScript是JavaScript的超集，在兼容JavaScript的同时，也带来了Java，C#等语言才具有的强类型定义的特点，可以说TypeScript把JavaScript提升到了一个全新的高度，在TypeScript中我们除了可以使用熟悉的JavaScript的语法，还可以充分利用JavaScript不
2021-09-16 15:08:06
265
1
原创 ES6_取值
取值有更优雅的方式吗在ES里面，我们经常需要取数组的某个值，或者是对象里面的某个属性数组可能是通过下标去取值，对象通过属性去取值那么取值有更优雅的方式吗ES6 解构赋值const course = { name: 'es6', price: 50}取值：const name = course.nameconst price = course.price解构赋值const {name, price } = course // 解构赋值等号左边和等号右边对应的结构是完全一样的
2021-09-15 15:50:14
856
原创 ES6_箭头函数
优化函数的写法如何去定义函数方式一：function sum (x, y) { return x+y}const res = sum(2, 3)console.log(res) // 5方式二：const sum2 = function (x, y) { return x+y}const res = sum2(3, 4)console.log(res) // 7在ES6中如何写出优雅的函数呢const sum3 = (x, y) +> { r
2021-09-15 11:51:00
229
原创 ES6_const常量2
const 常量真的不可以被改变吗const esObj = { name: 'es6', year: 2015}esObj.name = 'es2015'console.log(esObj) // { name: 'es2015', year: 2015} name属性被改变const arr = ['es6', 'es7', 'es8']arr[0] = 'es2015'console.log(arr) // ['es2015', 'es7', 'es8']const
2021-09-03 09:53:33
96
原创 ES6_const常量
常量： 不可以变化的量，只读不可以写，换种说法只可以取值，不能够赋值。var 声明的变量可以改变在ES3声明常量：将常量的字母都大写eg: var BASE_URL = ‘http://…’但其实是修改的，只是告诉不要去改变，其实还是可以被改变ES5：Object.defineProperty（）会直接在一个对象上定义一个新的属性，或者是修改一个对象的现有的属性，并且返回这个子对象Object.defineProperty(window, 'es', {value: 'es6',wr
2021-09-02 15:05:42
131
原创 Object.assign实现深复制的方式
Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。这里主要是说这个方法的
2020-11-04 15:53:24
767
原创 Webpack和Code Splitting
一.Webpack和Code Splitting之间的关系Code Splitting指的是代码分割，什么是代码分割，代码分割和webpack有什么关系呢
2020-06-05 10:12:27
433
原创 development 和 production 模式的区别
webpack中两种开发模式development 和 production 的区分打包当我们在开发一个项目的时候，一般用development这个环境进行项目的开发，在这个打包环境下，webpack我们使用了devserve，可以帮我们起一个服务器，这个服务器里面还集成了一些HTML这样的特性，只要更改了代码，会帮我们重新打包，然后代码的内容会实时的展示在服务器对应的网页上。所以在开发环境下使...
2020-05-07 14:29:41
5924
原创 Webpack_（高级概念4.1）_Tree Shaking 概念详解
Tree Shaking 概念详解Tree Shaking指的是什么？打开项目进入index.js文件中，清空代码，然后打包项目，不会报错，但是实际上会报一个警告在这个webpack版本下，如果在webpack.config.js配置了babel-loader的内容（我们已经将配置单独放在babelrc文件里），在preset-env中配置"useBuiltIns": "usage"...
2020-04-27 10:56:26
1087
原创 关于数组、对象的深浅拷贝
浅拷贝数组和对象作为JS的引用类型，直接使用赋值“=”的话，会把源数组、对象的地址赋值给新的数组、对象，并没有实现数组的数据拷贝，这种方式实现的就是浅拷贝。赋值给另一个变量时，实际上是把另一个变量指向了与之相同的地址，当我们改变其中一个时，实际上改变了堆内存中的存储内容，相应的所有指向该地址的数组都发生了变化深拷贝深拷贝是重新分配新的存储空间，两个对象对应不同的地址，修改其中一个值，不会影响...
2020-01-14 17:59:02
303
原创 vue实战_使用echarts
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save全局引入和按需引入 main.js // 引入echartsimpor...
2019-12-21 14:00:53
248
原创 Webpack_（第三章）_实现对React框架代码的打包
配置React代码的打包react代码是一套非常先进的前端框架代码，我们如果想写react的代码，如何进行react代码的打包呢？在babel 的官网上的preset配置项，执行npm install --sava--dev @babel/preset-react如果想对react代码打包的话，可以借助babel的preset-react，帮助我们解析react中的语法，使用她我们就可以在项...
2019-12-21 14:00:11
678
原创 Webpack_（第三章）_使用WebpackDevServer提升开发效率
使用WebpackDevServer提升开发效率我们修改代码，如果想在浏览器上正确运行，都需要手动打包npm run bundle,这样的话我们的开发效率是非常低下的，我们希望，如果改了src下面的原代码，那么dist目录就会自动打包，那么就简单多了，不用每次都运行npm run bundle了。要想实现这样的功能，有三种做法方法一打开package.json文件，当我们运行npm run...
2019-12-21 13:59:43
472
原创 Webpack_（第三章）_SourceMap的配置
SourceMap的配置什么是SourceMap？在webpack.config.js，在开发者模式mode: "development"下，默认SourceMap已经配置好，所以我们先关闭SourceMap mode: "development", devtool: 'none',重新运行打包就可以了，发现运行成功，那么SourceMap到底是什么东西呢？如果故意定义错误语法，...
2019-12-21 13:59:34
347
原创 Web核心概念_（第三章）_Entry与Output的基础配置
Entry与Output的基础配置entry打包的入口文件，entry可以配置为字符串，也可以配置为对象，默认生成的名字是main.js，当然也可以在output中指定生成文字的名字。如果想要...
2019-12-21 13:59:21
291
原创 webpack核心概念_（第三章）_使用plugins让打包更便捷
在webpack中使用不同的loader可以完成不同文件类型的打包，这一篇写如何使用webpack中的plugins,让打包更便捷。在打包完成的dist文件下有个index.html文件，这个是我们手动拷贝到dist文件夹下，目的是可以方便访问打包生成之后的js文件。但是每次打包都要拷贝该index.html文件很麻烦，有什么办法可以帮助我们解决这个问题呢？可以利用webpack的插件帮我们实...
2019-12-21 13:59:01
294
原创 webpack核心概念_（第三章）_使用loader打包静态资源（样式篇-下）
补充样式打包：1.css-loader常用的配置如果要配置css-loader，那么就不能写字符串了，而要写一个对象 { test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', option...
2019-12-21 13:58:44
181
原创 webpack核心概念_（第三章）_使用Loader打包静态资源（样式篇-上）
Loader打包样式当我们在src下写一个样式文件，并在index.js中引入使用该文件的样式，运行发现出错import './index.css'......img.classList.add('image')这是因为webpack只能识别js结尾的文件，不能识别css结尾的模块，所以打包会报错。所以需要在webpack.config.js中做配置当我们打包css的时候，需要用到...
2019-12-21 13:58:29
347
原创 webpack核心概念_（第三章）_使用loader打包静态资源（图片篇）
使用loader打包静态资源（图片篇）上一节我们看到webpack 把图片名字被打包成了一个比较长的字符串。如果我们想不变动图片的名字，怎么办？这样的话我们需要对loader做一些额外的配置了。在使用loader的时候，可以配置一些参数，放在一个options的配置项比如说希望打包生成的名字形式跟之前图片的名字一致，后缀也一模一样 { test: /\.(j...
2019-12-21 13:58:07
295
原创 webpack_（第三章）_核心概念_loader
Loader是什么？webpack是一个模块打包工具，模块不仅仅是js文件，还可以是图片或者是css等等其他的任何内容。那图片和css是怎么打包的呢？如果我们按照打包js的方式打包图片，发现会报错，这是为什么呢？eg：const image = require('./image.jpg')原因是webpack只知道默认打包js模块，但是不知道如何打包类似于jpg这种文件的打包，所以在配...
2019-12-21 13:57:27
278
原创 webpack_（第二章）_浅析webpack打包输出的内容
浅谈webpack打包知识点在上次完成webpack基本配置之后运行npm run bundle 打包可以看到在我们打包的时候，输出了非常多的提示命令，那输出的这些信息是什么意思呢？Hash： 对应的是本次打包唯一的Hash值Version： 使用的是Webpack的版本Time：当前这个包整体的打包耗时Asset：下面有个index.js文件，表示我们打包出了一个index.js...
2019-12-21 13:57:08
237
原创 webpack_（第二章）_使用webpack的配置文件
webpack的配置文件webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，那么直接拿过JS文件来执行就可以了，假如引入的是图片文件，实际上只需要拿到图片的地址就可以了，并不需要把整个图片文件打包到js里面去。在打包的时候哪个文件才是打包的入口文件，打包出的文件放到哪里，这就需要配置文件来告诉webpa...
2019-12-21 13:56:32
101
原创 webpack_（第一章）_的正确安装方式
搭建Webpack环境webpack是基于node开发的模块打包工具，本质上是由node实现的，首先要安装node环境。新版本的nodejs会很大程度的提高webpack的打包速度。提高webpack打包速度：一是保持nodejs的版本尽量的新，另一个是保持webpack的版本尽量的新。高版本的webpack会利用node新版本的一些特性，来提高打包速度。安装好node之后新建一个文件夹...
2019-12-21 13:56:06
157
原创 前端实现打印功能
前端实现打印功能的方法有很多方法一：window.print()window.print()默认打印的body的内容如果想实现局部打印，就要重新给body的内容赋值，后续执行完了打印再将内容还原回去。 //根据div标签ID拿到div中的局部内容 bdhtml=window.document.body.innerHTML; var jubuData = docume...
2019-08-23 11:09:06
14167
2
原创 将URL图片链接转换成base64
在使用html2canvas截图的时候，canvas重新渲染的时候 ，如果资源是URL图片的时候，在请求有个延时可能还没渲染完就完成绘制了，造成图片截图不出来。这时将URL图片转换成base64后，用base64渲染img图片，这样就可以完美解决问题如何将“跨域图片”转换成base64呢？原理很简单，将img绘制成canvas，再将canvas转换成base64的img流。具体代码 t...
2019-08-23 09:07:37
8529
4
原创 Webpack核心概念_Hot Module Replacement 热模块更新
Hot Module Replacement 热模块更新什么是HMR？我们写一个例子：在webpack.config.js配置一下css文件的解析 { test: /\.css/, use: [ 'style-loader', 'css-loader', 'postcss-loader'] },然后index.js 中写impor...
2019-07-11 18:52:42
773
原创 webpack模块打包工具
webpack模块打包工具从上文看webpack很像是JS的翻译器，其实这个定义是不准确的，webpack只认识import这样的语法，很多高级的JS代码并不认识。webpack实际上是一个模块打包工具，如下图的Header、Sidebar、Content是一个个的模块，webpack是将这些模块打包在一起的工具，生成一个最终的JS文件。注意的是： 当我们使用import引入一些类或者代码...
2019-06-20 10:40:29
660
原创 webpack概念
随着前端工程越来越复杂，单独建几个文件写业务代码已经无法保证项目的可维护性，所以就把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块做自己的事情，这样就能保证项目的可维护性和可扩展性。但是假如有几千个模块，在页面能引入几千个JS文件么，所以当项目达到这种程度，我们就需要借助工具来管理我们的模块。webpack就是这种工具来帮助我们管理模块，与webpack相似，还有很多相似的工具，比如说...
2019-06-19 18:02:18
157
原创 element Checkbox多选框全选踩空
element checkbox 有个indeterminate 属性，用以表示 checkbox 的不确定状态，一般用于实现全选的效果eg:<el-checkbox :indeterminate="isIndeterminated" v-model="selectedAll" @change='handleSelectedAll'> <span style='margi...
2019-03-12 10:07:07
3070
原创 前端经验_form中button会自动提交的问题
<form> ...... <button class='btn' @click='handleClick'>选择</button> ......</form>当点击选择按钮button的时候，会刷新当前页面，这是为什么呢，因为form表单中的button默认的类型是type=‘submit’,点击必然会跳转页面，如果表...
2019-03-12 09:23:25
787
原创 css 垂直居中和水平居中
一 水平居中行内元素行内元素水平居中，直接在父盒子中设置text-align:center块元素居中① 已知盒子的宽度 margin : 0 auto; // 最简单实现 position: relative ; left： 50%; margin-left:-50px; // 绝对定位，左侧盒子的一般的宽度...
2019-03-11 16:52:18
169
原创 关于JS时间的问题
一： 基础的JS使用var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-???)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日...
2019-03-06 15:28:36
477
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人