develon - 博客园

2020年9月29日

摘要：基于路由的代码分割及其异常官网介绍了基于路由的代码分割: https://zh-hans.reactjs.org/docs/code-splitting.html#route-based-code-splitting 不过有一个异常, babel-loader的预设@babel/react会导致不阅读全文

posted @ 2020-09-29 16:38 develon 阅读(250) 评论(0) 推荐(0) 编辑

任意内容转base64及Data URL

摘要： # Blob对象和File对象 Blob对象是不可变的原始数据, 可以读取为文本或二进制数据. File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitm 阅读全文

posted @ 2020-09-29 12:07 develon 阅读(1228) 评论(0) 推荐(1) 编辑

2020年9月23日

input file 文件选择的取消事件

摘要：示例原生的input标签无法监听取消事件, 我们通过对容器的blur事件和click事件, 以及input的change事件, 三者结合进行判断: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name=" 阅读全文

posted @ 2020-09-23 14:25 develon 阅读(8099) 评论(1) 推荐(0) 编辑

2020年9月21日

React 入门(7): 动态加载组件

摘要： import()异步加载模块在webpack中, 调用import()函数可以将依赖模块进行切割, 打包为非入口点文件, 这是通过Promise+ajax完成的. 请求路径是相对路径, 对于单页应用来说没有问题. 非入口点文件的命名由webpack.config.output.chunkFilen 阅读全文

posted @ 2020-09-21 16:00 develon 阅读(9628) 评论(0) 推荐(0) 编辑

2020年9月20日

正则表达式标志 gmisuy

摘要： gmisuy g 全局搜索。 i 不区分大小写搜索。 m 多行搜索。 s 允许 . 匹配换行符。 u 使用unicode码的模式进行匹配。 y 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。 g-global m-multiline g: 表示全局模式(global), 匹配到一阅读全文

posted @ 2020-09-20 06:09 develon 阅读(227) 评论(0) 推荐(0) 编辑

正则表达式判断不含串非贪婪匹配和替换

摘要：判断字符串不包含某个串 // 匹配不包含str的串 /(?!str)/ 说实话并没有太大用途, 正则是用来判断含有, 而不是判断不含, 这是自动机的原理和机制. 不含的逆命题就是含有, 因此这种问题大都是可以用相反的思路解决的. 全局替换避免贪婪替换一个实战过程中遇到的问题: 在编写Code组件的阅读全文

posted @ 2020-09-20 03:11 develon 阅读(413) 评论(0) 推荐(0) 编辑

2020年9月18日

React 入门(6): 类组件函数组件

摘要： JSX 之前提到JSX中组件和React元素的使用方法: 现在是时候理解什么是类组件, 什么是函数组件了. 类组件函数组件阅读全文

posted @ 2020-09-18 16:10 develon 阅读(146) 评论(0) 推荐(0) 编辑

Webpack常用模块加载器Loader

摘要： css-loader 和 style-loader css-loader解析相应的css文件中@import和url()函数的依赖关系, 将依赖进行require, 这些依赖依然被相应的模块加载器处理后, 再由file-loader处理, 最后将资源的dist路径返回给css-loader进行替换. 阅读全文

posted @ 2020-09-18 15:12 develon 阅读(217) 评论(0) 推荐(0) 编辑

2020年9月16日

CSS动画关键帧

摘要：关键帧 https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes 起始/结束状态一个动画就是从from → to的过程, 这两个状态称为起始和结束状态. 也叫0% → 100%. 如果一个关键帧规则没有指定动画的开始或结束状态，浏览器将阅读全文

posted @ 2020-09-16 16:48 develon 阅读(277) 评论(0) 推荐(0) 编辑

2020年9月14日

React 入门(6): 路由 React-Router

摘要：文档 https://reactrouter.com/web/guides/quick-start → 安装react-router-dom npm install -S react-router-dom react-router是基础包, 现在React-Router也分为web和native两个阅读全文

posted @ 2020-09-14 17:24 develon 阅读(427) 评论(0) 推荐(0) 编辑

React 入门(5): 引入JSX 研究JSX的createElement实现

