資訊專欄INFORMATION COLUMN
摘要：先來(lái)一個(gè)直播點(diǎn)贊動(dòng)效的例子用于算出的隨機(jī)值圖片最終的位置關(guān)閉點(diǎn)贊動(dòng)畫的時(shí)間組件套路基于工具類函數(shù)寫在上組件初始化參數(shù)賦值組件內(nèi)部事件組件與外部相關(guān)有事件
先來(lái)一個(gè)直播點(diǎn)贊動(dòng)效的例子
$(function () {
function Like(config) {
this.config = this.initConfig(config);
}
Like.prototype.initConfig = function (params) {
var defaults = {
DomEle: ".demo",
getImgUrl: function () {
var num = Math.floor(Math.random() * 3 + 1);
return "images/" + num + ".png";
},
leftRange:[100,200],//用于算出css left的隨機(jī)值[100,200]
bootom: "300px",//圖片最終的位置
closeLikeTime: 6000,//關(guān)閉點(diǎn)贊動(dòng)畫的時(shí)間
imgCss:{
width: "20px",
height: "20px",
position: "absolute",
bottom: "100px",
left: "50%",
marginLeft: "-10px"
}
};
var self = this;
var config = $.extend({}, defaults, params);
$(config.DomEle).append("");
setTimeout(function () {
clearInterval(time)
}, config.closeLikeTime);
var time = setInterval(function () {
self.like_animate(config.getImgUrl, config.leftRange, config.bootom);
}, 100);
console.log(config)
return config;
};
Like.prototype.like_animate = function (getImgUrl, leftRange, bootom) {
var self=this;
var x = leftRange[0], y = leftRange[1];
var rand = parseInt(Math.random() * (x - y + 1) + y);
var imgSrc = getImgUrl();
if (imgSrc) {
var img = $("
");
$(self.config.DomEle+" .likeBox").append(img);
img.css(self.config.imgCss).animate({
bottom: bootom || "300px",
opacity: "0",
left: rand
}, 3000)
} else {
throw new Error("getImgUrl is null")
}
};
new Like();
new Like({
DomEle: ".demo2",
imgCss:{
width: "20px",
height: "20px",
position: "absolute",
bottom: "100px",
left: "50%",
marginLeft: "100px"
}
})
})
組件套路(基于jQuery)：
1. 工具類函數(shù)寫在prototype上
2. this.config = $.extend({}, defaults, this.config);//組件初始化參數(shù)賦值
3. 組件內(nèi)部click事件：this.$changeMoneyBtn.click($.proxy(this.change_money, this));
4. 組件與外部相關(guān)有click事件：self.config.toAdditionBtnClickCB();
function ComponentName(config) {
var self = this;
this.config = config;
this.initConfig();
this.$moneyInput = $(".moneyInput");
this.randomMoney="";
var ppMoney;
var hongbaoAllRight = true;
this.$moneyInput.on("focus", function () {
});
this.$moneyInput.on("blur", function (e) {
});
$(".toAdditionBtn").on("click", function (e) {
self.config.toAdditionBtnClickCB();
});
$(".toAggrementLink").on("click",function () {
self.config.toAggrementLinkCB();
});
this.$changeMoneyBtn.click($.proxy(this.change_money, this));
}
ComponentName.prototype.initConfig = function () {
var defaults = ComponentName.prototype.defaults = {
template: ""
};
this.config = $.extend({}, defaults, this.config);
var config = this.config;
var data= {
}
var html = _.template(config.template, {variable: "list"})(data);
$("."+config.className).append(html);
}
ComponentName.prototype.change_money = function () {
var self=this;
this.getdata(self.randomMoney);
this.$moneyInput.val("")
}
ComponentName.prototype.nicknameInputBlur = function (e) {
var nickName = e.target.value;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84413.html
摘要：為什么要采用面向?qū)ο缶幊探鉀Q問(wèn)題更容易設(shè)計(jì)計(jì)算機(jī)程序就是為了解決人類的問(wèn)題。面向?qū)ο缶幊绦枰獙?duì)業(yè)務(wù)及代碼的架構(gòu)是有一定的要求的。 1. 編程方式 我們目前的編程方式大體可以有以下三種編程方式： 順序編程 過(guò)程式編程 面向?qū)ο缶幊? 在講面向?qū)ο缶幊虝r(shí)先講一下什么是順序編程，什么是過(guò)程式編程，什么是面向?qū)ο缶幊蹋? 順序編程： 就是只用一個(gè)單線程去執(zhí)行一段代碼，執(zhí)行過(guò)程根據(jù)代碼依次從上...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：說(shuō)到底面向?qū)ο蟛攀浅绦蛘Z(yǔ)言的根本。其實(shí)面向?qū)ο缶幊陶f(shuō)的就是自定義對(duì)象。里并沒(méi)有類的概念，所以嚴(yán)格上來(lái)講這是個(gè)假的面向?qū)ο罄锏拿嫦驅(qū)ο缶幊态F(xiàn)在好了，終于聽到別人鄙視我們了，給我們提供了類這個(gè)概念，其實(shí)是向傳統(tǒng)語(yǔ)言更靠齊了。 通過(guò)前兩篇文章，我們了解了對(duì)象的概念以及面向?qū)ο罄锏南嚓P(guān)概念等知識(shí)，那前面說(shuō)了對(duì)象分類里的前兩種，這篇文章要詳細(xì)去說(shuō)第三種自定義對(duì)象，那真正的好戲這就來(lái)了！ 面向?qū)ο?..
摘要：聲明式編程一種編程范式，與命令式編程相對(duì)立。常見的聲明式編程語(yǔ)言有數(shù)據(jù)庫(kù)查詢語(yǔ)言，正則表達(dá)式邏輯編程函數(shù)式編程組態(tài)管理系統(tǒng)等。函數(shù)式編程，特別是純函數(shù)式編程，嘗試最小化狀態(tài)帶來(lái)的副作用，因此被認(rèn)為是聲明式的。 編程范式與函數(shù)式編程 一、編程范式的分類 常見的編程范式有：函數(shù)式編程、程序編程、面向?qū)ο缶幊?、指令式編程等。在面向?qū)ο缶幊痰氖澜?，程序是一系列相互作用（方法）的?duì)象（Class...
閱讀 1402·2023-04-26 01:28
閱讀 2135·2021-11-08 13:28
閱讀 2385·2021-10-12 10:17
閱讀 2413·2021-09-28 09:46
閱讀 4254·2021-09-09 09:33
閱讀 3788·2021-09-04 16:40
閱讀 1275·2019-08-29 15:21
閱讀 2752·2019-08-26 17:17
