iamjwe-CSDN博客

原创 webpack构建实践

学习资料：拉勾课程《大前端高薪训练营》阅读建议：搭配文章的侧边栏目录进行食用，体验会更佳哦内容说明：本文不做知识点的搬运工，技术详情请查看官方文档接上一篇：webpack概念和理论探讨前言：在webpack这部分知识上停留了快三周了，学习进度也落后了两个模块。究其原因，除了懒这个主要的个人因素之外，还是webpack系列的知识太过繁杂了。唉！（一字包含千言万语…）这篇文章写于2021年1月1号，新年伊始，多少得发表一些想法，但也不知道说啥，就用以下几个字表达吧。鼠实不易，牛转乾坤。漫漫征途，.

2021-01-03 20:44:50 390

原创 webpack概念和理论探讨

学习资料：拉勾课程《大前端高薪训练营》阅读建议：搭配文章的侧边栏目录进行食用，体验会更佳哦内容说明：本文不做知识点的搬运工，技术详情请查看官方文档一：认识webpack打包以下文字和截图出自：webpack中文文档本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个.

2020-12-27 20:29:32 329 1

原创 JavaScript模块打包器rollup

学习资料：拉勾课程《大前端高薪训练营》阅读建议：搭配文章的侧边栏目录进行食用，体验会更佳哦。内容说明：本文不做知识点的搬运工，技术详情请查看官方文档。一：认识rolluprollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。它是一个小而美的JavaScript打包工具，与webpack适用于打包应用相比，rollup更加适用于类库的打包，其运行机制比较简单，如下图所示：接下来我们先看一个简单示例来帮助我们更好地理解ro.

2020-12-26 12:44:36 1021 2

原创前端路由的通信逻辑原理

一：标签页的通信逻辑为了直观的表示标签页的业务逻辑，我们直接先看一个antd的简单标签页组件，示例如下： <Tabs defaultActiveKey="1"> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab Pane 2 </

2021-01-19 19:26:40 523

原创【实践记录】换机开发（window）

经过实践总结，个人认为换机开发主要分为以下三个部分：软件迁移：软件安装、整理（快捷方式）、设置数据迁移：使用移动硬盘把数据从老设备拷贝到新设备道中系统设置：如环境变量配置、凭证管理等等，建议不要刻意去做，这些很多是会在软件安装时或者执行某些操作时会自动配置上，没有配置上的按需配置上即可。经过上面分析，对于数据迁移和系统设置无需多言，下面罗列一些需要安装的软件及其配置和设置（随机应变）。1.软件安装基础软件：chrome：https://www.google.cn/chrome/typo

2021-01-11 15:37:46 317

原创正则表达式语法

内容参考：JavaScript权威指南1.修饰符修饰符是放在"/"符号之外的字符含义i执行不区分大小写的匹配g执行一个全局匹配（默认的是找到第一个即停止）m多行匹配模式，此模式下，^匹配行首，$匹配行尾2.直接量匹配字符匹配字母/数字自身\t制表符\n换行符……2.字符类匹配[]字符匹配[…]方括号内的任意字符[^…]不在方括号内的任意字符.除换行符和其他Uni.

2020-11-08 23:51:47 394

原创 JS后端框架 Nest.js入门篇

一：多模块应用结构0.多模块目录结构示例src├──cats│ ├──dto│ │ └──create-cat.dto.ts│ ├──interfaces│ │ └──cat.interface.ts│ ├─cats.service.ts│ ├─cats.controller.ts│ └──cats.module.ts├──dogs│ ├──dto│ │ └──create-dog.dto.ts│ ├──

2020-11-08 23:31:05 3598

原创 md文件（table）转js文件（ object）【node脚本，日常tips】

一：效果1.读取的的markdown文件md视图md源码| 英文 | 中文 || ----- | ---- || hello | 你好 || world | 世界 |2.生成的js文件en-USexport default { 'hello': 'hello', 'world': 'world',}zh-CNexport default { 'hello': '你好', 'world': '世界',}二：代码注意：代码中使用了lo

2020-10-29 17:57:54 661

原创谷歌翻译爬虫【node脚本，日常tips】

此类博客不多BB，复制粘贴运行一把梭。一：英文2中文1.谷歌翻译加密函数：util.js// 谷歌翻译：加密function TL(a) { var k = ""; var b = 406644; var b1 = 3293161072; var jd = "."; var $b = "+-a^+6"; var Zb = "+-3^+b+-f"; for (var e = [], f = 0, g = 0; g < a.length; g++) { va

