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

web组件开发入门的更多相关文章

  1. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  2. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  3. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  4. 移动Web应用开发入门指南——交互篇

    交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...

  5. web前端开发入门全套学习方法路径,兼职在家做网站也能月入上万!

    前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...

  6. 水果项目第3集-asp.net web api开发入门

    app后台开发,可以用asp.net webservice技术. 也有一种重量级一点的叫WCF,也可以用来做app后台开发. 现在可以用asp.net web api来开发app后台. Asp.net ...

  7. React 实践记录 01 组件开发入门

    Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...

  8. WEB组件 开发 (未完成 4-13)

    整理自真阿当的阿当大话西游之WEB组件,课件中的代码下载. 14. 抽出widget类 组件分两大类: utility(大部分与UI无关的组件) 和 widget(应用层,大部分与UI相关的,日历组件 ...

  9. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

随机推荐

  1. Nginx编译配置介绍

    源码包 nginx-1.6.2.tar.gz --help 使用帮助 --prefix=PATH Nginx安装路径,如果没有指定,默认为/usr/local/nginx. --sbin-path=P ...

  2. 3.移植uboot-使板卡支持nor、nand

    在上一章,我们添加了nor,nand启动后,uboot启动出如下图所示: 上面的Flash: *** failed *** 是属于uboot第二阶段函数board_init_r()里的代码, 代码如下 ...

  3. 记一次使用Node.js electron打包网站的记录

    具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...

  4. Qt 之 qwt 和 qwtpolar

    1  Qwt Qwt 全称为 Qt Widgets for Technical Applications,用于专业技术领域的可视化显示,如下所示: 左图为自动控制领域,二阶系统的频率响应:中图为德国小 ...

  5. windows第七层负载均衡--基于IIS的ARR负载均衡

    载均衡有很多种方法,有硬件负载均衡,软件负载均衡,还可以从域名解析下手. 不过,今天只讲软件负载均衡 软件负载均衡一般分两种,从网络协议来讲(tcp/ip),主要集中在第四层和第七层进行负载均衡. 第 ...

  6. Gulp 插件及其使用

    前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gu ...

  7. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...

  8. 基于input子系统的sensor驱动调试(一)

    要想弄明白世界的本质,就要追根溯源:代码也是一样的道理: 最近调试几个sensor驱动,alps sensor驱动.compass sensor驱动.G-sensor驱动都是一样的架构: 一.基于in ...

  9. Android开发艺术探究Note

    第一章:Activity的生命周期和启动模式 生命周期 onPause表示activity正在停止,onPaus必须先执行完(栈顶的activity),新的activity的onResume才会执行. ...

  10. AttributeError: 'int' object has no attribute 'log'

    我们有时候在对组数进行操作时候,偶尔会出现这个问题. 比如: #coding:utf- import pandas as pd import numpy as np if __name__ == '_ ...