一、对象的多种表现形式

  1、提高对象的复用性

  2、如何配置参数和默认参数

不知道该怎么描述,就直接上代码吧,下面做了2个例子,重点看整个组件的大体结构

用组件的方式做拖拽窗口,你可以狠狠的点击这里进行查看

用组件的方式开发简易弹窗,你可以狠狠的点击这里进行查看

二、组件的定义

  1、将对面向对象的深入应用(UI组件,功能组件)

  2、将配置参数、方法、事件、三者进行分离

  例子:可参照jquery UI 官网上,查看其中的一个组件就能说明了这些问题。

三、我们可以创建自定义事件

  1、有利于多人协作开发代码

  2、重点:挂载自定义事件与事件函数

给项目配置不同的参数

  1. //配置参数
  2. var a = {
  3. name : '小明'
  4. }
  5. //默认参数
  6. var b = {
  7. name : '小强'
  8. }
  9.  
  10. extend(b ,a)
  11.  
  12. alert(b.name)
  13. function extend(obj1,obj2){
  14. for(var attr in obj2){
  15. obj1[attr] = obj2[attr]
  16. }
  17. }

可查看做的两个学习实例,重点看实例实现的方式,怎么调用,怎么挂载,怎么实现

1、基于jq的选项卡组件开发,你可以狠狠的点击这里进行查看

ps:在项目开发中,在写组件的时候,建议尽量用.addEventListener()的方式来绑定事件,不管是系统事件还是自定义的事件

  

js面向对象(三)---组件开发的更多相关文章

  1. js--基于面向对象的组件开发及案例

    组件的开发:多组对象之间想兄弟关系一样,代码复用的形式. 问题:1).参数不写会报错:利用对象复制————配置参数和默认惨啊书的覆盖关系(逻辑或也可以)2).参数特别多时会出现顺序问题:json解决 ...

  2. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  3. [js开源组件开发]localStorage-cache本地存储的缓存管理

    localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 ...

  4. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  5. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  6. 前端js面向对象编程以及封装组件的思想

    demo-richbase 用来演示怎么使用richbase来制作组件的例子 作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力 ...

  7. 关于前端js面向对象编程以及封装组件的思想

    demo-richbase 用来演示怎么使用richbase来制作组件的例子 作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力 ...

  8. vue 开发系列(三) vue 组件开发

    概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...

  9. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

随机推荐

  1. python学习笔记:函数

    一.函数是什么 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasca ...

  2. 实用maven笔记三-仓库

    maven管理依赖的一个很重要的基础在于,其维护了收集大量依赖jar包的仓库. maven的仓库分类为本地仓库和远程仓库. 构件在仓库的路径大致为:groupId/artifactId/version ...

  3. 数据持久化之嵌入式数据库 SQLite(三)

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 SQLite 是 D. Richard Hipp 用 C 语言编写的开源 ...

  4. 使用pip 时报错 Fatal error in launcher: Unable to create process using '"D:\pytghon2.7\python.exe" "D:\python2.7\S

    无法创建使用pip.exe创建进程,说白了就是无法启动pip安装插件. 解决方法升级pip: python -m pip install -U pip  

  5. 【linux】centos6/7 + nginx 利用certbot 申请https证书

    没错我又踩坑了.昨晚上搞到十二点半才成功申请.鬼知道OJ服务器是个什么渣渣. 早上才算正式弄好,中间也学了不少东西,记录一下.这次是http转https,所以默认的还是只有80端口. 请务必确保自己的 ...

  6. JPA接口整理归纳方法规则

    Keyword Sample JPQL snippet And findByLastnameAndFirstname … where x.lastname = ?1 and x.firstname = ...

  7. 关于solr的一些知识

    简单了解 怎么理解Solr是个什么东西呢? 引用官网的介绍, Solr is the popular, blazing-fast, open source enterprise search plat ...

  8. linux基础重定向,用户,组,以及权限管理

    一.重定向 标准输出standard output1>,>> 标准错误输出standard error output22>,2>> 标准输出设备::显示器 标准输入 ...

  9. mysql的一些语法

    alter table S61.T6198 modify  F12 varchar(30) DEFAULT NULL COMMENT '流水号'; 修改表字段结构. mysql不支持top ,只支持l ...

  10. 关于KiCAD的一些插件

    关于KiCAD的一些插件 https://gitee.com/KiCAD-CN/KiCad-CN-Forum/blob/master/KiCad_help_zh_CN.md#swapit-%E5%B7 ...