web组件开发入门

本文是学习慕课网阿当大话西游之 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