- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章如何封装不被嫌弃的组件SDK由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
你在一家小互联网公司做前端。最近公司发展势头不错,已经有了稳定的商业模式。老板决定尝试付费推广.
马上五一了,老板想策划一个活动玩法。可是公司前端人力有限,不能每个业务都单独开发活动.
于是老板找到了你,希望你封装一个活动SDK组件供公司几个业务接入.
你心里嘀咕:平时组件写的倒是很多,也写过公共组件,活动组件感觉就是带业务逻辑的公共组件,应该没啥难度吧?
但是你心里没底,怕自己封装的组件SDK被接入的业务方嫌弃,就去请教公司最资深(发量最少)的前端老卡.
待说明来意,老卡深深啄了一口保温杯里的菊花枸杞茶.
“这封装组件SDK的门道啊,分为组件设计、开发、接入、上线,待我一一道来”.
组件设计好的组件设计需要做到「职责明确」。在设计阶段需要与3个角色明确职责:
。
活动内部需要的数据通常由服务端提供,此时需要明确字段的粒度.
比如:邀请新用户得xxx元奖励 。
xxx是变量,通常会作为一个字段.
那么「邀请新用户得 元奖励」这段文案呢?活动进程中,有没有可能PM发现这段文案效果不好想修改.
如果前端写死了文案,要修改意味着组件提供方(你)与业务接入方都有重新上线的成本.
所以,如果评估有修改的可能,更好的方式可能是将这段文案下发为类似结构:
。
为了让活动SDK组件轻量,SDK内使用的能力(比如:数据请求、登录、错误监控)通常由宿主环境(接入组件的业务)提供.
这类能力分为两类:
其中「运行时方法」可以作为props传给SDK组件,比如登录方法.
库的能力,SDK需要将其定义为peerDependencies,比如React、ReactDOM.
。
这一步和产品撕过的朋友都懂.
。
完成了职责划分,产出技术文档,接下来就能开始「组件开发」了.
此时有两点需要注意:
。
使用ts编写组件,导出类型声明文件,可以极大规范业务方接入,减少接入沟通成本.
。
如果SDK组件抛出错误,导致接入的页面崩溃了,妥妥的p0级bug.
所以,一定要将SDK的错误catch在组件内部.
对于React组件,用ErrorBoundary包裹是必不可少的.
。
SDK组件终于开发完了,发布到公司内部npm平台.
业务方将SDK以npm包的形式引入.
此时需要考虑如下问题:
。
如果接入方以SSR的形式在服务端接入组件,可能使用CJS规范.
CSR的情况通常使用ESM.
所以SDK组件在打包编译时需要输出ESM、CJS两种规范的文件.
。
如果SDK会导出几个组件(比如同一个活动组件对不同业务输出不同版本):
就需要考虑业务方的treeShaking需要.
当前业界比较通用的方式是:将不同组件编译到不同目录,业务方通过组件目录的形式引用,比如:
其中SDK为活动组件导出的npm包.
dist为编译后产物打包的目录.
modern为ESM规范的打包路径,如果要引入CJS的包,可以将modern改为node.
SDKForA为要引入的组件.
如果业务方使用了babel-plugin-import,以上写法可以用如下写法替代:
除了js文件以外,还要考虑业务方对css文件的编译需要.
所以组件样式文件最好与组件分离,比如将如下路径:
其中index.tsx内引入了style.less 。
修改为:
index.tsx不引入样式文件,由业务方单独引入.
样式产出.css与.less两种格式,当业务方需要对样式有进一步编译需求,可以引入.less,否则直接引入.css.
业务方在接入时,可以这样接入:
。
上线后前端就解放啦?NO.
刺激的事儿可都发生在线上~ 。
随着用户量级提升,发生各种bug的概率也随之提升,主要包括:
这就需要做好线上监控预警.
如果业务方引入了sentry,活动SDK可以为以上case埋点,并建立对应监控看板.
当错误指标超过阈值,可以随时从被窝里爬起来排查问题.
除了代码的埋点,业务埋点也很重要。某位不知名互联网人说过:
我知道我做的活动会被薅羊毛,但我不知道究竟有多少羊毛被薅了 。
业务埋点能让你知道.
。
为了封装一个不被吐槽的SDK组件,需要做到如下几点:
明确组件职责,知道SDK能从宿主环境获得什么能力 。
完善的ts声明与错误边界 。
灵活的导出产物,让业务能舒服接入 。
上线后业务、代码层面的监控 。
说完这些,老卡又啄了一口保温杯里的菊花枸杞茶,才发现:
茶,早已凉透.
原文地址:https://mp.weixin.qq.com/s/vbRkCgncWZswqnrz30LiLQ 。
最后此篇关于如何封装不被嫌弃的组件SDK的文章就讲到这里了,如果你想了解更多关于如何封装不被嫌弃的组件SDK的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我需要使用封装打印3个变量,并且无法修改主类。 主类声明变量[汽缸、制造商、所有者],并希望使用如下参数创建和打印一个对象: System.out.println (new Vehicle (cyli
我正在研究“Beginning Ruby”这本书,在我进行封装之前一切都进行得很顺利。我明白这段代码在做什么,我只是不知道为什么要用这些方法设置它。 对于那些感兴趣的人 this is the lin
所以我一直在研究面向对象的完整开发 JavaScript 实践,并对以下示例感到好奇。 据我了解,(这对我来说很有意义)以下“ secret ”字段是“私有(private)”的: var MyObj
在面向对象程式设计方法中,封装(英语:Encapsulation)是指,一种将抽象性函式接口的实作细节部份包装、隐藏起来的方法。 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代
封装 被定义为 把一个或多个项目封闭在一个物理的或者逻辑的包中 。在面向对象程序设计方法论中,封装是为了防止对实现细节的访问。 抽象和封装是面向对象程序设计的相关特性。抽象允许相关信息可
今天我读了一本书,作者写道,在一个设计良好的类中,访问属性的唯一方法是通过其中一个类方法。这是一个被广泛接受的想法吗?为什么封装属性如此重要?不做会有什么后果?我早些时候在某处读到这可以提高安全性或类
今天我接受了软件工程职位的面试。我已经从 stackoverflow 中阅读了很多关于面试的内容。他们向我询问了与 OOP 相关的正常情况。但他们也问我这些: 没有继承就可以封装吗? 没有继承就可以抽
我正在制作一个简单的网站,并编写了gradle构建脚本,该脚本将执行诸如lint并最小化css / html / js之类的事情。 在这一阶段,我刚刚完成了正在运行的CSS,但是只是初始的非结构化格式
下面的幻灯片是指 C++ 语言,它说 "encapsulation is about ensuring the user uses our ADT in a safe way" 但是,如果他可以访问我
尝试设置一个 Person 类 我在尝试将信息封装在类中以使其不会被意外更改时遇到了问题。除了当我尝试使用 setter/getters 进行封装时,该类工作得非常好。我认为问题是这些方法最终会互相循
面向对象的概念:封装、数据抽象和数据隐藏是3个不同的概念,但彼此之间非常相关。所以我很难通过阅读互联网上的信息来完全理解这些概念。一个地方可用的信息与互联网上另一个地方的信息相矛盾。有人可以指导我阅读
我被封装困住了。在我看来,好像我已经按照规则做了一切,但仍然不起作用。虽然我知道我错过了一些东西。我正在使用 Eclipse。 我想要通过创建一副标准 52 张卡片来进行一些练习,并尝试我学到的新东西
在java中,要获取映射中的所有键,我们可以使用方法keySet。但我想知道为什么方法名称不只是 keys ?名称 Set 是否会泄露有关实现的详细信息? 据我了解,Java 是静态类型语言,名称中包
我正在尝试找出如何防止应用程序中的页面变量被全局定义。我想出了一些方法,但我想知道是否有人们使用的通用标准方法。 我使用这种方法得到了我的插件设计模式:http://www.virgentech.co
我有一个 tcp 连接,我想在服务器类的 HandleConnectionAsync 方法中保持打开状态。它将从客户端接收持续更新。 private async void HandleConnecti
这是我类(class)的一个小样本: #include #include using std::string; using std::vector; struct Book { string
我想要类似下面的代码: class Foo{ public: void update() { for( auto dataModifier : _dataModifierLis
这已经困扰我一段时间了,所以我问了一个同事他是否能理解它,现在我来了;) 为什么可以在依赖属性的 PropertyChangedCallback 中访问持有类的私有(private)成员? 让我通过这
我知道封装意味着一个对象不应该直接访问不同对象的成员……但我猜它与公共(public)领域有关?我假设公共(public)方法不会破坏封装..?我只是在这里不清楚,很高兴得到任何解释。 最佳答案
我就废话不多说了,大家还是直接看代码吧~ ? 1
我是一名优秀的程序员,十分优秀!