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