摘要：安装依赖使用@babel/core babel从7.0 之后，包名升级为 @babel/core。和 vue-cli 升级到 @vue/cli 一样, @babel是一个group标记, 该组织发布的包在一个子目录下: 这样一来, 要查询官方包, 只需要执行npm search @babel就可阅读全文

posted @ 2020-09-14 14:46 develon 阅读(543) 评论(0) 推荐(0) 编辑

2020年9月13日

webpack标准模块 npm通用模块

摘要： webpack标准模块 webpack通常由webpack, webpack-cli, webpack-dev-server三个模块组成, 它们的依赖模块中有一些模仿了Node.js标准模块, 包括但不限于 os path querystring 这非常方便, 因为有很多Node.js标准模块的功能阅读全文

posted @ 2020-09-13 05:24 develon 阅读(193) 评论(0) 推荐(0) 编辑

2020年9月11日

常用库的CDN引入

摘要： React  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>  <script crossorigin src 阅读全文

posted @ 2020-09-11 10:31 develon 阅读(228) 评论(0) 推荐(0) 编辑

2020年9月10日

使用codesandbox.io开启Web云开发

摘要： codesandbox.io 使用Github账号登录codesandbox.io, 点击浏览器右上角+号安装Chrome扩展应用, 我们就有了一个和本地VS Code一样体验的IDE, 还能在桌面快捷方式快速打开应用: 启用VIM扩展在Chrome应用中我们可以使用全部的VIM按键, ^W再也不阅读全文

posted @ 2020-09-10 15:14 develon 阅读(1485) 评论(0) 推荐(0) 编辑

2020年9月9日

css-loader + style-loader 模块化css

摘要：提案与示例 https://github.com/css-modules/css-modules https://github.com/css-modules/webpack-demo 启用css-loader的模块化功能 css-loader的模块化功能默认是关闭的, 需要在查询字符串中使用mod 阅读全文

posted @ 2020-09-09 16:41 develon 阅读(577) 评论(0) 推荐(0) 编辑

2020年9月6日

React 入门(4): 单文件组件 CSS-Modules

摘要： CSS Modules Github: https://github.com/css-modules/css-modules 阅读全文

posted @ 2020-09-06 21:50 develon 阅读(286) 评论(0) 推荐(0) 编辑

试解红楼梦脂批(1)

摘要：甲戌本第27回滴翠亭楊妃戲彩蝶埋香塚飛燕泣殘紅葬花吟: 脂批: 余讀葬花吟，至再至三四，其淒楚感慨令人身心兩忘，舉筆再四不能下批。有客曰：先生身非寶玉，何能下筆？即字字隻圖批詞，通仙料難遂顰兒之意，俟看玉兄之後文再批。噫唏！阻余者想亦石頭記來的，故停筆以待。 // 吾不能辨此字, 猜測阅读全文

posted @ 2020-09-06 03:05 develon 阅读(245) 评论(0) 推荐(0) 编辑

2020年9月5日

React 入门(3): 严格模式 ReactDOM

摘要：严格模式 StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 https://zh-hans.reactjs.org/docs/strict-mode.html#warni 阅读全文

posted @ 2020-09-05 18:29 develon 阅读(312) 评论(0) 推荐(0) 编辑

2020年9月4日

ES6 类的正确定义方式公有类字段 getter / setter

摘要：类字段提案 https://github.com/tc39/proposal-class-fields https://wenjun.me/2019/07/public-class-fields.html Webpack 内置的js打包程序不支持类字段, 然而Chrome和FF已原生支持.... g 阅读全文

posted @ 2020-09-04 15:26 develon 阅读(773) 评论(0) 推荐(0) 编辑

Lodash 去抖动节流

