美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 ANativeWindow 创建而来。对于鸿蒙而言，虽 然我们没有从公开文档找到类似的说明，但是 鸿蒙标准库 默认支持了 OpenGL ES， 而且鸿蒙 SDK 中也附带了 EGL 相关的库及头文件，我们有理由相信在鸿蒙系统上， EGLSurface 也可以通过此方法从前一步生成的 NativeLayer 转化而来，在之后的 验证中我们也确认了这一点： // window->handle() 化和性能相关的事项做的还比较少，例如： 前端 < 17 ● Flutter Web 构建产物较简陋，只是简单的输出 main.dart.js（1.1M，未 Gzip） 和 图片等静态资源，缺少 JS 拆包、文件 Hash、资源上传 CDN 等优 化工作，极大影响了页面的加载性能。 ● 由于 Flutter Web 自身实现了一套页面滚动机制，页面滚动过程中，会频繁计 算位置信息，引起滚动区域内容被重新创建，最终导致页面滚动性能较差。

开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 output ⽂文件越来越多 通过 npm scripts 清理理构建⽬目录 rm -rf ./dist && webpack rimraf ./dist && webpack ⾃自动清理理构建⽬目录 module cript_source_map.html source map 关键字 source map: 产⽣生.map⽂文件 eval: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom /(react|react-dom)/, name: 'vendors', chunks: 'all' } } } } }; 利利⽤用 SplitChunksPlugin 分离⻚页⾯面公共⽂文件 minChunks: 设置最⼩小引⽤用次数为2次 module.exports = { optimization: { splitChunks: { minSize: 0, cacheGroups:

版本的二进制文件。需要注意的是 ARM 版本的 Windows 目 前尚不支持. 预编译的 ia32 ( i686 ) 和 x64 ( amd64 ) 版本 Electron 二进制文件都是在Ubuntu 12.04 下编译 的， arm 版的二进制文件是在 ARM v7（硬浮点 ABI 与Debian Wheezy 版本的 NEON）下完成的。 预编译二进制文件是否能够运 Windows Linux 支持平台 - 6 - 本文档使用 书栈(BookStack.CN) 构建 为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的 资源文件夹下（在 macOS 中是指 Electron.app/Contents/Resources/ ，在 Linux 和 Windows 中是指 resources/ 就会以你的应用程序的方式启动。 electron 文件夹将被部署并可以分发给最终的使用者。 除了通过拷贝所有的资源文件来分发你的应用程序之外，你可以通过打包你的应用程序为一个 asar 库文件以避免暴 露你的源代码。 为了使用一个 asar 库文件代替 app 文件夹，你需要修改这个库文件的名字为 app.asar ，然后将其放到 Electron 的资源文件夹下，然后 Electron 就

ack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack.prod.js ·规范：Git commit日志、README、ESLint 规范、Semver 规范 ·质量：冒烟测试、单元测试、测试覆盖率和 CI ·SSR环境：webpack.ssr.js …… ·基础配置：webpack.base.js 通过 webpack-merge 组合配置 > merge = 题。 冒烟测试执行 ·是否有 JS、CSS 等静态资源文件 每次构建完成 build 目录是否有内容输出 ·是否有 HTML 文件 构建是否成功 判断构建是否成功 在示例项目里面运行构建，看看是否有报错 判断基本功能是否正常 ·是否有 JS、CSS 等静态资源文件 编写 mocha 测试用例 ·是否有 HTML 文件 单元测试与测试覆盖率 单纯的测试框架，需要断言库 集成框架，开箱即用

crash Bug管理 包大小分析 高可用 获取日志 远程调试 安全 接口防刷 插件平台 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 打开页面；获取定位 Listener 多个 全局 动态 未读消息数变化 静态 App启动；网络变化 Rule 多个 全局 静态 拦截页面跳转； 添加通用参数；打日志 SHOW CODE Main函数调用注册函数 根据pubspec文件修改 触发pubget动态生成 注册和分发执行 Register (类型和优先级) Global Store NextDisp Rule1-N NextDisp

响应性 深入响应性原理 响应式原理 响应式计算和侦听 组合 API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for 中的 对于制作原型或学习，你可以这样使用最新版本 1. 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： 安装 发布版本说明 Vue Devtools CDN 安装 - 7 - 本文档使用 书栈网 · BookStack.CN 构建 在用 Vue 构建大型应用时推荐使用 能很好地和诸如 Webpack (opens new window) 或 Browserify (opens new window) 模块打包器配合使用。同时 Vue 也提 供配套工具来开发单文件组件。 1. # 最新稳定版 2. $ npm install vue@next Vue 提供了一个官方的 CLI (opens new window)，为单页面应用 (SPA) 快速搭建繁杂的脚手

......8 2.2.2 创建包文件..........................8 2.2.3 启动服务器........................10 2.2.4 编辑 HTML 文件................11 2.3 向项目中添加 Angular 功能.....13 2.3.1 准备 HTML 文件................14 准备项目(Visual Studio) .......35 3.3.2 创建和编辑配置文件...........36 3.3.3 启用日志消息.....................39 3.3.4 更新 Bootstrap 包................39 3.3.5 移除文件 ...........................40 3.3.6 更新控制器、布局和视图 .................... 69 5.1 准备示例项目...........................70 5.1.1 创建 HTML 和 JavaScript 文件..................................71 5.1.2 配置 TypeScript 编译器........72 5.1.3 运行示例项目..........

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国 际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览 器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。 该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数 的 JavaScript 环境执行了。 配置文件 .babelrc Babel 的配置文件是 .babelrc ，存放在项目的根目录下。使用 Babel 的第一步， 就是配置这个文件。 该文件用来设置转码规则和插件，基本格式如下。 { "presets": [], "plugins": [] } babel-cli 基本用法如下。 ECMAScript 6简介 12 # 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js

模块 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 目录 README - 8 - 本文档使用 书栈网 · BookStack.CN 构建 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch

6.2 操作DOM 6.2.1 更新DOM 6.2.2 插入DOM - 2 - 本文档使用 书栈(BookStack.CN) 构建 6.2.3 删除DOM 6.3 操作表单 6.4 操作文件 6.5 AJAX 6.6 Promise 6.7 Canvas 7 jQuery 7.1 选择器 7.1.1 层级选择器 7.1.2 查找和过滤 7.2 操作DOM 7.2.1 修改DOM结构 包含的代码就是JavaScript代码，它将直接被浏览器执行。 第二种方法是把JavaScript代码放到一个单独的 .js 文件，然后在HTML中通过 引入这个文件： 1. 2. 3. 4. 这样， /static/js/abc.js 就会被浏览器执行。 把JavaScript代码放入一个单独的 .js 文件中更利于维护代码，并且多个页面可以各自引用同一 份 .js 文件。 可以在同一个页面中引入多个 .js 文件，还可以在页面中多次编写 ，浏览器按照顺序依次执行。 有些时候你会看到