2天前抱着试试看的态度注册了此神博,心血来潮呕心沥血写了一篇关于vue 自定义组件的小文章 尼玛果然一个评论的没有!果然毫无人气!(当然了我这文章内容有限和大神们的比起来简直是粗制滥造。。。)索性我就把这个博客变成自己学习的笔记记录吧或许这个博客的初衷也是如此吧!奈何我这颗当网红的心啊。。。

话不多说进入正题,之前看到各种大神自己用js封装插件 然后到处自己用 真尼玛高大上 要说我这几年页没少学习啊 怎么写个组件都不会呢!就在这时我终于在某网站找到了一个非常适合新手上手自己写插件的教程 感觉受益颇多 今天我就要当一下知识的搬运工分享一下上课的内容也作为自己的日后复习的笔记吧!

首先请了解会用require.js 这个事例使用require.js串联的 这里不再赘述(因为是学习记录所以此处没有展开 但是如果了解require.js后续接内容应该不成问题) 另外在这个课上老师写这个组件也是循序渐进 不断完善的 我的笔记也就一步一步记录了 防止我这猪脑子过几天来看又给忘了(我经常自己昨天干啥都忘记了 没办法老了就这样 请不要嘲笑我)

目的:开发一个自己用js封装的alert弹出组件

define(['jquery'],function($){

  //定义window类 给一些基本的参数配置

  function Window(){

    this.cfg = {
      width:400,
      height:200,
      content:'我是默认文本内容',
    }

  }

  //给window类添加方法

  Window.prototype = {

    var CFG = $.extend(this.cfg,cfg);

    alert:function(cfg){

      var boundingBox = $('<div class="window_boundingBox"></div>');

      boundingBox.appendTo('body')

      boundingBox .html(CFG .content);

      boundingBox.css({

        width:CFG .width,

        height:CFG.height,

        left:(CFG.x || (window.innerWidth - CFG.width)/2)+'px',

        top:(CFG.y || (window.innerHeight - CFG.height)/2)+'px',

      })

      }

    }

  }

  //导出window类

  return {

  Window:Window  

  }

})

下面是在main.js中调用

require(['jquery','window'],function($,w){
  new w.Window().alert({
  width:500,
  height:300,
  content:'新年快乐',
  })
})

这是用js自己封装插件的初级装B阶段 但是在高手看起来还是很low因为这个根本就不完成就是弹出过框子你就告诉我这是alert弹出组件??? 没关系既然有初级装B指南就要有中级 甚至是高级 未完待续。。。

自己封装js组件 - 初级的更多相关文章

  1. 自己封装js组件 - 中级中高级

    接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...

  2. 自己封装js组件 - 中级

    书接上文,上次弄了个基本版本的alert组件(其实就是十分钟前)但是很多功能都没有实现 没有关闭按钮 没有下面确定按钮 没有模态框 没有这那的 这次终极篇就都给它完善好弄个中级版本也是基本可用版本! ...

  3. JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错

    前言:之前分享过两篇bootstrap下拉框的组件:JS组件系列——两种bootstrap multiselect组件大比拼  和 JS组件系列——Bootstrap Select2组件使用小结 ,收 ...

  4. JS组件系列——封装自己的JS组件,你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  5. JS组件系列——分享自己封装的Bootstrap树形组件:jqTree

    前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第 ...

  6. JS组件系列——封装自己的JS组件

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  7. Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  9. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

随机推荐

  1. HDU 4856 Tunnels(BFS+状压DP)

    HDU 4856 Tunnels 题目链接 题意:给定一些管道.然后管道之间走是不用时间的,陆地上有障碍.陆地上走一步花费时间1,求遍历全部管道须要的最短时间.每一个管道仅仅能走一次 思路:先BFS预 ...

  2. 多线程003 - 再谈CyclicBarrier

      java.util.concurrent.CyclicBarrier也是JDK 1.5提供的一个同步辅助类(为什么用也呢?參见再谈CountDownLatch).它同意一组线程互相等待,直到到达某 ...

  3. Keil5.15版本号

    Keil5.15下载地址 http://pan.baidu.com/s/1kT6AGvX Keil5.15软件补丁下载地址 http://www.keil.com/dd2/pack/ Keil5.15 ...

  4. mybatis和hibernate的区别【转】

    第一章     Hibernate与MyBatisHibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀的 ...

  5. windows编译ffmpeg出现gcc is unable to create an executable file 的普通情况

    近期有个朋友在编译ffmpeg的时候出现这个问题,他非常郁闷. 我就说,为什么我弄的时候就没问题呢??直接./configure +加上后面的參数 安全度过. 然后,我就想了,预计他的gcc的系统变量 ...

  6. Android解决ScrollView视图导致其底部的布局栏被推到上边的问题

    近期有个xml布局文件,我说下大概意思: <ScrollView> ...... </ScrollView> <RelativeLayout> ...... < ...

  7. xBIM 基础16 IFC的空间层次结构

    系列目录    [已更新最新开发文章,点击查看详细]  本篇介绍如何从文件中检索空间结构.IFC中的空间结构表示层次结构的嵌套结构,表示项目,站点,建筑物,楼层和空间.如果您查看IFC文档, 您会发现 ...

  8. 解决django.db.utils.InternalError: (1049, "Unknown database 'exam_db'")

    先检查seeting数据库配置DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'eaxm_db', ' ...

  9. ETL工具的功能和kettle如何来提供这些功能

    不多说,直接上干货! 大家会有一个疑惑,本系列博客是Kettle,那怎么扯上ETL呢? Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行. 说白了 ...

  10. SpringMVC(一) 简单代码编写,注解,重定向与转发

    SpringMVC是什么 SpringMVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品,以SpringIOC容器为基础,并利用容器的特性来简化它的配置.SpringMVC相 ...