2020-10-29 17:22:36 449

原创 node脚本兼容运行ES6模块化规范代码【日常tips】

此类博客不多BB，复制粘贴运行一把梭。1.package.json{ "scripts": { "script": "node entry.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-transform-modules-commonjs": "^7.2.0", "@babel/register": "^7.0.0" }}2.entry.jsrequire('

2020-10-26 16:02:38 349

原创入门React hooks，对比类组件学习useState和useEffect【实践、总结】

博主经验尚浅，如有错误，欢迎指正一：useState1.使用方式function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];从上述钩子定义的源代码可以看出，useState钩子函数的参数传入一个初始值（或者一个函数，调用后获得初始值），返回值返回给外界对该状态的读写操作（以数组形式）。基本的使用示例如下：const [state, setSta

2020-09-24 15:17:20 2151

原创 JavaScript 函数，从入门到精通

函数入门一：认识JavaScript函数1.函数是对象所有JavaScript函数都是对象，所以它具有对象的全部特征：可以通过字面量创建function fn() {}可以赋值给变量，数组或其他对象的属性可以作为函数的参数来传递可以作为函数的返回值可以动态创建和分配属性2.函数作为对象，具有属性：如标记属性、计算结果属性、工具函数属性标记属性可以在函数上挂载一些标记属性，如该函数是否可用、函数序号、使用环境等等与该函数有关的特征信息。// 例1：函数的封装者标记fun

2020-08-31 16:11:16 795

原创 docker 部署前端项目【实践、记录】

初识docker一：认识docker二：docker client【交互】注意：下述内容都是以面向对象的角度思考总结1.管理docker服务2.管理docker镜像3.管理docker容器三：docker host【认识】1.what四：docker hub【参考】1.what2.how实践docker部署第一步：项目开发阶段【输出git repo(project and dockerfile)】1.编写dockerfile2.准备data and script（docker

2020-08-25 18:21:45 1560

原创 JS原型、原型链理解【实践】

本篇博客针对Chrome环境下一图表千言1.Object对象查看Object对象2.Function对象3.函数对象得到函数对象let Person = function(name){this.name=name}函数对象是内置对象Function的实例。查看函数对象Person._ proto_ 指向内置对象Function的原型对象4.函数原型对象得到原型对象无需创建，函数对象是JavaScript中的一种特殊类型对象，创建函数对象时即会创建一个原型对象，

2020-08-18 11:02:18 403

原创 MySQL数据库 DML相关操作（数据增删改查相关sql）

DML：data manipulation language一般CRUD方式一：SQL语句1.数据增加（insert）insert into t_user(name,address) values('jwe','china');2.数据删除（delete）delete from t_user where id=5;3.数据修改（update）update t_user set ...

2020-08-07 10:44:33 431 3

原创 MySQL数据库 DDL相关操作（库表操作相关sql）

DDL：data definition language库相关操作方式一：SQL语句库使用使用数据库use mydb;查看当前使用的数据库select database();库创建create database tempdb;库删除drop database tempdb;库修改更改字符集alter database fruitdb characte...

2020-08-07 10:41:59 377

原创 JS模块汇总工具 rollup【实践】

博客内容仅是个人实践理解，仅供参考，如有错误，敬请指正，更多内容和详情请访问官方文档实践理解一：对rollup的认识？1.rollup将多个小的模块汇总合并成一个或多个大的模块。2.rollup可多种模块化形式输入，汇总后也可以多种模块化形式输出3.rollup支持插件功能让rollup更加灵活和强大二：与webpack的用途适用比较1.webpack更加适用于打包应用2.roll...

2020-04-09 21:44:01 851

原创 JS静态类型检查 Flow【实践】

实践之后加深的理解实践：项目引入flow一：初始化项目1.新建项目：flow-test2.新建package.json3.新建目录结构：/src/js、/dist二：引入flow此处Package Managers选择npm，Compilers选择Babel，其他方式参考https://flow.org/en/docs/install/1.安装compilernpm instal...

2020-04-06 22:07:52 801

原创事件捕获、事件冒泡、事件委托【实践】

实践后加深的理解一：事件流对下事件流程图的理解事件委托事件委托原理大量同类型事件时，可以利用事件流的传递过程，将事件响应逻辑绑定在所有事件目标共同的祖先节点上，同时使用事件对象.target可以获取具体的事件目标节点进而获取事件目标的内容。事件委托优点由于事件处理逻辑绑定在祖先节点而不是各个事件目标上，那么只需在祖先节点注册一次事件即可，而不用管子节点有多少个，或者子节点的动...

2020-04-02 17:48:37 465

原创函数节流、函数防抖【实践】

实践后加深的理解共性：函数节流什么是函数节流？需要频繁触发的函数，在规定时间内（绝对时间差），只让第一次生效，后面的不生效。有什么特点？（函数执行后，lastTime才被重新赋值）一个时间差内被续触发，一定会执行一次。多个时间差内连续触发，最终执行多次。有什么使用场景？滚动条事件的监听。。。（尴尬，博主经验较少，大家理解了按需使用就行，哈哈）。函数防抖什么是函数...

2020-03-29 16:10:59 344

原创全ES6class语法用观察者设计模式和发布订阅设计模式分别实现Vue核心原理【实践】

上一篇博文【建议先看，此篇博客主要是对上篇博文代码的扩展实践】实践总结待更新实践结果项目GitHub地址https://github.com/iamjwe/Jue最终目录结构实践准备待更新实践过程待更新...

2020-03-25 16:25:46 626 1

原创数据代理、模板解析、数据绑定、双向数据绑定【实践】

一：数据代理1.什么是数据代理数据代理是指通过一个对象代理对另一个对象（在前一个对象内部）中属性的操作（读/写）。2.实现示例被代理对象：自有属性的查询【Object.keys(obj)】代理对象：存取器属性的设置【Object.defineProperties(obj,attr,options)】 let obj = {username:"zhangsan",...

2020-03-23 13:17:19 553

原创 JS事件轮循机制、宏任务、微任务【实践】

实践总结js事件轮循机制1.js是单线程（主线程），所有js代码都在主线程执行。2.主线程的同步代码执行完成后，就会读取其它任务队列中的任务（优先微任务队列），不断重复这个过程就叫做js的事件轮循机制。宏任务和微任务3.任务队列分为宏任务队列（可有多个）和微任务队列（只能有一个）。4.主线程的代码就是放置在第一个宏任务队列中。5.同一个宏任务的所有代码从上往下顺序读取，同步代码...

2020-03-18 17:12:05 530 1

原创 webpack 生产环境优化【实践】

上一篇博客：生产环境打包实践结果实践准备创建项目：webpack_dep_test_better初始化npm initnpm i webpack webpack-cli -D// 上篇博客生产环境打包涉及到的所有依赖，可复制执行以下命令下载相关库。// 或者复制上篇博客产出的package.json执行npm inpm i @babel/core @babel/preset-...

2020-03-17 20:54:36 369

原创 webpack 开发环境优化【实践】

实践结果package.json{ "name": "webpack_dev_test_better", "version": "1.0.0", "devDependencies": { "css-loader": "^3.4.2", "file-loader": "^5.1.0", "html-loader": "^0.5.5", "html-we...

2020-03-16 17:50:16 452

原创 webpack 生产环境打包【实践】

实践理解开发环境（devlopment）：能让代码本地调试运行的环境。生产环境（production）：能让代码优化上线运行的环境。生产环境包的构建：为了让代码能在生产环境表现的更加优秀，构建时除需要关注代码普通的编译打包功能之外，还需要关注代码的浏览器兼容以及运行速度等相关问题。实践结果package.json{ "name": "webpack_dep_test", "...

2020-03-15 11:54:45 1076

原创 webpack 开发环境打包【实践】

实践后加深的理解1.webpack把前端的所有资源文件都视为模块并进行处理。2.webpack指令运行在node平台，这才使得它具有访问和操作本地文件资源的能力。3.webpack有很好的灵活性与扩展性（串联式模块加载器loader以及插件机制plugin）。下文实践后的结果打包后的目录结构package.json{ "name": "webpack_dev_test",...

2020-03-13 12:06:55 708

原创十大排序算法（JavaScript语言）

一：冒泡排序动图理解代码实现function bubbleSort(arr){ for(let i=0;i<arr.length-1;i++){ let didSwap = false; for(let j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ ...

2020-03-11 16:39:39 476 1

原创 JS模块化

模块化发展进程一：function方式优缺点缺点：不能私有变量、无安全性、污染Global（模块内变量声明为window属性）。代码示例module1var data = 'module_data';//let data_ = 'module_data';function fn(){ console.log(data); //console.log(data...

2020-03-09 22:18:35 403

原创 HTTP请求和响应的报文结构

简单描述http协议：http协议的中文名称叫做超文本传输协议，是一个基于TCP协议的应用层协议，它负责完成客户端到服务端的一系列操作，是专门用来传输注入在HTML的超媒体文档等web内容的协议。HTTP请求请求报文格式组成包含信息及其作用请求行请求方法、URL以及协议版本 ( HTTP/1.0和HTTP/1.1 )请求头为请求报文添加了一些附加信息，比如...

2019-11-23 17:11:49 926

原创简单爬虫爬取知音漫客VIP漫画【斗破苍穹、斗罗大陆】

此博客以此时斗罗大陆漫画最新话657话为例：下载到本地后，进入图片文件夹后使用图片播放器播放即可，比在线看还流畅哦。注意：如果要爬取其它漫画或章节，必须修改相关参数。def download_img(image_url, cartoon_name, chapter, index): import requests try: response = request...

2019-09-18 21:26:35 3336 1

原创简单爬虫爬取百度图片并批量重命名

复制粘贴运行一把梭，代码如下：import jsonimport requestsimport threadingdef download_img(image_url, word, index): img_name = word + "_" + str(index) try: response_img = requests.get(image_ur...

2019-09-17 21:20:01 810

原创对RSA非对称加密的理解

公钥加密，私钥解密优点：能够保证信息的接收者是预期的逻辑：信息发布者：获得对应公钥，加密明文得到密文，并发布。信息接收者：接收密文，使用私钥解密得到明文。私钥加密，公钥解密优点：能够保证信息的发送者是预期的逻辑：信息发布者：使用私钥加密明文得到密文，并发布。信息接收者：获得对应公钥，接收密文，使用公钥解密得到明文。...

2019-08-24 16:13:58 509

原创为什么是base64编码，而不是base32、base16、base63？

Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。什么是可打印字符？在ASCII码中规定，0~31、127这33个字符属于控制字符，32~126这95个字符属于可打印字符，也就是说网络传输只能传输这95个字符，不在这个范围内的字符无法传输。...

2019-08-22 20:14:59 1901 1

原创对设计模式的认识（以面向对象的思维方式）

刚考完Java设计模式，趁热打铁留下篇博客方便以后查阅和理解。课程书籍是《Java设计模式》，刘伟编著。面向对象设计原则面向对象设计原则为支持可维护性复用而诞生，这些原则蕴含在很多设计模式中，它们是从许多设计方案中总结出的指导性原则，但并不是强制性的。最常见的7个面向对象设计原则：设计原则名称定义理解或实践单一职责原则一个对象应该只包含单一的职责，并且该职责被完整...

2019-06-11 23:20:21 479

原创 v-model里使用过滤器

点击查看filter文档文档所述过滤器只能用在v-bind指令和{{}}表达式中，v-model中使用过滤器是一种思维误区。因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例： computed: { sex: { get: function () { return this.info.sex === 1 ? '男' : this.in...

2019-03-22 09:55:29 23452 3

原创表格布局

表格布局涉及的关键标签：1.table标签：属性单位描述borderpixels规定表格边框的宽度cellpaddingpixels%规定单元边沿与其内容之间的空白cellspacingpixels%规定单元格之间的空白table标签更多属性以及介绍2.tr标签：属性值描述alignleft right cente...

2019-03-21 20:53:03 5529

原创对scoped的理解

css的属性选择器选择器参考手册1.手册中所述的属性选择器说明：[attribute][target]选择带有 target 属性所有元素。2.vue组件style标签中使用scoped之后，生成的HTML结构我们可以发现组件在使用了scope之后的渲染结果，该组件模板中定义的所有标签都带上了data-v-xxxxxxx=""的属性，但要注意的是，我们的子组件el-d...

2019-03-19 18:32:24 2794 1

原创修改elemet-ui组件的内部样式

修改el-dialog的el-dialog__body的样式如果我们使用了element-ui的el-dialog组件，面临修改组件内的样式（例如修改el-dialog__body的样式）的需求，我们会碰到这样的问题。第一种思路：添加类名（与组件渲染结果有关，可能失败（如下例））我们尝试在el-dialog组件上添加样式类来达到层叠样式的目的。如下例的dialog-select类名&lt...

2019-03-19 16:58:18 3951 1

空空如也

空空如也