自己封装js组件 - 初级

Posted 2020-08-25 三胖子

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指南就要有中级 甚至是高级 未完待续。。。