周末浅谈-WEB前端组件

随着前端业务复杂化的不断加深,前端交互流程也愈加复杂,所以angularJs,vueJs,avalonJs等许多前端框架都出现了,它们不像JQ那样,只是提供一种工具的集合,它们更多的是一种前端业务的解决方案。你们它们从方法,到配置,到工具,都自成一套。虽然根子上都是操作DOM,操作DATA,但思路都各不相同。唯一的相同之处就是都把对DOM和DATA的操作进行了重重封装,有时用它们写JS,感觉就像在写config配置。这方面做到极致的,目前看来就是ExtJs了。

抛开这此框架不谈,单说组件,这东西至少包括四部分:

1,自定义的元素或DOM导入,例如,React,用jsx搞成类xml的东西,还有Extjs的requires 按需加载

2,html模板,例如,叫个框架就有TPL

3,DOM操作,就不例如了,都有

4,data操作,

至少是这四部分,加一块才算是一个组件。现在咱们先行者计划里,我讲的东西都算是组件的初级阶段,基本上写的全是jQuery插件。为什么说是初级呢?因为我要是按以上四部分组成来讲,基本上能听懂并理解,然后自己写出来的人,不到三分之一。所以退而求其次,先把jQuery插件讲明白再说吧。

前端组件化中的DOM构成,现在有二个方向,我个人觉得,一是把DOM打包然后在需要的时候import;二就是自定义标签,像React那种的。具体哪种适合,这要看具体的业务场景。

但抛开所有限制,我喜欢DOM打包然后在需要的时候导入。因为自定义标签有一个最大的问题,就是业务复杂到一定程度的时候,你的标签命名就是一个大问题了,到最后就几乎无名可用,只能是name1,name2,name3...这种的往下排了。不要笑,真有这种情况。

然后自定义标签,另一个不利因素就是它的标准现在没定,还不稳当,没法用。所以呀,自定义标签在我个人这里,就省省吧。

接着往下说哈,前些日子,讲自定义单选 & 复选框的时候,我说过要讲组件的生命周期,后来许多同学说不行啊得慢点,就暂时先放下了,咱们现在就先聊几句组件生命周期,因为无论如何,这个东西必须得学呀。不能因为某个东西太难,OK,那你说你不学了。那我要说,活着太难,你是不是就不活了啊。

生命周期哈,一般就是实例化,生存期,销毁期,清理期。各种书上说的都有略有不同。反正就是这么回事。以下是我个人理解,未必都对,

1,实例化,就是你声明了一个组件,然后给了默认值的设置,这时你可以调用了;

2,生存期,就是你可以用它干活了;

3,销毁期,就是把它的各种引用都处理掉,比如什么DOM层级啊,绑定的事件啊;

4,清理期,就是此组件和其它元素的关系,还有它用到的变量,该删删,该清清;

在这几个过程中,会有不同的方法被调用,每一个生命周期内部又会再根据不同情况,添加不同事件,调用不同的方法。这是自定义标签和导入DOM的内容。

DOM导入,也叫html import,其实就是把一段HTML另存为,然后用AJAX方法在需要的时候,给LOAD进来的意思。类似于PHP的include。在新的web标签中,我记得有一个<link rel="import" href='xxx.html' />,可以这么写,但我没这么用过,哪位同学有兴趣可以试试。

为什么要用HTML导入呢,因为DOM加载这个东西,它跟加载JS类似,都是阻塞式的,包括默认的link,都是。通俗的讲,假如你页面上有一个大菜单,你不操作的时候,它是隐藏的。但页面加载的时候,必须把它都加进来,页面才能全部显示,这速度不就慢了么。所以就用import,在需要的时候,再把这个大菜单加到页面中来。

当然了,import的使用,也是要有限度的,你不能搞成多个页面互相依赖加载,那就有点麻烦了。

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

原文发表时间:2016-09-03

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3151
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

3872
来自专栏Web行业观察

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

2043
来自专栏何俊林

推荐一个Flutter项目(已开源)

4573
来自专栏IMWeb前端团队

滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户...

2287
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

732
来自专栏有趣的django

微信小程序实战--集阅读与电影于一体的小程序项目(一)

真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。

2662
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1925
来自专栏贺嘉的专栏

教你写一个云上Hello world小程序

小程序上线一月有余,有不少创业团队如朝夕日历、小睡眠、小密圈等工具性的应用享受了这一波产品红利,收获了数十万新用户。笔者近期接触了不少从事后端开发的Java、C...

2.7K0
来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

2802

扫码关注云+社区

领取腾讯云代金券