摘要：我房租到期了，可以去你心里住嗎要是我和你生一個(gè)孩子你覺得他會是什么座什么座雙子座不，我們的杰作。最后嗶嗶兩句，作為一個(gè)程序員，無論工作如何繁忙，請不要忘記撩妹，祝大家早日脫單獻(xiàn)上地址

說到撩妹這個(gè)話題，估計(jì)很多人都覺得和程序員沾不上邊，大多數(shù)人對程序員的印象是這樣的：木訥，老實(shí)，內(nèi)向，不愛社交。眼里只有代碼，不懂浪漫！作為一個(gè)多年的程序員老磚員，我決定為廣大程序員伙伴澄清這個(gè)謠言，告訴大家，我們程序員也是很浪漫的！

為了不讓大家痛失女神的芳心，我做了一個(gè)表白神器，在此和各位程序員小哥哥們分享分享！最終贏取白富美，走上人生巔峰！

兼容不同手機(jī)分辨率

采用CSS3動(dòng)畫，更流暢

文字的定位采用一個(gè)算法，將其豎排居中顯示

后期的可拓展性

我們需要一些工具方法，將之抽離出來以便公用，最好不要污染業(yè)務(wù)代碼，這里用了一個(gè)詞“污染”，在我們做項(xiàng)目的時(shí)候，其實(shí)很多代碼都是和業(yè)務(wù)無關(guān)的，如果都寫到一起了，這樣會讓我們的業(yè)務(wù)非常不清晰，之所以要抽離出來，就是為了讓我們的業(yè)務(wù)邏輯清晰可見，當(dāng)抽離出來后，你會發(fā)現(xiàn)，業(yè)務(wù)代碼就幾行，看上去非常的簡潔。

以下是我抽離的非業(yè)務(wù)代碼

/**
 *
 * @desc 生成指定范圍隨機(jī)數(shù)
 * @param  {Number} min
 * @param  {Number} max
 * @return {Number}
 */
export function randomNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
}

/**
 * @desc 數(shù)組打亂順序
 */
export function randomArrSort(arr) {
    arr.sort(() => 0.5 - Math.random());
    return arr;
}

/**
 *
 * @desc 隨機(jī)生成顏色
 * @return {String}
 */
export function randomColor() {
    return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
}

/**
 * 生成一個(gè)用不重復(fù)的ID
 */
export function getRandomID(randomLength = 8) {
    return "id_" + Number(
        Math.random()
            .toString()
            .substr(3, randomLength || 8) + Date.now()
    ).toString(36);
}

/**
 * @desc 設(shè)置自動(dòng)適配的尺寸
 */
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 計(jì)算sacle 和 偏移
 */
export function getScale() {
    const width = 320;
    const height = 514;
    // 自動(dòng)適配
    const { innerWidth, innerHeight } = window;
    // 假設(shè)寬度適配 scale * width = innerWidth
    let scale1 = innerWidth / width;
    // 假設(shè)高度適配 scale * height = innerHeigh
    let scale2 = innerHeight / height;
    return scale1 > scale2 ? scale2 : scale1;
}

其實(shí)我們的文字可以多帶帶抽離成一個(gè)類進(jìn)行管理，這個(gè)類需要包含文字相關(guān)的一些方法

1、獲取隨機(jī)文案
2、獲取全部文字
3、渲染全部的文字
4、執(zhí)行文字動(dòng)畫
5、計(jì)算目標(biāo)文案的位置
6、尋找目標(biāo)文字的位置，然后clone一個(gè)
7、初始化
8、重新執(zhí)行

我大致評估了，需要這些方法。

