資訊專欄INFORMATION COLUMN
摘要：我房租到期了，可以去你心里住嗎要是我和你生一個孩子你覺得他會是什么座什么座雙子座不，我們的杰作。最后嗶嗶兩句，作為一個程序員，無論工作如何繁忙，請不要忘記撩妹，祝大家早日脫單獻上地址
說到撩妹這個話題，估計很多人都覺得和程序員沾不上邊，大多數人對程序員的印象是這樣的：木訥，老實，內向，不愛社交。眼里只有代碼，不懂浪漫！作為一個多年的程序員老磚員，我決定為廣大程序員伙伴澄清這個謠言，告訴大家，我們程序員也是很浪漫的！
為了不讓大家痛失女神的芳心，我做了一個表白神器，在此和各位程序員小哥哥們分享分享！最終贏取白富美，走上人生巔峰！首先看看效果。掃描下方二維碼即可預覽 【看看代碼的實現】 一、寫代碼前首先需要考慮以下幾點
兼容不同手機分辨率
采用CSS3動畫，更流暢
文字的定位采用一個算法，將其豎排居中顯示
后期的可拓展性
二、代碼之工具方法我們需要一些工具方法，將之抽離出來以便公用，最好不要污染業務代碼，這里用了一個詞“污染”，在我們做項目的時候，其實很多代碼都是和業務無關的，如果都寫到一起了，這樣會讓我們的業務非常不清晰，之所以要抽離出來，就是為了讓我們的業務邏輯清晰可見，當抽離出來后，你會發現，業務代碼就幾行，看上去非常的簡潔。
以下是我抽離的非業務代碼
/**
*
* @desc 生成指定范圍隨機數
* @param {Number} min
* @param {Number} max
* @return {Number}
*/
export function randomNum(min, max) {
return Math.floor(min + Math.random() * (max - min));
}
/**
* @desc 數組打亂順序
*/
export function randomArrSort(arr) {
arr.sort(() => 0.5 - Math.random());
return arr;
}
/**
*
* @desc 隨機生成顏色
* @return {String}
*/
export function randomColor() {
return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
}
/**
* 生成一個用不重復的ID
*/
export function getRandomID(randomLength = 8) {
return "id_" + Number(
Math.random()
.toString()
.substr(3, randomLength || 8) + Date.now()
).toString(36);
}
/**
* @desc 設置自動適配的尺寸
*/
export function setSize($box, scale, fixed) {
let width = fixed ? appWidth : $box.width(),
height = fixed ? appHeight : $box.height();
const { innerWidth, innerHeight } = window;
let top = (innerHeight - height * scale) / 2;
if (top < 0) {
top = 0;
}
$box.css({
left: (innerWidth - width * scale) / 2,
top: top,
transform: `scale(${scale})`
});
}
/**
* @desc 計算sacle 和 偏移
*/
export function getScale() {
const width = 320;
const height = 514;
// 自動適配
const { innerWidth, innerHeight } = window;
// 假設寬度適配 scale * width = innerWidth
let scale1 = innerWidth / width;
// 假設高度適配 scale * height = innerHeigh
let scale2 = innerHeight / height;
return scale1 > scale2 ? scale2 : scale1;
}
三、抽取公共類
其實我們的文字可以多帶帶抽離成一個類進行管理，這個類需要包含文字相關的一些方法
1、獲取隨機文案
2、獲取全部文字
3、渲染全部的文字
4、執行文字動畫
5、計算目標文案的位置
6、尋找目標文字的位置，然后clone一個
7、初始化
8、重新執行
我大致評估了，需要這些方法。
所以文字的類構造如下：
import * as tool from "../utils/tools";
import { texts } from "./texts";
/**
* @desc 文字的方法
*/
export default class Text {
constructor(set) {
this.set = Object.assign(
{
target: "#phone",
width: 320,
height: 514,
callback: () => {}
},
set
);
this.dom = $(set.target);
}
// 獲取隨機文案
getText() {
const index = tool.randomNum(0, texts.length - 1);
const t1 = texts[index];
return t1.split("");
}
// 獲取全部文字
getAllText() {
let all = [];
const { width, height } = this.set;
texts.forEach(d => {
// let str = d.replace(/[，,。,？,！,……,～,：”,“,s]/gm, "");
all = [...all, ...d.split("")];
});
// 去重
all = Array.from(new Set(all));
all = all.map(text => {
const a = tool.randomNum(5, 10);
const iskey = this.targetText.indexOf(text) === -1 ? false : true;
return {
id: tool.getRandomID(),
y: height / 2 - a / 2,
x: width / 2 - a / 2,
opacity: Math.random() * 0.5,
scale: Math.random() * 1.2,
iskey,
width: a,
height: a,
text
};
});
return tool.randomArrSort(all);
}
// 渲染allText
renderTexts(arr) {
let shtml = "";
arr.forEach(d => {
const { id, x, y, scale, opacity, iskey, width, height, text } = d;
shtml += `${text}`;
});
this.dom.append(shtml);
}
// 計算目標文字的位置
getTargetCoord(targetText) {
const tlen = targetText.length;
let val = 10; // 10個換行
let size = 20,
arr = [],
boxWidth = Math.ceil(tlen / val) * size,
boxHeight = size * val; // 10個字換行
const { width, height } = this.set;
// 坐標起點
const start = {
x: (width - boxWidth) / 2,
y: (height - boxHeight) / 2 - 100
};
for (let i = 0; i < tlen; i++) {
let a = Math.floor(i / val);
arr.push({
width: size,
height: size,
x: start.x + a * size,
y: start.y + (i - a * val) * size
});
}
return arr;
}
// 找到對應的字，然后clone一個對象
cloneTargetStyle(d, tArr) {
const obj = tArr.filter(a => {
return a.text === d;
})[0];
obj.id = tool.getRandomID();
return { ...obj };
}
// 目標文字動畫
targetTextAimate() {
let index = 0;
let tArr = [];
this.allText.forEach(d => {
if (d.iskey) {
tArr.push(d);
}
$(`#${d.id}`).css({
opacity: 0
});
});
// 獲取目標數組
const targetArr = [];
this.targetText.forEach(d => {
targetArr.push(this.cloneTargetStyle(d, tArr));
});
// 設置坐標
const arr = this.getTargetCoord(targetArr);
// 渲染dom
this.renderTexts.bind(this)(targetArr);
targetArr.forEach((d, index) => {
let item = arr[index];
$(`#${d.id}`).css({
opacity: 1,
width: item.width,
height: item.height,
transform: `translate(${item.x}px, ${item.y}px) scale(1)`
});
});
setTimeout(() => {
this.set.callback();
}, 3000);
}
// allText 文字動畫
allTextAnimate() {
const { width, height } = this.set;
let count = 0;
const doAnimate = () => {
count++;
this.allText = this.allText.map(d => {
d.y = tool.randomNum(0, height);
d.x = tool.randomNum(0, width);
d.scale = Math.random() * 1.5;
// d.opacity = Math.random() * 0.5;
return d;
});
this.allText.forEach(d => {
const { x, y, scale } = d;
$(`#${d.id}`).css({
transform: `translate(${x}px, ${y}px) scale(${scale})`
});
});
};
const runTime = () => {
if (count > 2) {
setTimeout(() => {
this.targetTextAimate.bind(this)();
}, 3000);
return;
}
setTimeout(() => {
doAnimate();
runTime();
}, 3000);
};
doAnimate();
runTime();
}
// 重新執行
restart = () => {
this.dom.empty();
this.targetText = this.getText();
this.allText = this.getAllText.bind(this)();
this.renderTexts.bind(this)(this.allText);
setTimeout(() => {
this.allTextAnimate.bind(this)();
}, 10);
};
// 初始化
init = () => {
// 獲取文案
this.targetText = this.getText();
this.allText = this.getAllText.bind(this)();
// 渲染文字
this.dom.addClass("h5ds-text7");
this.renderTexts.bind(this)(this.allText);
setTimeout(() => {
this.allTextAnimate.bind(this)();
}, 0);
};
}
四、文案拓展性，可自定義文案
為了可以自定義文案，我多帶帶把文案拿了出來
export const texts = [
"我想在你那里買一塊地。買什么地？買你的死心塌地",
"你知道你和星星有什么區別嗎？星星在天上而你在我心里",
"我十拿九穩 就只差你一吻了",
"可愛不是長久之計，可愛我是",
"小豬佩奇，你配我",
"有謠言說我喜歡你，我澄清一下，那不是謠言",
"只許州官放火 不許……你離開我",
"你昨天晚上應該很累吧，因為你在我夢里一直跑個不停",
"我覺得你接近我就是在害我，害得我好喜歡你呀",
"你今天好奇怪，怪可愛的",
"我覺得我好花心，你每天的樣子我都好喜歡",
"你有打火機嘛？沒有？那你是如何點燃我的心的",
"我說不清我為什么愛你，我只知道，只要有你，我就不可能愛上別人",
"我喜歡你，像你媽打你，不講道理",
"知道你為什么這么冷嗎？因為你沒有像我這么暖的對象在身邊啊。",
"無事獻殷勤，非……非常喜歡你",
"子曰：三思而后行，1，2，3～嗯～我喜歡你。",
"小女子不才，掐指一算，公子今生缺我。",
"你有地圖嗎？我在你的眼睛里迷路了。",
"你知道我最喜歡什么神嗎？是你的眼神。",
"你要是丑點，我或許可以帶你逛街看電影吃西餐散散步看星星看月亮，從詩詞歌賦談到人生哲學，可你長的那么好看，讓我只想和你戀愛。",
" 我房租到期了，可以去你心里住嗎？",
"“要是我和你生一個孩子你覺得他會是什么座？”“什么座？雙子座？”“不，我們的杰作?！?,
"“你可以笑一個嗎？”“為什么??？”“因為我的咖啡忘加糖了?！?,
"“你想喝點什么？”“我想呵護你?！?,
"“我覺得你長得像我一個親戚?！薄?？？？”“我媽的兒媳婦?！?,
"“你知道情人眼里出什么嗎？”“西施啊。”“不，出現你?！?,
"“你最近是不是又胖了？”“沒有啊，為什么這么說？”“那你為什么在我心里的分量越來越重了呢？”",
"落葉歸根，你歸我。",
"苦海無涯，回頭是我。",
"不想撞南墻了，只想撞撞先生胸膛。",
"你上輩子一定是碳酸飲料吧，不然我怎么一看到你就開心地冒泡呢。",
"你會彈鋼琴嗎？不會？那你是怎么撩動我的心弦的呢。",
"第一次見到你時，上帝在我耳旁說了幾個字，在劫難逃。",
"你知道喝什么酒最容易醉嗎？是你的天長地久。",
"“你屬什么？”“我屬虎?！薄澳悴灰衮_人了，你屬于我。”",
"“你是什么星座? 雙子座嗎?”“ 不是。我是為你量身定做。”",
"你知道我最大的缺點是什么嗎？是缺點你。",
"如果我把你推到花園里面，我就會找不到你。因為你像花兒一樣美麗。",
"有時候生活有些苦難，你不要去抱怨，抱我就好了。"
];
五、業務代碼
其實當我們抽離了類，抽取了非業務相關的公共方法。業務代碼就非常簡單了,下面就是HTML + 業務相關的代碼。
七
夕
必
備
甜
言
蜜
語
`);
alert("圖片已經生成，長按屏幕保存到手機！")
})
.catch(function(error) {
console.error("oops, something went wrong!", error);
});
});
});
六、總結
在做一個項目的時候，我們盡可能的剝離出業務不相關的代碼，讓編程的思想盡可能的清晰，任何API接口的設計都是為了讓用戶更好的實現自己的業務，當然，如果對底層的實現邏輯有興趣的朋友，也可以去具體的了解下每個方法內部的實現，進一步提升自身的實力，當然，Text這個類還可以進一步的優化，比如把數據作為參數傳到類里面，這樣做會更靈活！這些就是后來所謂的優化，迭代環節了。
最后嗶嗶兩句，作為一個程序員，無論工作如何繁忙，請不要忘記撩妹，祝大家早日脫單！獻上github地址：https://github.com/mtsee/vale...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96945.html
相關文章
-
給學弟學妹的招聘分享
摘要：阿里作為的一員，面試是有難度的。原沒有那小公司練手，很多同學都是裸考阿里。
這個總結其實來得挺晚的，但是又非常必要。我很有幸參加了今年的春秋招，并且前往深圳和北京這兩個城市體驗一線城市的精彩和心酸，無論是去深圳的一家小公司，還是轉戰北京小米。最終簽約成都華為。我都有好多話想說。但是今天不是故事會，而是求職分享會，我希望我在本年度春秋招的所見所得能幫助你們應對明年的招聘
接下來請看一個時...
-
Python中的描述符
摘要：解答三個問題，描述是什么如何實現使用場景一什么是描述符描述符就是一個具有綁定行為的對象屬性，其屬性訪問將由描述符協議中的方法覆蓋。如果這些方法中的任何一個針對某個對象定義，那么它就被認為是一個描述符。
解答三個問題，描述是什么？如何實現？使用場景？
一、什么是描述符
描述符就是一個具有綁定行為的對象屬性，其屬性訪問將由描述符協議中的方法覆蓋。這些方法為 __get__、__set__ ...
發表評論
0條評論
SKYZACK
男|高級講師
TA的文章
閱讀更多
哀悼日網站全站變灰CSS代碼
閱讀 3466·2019-08-30 13:15
css面試總結
閱讀 1403·2019-08-29 18:34
PostCSS真的太好用了！
閱讀 829·2019-08-29 15:18
JS實現信息滾動效果
閱讀 3488·2019-08-29 11:21
Amaze UI Web 與 Amaze UI Touch 有什么不同？一張圖給你解釋！
閱讀 3252·2019-08-29 10:55
17道面試題徹底理解 JavaScript 中的類型轉換
閱讀 3705·2019-08-26 10:36
JavaScript中連綴字符串轉駝峰寫法的方法匯總
閱讀 1874·2019-08-23 18:37
fe5-3:事件機制和事件綁定
閱讀 1827·2019-08-23 16:57
最新活動
