研发同学在端内既追求 H5 的灵活性,也要追求性能趋近于原生。 面对入口扩张,主端、独立端、微信小程序、支付宝小程序、百度小程序、安卓厂商联盟快应用,单一功能在各平台都要重复实现,开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案,历经近 20 个月打磨,滴滴跨端解决方案 Chameleon 终于发布。真正专注于让一套代码运行多端。
软件架构设计里面最基础的概念“拆分”和“合并”,拆分的意义是“分而治之”,将复杂问题拆分成单一问题解决,比如后端业务系统的”微服务化“设计;“合并”的意义是将同样的业务需求抽象收敛到一块,达成高效率高质量的目的,例如后端业务系统中的“中台服务”设计。
而 Chameleon 属于后者,通过定义统一的语言框架统一多态协议,从多端(对应多个独立服务)业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。
虽然不同各端环境千变万化,但万变不离其宗的是 MVVM 架构思想,Chameleon 目标是让 MVVM 跨端环境大统一。
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,同样道理,chameleon 中采用的是 CML + CMSS + JS。
JS 语法用于处理页面的逻辑层,与普通网页编程相比,本项目目标定义标准 MVVM 框架,拥有完整的生命周期,watch,computed,数据双向绑定等优秀的特性,能够快速提高开发速度、降低维护成本。
CML(Chameleon Markup Language)用于描述页面的结构,我们知道 HTML 是有一套标准的语义化标签,例如文本是<span>
按钮是<button>
。CML 同样具有一套标准的标签,我们将标签定义为组件
,CML 为用户提供了一系列组件。同时CML中还支持模板语法,例如条件渲染、列表渲染,数据绑定等等。同时,CML 支持使用类VUE语法,让你更快入手。
CMSS (Chameleon Style Sheets)用于描述 CML 页面结构的样式语言,其具有大部分 CSS 的特性,并且还可以支持各种 css 的预处语言 less stylus
。
通过以上对于开发语言的介绍,相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。
在用 CML 写页面时,chameleon 提供了丰富的组件供开发者使用,内置的有 button switch radio checkbox
等组件,扩展的有 c-picker c-dialog c-loading
等等,覆盖了开发工作中常用的组件。
为了方便开发者的高效开发,chameleon 提供了丰富的API库,发布为 npm 包 chameleon-api
,里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。
基于强大的多态协议,可自由扩展任意 API 和组件,不强依赖框架的更新。各端原始项目中已积累大量组件,也能直接引入到跨端项目中使用。
代码规范校验,当出现不符合规范要求的代码时,编辑器会展示智能提示,不用挨个调试各端代码,同时命令行启动窗口也会提示代码的错误位置。
既想一套代码运行多端,又不用大刀阔斧的重构项目,可以将多端重用组件用 Chameleon 开发,直接在原有项目里面调用。
Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack,吸收了业内多年来积累的最有用的工程化设计,提供了前端基础开发脚手架命令工具,帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。
CML特点是“一端所见即多端所见”,你只需开发一次就能跑所有端。 跟随这个教程,开启你的chameleon跨端开发。 1 起步 1.1 安装运行环境 开发chameleon项目的第一步是要安装运行环境和全局安装chameleon-tool。 运行环境 node >= 8.10.0 npm >= 5.6.0 建议安装使用nvm管理node版本。 1.2 安装脚手架工具 npm i -g chamel
# -*- coding: utf-8 -*- """ Created on Tue Dec 18 09:55:16 2018 @author: Mark,LI """ import numpy as np from sklearn.datasets import load_iris class Chameleon: W = None; # weight矩阵(方阵) Conn
滴滴 9.26 一面 自我介绍 项目简单介绍 拷打CDN相关知识:cdn是什么、cdn如果命中失败怎么办、cdn如何保证缓存的一致性、cdn是如何进行文件一致性的对比、(webpack打包之后生成的hash值)、等等 事件循环:同步任务、异步微任务、异步宏任务 事件循环的一个题 async function a (){ console.log(1) await console.l
一面,已感谢信 自我介绍 项目介绍、项目难点 项目想关的 项目技术选型 怎么学的前端 Vue3的改进点 Vuex diff算法 性能优化 promise、async/await 响应式布局的实现 垂直居中 时间循环(看代码说顺序) 算法题(简单题) 面试体验很好,面试官会引导、提醒
做选择题的时候,突然一只不知道什么虫子飞我身上,一直乱爬😰😰😰我盯了它一会儿,它一直不走,我就赶它,结果它飞走了一下立马又飞回我身上了 我艹,真的把我吓得,第二回赶它它才走,不知道飞哪了,给我整得慌的不行,换了个地方才敢放心写题 转移位置的时候习惯性给电脑息屏了,再做题发现我共享屏幕掉了(又重开了下) 不会判我违规吧 ,, 从此避雷黄绿色衣服,避大雷 题型: 选择题60分,有几道不定向,考了
一面(56min) 自我介绍 项目主要参与了那些事情? 项目中哪个业务比较复杂一些,对你来说成长了很多。(虚拟列表) 一次请求一万条数据不会卡么? 数据有更新怎么处理? 什么时候拿到真实数据? 预估高度估少了怎么办? 高度不相等的话会不会跳一下 长列表是否有其他方案? 节流怎么实现?简单的描述一下 settimeout的底层实现?js异步机制,事件机制? 浏览器输入一个url地址到渲染出来页面的过
面试官很和气,总体聊得很开心,一直耐心地引导我聊redis那一块的技术方案,基本上都答上来了,就是太久没写树的题,写题写的有点慢,而且写出来的代码比较丑陋。希望还有三面的机会吧。。。 1.你说你做技术选型的工作,你简单讲讲为什么选择这些技术方案和组件? 2.Rabbitmq为什么更稳定?体现在哪些方面? 3.Rabbitmq持久化能将消息存多久? 4.Rabbitmq如何保证消息不乱序 5.你的短
三月初 给个链接写题,半小时写完 setTimeout输出,promise输出,闭包输出 场景题,页面瀑布滚动加载,如何监听一个用户在各个模块停留的时间 标签的优先级输出 instanceof判断 使用flex实现 容器宽高不定,子元素宽高固定 手写二分 手写promise 后面根据题目提问比如: ES6有哪些新特性 闭包如何实现 promise内部的运行原理 深拷贝如何存在Date()要如何处理
自我介绍,上来问点基础的知识,根据项目提问 上一份实习工作有没有印象深刻的事,遇到什么困难 git常用命令 和同事的代码发生冲突,需要怎么解决 项目的适配是如何实现的,如何判断出isPC isMoblie, mapstate的原理 vue3相比vue2有哪些更新 vue3为什么要更新成现在的版本 下面开始写题 场景题:实现三个页面(主页,详情页1,详情页2)的数据展示和交互,并根据我写的展开拷打.
#滴滴##面经##前端#