海外应用总结

geofryzheng · realgeoffrey · commit 0158a36578da · 2023-09-19T16:57:09.000+08:00
diff --git a/环境安装、配置/Laravel框架配置+LNMP环境配置（Ubuntu15.04）/README.md b/环境安装、配置/Laravel框架配置+LNMP环境配置（Ubuntu15.04）/README.md
@@ -5,6 +5,8 @@
     >安装完毕之后可以删除ios虚拟光盘
 2. 安装LNMP环境
 
+    >LNMP：Linux Nginx MySQL PHP。
+
     1. 安装**php5-fpm**，并安装**php5-mcrypt**和**php5-curl**和**php5-cli**和**php5-gd**扩展
 
         ```shell
diff --git a/环境安装、配置/WAMP环境配置（Windows）/README.md b/环境安装、配置/WAMP环境配置（Windows）/README.md
@@ -4,6 +4,8 @@
 >
 >win7以上系统可以安装最新版，xp只能安装2.2e及更低版本。
 
+>WAMP：Windows Apache MySQL PHP。
+
 1. 安装
 
     安装接近尾声时会提示选择程序打开的**浏览器**和**文本编辑器**。
diff --git a/网站前端/HTML+CSS学习笔记/README.md b/网站前端/HTML+CSS学习笔记/README.md
@@ -1752,7 +1752,7 @@ CSS渐变是以CSS背景图的形式展示，但没有内在尺寸（没有固
     1. 除了要检测用户输入标签的闭合性之外，还要注意富文本编辑器的祖先元素不要用`<li>`嵌套。
 
         因为代码中若有单独的`<li>`（没有嵌套`<ol>`或`<ul>`），则会「越级」到跟祖先级`<li>`同级的内容。
-    2. 大部分富文本会用`<em>`、`<ol>`、`<ul>`等标签来表示**斜体**、**有序序列**、**无序序列**，因此若用CSS重置了以上标签的样式后，则要在[富文本内重载开启它们的默认效果](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/初始化模板/cssReset.scss#L61-L77)（或定制效果）。
+    2. 大部分富文本会用`<em>`、`<ol>`、`<ul>`等标签来表示**斜体**、**有序序列**、**无序序列**，因此若用CSS重置了以上标签的样式后，则要在[富文本内重载开启它们的默认效果](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/初始化模板/cssReset.scss#L63-L79)（或定制效果）。
     3. 大部分富文本会在`<table>`上使用`cellspacing`、`border`、`bordercolor`属性设置表格，又因为设置了`border: 0;`的表格无法重载开启以上属性作用，所以CSS重置时[不要重置`table,tbody,tfoot,thead,tr,th,td`的`border`属性](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/初始化模板/cssReset.scss#L26-L27)。
 2. 针对`contenteditable="true"`的DOM内容：
 
diff --git a/网站前端/Hybrid前端开发/README.md b/网站前端/Hybrid前端开发/README.md
@@ -293,7 +293,7 @@ Hybrid底层依赖Native提供的容器（WebView），上层使用HTML、CSS、
 
     ![WebView启动流程](./images/webview-2.png)
 
-    1. 相对于Native App的流畅体验，WebView的页面瓶颈一般都卡在WebView实例初始化，可能导致App卡顿、页面加载缓慢。
+    1. 相对于Native App的流畅体验，WebView的页面瓶颈一般都卡在**WebView实例初始化**，可能导致App卡顿、页面加载缓慢。
 
         WebView的初始化、保持，占用较多内存。
     2. 与浏览器不同，App中打开WebView的第一步并不是建立连接，而是启动浏览器内核。
diff --git a/网站前端/JS学习笔记/README.md b/网站前端/JS学习笔记/README.md
@@ -3734,14 +3734,14 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
             `$dom.innerHeight()`
         2. height+padding+border：
 
-            `dom.offsetHeight`
+            `dom.offsetHeight`（元素的像素高度，包含该元素的垂直内边距和边框，且是一个整数。理解为一个设置的高度）
 
             或
 
             `$dom.outerHeight()`
     2. 节点内容高度：
 
-        `dom.scrollHeight`
+        `dom.scrollHeight`（元素内容高度的度量，包括由于溢出导致的视图中不可见内容。）
     3. 节点内滚动距离：
 
         `dom.scrollTop`
diff --git a/网站前端/Vue.js学习笔记/README.md b/网站前端/Vue.js学习笔记/README.md
@@ -1477,7 +1477,7 @@
 
                 若已添加`scoped`的子组件也添加`scoped`，则增加一份子组件的自定义`attributes`。
 
-                >深度作用选择器：若希望`scoped`样式中的一个选择器能够作用得「更深」（如：影响子组件），则可使用`>>>`或`/deep/`或`::v-deep`操作符（不支持预处理器，如：~~scss~~）。
+                >深度作用选择器：若希望`scoped`样式中的一个选择器能够作用得「更深」（如：影响子组件），则可使用`>>>`或`/deep/`或`::v-deep`操作符（不支持CSS预处理器，如：~~scss~~）。
                 >
                 >e.g.
                 >```vue