摘要： throttle节流 _.throttle(event => { $('#volume_progress_percent').css({ width: `${event.data.percent}%` }); // 更新bootstrap进度条UI }, 80, { leading: true, t 阅读全文

posted @ 2020-09-04 14:31 develon 阅读(425) 评论(0) 推荐(0) 编辑

2020年9月3日

JavaScript 三种平台及判断方法

摘要：全局属性globalThis 根据MDN描述: 在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法阅读全文

posted @ 2020-09-03 13:51 develon 阅读(1646) 评论(0) 推荐(1) 编辑

获取js脚本的绝对路径

摘要：脚本运行在Web中使用以下代码即可获取: globalThis.document.currentScript.src document.currentScript返回的是当前执行的script元素；然后调用script元素的src属性即可获取脚本文件的绝对路径。脚本运行在WebWorker中 W 阅读全文

posted @ 2020-09-03 09:54 develon 阅读(783) 评论(0) 推荐(0) 编辑

file-loader 打包路径保持项目结构

摘要： file-loader作用用来将文件原封不动地移动到dist目录中, dist目录由webpack配置中的webpack.config.output.path属性指定. name参数及其内置变量可以为file-loader指定name参数, 以指定文件存放到webpack.config.outp 阅读全文

posted @ 2020-09-03 09:35 develon 阅读(427) 评论(0) 推荐(0) 编辑

2020年9月2日

在 WebWorker 和 Node.js 中模拟 Sea.js

摘要：三种平台及判断方法 https://www.cnblogs.com/develon/p/13607146.html 源码 /** * 判断运行平台 * 第一种方法, 判断globalThis.constructor.name的值: * Window、DedicatedWorkerGlobalScop 阅读全文

posted @ 2020-09-02 17:17 develon 阅读(228) 评论(0) 推荐(0) 编辑

JavaScript 选择文件并读取文本

摘要： input标签 input文件及多文件标签: <input type="file" value="选择文件"></input> <input type="file" multiple="multiple" value="选择多个文件"></input> FileReader 以及 FileReade 阅读全文

posted @ 2020-09-02 14:58 develon 阅读(4559) 评论(1) 推荐(2) 编辑

Node.js 针对不同平台实现electron的自动重载

摘要： # 前言大前端目前发展处于高度自动化中, `webpack-dev-server`这样的工具提供了向HTML注入一段监听`WebSocket`的JavaScript代码来实现前端界面的热加载. 但是对于electron主进程`electron-main`来说, 实现这种代码修改立即重启进程的功能是阅读全文

posted @ 2020-09-02 14:32 develon 阅读(1239) 评论(0) 推荐(0) 编辑

2020年9月1日

红楼梦探佚

摘要：红楼梦版本和分支以及续书程高本通行本程甲本程乙本全书120回, 后40回系清朝人高鹗续书, 书商程伟元发行. 为避免文字狱, 前80回亦极有可能被删改, 才得以活字印刷术刊行大体先后有程甲本和程乙本之分, 增删更甚甲戌本存16回存一至八、十二至十六、二十五至二十八各回, 全名《脂砚阅读全文

posted @ 2020-09-01 16:57 develon 阅读(505) 评论(0) 推荐(0) 编辑

React 入门(2): 状态 UI更新类组件

摘要：状态 UI无非就是应用程序的状态的一种表现形式. 我们已经了解ReactDOM.render()函数可以挂载或局部更新DOM, 但是我们需要一种更精妙的方式. 第一种方式: 渲染并重绘整个根节点每当应用程序状态有任何更新, 我们就刷新一次根节点, 这样是可以的, 毕竟React只会更新变化的节点, 阅读全文

posted @ 2020-09-01 15:38 develon 阅读(317) 评论(0) 推荐(0) 编辑

2020年8月31日

React 入门(1): 安装函数式组件 JSX

摘要：文档 react-dom(提供了可在应用顶层使用的DOM（特定于DOM）方法): https://zh-hans.reactjs.org/docs/react-dom.html 组件: https://zh-hans.reactjs.org/docs/components-and-props.htm 阅读全文

posted @ 2020-08-31 15:55 develon 阅读(314) 评论(0) 推荐(0) 编辑

Webpack (二) 自定义Loader

摘要： API文档 https://webpack.js.org/api/loaders/ Loader要素资源内容资源内容通过my-kotlin-loader.js导出的函数的形式参数传递进来. function custom_loader(file_content) { console.log({ 阅读全文

posted @ 2020-08-31 11:06 develon 阅读(229) 评论(0) 推荐(0) 编辑

2020年8月30日

(旧事重提) gcc的那些事

摘要：旧事 gcc 编译汇编链接 ⇒ https://www.cnblogs.com/develon/p/9690641.html 32位与64位应用程序要为不同平台交叉编译, 安装gcc-multilib即可. apt install -y gcc-multilib 接下来, 通过-m32和-m6 阅读全文

posted @ 2020-08-30 21:44 develon 阅读(138) 评论(0) 推荐(0) 编辑

2020年8月27日

2D绘图库 two.js

摘要：安装 wget https://raw.github.com/jonobr1/two.js/master/build/two.js wget https://raw.github.com/jonobr1/two.js/master/build/two.min.js npm install -D tw 阅读全文

posted @ 2020-08-27 17:54 develon 阅读(271) 评论(0) 推荐(0) 编辑

2020年8月25日

webpack之import 异步import

摘要：模块标准: CommonJS、AMD、CMD、ES6 Module CommonJS是Node.js原生支持的模块标准. 使用module.exports和require()函数. AMD和CMD比较相似, AMD的实现有require.js, CMD的实现有Sea.js. ES6 Module引入阅读全文

posted @ 2020-08-25 17:46 develon 阅读(5837) 评论(0) 推荐(1) 编辑

2020年8月24日

IDEA 自定义虚拟机选项

摘要： Gradle任务输出乱码 Help → Edit Custom Vm Options: -Dfile.encoding=utf-8 阅读全文

posted @ 2020-08-24 16:55 develon 阅读(1041) 评论(0) 推荐(0) 编辑

2020年8月22日

git 子模块 submodule

摘要：文档 https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97 为什么需要子模块观察项目 https://github.com/develon2015/MultiModule, 它依赖一个子模阅读全文

posted @ 2020-08-22 20:46 develon 阅读(1163) 评论(0) 推荐(0) 编辑

2020年8月21日

Gradle （三） Kotlin

摘要：添加插件和依赖 https://www.kotlincn.net/docs/reference/using-gradle.html https://kotlinlang.org/docs/reference/using-gradle.html 为了用 Gradle 构建 Kotlin 项目，需要设置阅读全文

posted @ 2020-08-21 09:38 develon 阅读(444) 评论(0) 推荐(0) 编辑

2020年8月20日

Gradle （二） SpringBoot模块化

摘要：文档 https://spring.io/guides/gs/multi-module/ 插件传递创建SpringBoot项目需要两个插件, 在根项目中声明: plugins { id 'org.springframework.boot' version '2.3.3.RELEASE' id 'i 阅读全文

posted @ 2020-08-20 10:02 develon 阅读(546) 评论(0) 推荐(0) 编辑

2020年8月19日

Gradle （一） Java 应用程序、SpringBoot插件

摘要：文档 https://docs.gradle.org/current/userguide/building_java_projects.html 从创建一个Java Application开始 Gradle为Java而生，因此内置Java标准插件：java。根据Java项目的类型，又有两种插件：ja 阅读全文

posted @ 2020-08-19 15:06 develon 阅读(929) 评论(0) 推荐(0) 编辑

2020年8月15日

葬花吟

摘要：花謝花飛花滿天，紅消香斷有誰憐？游絲軟系飄春榭，落絮輕沾撲繡簾。閨中女兒惜春暮，愁緒滿懷無釋處。手把花鋤出繡簾，忍踏落花來復去。柳絲榆莢自芳菲，不管桃飄與李飛；桃李明年能再發，明年閨中知有誰？三月香巢已壘成，梁間燕子太無情！明年花發雖可啄，卻不道人去梁空巢也傾。一年三百六十日，風刀霜阅读全文

posted @ 2020-08-15 00:14 develon 阅读(72) 评论(0) 推荐(0) 编辑

2020年8月14日

Gradle with Kotlin (二) 项目、Java项目、父子、同级共享代码

摘要：在 settings.gradle 中使用 include 包含项目 $ tree . ├── a │ └── build.gradle.kts ├── build.gradle.kts └── settings.gradle 1 directory, 3 files $ cat build.gra 阅读全文

posted @ 2020-08-14 16:39 develon 阅读(742) 评论(0) 推荐(0) 编辑

公告