自己封装js组件

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组件 - 初级

最新文章

热门文章