From a0546d2d93135a1776b021de67f32fa99a8a1dc4 Mon Sep 17 00:00:00 2001 From: lmj01 Date: Sat, 27 Apr 2024 07:31:23 +0800 Subject: [PATCH] update --- cpl/Java.md | 7 ++ {web => cpl}/typescript.md | 0 index/article.md | 13 ++++ web/hover.md | 70 ----------------- web/html.md | 73 ++++++++++++++++++ web/i18n.md | 35 --------- web/index.md | 152 +++++++++++++++++++++++++++---------- web/pkg.md | 14 +++- web/test.md | 69 ----------------- 9 files changed, 215 insertions(+), 218 deletions(-) rename {web => cpl}/typescript.md (100%) delete mode 100644 web/hover.md delete mode 100644 web/i18n.md delete mode 100644 web/test.md diff --git a/cpl/Java.md b/cpl/Java.md index 23562e8..29a2f58 100644 --- a/cpl/Java.md +++ b/cpl/Java.md @@ -253,3 +253,10 @@ spring.data.neo4j.uri=http://localhost:7474 + +## 库 + +### [itext](https://api.itextpdf.com/iText/java/) +> v7.1.8 + +- A4 width:595.0, height:842.0 \ No newline at end of file diff --git a/web/typescript.md b/cpl/typescript.md similarity index 100% rename from web/typescript.md rename to cpl/typescript.md diff --git a/index/article.md b/index/article.md index 2bab875..f081d8d 100644 --- a/index/article.md +++ b/index/article.md @@ -40,6 +40,19 @@ - [diff算法原理](../web/diff.md) - [使用过的库](../web/library.md) - [FRP-Functional Reactive Programming](../cpl/frp.md) +- [web](./web.md) +- [浏览器](./browser.md) +- [html](./html.md) +- [CSS](./css.md) +- [适配屏幕](./adapt.screen.md) +- [font](./font.md) +- [http](./http.md) +- [nginx](./nginx.md) +- [javascript](./JavaScript.md) + - [typescript](./typescript.md) + - [bable](./babel.md) + - [vue](./vue.md) + ### 图形学 - [裁剪](../cg/tools/culling.md) diff --git a/web/hover.md b/web/hover.md deleted file mode 100644 index 239f0b0..0000000 --- a/web/hover.md +++ /dev/null @@ -1,70 +0,0 @@ -# hover - -```html - -
-

hover on element

-
-

other information

-
-
-``` -悬浮打开与关闭某些元素，按照上面的样式就可以 - -```html - -
-
-
-
-
-``` -注意，one的hover之间是否有空格， -有空格hover的范围是子元素 -无空格hover的范围是父元素 - -:hover必须置于:link和:visited之后 - -一定不要混乱元素的层级，比如在child中的有比它高的样式，就会出现各种问题 -如果测试一个简单的样式，很容易确认，可是一旦牵扯到多个样式，且多个样式挨着时， -问题就会出现各种问题！ diff --git a/web/html.md b/web/html.md index ba8840b..74a99ee 100644 --- a/web/html.md +++ b/web/html.md @@ -69,6 +69,79 @@ onselectstart="return false;" // 文字禁止鼠标选中 onselect="documnet.selection.empty();" // 禁止复制 ``` +## 其他 + +### hover +```html + +
+

hover on element

+
+

other information

