概述 Web 开发技术-JavaScript VCG JavaScript 2020/4/28 2 内容提要 1 JavaScript 简史 2 JavaScript 功能、脚本语言 3 JavaScript 实现 ECMAScript DOM BOM 4 在 HTML 中使用 JavaScript 直接嵌入 外部引入 JS 代码压缩 2 VCG JavaScript Explorer 3 中加入名为 JScript 的 JavaScript 实现. 1997：JavaScript 标准化 – ECMAScript 欧洲计算机制造商协会（ECMA） 39 号技术委员会（TC39）负责“标准化一种通用、跨平台、 供应商中立的脚本语言的语法和语义”。 定义一种名为 ECMAScript 的新脚本语言标准。 1998：ISO/IEC 采用 ECMAScript 2020/4/28 21 4.3 引入外部文件 JavaScript 代码压缩 优势：去除 JavaScript 文件中的注释和不必要的空格，并简化命名标识符。它通常减少了一半的文件大小， 从而导致更快的下载速度，并增加了一定的安全性。 扩展名：*.min.js 压缩工具：YUI Compressor、在线压缩（https://www.css-js.com/）等 在 HTML 中使用

2019-2021美团技术年货 CODE A BETTER LIFE 【前端篇】 前端 | 2021 1 让 Flutter 在鸿蒙系统上跑起来 1 FlutterWeb 在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React

Web的未来 新技术和新语言带来的改变 hanguokai@gmail.com 韩国恺 @hanguokai 韩国恺 开发者9Y+ 技术爱好者 学习 上网 动漫、电影 健身 Google fans 与 Dart 的缘分 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇 a. Web Components b. Polymer 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome OS 基于浏览器和云端环境的 OS Chromebook 搭载 App 应该更像 App 而不是一个浏览器 Tab 4. 用户并不关心背后用的是什么技术。 a. App做壳，Web做核 b. Web 会与 OS 更紧密集成，直接提供 Web引擎支持 Chrome App Launcher Chrome Apps Chrome App vs 桌面 App 技术上: ● 独立的窗口 ● 离线使用 ● 通知栏 ● App Launcher

7.5.1 1.7.5.2 1.8 1.8.1 1.8.2 ⽬录 前⾔ Electron简介 应⽤举例 安装 基本使⽤ 打包和部署 python⽀持 ⼼得 开发 Web技术 Log⽇志 打包 制作app的Logo asar files electron-builder electron-rebuild 不同系统 Win Mac 不同语⾔ Python ⽤；以及如何打包和部署； 专⻔整理了如何让Electron⽀持Python以及其后的相关⼼得；总结了Electron的各种开发经验和⼼得， ⽐如开发⽅⾯的Web技术、Log⽇志等；打包⽅⾯的如何制作app的logo、asar加密压缩、files参数、 打包⼯具electron-builder、编译⼯具electron-rebuild等，以及常⻅的系统如Windows和Mac系统中常⻅ 问题 注了出处。如有发现侵犯您版权，请通过邮箱联系我 admin 艾特 crifan.com ，我会尽快删除。谢谢 合作。 鸣谢 感谢我的⽼婆陈雪的包容理解和悉⼼照料，才使得我 crifan 有更多精⼒去专注技术专研和整理归纳出 这些电⼦书和技术教程，特此鸣谢。 更多其他电⼦书 本⼈ crifan 还写了其他 100+ 本电⼦书教程，感兴趣可移步⾄： crifan/crifan_ebook_readme: Crifan的电⼦书的使⽤说明

1.6.1.12 1.6.1.13 目录 Introduction 前端开发者是什么？ 2016 前端开发回顾 展望 2017 第一部分. 前端实践 前端职称 前端开发者所使用的技术 前端开发技能 前端开发者为 ... 而开发 团队里的前端 全能型人才/全栈神话 前端面试 前端开发职位公示 前端开发薪资 前端开发者是如何诞生的 第二部分：学习前端开发 自学 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 笔者有意将本书打造为一份专业资料，为想要或正在实践的前端开发者们提供学习材料和开 发工具。其次，它同样可供主管、CTO、讲师和猎头们深入探索前端开发实践。 本书内容偏向于 WEB 技术（HTML、CSS、DOM、JavaScript）和以这些技术为根基直接构 建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方 案。 本书不是一本囊括所有前端可用资源的综合纲领。其价值在于为恰好够用的分类信息搜罗简

