2022-06-02

參考Vue源碼 寫一個 將 style對象數組合并為一個style對象髓窜,并且為元素設置style的功能

function updateStyle(el, styleObj) {

    for (sname in styleObj) {

        setProp(el, sname, '');
    }
}
function toObject(arr) {
    var res = {};
    for (var i = 0; i < arr.length; i++) {
        if (arr[i]) {
            Object.assign(res, arr[i]);
        }
    }
    return res
}
/*  */

var cssVarRE = /^--/;
var importantRE = /\s*!important$/;
var setProp = function (el, name, val) {
    /* istanbul ignore if */
    if (cssVarRE.test(name)) {
        el.style.setProperty(name, val);
    } else if (importantRE.test(val)) {
        el.style.setProperty(hyphenate(name), val.replace(importantRE, ''), 'important');
    } else {
        var normalizedName = normalize(name);
        if (Array.isArray(val)) {
            // Support values array created by autoprefixer, e.g.
            // {display: ["-webkit-box", "-ms-flexbox", "flex"]}
            // Set them one by one, and the browser will only set those it can recognize
            for (var i = 0, len = val.length; i < len; i++) {
                el.style[normalizedName] = val[i];
            }
        } else {
            el.style[normalizedName] = val;
        }
    }
};
/**
 * Hyphenate a camelCase string.
 */
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = cached(function (str) {
    return str.replace(hyphenateRE, '-$1').toLowerCase()
});
/**
 * Ensure all props option syntax are normalized into the
 * Object-based format.
 */
function normalizeProps(options, vm) {
    var props = options.props;
    if (!props) { return }
    var res = {};
    var i, val, name;
    if (Array.isArray(props)) {
        i = props.length;
        while (i--) {
            val = props[i];
            if (typeof val === 'string') {
                name = camelize(val);
                res[name] = { type: null };
            } else {
                warn('props must be strings when using array syntax.');
            }
        }
    } else if (isPlainObject(props)) {
        for (var key in props) {
            val = props[key];
            name = camelize(key);
            res[name] = isPlainObject(val)
                ? val
                : { type: val };
        }
    } else {
        warn(
            "Invalid value for option \"props\": expected an Array or an Object, " +
            "but got " + (toRawType(props)) + ".",
            vm
        );
    }
    options.props = res;
}
/**
 * Create a cached version of a pure function.
 */
function cached(fn) {
    var cache = Object.create(null);
    return (function cachedFn(str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
}

/**
 * Camelize a hyphen-delimited string.
 */
var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
    return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末谨履,一起剝皮案震驚了整個濱河市钙皮,隨后出現的幾起案子碍讨,更是在濱河造成了極大的恐慌,老刑警劉巖猜拾,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件唯绍,死亡現場離奇詭異,居然都是意外死亡偿荷,警方通過查閱死者的電腦和手機窘游,發(fā)現死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跳纳,“玉大人忍饰,你說我怎么就攤上這事∷伦” “怎么了艾蓝?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長斗塘。 經常有香客問我赢织,道長,這世上最難降的妖魔是什么馍盟? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任于置,我火速辦了婚禮,結果婚禮上朽合,老公的妹妹穿的比我還像新娘俱两。我一直安慰自己,他們只是感情好曹步,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布宪彩。 她就那樣靜靜地躺著,像睡著了一般讲婚。 火紅的嫁衣襯著肌膚如雪尿孔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天筹麸,我揣著相機與錄音活合,去河邊找鬼。 笑死物赶,一個胖子當著我的面吹牛白指,可吹牛的內容都是我干的。 我是一名探鬼主播酵紫,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼告嘲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了奖地?” 一聲冷哼從身側響起橄唬,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎参歹,沒想到半個月后仰楚,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡犬庇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年僧界,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片械筛。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡捎泻,死狀恐怖,靈堂內的尸體忽然破棺而出埋哟,到底是詐尸還是另有隱情笆豁,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布赤赊,位于F島的核電站闯狱,受9級特大地震影響,放射性物質發(fā)生泄漏抛计。R本人自食惡果不足惜哄孤,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吹截。 院中可真熱鬧瘦陈,春花似錦凝危、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至捉貌,卻和暖如春支鸡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背趁窃。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工牧挣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人醒陆。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓瀑构,卻偏偏與公主長得像,于是被迫代替她去往敵國和親刨摩。 傳聞我的和親對象是個殘疾皇子检碗,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 6.1復盤 1鍛煉有助于增強體質和睡眠 2不要控制不住自己的情緒 3懷著喜悅的心態(tài)去接單子 4感謝古姐給的一切嘗試...
  • 《養(yǎng)生指南》雜志是一本專注老齡生活的健康養(yǎng)生類科普期刊,不僅集結各領域的專家為您保駕護航码邻,還立志采集1萬名百歲老人...
    養(yǎng)生指南閱讀 92評論 0 0
  • 很多人覺得NFT就是一個投機的噱頭為了割韭菜的折剃,覺得一個復制的漫天飛的圖片就能賣錢。但首先如果你是站在未來的某一天...
    中聯雷閱讀 106評論 0 0
  • 今日體驗像屋,控制的情緒怕犁,我們是干什么的。 核心己莺,服務客戶奏甫,滿意度。 用凌受,自我斟酌阵子,價值觀念,短期胜蛉,中期挠进,長期
    王海博閱讀 95評論 0 0
  • 失眠,不僅僅是睡不著那么簡單誊册,還會產生很多健康問題: 1领突、導致人過早衰老。一方面會讓人體激素的分泌受到影響案怯,另一方...
    空間失眠閱讀 92評論 0 0