diff --git a/网站前端/其他前端专项/海外应用总结/README.md b/网站前端/其他前端专项/海外应用总结/README.md
@@ -1,2 +1,111 @@
-todo
-from  https://github.com/realgeoffrey/knowledgePrivate/blob/master/TME/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE/README.md#%E5%A4%9A%E8%AF%AD%E8%A8%80%E6%94%AF%E6%8C%81
+# 海外应用总结
+
+## 目录
+1. [语言问题](#语言问题)
+1. [书写顺序](#书写顺序)
+1. [翻译系统](#翻译系统)
+1. [其他](#其他)
+
+---
+### 语言问题
+1. 文字长短不一、文字高度不一
+2. 书写顺序，`ltr`、`rtl`（整个界面布局习惯跟随书写顺序变化）
+3. 时间问题：日期显示，时区，历法
+
+    >[dayjs](https://github.com/iamkun/dayjs)
+4. 数字标点（如：小数分隔符，千位分隔符）
+5. 货币单位
+6. 字符集
+7. 复数规则（zero、one、two、few、many、other）
+
+    >[js-lingui](https://github.com/lingui/js-lingui)
+8. 性别问题
+9. 序数（1st、2nd、3rd、4th、等）
+10. 安全性和敏感性（文化、宗教与民族、地缘政治、节日、手势含义、当地法律法规、颜色含义、数字忌讳）
+11. 词汇的上下文（如：某一个词汇有多重含义）、大小写含义变化的词
+
+### 书写顺序
+>阿拉伯文、希伯来文，波斯文 等从右至左的语言文字。
+
+1. HTML全局设置整个DOM
+
+    `<html dir="ltr或rtl">`
+2. CSS设置左右翻转（镜像）
+
+    1. `transform: scaleX(-1)`
+    2. `text-align: right`
+
+    - 镜像方案
+
+        ```html
+        <!-- 利用 transform 实现全局镜像（左右颠倒） -->
+        <div style="transform: scaleX(-1)">
+          <!-- 文字向右对齐，重置镜像 -->
+          <p style="transform: scaleX(-1); text-align: right;">
+            居右 على الرغم من أن لديه بعض الصعوبات على سبيل المثال
+            <br>، بعض الرجل يمكن أن مجرد فتح devtools وإزالة أو تغيير قسم
+            'لانغ'. لمنع هذا ، أوصي بوضعه في المتغير.
+            </Text>
+            </View>
+          </p>
+
+          <!-- 镜像（左右颠倒） -->
+          <div>
+            镜像的内容123
+          </div>
+        </div>
+        ```
+
+        1. 当镜像一个 UI 时，这些元素会发生改变：
+
+            1. **文本框图标**显示在字段的另一侧
+            2. **导航按钮**以相反的顺序显示
+            3. 表示方向的**图标**会被镜像，如：箭头
+            4. **文本**（如果它被翻译为 RTL 语言）右对齐
+
+        >具体参考：[苹果指南](https://developer.apple.com/cn/design/human-interface-guidelines/right-to-left)、[Material Design 指南](https://www.mdui.org/design/usability/bidirectionality.html)、[微软指南](https://learn.microsoft.com/zh-cn/windows/apps/design/globalizing/design-for-bidi-text)。
+3. 细节注意
+
+    1. 动画、绝对定位的数值是否考虑取负值
+    2. 方向敏感的图标考虑是否翻转（在RTL下，箭头向右表示后退，向左表示前进）
+    3. 留意文字长度（如：阿拉伯文أَبْجَدِيَّة عَرَبِيَّة宽度较长）、留意文字高度（如：泰文อักษรไทย高度较高）
+
+        >有点类似兼容颜文字。
+
+        - 针对文字高度问题，解决方案：
+
+            1. 不要写死`line-height`或`height`（或用`min-height`代替），让高的字体文字自动撑开。
+
+                >无法按照UI设计的确定高度展示，因此方案比较粗糙。
+            2. 针对特定的语言（如：泰文），设置更高的行高 或 计算dom.scrollHeight（渲染后的内容高度）大于dom.offsetHeight（设置高度、容器高度）就增加行高。
+
+                - 进阶：先找到font-size和渲染高度的关系（如：确定泰文[音标]影响高度的细节和对应关系），再用上面的进行兜底。
+
+### 翻译系统
+>**国家/地区**：构建时、运行时都区分；**语言**：运行时替换。一个国家/地区 绑定 多个语言（App内的 语言 可以切换，国家/地区 不可以切换。国家/地区 在下载App时确定）。
+
+1. 构建时 按照国家/地区产生对应的代码文件
+
+    1. 在前端构建阶段，通过翻译系统的接口，拉取带翻译的.json文件到本地
+2. 开发时，用文本id（可以直接用文本内容）作为key，展示时会被替换成翻译好的内容
+
+    >语言包从代码中解藕。
+
+    1. ~~方案一~~
+
+        代码中提取待翻译词条，整理成资源文件或上传翻译平台，翻译完成后，最后下载到应用中。
+    2. 方案二
+
+        先由需求方总结列出所有需要用到的翻译词条，并在翻译平台上对每一条词条创建key，最后把key手动填入代码。
+
+        >优点：开发和翻译流程可以**并行**。缺点：需要和需求方进行词条的沟通，翻译的词条格式不可控（要么需要需求方了解翻译的格式，要么舍弃掉复数、性别等翻译，只实现最基本的变量替换翻译，或者像i18next那样，单数和复数的词条分开翻译）。
+3. 按国家/地区
+
+    1. 构建时生成 根据文件后缀区分国家/地区 的代码文件，如：`.th.tsx/scss/js`
+
+        >id->Indonesia、ms->Malaysia、th->Thailand、ph->Philippines、vi->Vietnam、me->Middle East。
+    2. 构建时、运行时，通过读取App环境变量（国家/地区或语言），根据代码if-else处理不同国家/地区逻辑
+
+### 其他
+1. 海外资源CDN加速，如：<https://www.akamai.com>
+2. 海外支付体系的建设
diff --git a/网站前端/前端内容/README.md b/网站前端/前端内容/README.md
@@ -105,7 +105,7 @@
     1. 服务器开启gzip（如：nginx）。
 
         >前端查看Response头是否有：`Content-Encoding: gzip`。
-    2. 优先开启使用HTTP/2（替代HTTP/1.1、HTTP/1.0）
+    2. 优先开启使用[HTTP/2](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/HTTP相关/README.md#http持久连接websockethttp2)（替代HTTP/1.1、HTTP/1.0）
     3. 减少DNS查找，设置合适的TTL值，避免重定向。
     4. 使用CDN。
     5. [静态资源和API分开域名放置](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/前端内容/基础知识.md#静态资源使用额外域名的原因)；尽量减少保存进cookie的数据种类和大小（因为同源的cookie会全部参与HTTP通讯）；合理减少HTTP头数量。
@@ -235,6 +235,9 @@
                     1. 在Vue实例内部`new`的其他实例或DOM，应放在`data`内进行掌控，当使用完毕后引导垃圾回收。
                     2. 在Vue实例内部手动绑定的事件（如：`addEventListener`）、计时器、http连接、以及任何需要手动关闭的内容，需要在`beforeDestroy`前手动清除（`destroyed`仅自动清除Vue自己定义、绑定的内容）。
                 </details>
+        9. 针对长列表考虑虚拟列表，针对非可见区域考虑先销毁
+
+            注意分析具体场景下重新创建的优劣。
     3. HTML：
 
         1. 减少层级嵌套。

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@`
`4`	`4`	`>`
`5`	`5`	`>win7以上系统可以安装最新版，xp只能安装2.2e及更低版本。`
`6`	`6`
	`7`	`+>WAMP：Windows Apache MySQL PHP。`
	`8`	`+`
`7`	`9`	`1. 安装`
`8`	`10`
`9`	`11`	`安装接近尾声时会提示选择程序打开的浏览器和文本编辑器。`
Original file line number	Diff line number	Diff line change
`@@ -1477,7 +1477,7 @@`
`1477`	`1477`
`1478`	`1478`	若已添加`scoped`的子组件也添加`scoped`，则增加一份子组件的自定义`attributes`。
`1479`	`1479`
`1480`		- >深度作用选择器：若希望`scoped`样式中的一个选择器能够作用得「更深」（如：影响子组件），则可使用`>>>`或`/deep/`或`::v-deep`操作符（不支持预处理器，如：~~scss~~）。
	`1480`	+ >深度作用选择器：若希望`scoped`样式中的一个选择器能够作用得「更深」（如：影响子组件），则可使用`>>>`或`/deep/`或`::v-deep`操作符（不支持CSS预处理器，如：~~scss~~）。
`1481`	`1481`	`>`
`1482`	`1482`	`>e.g.`
`1483`	`1483`	>```vue