首页 > 其他分享 >盘点之原地踏步一

盘点之原地踏步一

时间:2022-12-25 10:33:17浏览次数:94  
标签:__ el text button disabled weui 盘点 原地踏步

2022的最后这一个月,自己很忙,每天起早贪黑,但是停下来一盘算,仍然是没什么有价值的可复用的产出物,一如过去这些年。

想探索基于企微或钉钉这种群件平台做新时代下的业务流程性功能开发的可行性,一路下来发现坑不少,一个多月时间都花在填坑上了。

最后是在企微应用要求尽量遵循 weui 风格这一点上,这几天就一直在摸索这一块;为什么是“摸索”;weui 从官方产出物来看,只有 css 定义 和 一些 examples,没有文档;尽管官方也有 react-weui、以及市面上还有一些第三方维护的 weui 的组件化封装。

因而,我在想 weui 到底是什么。

第一反应,它是微信官方定义的一套视觉语言,不过这一块的完整概念是以前在 ant.design 的网站上“设计”板块看到的。

二,因为在考虑如何基于 weui 的语言实现更有生产力的组件化应用,在翻看各种相关库和源代码,看到 vant 的代码,用了 vue 的 create util 模块,里面提到了 createBEM,然后发现 BEM 的线索,最后搜索发现,是 Block__Element--Modifier 这样的一套前端组件化方法。回过头来,在 weui 官方 github 的 wiki 里也看到了一段描述,它从 1.0 开始也是启用了 bem 的命名方式。


/**
 * bem helper
 * b() // 'button'
 * b('text') // 'button__text'
 * b({ disabled }) // 'button button--disabled'
 * b('text', { disabled }) // 'button__text button__text--disabled'
 * b(['disabled', 'primary']) // 'button button--disabled button--primary'
 */
export function createBEM(name: string) {
  return (el?: Mods, mods?: Mods): Mods => {
    if (el && typeof el !== 'string') {
      mods = el;
      el = '';
    }

    el = el ? `${name}__${el}` : name;

    return `${el}${genBem(el, mods)}`;
  };
}

export type BEM = ReturnType<typeof createBEM>;

export function createNamespace(name: string) {
  const prefixedName = `van-${name}`;

三、在脑子里尝试从 weui 官方的 less 定义和 example 中提取组件的时候,发现了 vant 与它的一种潜在可能的联系性,猜测 vant 也许是有赞在微信生态中生存过程消化 weui 的一个技术副产物。

四、时间线

bem 代码仓库 最早的提交时间;

Initial commit
floatdrop committed on Aug 24, 2014


https://github.com/Tencent/weui/

init weui
jfengjiang committed on Sep 25, 2015


react-weui 代码仓库最早的提交时间;

init
progrape committed on Dec 14, 2015


vant 最早提交时间

Author: niunai 
Date:   Tue Dec 27 20:11:05 2016 +0800

    init

而我最早关注前端组件化大概也是这个时候,2015-01-27 23:47

阿里前端框架Alice是个不错的选择

但是,我毕竟不是个纯前端,很早的时候,生存所迫,技术变成只是我的一种手段,而非单一信仰,因而没法在技术前沿推进。

只能从一个使用者角度,感受,跟进。

当我试着站在开发者角度,发现没有必要文档时,想自己去做一些整理时,才稍稍能找回技术者的感觉。

标签:__,el,text,button,disabled,weui,盘点,原地踏步
From: https://www.cnblogs.com/x3d/p/weui-design-language-bem-component.html

相关文章