所以文字的類構(gòu)造如下：

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);
    }

    // 獲取隨機(jī)文案
    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);
    }

    // 計(jì)算目標(biāo)文字的位置
    getTargetCoord(targetText) {
        const tlen = targetText.length;
        let val = 10; // 10個(gè)換行
        let size = 20,
            arr = [],
            boxWidth = Math.ceil(tlen / val) * size,
            boxHeight = size * val; // 10個(gè)字換行
        const { width, height } = this.set;
        // 坐標(biāo)起點(diǎn)
        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;
    }

    // 找到對應(yīng)的字，然后clone一個(gè)對象
    cloneTargetStyle(d, tArr) {
        const obj = tArr.filter(a => {
            return a.text === d;
        })[0];
        obj.id = tool.getRandomID();
        return { ...obj };
    }

    // 目標(biāo)文字動(dòng)畫
    targetTextAimate() {
        let index = 0;
        let tArr = [];
        this.allText.forEach(d => {
            if (d.iskey) {
                tArr.push(d);
            }
            $(`#${d.id}`).css({
                opacity: 0
            });
        });

        // 獲取目標(biāo)數(shù)組
        const targetArr = [];
        this.targetText.forEach(d => {
            targetArr.push(this.cloneTargetStyle(d, tArr));
        });

        // 設(shè)置坐標(biāo)
        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 文字動(dòng)畫
    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();
    }

    // 重新執(zhí)行
    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 = [
    "我想在你那里買一塊地。買什么地？買你的死心塌地",
    "你知道你和星星有什么區(qū)別嗎？星星在天上而你在我心里",
    "我十拿九穩(wěn) 就只差你一吻了",
    "可愛不是長久之計(jì)，可愛我是",
    "小豬佩奇，你配我",
    "有謠言說我喜歡你，我澄清一下，那不是謠言",
    "只許州官放火 不許……你離開我",
    "你昨天晚上應(yīng)該很累吧，因?yàn)槟阍谖覊衾镆恢迸軅€(gè)不停",
    "我覺得你接近我就是在害我，害得我好喜歡你呀",
    "你今天好奇怪，怪可愛的",
    "我覺得我好花心，你每天的樣子我都好喜歡",
    "你有打火機(jī)嘛？沒有？那你是如何點(diǎn)燃我的心的",
    "我說不清我為什么愛你，我只知道，只要有你，我就不可能愛上別人",
    "我喜歡你，像你媽打你，不講道理",
    "知道你為什么這么冷嗎？因?yàn)槟銢]有像我這么暖的對象在身邊啊。",
    "無事獻(xiàn)殷勤，非……非常喜歡你",
    "子曰：三思而后行，1，2，3～嗯～我喜歡你。",
    "小女子不才，掐指一算，公子今生缺我。",
    "你有地圖嗎？我在你的眼睛里迷路了。",
    "你知道我最喜歡什么神嗎？是你的眼神。",
    "你要是丑點(diǎn)，我或許可以帶你逛街看電影吃西餐散散步看星星看月亮，從詩詞歌賦談到人生哲學(xué)，可你長的那么好看，讓我只想和你戀愛。",
    " 我房租到期了，可以去你心里住嗎？",
    "“要是我和你生一個(gè)孩子你覺得他會是什么座？”“什么座？雙子座？”“不，我們的杰作。”",
    "“你可以笑一個(gè)嗎？”“為什么啊？”“因?yàn)槲业目Х韧犹橇恕！?,
    "“你想喝點(diǎn)什么？”“我想呵護(hù)你。”",
    "“我覺得你長得像我一個(gè)親戚。”“？？？”“我媽的兒媳婦。”",
    "“你知道情人眼里出什么嗎？”“西施啊。”“不，出現(xiàn)你。”",
    "“你最近是不是又胖了？”“沒有啊，為什么這么說？”“那你為什么在我心里的分量越來越重了呢？”",
    "落葉歸根，你歸我。",
    "苦海無涯，回頭是我。",
    "不想撞南墻了，只想撞撞先生胸膛。",
    "你上輩子一定是碳酸飲料吧，不然我怎么一看到你就開心地冒泡呢。",
    "你會彈鋼琴嗎？不會？那你是怎么撩動(dòng)我的心弦的呢。",
    "第一次見到你時(shí)，上帝在我耳旁說了幾個(gè)字，在劫難逃。",
    "你知道喝什么酒最容易醉嗎？是你的天長地久。",
    "“你屬什么？”“我屬虎。”“你不要再騙人了，你屬于我。”",
    "“你是什么星座? 雙子座嗎?”“ 不是。我是為你量身定做。”",
    "你知道我最大的缺點(diǎn)是什么嗎？是缺點(diǎn)你。",
    "如果我把你推到花園里面，我就會找不到你。因?yàn)槟阆窕▋阂粯用利悺?,
    "有時(shí)候生活有些苦難，你不要去抱怨，抱我就好了。"
];

其實(shí)當(dāng)我們抽離了類，抽取了非業(yè)務(wù)相關(guān)的公共方法。業(yè)務(wù)代碼就非常簡單了,下面就是HTML + 業(yè)務(wù)相關(guān)的代碼。

    
    
    
    
    
    



    
    

        由開源H5編輯器h5ds.com提供
    
    

        

            

                七
                夕
                必
                備
                甜
                言
                蜜
                語
            
            生成情話
        
        

        
        

            

                `);
                alert("圖片已經(jīng)生成，長按屏幕保存到手機(jī)！")
            })
            .catch(function(error) {
                console.error("oops, something went wrong!", error);
            });
    });
});

在做一個(gè)項(xiàng)目的時(shí)候，我們盡可能的剝離出業(yè)務(wù)不相關(guān)的代碼，讓編程的思想盡可能的清晰，任何API接口的設(shè)計(jì)都是為了讓用戶更好的實(shí)現(xiàn)自己的業(yè)務(wù)，當(dāng)然，如果對底層的實(shí)現(xiàn)邏輯有興趣的朋友，也可以去具體的了解下每個(gè)方法內(nèi)部的實(shí)現(xiàn)，進(jìn)一步提升自身的實(shí)力，當(dāng)然，Text這個(gè)類還可以進(jìn)一步的優(yōu)化，比如把數(shù)據(jù)作為參數(shù)傳到類里面，這樣做會更靈活！這些就是后來所謂的優(yōu)化，迭代環(huán)節(jié)了。