，可以通过以下命令克隆本仓库： git clone https://github.com/krahets/hello-algo.git 当然，你也可以在图 0‑4 所示的位置，点击“Download ZIP”按钮直接下载代码压缩包，然后在本地解压即 可。 第 0 章 前言 hello‑algo.com 7 图 0‑4 克隆仓库与下载代码 第三步：运行源代码。如图 0‑5 所示，对于顶部标有文件名称的代码块，我们可以在仓库的 不是，该图展示的是空间复杂度，其反映的是增长趋势，而不是占用空间的绝对大小。 假设取 ? = 8 ，你可能会发现每条曲线的值与函数对应不上。这是因为每条曲线都包含一个常数项，用于将 取值范围压缩到一个视觉舒适的范围内。 在实际中，因为我们通常不知道每个方法的“常数项”复杂度是多少，所以一般无法仅凭复杂度来选择 ? = 8 之下的最优解法。但对于 ? = 85 就很好选了，这时增长趋势已经占主导了。 GB2312 的基础上扩展得到的，它共收录了 21886 个汉字。在 GBK 的编码方案中，ASCII 字符使用一个字节表示，汉字使用两个字节表示。 3.4.3 Unicode 字符集 随着计算机技术的蓬勃发展，字符集与编码标准百花齐放，而这带来了许多问题。一方面，这些字符集一般 只定义了特定语言的字符，无法在多语言环境下正常工作。另一方面，同一种语言存在多种字符集标准，如 果两台计算机使用

，可以通过以下命令克隆本仓库： git clone https://github.com/krahets/hello-algo.git 当然，你也可以在图 0‑4 所示的位置，点击“Download ZIP”按钮直接下载代码压缩包，然后在本地解压即 可。 第 0 章 前言 hello‑algo.com 7 图 0‑4 克隆仓库与下载代码 第三步：运行源代码。如图 0‑5 所示，对于顶部标有文件名称的代码块，我们可以在仓库的 不是，该图展示的是空间复杂度，其反映的是增长趋势，而不是占用空间的绝对大小。 假设取 ? = 8 ，你可能会发现每条曲线的值与函数对应不上。这是因为每条曲线都包含一个常数项，用于将 取值范围压缩到一个视觉舒适的范围内。 在实际中，因为我们通常不知道每个方法的“常数项”复杂度是多少，所以一般无法仅凭复杂度来选择 ? = 8 之下的最优解法。但对于 ? = 85 就很好选了，这时增长趋势已经占主导了。 个汉字。在 GBK 的编码方案中，ASCII 字符使用一个字节表示，汉字使用两个字节表示。 第 3 章 数据结构 hello‑algo.com 61 3.4.3 Unicode 字符集 随着计算机技术的蓬勃发展，字符集与编码标准百花齐放，而这带来了许多问题。一方面，这些字符集一般 只定义了特定语言的字符，无法在多语言环境下正常工作。另一方面，同一种语言存在多种字符集标准，如 果两台计算机使用

，可以通过以下命令克隆本仓库： git clone https://github.com/krahets/hello-algo.git 当然，你也可以在图 0‑4 所示的位置，点击“Download ZIP”按钮直接下载代码压缩包，然后在本地解压即 可。 第 0 章 前言 hello‑algo.com 7 图 0‑4 克隆仓库与下载代码 第三步：运行源代码。如图 0‑5 所示，对于顶部标有文件名称的代码块，我们可以在仓库的 不是，该图展示的是空间复杂度，其反映的是增长趋势，而不是占用空间的绝对大小。 假设取 ? = 8 ，你可能会发现每条曲线的值与函数对应不上。这是因为每条曲线都包含一个常数项，用于将 取值范围压缩到一个视觉舒适的范围内。 在实际中，因为我们通常不知道每个方法的“常数项”复杂度是多少，所以一般无法仅凭复杂度来选择 ? = 8 之下的最优解法。但对于 ? = 85 就很好选了，这时增长趋势已经占主导了。 GB2312 的基础上扩展得到的，它共收录 了 21886 个汉字。在 GBK 的编码方案中，ASCII 字符使用一个字节表示，汉字使用两个字节表示。 3.4.3 Unicode 字符集 随着计算机技术的蓬勃发展，字符集与编码标准百花齐放，而这带来了许多问题。一方面，这些字符集一般 只定义了特定语言的字符，无法在多语言环境下正常工作。另一方面，同一种语言存在多种字符集标准，如 果两台计算机使用

传统的B/S企业应⽤用前端 • B/S企业软件常⽤用的展现层技术 – HTC 在浏览器端扩展标签 – JSF等 在服务端⽣生成界⾯面 – GWT 编译阶段⽣生成界⾯面 – ExtJS ⽤用JS封装界⾯面组件 – Flex等 脱离HTML体系，另辟蹊径 • 业务逻辑 – 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 当规模扩⼤大的时候，有⼀一些边际效应 – 某个JS模块被修改，如何得知会影响谁？ – 某个界⾯面⽚片段被调整，会影响什么界⾯面？ – 如何最⼩小化发布？ – 如何⼀一键测试、打包、压缩？ – 。。。。。。 Thanks Q && A