V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
csdoker
V2EX  ›  程序员

用原生 JavaScript 写了一个组件库,欢迎各位大佬关注,吐槽~

  •  
  •   csdoker · 2020-04-09 11:11:39 +08:00 · 2942 次点击
    这是一个创建于 1688 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个项目的名字我命名为 tiny-wheels,算是我这个前端菜鸡第一个正式的开源项目吧,顾名思义,就是一些比较简单、轻量的轮子,都是我平时工作中遇到的一些组件和效果,而这个开源项目的目的就是尝试用原生的方式把一些常见组件实现一下,这个项目虽然不大,但是我会非常用心的维护,欢迎大家给我提建议~

    配套的教程文章我会同步在我的个人网站、掘金、segmentfault 等平台更新

    25 条回复    2020-04-20 18:06:36 +08:00
    zhw2590582
        1
    zhw2590582  
       2020-04-09 15:35:10 +08:00
    建议加入 destroy 方法,也有利于解耦。
    csdoker
        2
    csdoker  
    OP
       2020-04-09 16:34:45 +08:00
    @zhw2590582 请问你是指的组件本身还是组件中事件的销毁呢
    zhw2590582
        3
    zhw2590582  
       2020-04-09 17:03:47 +08:00
    @csdoker 都要销毁
    u6pM63mMZ34z32cE
        4
    u6pM63mMZ34z32cE  
       2020-04-09 17:32:28 +08:00
    一共 4 个组件, 我没看错?
    hewelzei
        5
    hewelzei  
       2020-04-09 17:57:07 +08:00
    学习一下,已 star 。
    csdoker
        6
    csdoker  
    OP
       2020-04-09 18:31:48 +08:00 via iPhone
    @mebtte 是的。。这个项目刚刚起步。。组件会慢慢添加的,,
    csdoker
        7
    csdoker  
    OP
       2020-04-09 18:32:03 +08:00 via iPhone
    @hewelzei 谢谢~
    csdoker
        8
    csdoker  
    OP
       2020-04-09 18:33:51 +08:00 via iPhone
    @zhw2590582 没懂你的意思呢,能说具体点吗,事件销毁是指 remove 事件监听吧,组件需要销毁吗?还是说你是指的组件的实例,这些内存浏览器不是会自动回收处理吗?请指教~
    zhw2590582
        9
    zhw2590582  
       2020-04-09 18:38:05 +08:00 via iPhone
    @csdoker 销毁当然指事件和 dom 一起销毁
    csdoker
        10
    csdoker  
    OP
       2020-04-09 18:56:00 +08:00 via iPhone
    @zhw2590582 嗯嗯,懂了
    csdoker
        11
    csdoker  
    OP
       2020-04-09 22:47:56 +08:00
    @zhw2590582 你应该是指的 Pager 那个组件吧,每次 removeChild 后要把对应的 child 赋值为 null,这样应该就可以达到销毁的目的了
    NCry
        12
    NCry  
       2020-04-09 23:15:37 +08:00
    分页控件想用用看,奈何需要考虑 IE 浏览器#24
    csdoker
        13
    csdoker  
    OP
       2020-04-09 23:24:16 +08:00
    @NCry 0202 年了~该放弃 IE 了~哈哈
    csdoker
        14
    csdoker  
    OP
       2020-04-09 23:26:44 +08:00
    @zhw2590582 我查了下相关的资料,现在大部分浏览器应该都会自动对移除掉的 dom 进行垃圾回收,所以没有额外引用的 dom 应该是可以不用手动清除的
    zhw2590582
        15
    zhw2590582  
       2020-04-10 08:50:42 +08:00
    @csdoker dom 移除还不容易,直接 $el.innerHTML = ”“ 不就完了,问题是事件的移除,每个 addEventListener 都要有对应的 removeEventListener,事件绑定在 dom 上面,当 dom 移除了,事件其实还在的,只是 dom 移除而事件不移除就是所谓的内存泄漏。少年,你基本功不够啊。
    loveToMy1
        16
    loveToMy1  
       2020-04-10 09:05:56 +08:00
    期待更多的组件
    duan602728596
        17
    duan602728596  
       2020-04-10 09:23:34 +08:00
    @babel/polyfill 已经不推荐用了,建议 core-js 升级到 3,压缩插件用 terser
    basstk
        18
    basstk  
       2020-04-10 10:44:47 +08:00
    支持一下,不错
    csdoker
        19
    csdoker  
    OP
       2020-04-10 10:56:46 +08:00
    @zhw2590582 innerHTML 移除 dom,事件确实还在,用 removeChild 应该是没有这个问题的,浏览器会自动回收内存
    csdoker
        20
    csdoker  
    OP
       2020-04-10 10:57:45 +08:00
    @duan602728596 暂时还没有引入 polyfill 因为没用太新的特性
    csdoker
        21
    csdoker  
    OP
       2020-04-10 11:22:53 +08:00
    @duan602728596 你说的是 @babel/preset-env + @babel/plugin-transform-runtime 这套方案吧,,我修改了
    wuweijia
        22
    wuweijia  
       2020-04-10 17:52:44 +08:00
    兄弟你这个翻页 体验是不是有点问题
    csdoker
        23
    csdoker  
    OP
       2020-04-10 19:18:22 +08:00 via iPhone
    @wuweijia 有啥问题呢?
    alading11
        24
    alading11  
       2020-04-20 14:08:30 +08:00
    老哥搜索考公相关的话题搜到了你的帖子,想请教下。老哥当初考了吗,情况如何
    csdoker
        25
    csdoker  
    OP
       2020-04-20 18:06:36 +08:00 via iPhone
    @alading11 考了 没考上 放弃了 哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5256 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:18 · PVG 15:18 · LAX 23:18 · JFK 02:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.