+
+
+``` +悬浮打开与关闭某些元素，按照上面的样式就可以 + +```html + +
+
+
+
+
+``` +注意，one的hover之间是否有空格， +有空格hover的范围是子元素 +无空格hover的范围是父元素 + +:hover必须置于:link和:visited之后 + +一定不要混乱元素的层级，比如在child中的有比它高的样式，就会出现各种问题 +如果测试一个简单的样式，很容易确认，可是一旦牵扯到多个样式，且多个样式挨着时， +问题就会出现各种问题！ + + ## TemplateEngine 模板的诞生就是为了将显示与数据分离，把数据替换为模板中的一些项，最终得到html文件就是模板引擎的工作。 diff --git a/web/i18n.md b/web/i18n.md deleted file mode 100644 index 961f292..0000000 --- a/web/i18n.md +++ /dev/null @@ -1,35 +0,0 @@ -# 多语言 -> i18n是国际化的英文为 internationalization，为了方便，通常会简写为 i18n（开头的 i、中间的 18 个字符、末尾的 n） - -分三类信息， -- message，文本的替换 -- date time format，时间日期的格式 -- number，数字格式，货币形式等 - -但难点还是很多的： -- 多语言的没有标准，使用起来就存在各种兼容的问题，如中文有zh,zh_CN等来区分中文， 可参考BCP 47，全称为Best Current Practice for Tags for the Identification of Languages，是一个基于RFC 5646标准的语言标签格式的建议标准。 -- 多语言还是影响视觉设计，开发时就需要考虑这些问题，不同语言的表述会导致字符的长度差异较大 -- 语言的字段是复用还是语义化，都是一个难点，随着需求的变化可能会有很大的影响 -- 符合用户习惯与不同文化的需求 - - -## web - -**vue** - -把i18n实列对象放入Vue的实例中，通过this.$i18n.locale='zh'来设置对应的语言 - -也可以存储在store或cookie中， - -但对惰性组件，如echarts这类需要重新渲染的，就需要手动处理了，方法有： -- 利用watch监听locale字段是否发现变化，主动调用重新渲染 -- locale变化时直接this.reload强制刷新页面 - -```js -new Vuei81n({ - locale:'', - messages: {}, // $t(path) - numberFormats: {}, // $n() - dateTimeFormats: {}, // $d() -}) -``` \ No newline at end of file diff --git a/web/index.md b/web/index.md index 9d06295..51661f1 100644 --- a/web/index.md +++ b/web/index.md @@ -1,22 +1,41 @@ # Web -- [web](./web.md) - - [浏览器](./browser.md) -- [html](./html.md) - - [hover](./hover.md) -- [CSS](./css.md) - - [适配屏幕](./adapt.screen.md) - - [font](./font.md) - -- [http](./http.md) - - [nginx](./nginx.md) - -- [javascript](./JavaScript.md) - - [typescript](./typescript.md) - - [bable](./babel.md) - - [vue](./vue.md) -- [多语言i18n](./i18n.md) - [Web Check网站分析，分析各种配置，可参考网站的配置](https://web-check.as93.net/) +- [Draggable objects可拖动的对象网页实现](https://www.redblobgames.com/making-of/draggable/) + +## 多语言 +> i18n是国际化的英文为 internationalization，为了方便，通常会简写为 i18n（开头的 i、中间的 18 个字符、末尾的 n） + +分三类信息， +- message，文本的替换 +- date time format，时间日期的格式 +- number，数字格式，货币形式等 + +但难点还是很多的： +- 多语言的没有标准，使用起来就存在各种兼容的问题，如中文有zh,zh_CN等来区分中文， 可参考BCP 47，全称为Best Current Practice for Tags for the Identification of Languages，是一个基于RFC 5646标准的语言标签格式的建议标准。 +- 多语言还是影响视觉设计，开发时就需要考虑这些问题，不同语言的表述会导致字符的长度差异较大 +- 语言的字段是复用还是语义化，都是一个难点，随着需求的变化可能会有很大的影响 +- 符合用户习惯与不同文化的需求 + + +### **vue** + +把i18n实列对象放入Vue的实例中，通过this.$i18n.locale='zh'来设置对应的语言 + +也可以存储在store或cookie中， + +但对惰性组件，如echarts这类需要重新渲染的，就需要手动处理了，方法有： +- 利用watch监听locale字段是否发现变化，主动调用重新渲染 +- locale变化时直接this.reload强制刷新页面 + +```js +new Vuei81n({ + locale:'', + messages: {}, // $t(path) + numberFormats: {}, // $n() + dateTimeFormats: {}, // $d() +}) +``` ## library @@ -41,7 +60,7 @@ - [The WYSIWYG Editor of tomorrow available today](https://ckeditor.com/) - [CKEditor 5 is an ultra-modern JavaScript rich-text editor with MVC architecture, a custom data model, and virtual DOM](https://github.com/ckeditor/ckeditor5) -- [Your powerful rich text editor.](https://quilljs.com/) +- [Quill -- Your powerful rich text editor.](https://quilljs.com/) - [github](https://github.com/quilljs/quill) ### PDF @@ -49,7 +68,7 @@ - [PDF-LIB可写可修改](https://pdf-lib.js.org/) 字体必须内嵌，这样文件非常大，拷贝合并pdf时，内嵌字体还没法删除 - [github](https://github.com/Hopding/pdf-lib) -- [jspdf只能写](https://github.com/parallax/jsPDF) +- [jspdf只能写 github](https://github.com/parallax/jsPDF) ### 数学 - [regression-js是JS库，包含了linear least-squares filting methods对的数据分析方法，支持linear、exponential、logarithmic、power、polynomial几种常见的](https://github.com/Tom-Alexander/regression-js) @@ -83,24 +102,6 @@ jszip.loadAsync(new Blob([buffer])).then(zip=>{ - [An image magnifier for JavaScript](https://github.com/nishanths/loupe-js) - [demo](https://nishanths.github.io/loupe-js/?shape=rectangle) -## 参考 - -- [Draggable objects可拖动的对象网页实现](https://www.redblobgames.com/making-of/draggable/) - -# Node - -## 构建工具 - -### [Parcel](https://parceljs.org/docs/) - -Parcel is a zero configuration build tool for the web - -### [rollup](https://rollupjs.org/introduction/) - -Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. I - - -## 相关库 ### UI - [bootstrap](https://getbootstrap.com/) @@ -108,11 +109,6 @@ Rollup is a module bundler for JavaScript which compiles small pieces of code in - [naive ui](https://www.naiveui.com/en-US/os-theme) - -### 其他 - -- [jspdf](https://github.com/parallax/jsPDF) - - [npmjs](https://www.npmjs.com/package/jspdf) - [Element Plus](https://element-plus.org/en-US/component/button.html) - [ Fabric.js is a powerful and simple Javascript HTML5 canvas library ](http://fabricjs.com/) @@ -126,4 +122,76 @@ Rollup is a module bundler for JavaScript which compiles small pieces of code in - [github](https://github.com/jscad) - [open jscad](https://openjscad.xyz/) - [CADit.app](https://cadit.app/) - - [A jscad UI playground developed here and meant to be later contributed into jscad](https://github.com/hrgdavor/jscadui) \ No newline at end of file + - [A jscad UI playground developed here and meant to be later contributed into jscad](https://github.com/hrgdavor/jscadui) + +## 参考 + +# Test + +# Test + +测试 + +## TDD + +测试驱动开发， 在开发功能代码之前，先编写单元测试用例代码，确定需要编写的代码逻辑。TDD是XP(Extreme Programming)的核心实践 + +## BDD + +行为驱动开发， + +“开发软件系统最困难的部分就是准确说明开发什么” (“The hardest single part of building a software system is deciding precisely what to build” — No Silver Bullet, Fred Brooks) + +BDD(Behavior Driven Development), 提出者 Dan North 强调 BDD 不是关于测试的，它是在应用程序存在之前，写出用例与期望，从而描述应用程序的行为，并且促使在项目中的人们彼此互相沟通 + +测试相关的配置 + +vue创建工程时，有一个[Manually select features](https://lmiller1990.github.io/vue-testing-handbook/zh-CN/setting-up-for-tdd.html#%E5%AE%89%E8%A3%85-vue-cli)中可配置 + +## Vue Test Utils + +the official unit testing utility library for Vue + +组件对应的测试文件.spec.js + + +## Jest + + +## Karma + +npm install --save-dev karma karma-mocha karma-chrome-launcher karma-mocha-reporter karma-webpack mocha mocha-sinon sinon sinon-chai webpack karma-chai chai + +运行 +node .\node_modules\karma\bin\karma start +node .\node_modules\karma\bin\karma init + +- [karma.conf.js配置](https://karma-runner.github.io/5.2/config/configuration-file.html) +- [karma-coverage](https://github.com/karma-runner/karma-coverage)测试覆盖率 + +## webpack + +需要打包vue组件 +webpack karma-webpack + +使用bable处理ES6语法 +babel-core babel-loader babel-preset-es2015 + +Vue-cli3开始把webpack.config.js隐藏在node_modules/@vue/cli-service/webpack.config.js 直接引用这个就可以了, **这一步很重要，否则webpack的配置很难处理** + +## [Jasmine](https://github.com/jasmine/jasmine) + +TDD(Test Driven Development)测试驱动开发的框架， + +[Behavior-Driven JavaScript docs](https://jasmine.github.io/pages/docs_home.html) + +[2.9](https://jasmine.github.io/2.9/introduction) + +## [chai](https://github.com/chaijs/chai) + +[document](https://www.chaijs.com/) + +## 参考 + +- [BDD](https://insights.thoughtworks.cn/when-we-talk-about-bdd/) +- [vue unit test](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html) \ No newline at end of file diff --git a/web/pkg.md b/web/pkg.md index a238744..1c3666c 100644 --- a/web/pkg.md +++ b/web/pkg.md @@ -56,6 +56,9 @@ pnpm add libName --save // 按照库 pnpm store status // 会出现问题， pnpm store path // 缓存路径 pnpm store prune // 删除缓存 +// 工作区 +pnpm add react -w // 全局公共依赖 +pnpm add react --filter pkg1 // 指定项目按照 ``` ## [Yarn is a package manager](https://yarnpkg.com/) @@ -77,9 +80,16 @@ yarn config delete registry yarn add libraryName -W --registry https://registry.npm.taobao.org ``` -## [Rollup](https://rollupjs.org/introduction/) +## 打包工具 -## [webpack](https://www.webpackjs.com/) +### [Rollup](https://rollupjs.org/introduction/) +Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. + +### [webpack](https://www.webpackjs.com/) + +### [Parcel](https://parceljs.org/docs/) + +Parcel is a zero configuration build tool for the web ## 相关库 diff --git a/web/test.md b/web/test.md deleted file mode 100644 index 54cbcf2..0000000 --- a/web/test.md +++ /dev/null @@ -1,69 +0,0 @@ -# Test - -# Test - -测试 - -## TDD - -测试驱动开发， 在开发功能代码之前，先编写单元测试用例代码，确定需要编写的代码逻辑。TDD是XP(Extreme Programming)的核心实践 - -## BDD - -行为驱动开发， - -“开发软件系统最困难的部分就是准确说明开发什么” (“The hardest single part of building a software system is deciding precisely what to build” — No Silver Bullet, Fred Brooks) - -BDD(Behavior Driven Development), 提出者 Dan North 强调 BDD 不是关于测试的，它是在应用程序存在之前，写出用例与期望，从而描述应用程序的行为，并且促使在项目中的人们彼此互相沟通 - -测试相关的配置 - -vue创建工程时，有一个[Manually select features](https://lmiller1990.github.io/vue-testing-handbook/zh-CN/setting-up-for-tdd.html#%E5%AE%89%E8%A3%85-vue-cli)中可配置 - -## Vue Test Utils - -the official unit testing utility library for Vue - -组件对应的测试文件.spec.js - - -## Jest - - -## Karma - -npm install --save-dev karma karma-mocha karma-chrome-launcher karma-mocha-reporter karma-webpack mocha mocha-sinon sinon sinon-chai webpack karma-chai chai - -运行 -node .\node_modules\karma\bin\karma start -node .\node_modules\karma\bin\karma init - -- [karma.conf.js配置](https://karma-runner.github.io/5.2/config/configuration-file.html) -- [karma-coverage](https://github.com/karma-runner/karma-coverage)测试覆盖率 - -## webpack - -需要打包vue组件 -webpack karma-webpack - -使用bable处理ES6语法 -babel-core babel-loader babel-preset-es2015 - -Vue-cli3开始把webpack.config.js隐藏在node_modules/@vue/cli-service/webpack.config.js 直接引用这个就可以了, **这一步很重要，否则webpack的配置很难处理** - -## [Jasmine](https://github.com/jasmine/jasmine) - -TDD(Test Driven Development)测试驱动开发的框架， - -[Behavior-Driven JavaScript docs](https://jasmine.github.io/pages/docs_home.html) - -[2.9](https://jasmine.github.io/2.9/introduction) - -## [chai](https://github.com/chaijs/chai) - -[document](https://www.chaijs.com/) - -## 参考 - -- [BDD](https://insights.thoughtworks.cn/when-we-talk-about-bdd/) -- [vue unit test](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html) \ No newline at end of file