PHP网站开发程序员招聘,做网站要了解哪些,流量卡,免费开发app平台下载背景 美团COS#xff1a;全称美团网核心业务系统部#xff0c;以持续整合O2O线下资源#xff0c;共建高效率、低成本的供应链系统#xff0c;高效推动O2O生态环境建设为业务目标#xff0c;负责美团网核心业务系统的建设和管理。 COS系统#xff0c;伴随着美团3年多的发展… 背景 美团COS全称美团网核心业务系统部以持续整合O2O线下资源共建高效率、低成本的供应链系统高效推动O2O生态环境建设为业务目标负责美团网核心业务系统的建设和管理。 COS系统伴随着美团3年多的发展前端也积极参与到系统的建设中。 在这几年里通过优化系统前端环境改进代码组织结构丰富公共资源和自动化工具不断提高了业务响应效率也在不断努力去逐步缩短系统的前端开发周期以下简单介绍在这个过程中的一些变化。 第一个COS系统——合同系统 没有独立的静态资源服务无压缩采用YUI3的Loader手动维护依赖关系。忙着写控件第一个控件Autocomplete后来有了Table、Tree、Form、IO等。线上代码经常不稳定静态资源地址采用加时间戳的方式来更新。公共模板部署 由于前端需要支持的业务系统众多对每个系统而言都有一些相同的处理逻辑如前端环境初始化(包括系统的参数配置、YUI部署、UI部署、控件初始化、GA统计源、页面加载时间统计、浏览器升级提醒、问题反馈等)针对每个系统都是一样的不希望每个系统都要去处理这些逻辑于是集成了mt-fe.jar到每个后台系统节约了新开系统的成本。 模块化道路 模块目录结构扁平化所有的模块在目录结构上都是平行的无区别的。 同时增加了主模块和子模块的概念并在此基础上定义了统一的加载规则。模块名称和路径关系约定知道一个模块名就可以知道这个模块的代码所在的位置是否是主模块以及属于某个系统如crm-module 对应的三个属性应该是 { path: /static/module/module.js isMainModule: true app: crm } deal-module/sub 对应的即 { path: /static/module/sub.js isMainModule: false app: deal } 模块加载机制使用YUI3的自动加载需要给Loader配置一个依赖关系表。最初新增一个模块时需要在模块定义和Loader配置中都声明该模块的依赖。这样在两个地方维护依赖关系容易产生不一致从而带来维护问题。 为解决上述问题开发了脚本自动计算所有模块的依赖关系生成依赖关系表传递给Loader使用面临的问题是修改模块依赖关系需要运行脚本才能生效而在开发时更想要所见即所得的效果。于是又针对开发环境在Loader加载时根据约定的模块名自动计算出模块的加载路径和类型从而实现不提前配置依赖关系表也可自动加载。一个简单的加载配置 var metaGroups {fecore: {//发布时自动生成的metaGroups用于线上环境modules: {moduleA: {path: moduleA/moduleA.js,requires: [moduleB, moduleC]},...},//根据pattern和文件名约定进行自动加载用于开发环境patterns: {prefix: function(cfg) {cfg.path moduleA/moduleA.js;cfg.type js;return true;},...}} };YUI({...groups: metaGroups,... }).use(moduleA, function(Y) {}); 模块依赖关系梳理模块中存在间接依赖如A依赖B、CB依赖C这时在A的依赖关系中只需要声明B就可以工作如果某天B不需要依赖C了这时在B中去掉C的成本就变大了。为了解决这类问题规范了依赖关系声明并开发工具对源文件进行分析自动化校验和修改也计划将该校验加入到各代码仓库的git hooks中。通过该工具的梳理让开发者能非常明确了解所有模块之间的关系对宏观掌握当前模块的使用状态也是非常有帮助的。 模块的丰富和稳定前端支持的项目众多如何在应用层花最小的代价写代码是我们一直在思考的问题。 通过不断丰富可复用的组件库、定义统一的UI方案以及提取和整合所有系统的公共模板等来避免重复工作。 目前除了所有前端公用的代码仓库fe.core外也为COS系统新增专门的前端代码仓库cos.core存放和业务相关的模块。同时为了保障模块的稳定性和易用性开发了模块文档并进行了测试用例的覆盖。 模块内目录结构完善 模块中从只包含css、css、tpl文件到包含tests、guide等文件目前一个完整的模块的目录结构如组件方面 从简单的构造器、prototype写对象实现继承到基于YUI3的Widget or Base框架并在此基础上进行了扩展不断新增组件和完善组件功能使其能满足大多数业务需求对代码进行不断重构使得组件可以更加稳定。 我们提倡只要是能被重用的代码都应该放到相应的公共代码仓库中。UI方面 不得不说Bootstrap带给web行业的影响是巨大的特别是针对后台系统。 简洁大气的设计对于大多数网页元素来讲已经能较好的满足需求不过针对COS系统还是有不少需要单独处理的需求比如各个系统的Layout一些简单的UI模块和少量交互的组件等所以在全兼容Bootstrap的基础上做了COS-UI并对所有的COS系统页面进行了迁移统一了风格。 也为界面外观定义提供统一标准降低开发与维护成本。测试方面 从使用YUI3提供的YUI Test模块编写单元测试用例到使用mochachaisinon结合采用phantomjs进行无界面测试无缝集成到开发环境让写测试变的更简单从而提高了写测试用例的积极性。文档方面 从最初专门开发一个应用去为模块编写使用文档到文档静态化。在完善的模块目录结构基础上通过梳理文档规范根据约定自动输出静态化的文档从静态的demo展示到可以在线修改从手写的使用说明到根据YUIDoc生成的注释自动提取文档内容等。使得只需要写最少的内容即可生成丰富的文档和demo。 如下是一个简单的构建demo的规范div classdemoh1简单demo/h1div classhtml-content.../divscript.../script /div 只需要按照上述格式写代码工具就会自动生成如下静态页面可以在页面中进行参数修改便可即时查看到效果。 COS系统前端分层 用户端和核心业务端的模块都是基于YUI3进行开发同时在模块化机制的前提下共用底层库fe.core。 为了更好地针对所有系统业务场景做抽象开发了专门提供给业务系统使用的模块cos.core。 配置中心会处理所有系统的前端配置如当前系统环境(开发环境、测试环境、线上环境)YUI的版本号是否使用Combo服务是否是调试模式等。 系统前端开发环境 为了方便系统开发针对一些平时应用比较普遍的场景开发了自动化的工具如发布、自动化文档、依赖关系检测、自动化单元测试、全部系统范围内搜索、自动build template等。为了使工具更容易维护权责更加明晰在代码组织和管理方面先后对代码仓库进行了拆分发布package到内部源并使用npm来进行包管理解决了package之间的依赖管理问题。 同时针对各系统提供了一系列的服务如静态资源、Combo、日志、页面加载性能报表等。 未来还计划开放UI定制一键开站动态修改系统配置在线为某个模块写文档、demo、test在线管理静态资源等功能。 开发平台旨在希望作为一个窗口索引与前端有关的所有服务和资源为开发者提供开发辅助。 系统发布 系统运行初期使用Shell脚本处理发布过程(包括资源的压缩、加版本号、计算依赖关系等)。后来由于涉及到的代码仓库增多发布过程也增加了更多的逻辑如打包公共模块、修改模板中引用的CSS、图片资源地址等使得脚本一度维护比较困难后对脚本进行了拆分。 再后来考虑到Node的灵活以及社区的活跃将发布脚本迁移到Node平台使用Grunt来管理发布任务同时独立了配置代码库进行了更细粒度的拆分使得发布这一过程更加灵活和便于维护。 系统发布从后端人工操作到集成到OPS平台一键发布大大提高了发布效率减少了bug处理时间。从使用外部npm源到内部npm源减少了发布本身的耗时。以上也为前端cos组在系统建设方面做一个简单总结。非常有幸能在一个重视技术重视前端的公司里学习成长。回想起这么多的日日夜夜曾面对每一次技术改造和调整都兴奋不已会偶尔想方案彻夜难眠走了很多弯路开发了很多系统但每次都能从看似相似其实充满新挑战的系统中获得新的收获。期望每天的点滴进步会让系统开发变得越来越简单高效Happy Coding