web组件开发入门

阅读目录

• 组件的分类
• 定义和加载组件
• 具体实现
• Widget类
• 更高级的内容

本文是学习慕课网阿当大话西游之WEB组件后的一个总结。

组件的分类

1 框架组件：依赖于某种框架的组件

2 定制组件：根据公司业务定制的组件

3 独立组件：不依赖框架的组件

定义和加载组件

解决css和js命名冲突

css：通过加前缀来形成命名空间，不要用子孙选择器

js：通过匿名函数自执行来隐藏变量，通过给window添加属性来暴露全局变量

(function(){
	var abc = 5;
	function TabView(cfg){
		this.a = cfg.a;
		this.b = cfg.b;
	}
	TabView.prototype = {
		c: function(){
			abc++;
		},
		d: function(){
			abc--;
		}
	}
	window.TabView = TabView;
})();

组件的依赖关系

传统通过script标签引入组件的问题：

1 需手动处理组件间的依赖关系

2 加载项太多，破坏页面的整洁度

如何解决：使用require.js

具体实现

如何定制皮肤

通过cfg设置一个skinClassName参数来给容器添加class来控制皮肤

自定义事件

简单回调的问题

1）只能绑定一个回调

2）回调的绑定时间和组件的实例化时间耦合在一起

如果相对独立的多个功能模块都需要绑定组件的同一事件，怎么办？

自定义事件本质：观察者模式

优点：跳出原生事件的限制，提高封装的抽象层级

链式调用

return this

Widget类

原生function类的问题

1）所有类继承自object

2）Object提供的帮助太少了

组件分类：

Utility：与UI无关

Widget：与UI有关

为Widget类添加统一的生命周期

更高级的内容

组件的MVC