简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么?

定义很多,我随便网上查一个,“指一些设计为通用性的,用来构建较大型的web应用的”。

组件化的一些特点:

按需加载只加载必要的前端资源

对应关系非常清晰组件所需要的前端资源都在同一目录,

职责明确且唯一,对应关系显著

这类定义网上有很多,说的不尽相同,但基本上都对。因为组件化的思想,就是分而治之。只要表达的是这个意思,那么就基本不会错。

////////

在现在的前端大环境下,为了适应复杂的页面业务需求,很多框架都选择了生命周期方式,来组织自己的事件和方法。就这样的,

一个组件的完整生命周期包括但不限于:

1、init,初始化组件根节点和配置

2、fetch [fɛtʃ],加载 css 和 js 资源

3、render,内容渲染,

4、ready, 进行数据绑定等操作

5、update,数据更新

6、destroy [dɪˈstrɔɪ],解除所有事件监听,删除所有组件节点

前端的完整的生命周期,我们自己手动现实现很困难,也没必要。但为了学习前端组件的开发,我们可以把组件的生命周期“简单粗暴”化的理解,就是“在不同阶段执行的js方法”。

怎么样,这个理解够简单粗暴吧。但它的好处在于,我们可以手动实现了。先分析一下吧,把这些生命同期的英文词,分散放置在“属性、事件、方法、数据、tpl、公共方法...”之中,就这样,

然后用我最喜欢的工厂模式:“构造器 + prototype”,来进行js的填空游戏。就这样的,

把那些方法分别挂在prototype上,这样,就实现了一个简单粗暴的前端组件。

////////

不管怎么样,从结构上它至少是有一些通用性的,不是么?刚开始的时候,不要追求精致与宏大。先实现一个小目标,写一个东西出来再说。不管它是不是前端组件,你都当它是前端组件来写,这样等积累到一定程度,你写出来的,自然就是前端组件了。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-06-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

js仿通知栏新消息实时推送更新效果

在最近的项目里面,用到websocket做消息推送,其中有这样的一个效果,在消息列表的模块,接收到很多条信息,展示在界面的是最近的十条接受到的消息,实时更新模块...

2673
来自专栏小文博客

查看WordPress站点主题的方法

6442
来自专栏疯狂的小程序

无痛的微信小程序开发体验

在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很...

4185
来自专栏宝塔面板

腾讯云中宝塔面板升级专业版

5612
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 5 表单

这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中,也支持html5中多种控件的自动检测,如...

2235
来自专栏娱乐心理测试

微信小程序如何获取地理位置和进行地图导航

6505
来自专栏企鹅号快讯

来,聊一聊性能优化

不管是应付前端面试还是改进产品体验,性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。传输快 vs 体验快 优化的目的是让用户有“快”的感受,那如何让用户...

2388
来自专栏编程

6个绝招,让你的网站加载速度提高3倍!

首先我们打开一个网页看到的都只是前端,所以我们看到一个页面背后的支持就是HTML代码,其中就包含了各种网页标签,其中包括网站优化中的TKD,载入的渲染资源:ja...

2916
来自专栏ytkah

微信竟然还能当笔记用!【微信高级教程8】

  微信除了用来聊天沟通、刷朋友圈、看公众号外,很多朋友还不知道微信还能当笔记用吧?记笔记?没错,新版微信的收藏功能就隐藏这样的神秘技能。厦门就随ytkah一起...

29311
来自专栏猿天地

hbuilder APP 定位提示苹果审核不通过

APP已经提交给苹果进行审核了,今天看看审核结果,居然挂了,给了几点问题,其中有一点就是关于定位的问题: Guideline 5.1.5 - Legal - P...

40210

扫码关注云+社区

领取腾讯云代金券