整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
豬腳本（原飛豬腳本）以按鍵精靈教學(xué)為主,涉及UiBot，Python,Lua等腳本編程語言,教學(xué)包括全自動(dòng)辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁腳本,安卓腳本,IOS腳本,注冊(cè)腳本,點(diǎn)贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個(gè)領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長(zhǎng).
1.什么是網(wǎng)頁元素特征字符串？
請(qǐng)參考網(wǎng)頁特征字符串詳解，
2.Html系列命令
2.1.HtmlSelect命令
1 HtmlSelect命令只能夠根據(jù)Select項(xiàng)的值來進(jìn)行選擇，注意這里不是顯示在Select項(xiàng)上的文字，而是該項(xiàng)的value。
一個(gè)典型的下拉框HTML代碼如下：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
這里如果要選擇上海，需要選擇值為2的項(xiàng)；
2）級(jí)聯(lián)的下拉列表組合。
在有的網(wǎng)頁中，會(huì)有幾個(gè)級(jí)聯(lián)的下拉列表，后一個(gè)下拉框會(huì)隨前一個(gè)框的值變化而發(fā)生變化，典型的有注冊(cè)頁面上的省份城市選擇，HtmlSelect命令能夠觸發(fā)Onchange事件，會(huì)導(dǎo)致后一個(gè)下拉框值發(fā)生變化，但是如果執(zhí)行腳本太快，而導(dǎo)致后一個(gè)未能選中正確的值，可以在前一個(gè)HtmlSelect后加上適當(dāng)?shù)难訒r(shí)；
3）多選表單中的列表控件；有的列表支持多選，在有一些個(gè)求職網(wǎng)站中，職業(yè)是可以多選的，這時(shí)候可以用%將多個(gè)需要選擇的值連接起來傳遞給HtmlSelect命令實(shí)現(xiàn)多選；
2.2.HtmlExists命令
HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個(gè)數(shù)。這個(gè)命令能夠用來判斷某個(gè)元素是否存在，如果為0證明不存在；
2.3.HtmlGet命令
HtmlGet命令比較復(fù)雜，但是功能也非常強(qiáng)大，該命令具備兩個(gè)參數(shù)，第一個(gè)參數(shù)為獲取類型，目前支持的值如下所示：
序號(hào) 值 適用對(duì)象
1 text 得到指定元素的文本值，對(duì)應(yīng)DOM屬性innerText
2 html 得到指定元素內(nèi)部的HTML代碼，對(duì)應(yīng)DOM屬性innerHTML
3 outerHtml 得到元素整體的HTML代碼，對(duì)應(yīng)DOM屬性的outerHTML
4 value 得到元素的Value值，用于獲取表單元素內(nèi)部的值
5 src 得到圖像元素的src屬性，用于IMG標(biāo)簽對(duì)象
6 href 得到鏈接元素的鏈接地址，用于A標(biāo)簽
7 …其他名稱 其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對(duì)應(yīng)的值。如何才是合法的屬性？請(qǐng)參閱HTML標(biāo)準(zhǔn)。
第二個(gè)參數(shù)為特征字符串，如果匹配多個(gè)，只能返回第一個(gè)元素的值；
例如，獲得淘寶貨物價(jià)格：
Plugin price=Web.HtmlGet("text","id:id_Price")
獲取某個(gè)表單文本的值
Plugin email=Web.HtmlGet("value","name:Email")
2.4.RunJS命令
RunJS命令提供了直接運(yùn)行Javascript的功能，如果您對(duì)JS非常熟悉，就能夠極大的擴(kuò)展WQM的功能。
RunJS命令支持兩中執(zhí)行方式，第一個(gè)參數(shù)設(shè)置為0時(shí)，能夠執(zhí)行一段沒有返回值的Javascript，
例如：
RunJS(0,"alert('hello');")
第一個(gè)參數(shù)設(shè)置為1時(shí)，能執(zhí)行一段js并返回由return語句返回的值，返回值為字符串類型；
例如：返回Html文檔的title；
RunJS(1,"var t=document.title;return t;")
如果您分析到網(wǎng)頁中某個(gè)按鈕實(shí)際上就是執(zhí)行了一個(gè)函數(shù)，例如
<input type="Button" … />
您就可以直接調(diào)用
RunJS(0,"dosomething();")
JQuery的支持，網(wǎng)頁按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫發(fā)生沖突，使用了wqmjq來代替$操作符，如果您需要直接使用JQ來操作網(wǎng)頁，可使用wqmjq來執(zhí)行Jquery語句：
RunJS(0,"wqmjq('#test').click();")
里妹導(dǎo)讀：今年的雙11已經(jīng)是阿里資深前端技術(shù)專家舒文來阿里的第11年，從應(yīng)屆生到雙11前端PM，他一路升級(jí)打怪，實(shí)現(xiàn)了崗位上從P4到P9的晉升。這第11屆雙11順利結(jié)束之際，他把在阿里這些年的成長(zhǎng)經(jīng)歷做一個(gè)總結(jié)和分享，希望你能在他的故事中得到些許啟發(fā)。
作者簡(jiǎn)介：舒文，來自淘系技術(shù)部前端團(tuán)隊(duì)。目前負(fù)責(zé)淘系(淘寶+天貓)的營(yíng)銷活動(dòng)、互動(dòng)的業(yè)務(wù)，也在阿里巴巴前端委員會(huì)主導(dǎo)搭建體系的技術(shù)方向。
2008年10月，入職阿里巴巴日文站，以前端崗加入U(xiǎn)ED團(tuán)隊(duì)。日文站 ( http://www.alibaba.co.jp ) 的業(yè)務(wù)源于阿里巴巴國(guó)際站 - 提供在線的平臺(tái)化服務(wù)，專注撮合中日貿(mào)易。
在那個(gè)前端的鴻蒙年代，頁面重構(gòu)工程師和Javascript程序員還是兩個(gè)細(xì)分職位： 在阿里，前端、交互、視覺共同劃屬用戶體驗(yàn)部門。
而在部份公司，有專門的重構(gòu)工程師。
在日文站亦如是：現(xiàn)實(shí)情況是杭州和東京的團(tuán)隊(duì)，具備寫JS能力的工程師均不多。不少同事專注在HTML/CSS領(lǐng)域，且專研極深。舉個(gè)例子：在日文站，所有的HTML/CSS代碼必須通過兩個(gè)Lint工具：HTML文書の文法をチェックし、採點(diǎn)します、[The W3C Markup Validation - 這讓代碼的規(guī)范性更好外，也能獲得更好的搜索引擎分析&索引權(quán)重。
隨著業(yè)務(wù)發(fā)展，需求場(chǎng)景多且復(fù)雜起來，對(duì)Javascript開發(fā)能力要求就越高。同時(shí)，也激發(fā)了我的技術(shù)熱情。除了看書，我迫切想?yún)⑴c其他事業(yè)部的前端交流會(huì)。感謝時(shí)任主管的支持，我開始主動(dòng)跨部門溝通，將他山之玉和學(xué)習(xí)所得有了更多結(jié)合。慢慢地，在團(tuán)隊(duì)內(nèi)部提出一些技術(shù)方案并逐漸應(yīng)用到杭州/東京兩個(gè)團(tuán)隊(duì) (特別感謝最早時(shí)代的D2)。
在那個(gè)階段，我?guī)缀鯀⑴c了所有較為復(fù)雜的項(xiàng)目。結(jié)合當(dāng)年的熱門大作《高性能網(wǎng)站建設(shè)指南》、Yahoo網(wǎng)站性能優(yōu)化黃金法則，負(fù)責(zé)了主站的性能優(yōu)化，取得了一些不錯(cuò)結(jié)果。
2009年10月獲得了日文站優(yōu)秀員工，年底順利晉升到新的層級(jí)(P5)。
2010年開始，業(yè)務(wù)略微調(diào)整，參與“日本買家獲得”(Buyer Growth)。這個(gè)業(yè)務(wù)本質(zhì)是通過平臺(tái)技術(shù)優(yōu)化(SEO、SEM等)獲得更高的搜索引擎權(quán)重、提高Landing到轉(zhuǎn)化。
在這期間，隨著被認(rèn)可度提升、持續(xù)的項(xiàng)目歷練，我的自信心也得到了鍛煉。除了參與更復(fù)雜的項(xiàng)目外，我開始主動(dòng)對(duì)業(yè)務(wù)和技術(shù)體系做出一些提案(Proposal) - 包括參考Google Webmaster Guidelines進(jìn)行技術(shù)優(yōu)化、參與了各種SEO項(xiàng)目，提出了現(xiàn)在回想起來各種或靠譜或不靠譜的提案。非常感謝歷任主管的支持和包容，讓一個(gè)楞頭青能夠沒有后顧之憂地敢想敢做。
日文站初版克隆自Alibaba.com，加之外包參與、跨東京和杭州多團(tuán)隊(duì)開發(fā)等原因，全站前端框架混雜，包括不限于YUI/Mootools/PrototypeJS/ExtJS/TBra等前端框架&類庫混雜在同一業(yè)務(wù)甚至頁面。新人上手、多人協(xié)作、性能優(yōu)化的成本很高，但歷史原因積重難返，大家苦不堪言。
結(jié)束一個(gè)大項(xiàng)目后，時(shí)值“憤青”的我對(duì)全站的代碼做了個(gè)調(diào)研和分析，說服了主管們，決定啟動(dòng)一個(gè)重構(gòu)項(xiàng)目——旨在將全站混雜的代碼統(tǒng)一到 jQuery。并大體確定了執(zhí)行方案：隨業(yè)務(wù)迭代上線、項(xiàng)目成員1人，我兼任PM、開發(fā)/自測(cè)。
在之后，一個(gè)如同打了雞血般的前端程序員，白天黑夜的翻歷史PRD、熟悉代碼邏輯、閱讀各種類庫的手冊(cè)，陸續(xù)將各業(yè)務(wù)線的腳本重寫了一遍，邊做業(yè)務(wù)項(xiàng)目邊重構(gòu)，整個(gè)項(xiàng)目持續(xù)了半年多，直到11年Q1完成。
現(xiàn)在回想起來，有些事情真需要一股沖動(dòng)，正如買房、結(jié)婚。如果主管讓我再多考慮半天，我興許就慫了。當(dāng)然，人生也可能走入另外一條主線。
2011年日文站業(yè)務(wù)合入B2B，我也參加并通過新事業(yè)部的年中晉升(至P6 ) 。
2011年阿里巴巴日文站誓師大會(huì)
兩段非常寶貴又特別的經(jīng)歷。
2011年下半年主動(dòng)選擇加入阿里內(nèi)部的創(chuàng)業(yè)項(xiàng)目：打造一款面向個(gè)人消費(fèi)者的云產(chǎn)品。 團(tuán)隊(duì)不大，20多人，各路專家云集，各負(fù)責(zé)人級(jí)別都很高。很享受這段工作旅程，我第一次參與桌面Hybrid端項(xiàng)目，第一次開發(fā)SPA Web應(yīng)用，第一次參與跨桌面軟件/PC Web/H5的項(xiàng)目，第一次領(lǐng)略敏捷管理的魅力。在來自美國(guó)的技術(shù)Leader帶領(lǐng)下，我接觸到很多新領(lǐng)域，極大地開闊了技術(shù)視野。
“創(chuàng)業(yè)失敗是要承擔(dān)風(fēng)險(xiǎn)的，沒有加薪，沒有晉升，而且還是996，直到項(xiàng)目成功”。第一次面試這個(gè)項(xiàng)目前，業(yè)務(wù)負(fù)責(zé)人，阿里工號(hào)16的虛竹告訴我。
不算幸運(yùn)的是，最終這個(gè)項(xiàng)目沒有取得如預(yù)期的成功，業(yè)務(wù)有了變化和調(diào)整。
但幸運(yùn)的是：這段經(jīng)歷讓我親身體驗(yàn)了一把“創(chuàng)業(yè)”，也感受了技術(shù)以外的方方面面艱難。這個(gè)過程中形成的產(chǎn)品和業(yè)務(wù)思維，對(duì)我日后帶來了深刻影響。當(dāng)然，也在我之后幾百次想離職創(chuàng)業(yè)時(shí)，這段經(jīng)歷讓我能夠靜下心來思考創(chuàng)業(yè)的內(nèi)核 - “為什么要?jiǎng)?chuàng)業(yè)？我有什么資源、能做什么事情、創(chuàng)造什么價(jià)值？”
忘了說，這段經(jīng)歷之所有特別，還因?yàn)檗k公地點(diǎn)在湖畔花園——馬老師家。
湖畔花園辦公場(chǎng)地
2012年7月，加入到天貓的前端團(tuán)隊(duì)。 主管給予了充分的信任，讓我負(fù)責(zé)天貓H5首頁的研發(fā)，開始接觸淘寶前端—— 一個(gè)更成熟完整的技術(shù)體系。
2012年底，@三七 加入天貓帶領(lǐng)前端團(tuán)隊(duì)，作為國(guó)內(nèi)前端領(lǐng)域最早的拓荒者之一，他在隨后的兩年時(shí)間給天貓的前端技術(shù)帶來體系化的變革——從模塊化到工程化再到生產(chǎn)環(huán)境的NodeJS，并引入了Mobile First理念。在他的支持下，我?guī)ьI(lǐng)了一支前端小組陸續(xù)參與多條業(yè)務(wù)線的開發(fā)工作。我自己也加入集團(tuán)級(jí)技術(shù)建設(shè)，主導(dǎo)跨端Web的項(xiàng)目，推進(jìn)了前端體系的移動(dòng)化建設(shè)。
除專業(yè)技術(shù)外，花了比原來更多的功夫在團(tuán)隊(duì)工作上，包括不限于團(tuán)隊(duì)氛圍、風(fēng)格和文化的打造，學(xué)會(huì)在內(nèi)網(wǎng)分享中學(xué)習(xí)借鑒前輩大拿的的管理方法論。在阿里的文化中，非常強(qiáng)調(diào)傳承。一個(gè)人牛不算什么，讓一群人厲害才算厲害，最好是讓下屬比自己還強(qiáng)。
時(shí)間花在哪兒，結(jié)果就會(huì)在哪兒。團(tuán)隊(duì)內(nèi)一些業(yè)務(wù)尖兵逐漸冒出頭來，在后來幾年成為天貓甚至大淘系的中堅(jiān)力量。
這個(gè)過程既痛苦又快樂。痛苦在于要做越來越多的超過自己能力層級(jí)、遠(yuǎn)離舒適區(qū)的工作，快樂的則是能明顯感知到自己在這個(gè)過程中的快速成長(zhǎng)。
很幸運(yùn)，在14年年中，順利通過晉升(P7)。
2014年注定是難忘的一年。在這一年，我開始負(fù)責(zé)營(yíng)銷活動(dòng)的業(yè)務(wù)，并擔(dān)任2014年雙十一前端技術(shù)PM工作。
營(yíng)銷活動(dòng)是一個(gè)頂有趣、富有故事的業(yè)務(wù)：
從技術(shù)上：它可以極致簡(jiǎn)潔到切一個(gè)頁面上線就行，也可以復(fù)雜到如雙11一般 ——它是阿里技術(shù)的年度大考。
從業(yè)務(wù)上：它既可以簡(jiǎn)單到直接把現(xiàn)實(shí)生活的促銷活動(dòng)進(jìn)行虛擬世界的進(jìn)行流程投射，也能如互聯(lián)網(wǎng)史上的春運(yùn)般整合零售生態(tài)和供應(yīng)鏈。
我和多個(gè)團(tuán)隊(duì)在天貓制定了各個(gè)維度的技術(shù)規(guī)范，如內(nèi)控標(biāo)準(zhǔn)、外包規(guī)范，有驚無險(xiǎn)地渡過了14年雙十一。
在PC時(shí)代，營(yíng)銷活動(dòng)的研發(fā)模式，對(duì)于前端來說，實(shí)在過于“簡(jiǎn)樸”：“5到6位正式前端常年帶著數(shù)十個(gè)外包，根據(jù)運(yùn)營(yíng)需求開發(fā)成百數(shù)千的頁面，通過一個(gè)叫做TMS的運(yùn)營(yíng)系統(tǒng)預(yù)留坑位給運(yùn)營(yíng)同學(xué)填數(shù)據(jù)，交由后端應(yīng)用推上線（CDN）。” 這類業(yè)務(wù)活動(dòng)頻次高、頁面量大、協(xié)同成本高。某種意義上講，對(duì)前端技術(shù)挑戰(zhàn)并不高，為了更高效的研發(fā)，我們能做的是不斷提高組件和模塊復(fù)用率。
感謝TMS，它幫助前端們快速迭代出一個(gè)又一個(gè)頁面，支持了集團(tuán)的業(yè)務(wù)，即使在今天，它的設(shè)計(jì)思路都能稱得上精巧犀利。
發(fā)生變化來自2014年雙十一前，線上發(fā)生了一次令我終生難忘的離奇故障（涉及敏感信息，略過細(xì)節(jié)）：當(dāng)時(shí)因臨時(shí)未排查出原因，VP現(xiàn)場(chǎng)觀摩面，我和CDN運(yùn)維團(tuán)隊(duì)的同學(xué)們能做的只是不斷重啟集群應(yīng)用緩解問題。
我作為時(shí)任前端PM，也因技術(shù)方案選擇失誤受到批評(píng)責(zé)罰。（時(shí)隔多年，大家也偶爾調(diào)侃，責(zé)罰不冤，幸而那天的問題提前暴露而未發(fā)生在11.11號(hào)當(dāng)天，否則后果難料 ）。
那年雙11最終還是完美謝幕，GMV 571億，移動(dòng)端成交42.6% ，很多人敏銳的感覺到：移動(dòng)化時(shí)代到來了。
之后技術(shù)復(fù)盤，我們針對(duì)問題做了多輪討論和推演，決定啟動(dòng)一個(gè)代號(hào)“斑馬”的產(chǎn)品項(xiàng)目：基于我們對(duì)營(yíng)銷的理解，運(yùn)營(yíng)的實(shí)際需求、過往的技術(shù)痛點(diǎn)，設(shè)計(jì)一個(gè)高效的頁面系統(tǒng)來支持運(yùn)營(yíng)快速發(fā)布活動(dòng)上線，更重要的是它是完全的基于Mobile First設(shè)計(jì)的系統(tǒng)。
正所謂 “一飲一啄，莫非前定” ，因?yàn)檫^去一年的打磨錘煉、痛過后的反思，我們很快把方案框架敲定，并和多個(gè)業(yè)務(wù)搭檔共同推進(jìn)項(xiàng)目實(shí)施。
項(xiàng)目于15年初立項(xiàng)，我代表團(tuán)隊(duì)“激進(jìn)”的將階段目標(biāo)定為“支撐2015年3月的春季大促” 。這種既要支撐日常高頻的大促業(yè)務(wù)，又要同時(shí)從0到1做平臺(tái)研發(fā)，不啻于“飛行中升級(jí)引擎”，困難很大。但我背后的思考是：“這就如同創(chuàng)業(yè)，沒有一往無前的決心和一鼓作氣的氣勢(shì)，等想多了細(xì)了，多半就慫了怕了”。
我負(fù)責(zé)整個(gè)系統(tǒng)及PM工作，團(tuán)隊(duì)培養(yǎng)出來的中堅(jiān)力量們承擔(dān)各個(gè)功能模塊研發(fā)。為實(shí)現(xiàn)我們心中所定計(jì)劃，整個(gè)項(xiàng)目組如同創(chuàng)業(yè)般激情，為了一個(gè)共同的目標(biāo)奮進(jìn)。春節(jié)假期不少同學(xué)還在主動(dòng)提交代碼，節(jié)后迅速返回公司繼續(xù)項(xiàng)目。
很幸運(yùn)，克服了重重困難，“斑馬”項(xiàng)目順利上線，并成功支持了2015年第一個(gè)S級(jí)大促。基于新的系統(tǒng)，我們共同把營(yíng)銷活動(dòng)送上新的軌道：因模塊化帶來的效率提升讓我們完全解除了外包依賴、因具備跨端能力運(yùn)營(yíng)們可以單次同時(shí)進(jìn)行PC和無線活動(dòng)、我們?cè)O(shè)計(jì)并推動(dòng)了CDN構(gòu)架，單在15年雙11就節(jié)省了數(shù)千萬預(yù)算。
隨著技術(shù)迭代，“斑馬”這個(gè)技術(shù)產(chǎn)品，在后面幾年成為阿里的基礎(chǔ)運(yùn)營(yíng)平臺(tái)之一。
2015年5月，我參與了P8的晉升提名，結(jié)果未通過。Leader和我溝通：“成長(zhǎng)很快，能力和規(guī)劃出色，業(yè)務(wù)成果需要時(shí)間驗(yàn)證”。我很坦然接收了建議，晉升答辯中的技術(shù)評(píng)委的建議中肯不失公正，讓我受益很大。
“但行好事，莫問前程”——在隨后的時(shí)間，“斑馬”的能力更為完備。我再次擔(dān)任了2015年雙11的前端PM工作，業(yè)務(wù)也順利上線。那一年，雙11當(dāng)天GMV 912億，移動(dòng)端成交68%。
16年1月，新主管告訴我，綠色通道通過，晉升至P8。
雙十一令牌/虎符
一次偶然的機(jī)會(huì)，看到一張圖：如遵循民意蘋果手機(jī)會(huì)變成什么樣？給我?guī)硪恍?duì)業(yè)務(wù)和技術(shù)的思考：“頁面發(fā)布系統(tǒng)本質(zhì)上是一個(gè)通用的工具平臺(tái)：前端/運(yùn)營(yíng)/設(shè)計(jì)師都是它的用戶，每個(gè)角色都有對(duì)它的功能需求。但每個(gè)新增功能在解決一類用戶需求的同時(shí)又增加了平臺(tái)復(fù)雜度，降低的客戶的易用性，丟失掉另一類用戶的民心。”
“這興許是一個(gè)產(chǎn)品的輪回宿命”，我內(nèi)心有些敬畏地想。帶著這個(gè)敬畏，時(shí)間到了2017年，隨著斑馬的功能日趨復(fù)雜，我決定將運(yùn)營(yíng)操作平臺(tái)和底層技術(shù)能力進(jìn)行剝離：
隨著時(shí)間推移，“天馬”的開放能力不斷完善，越來越多的事業(yè)部基于它構(gòu)建面向業(yè)務(wù)的平臺(tái)系統(tǒng)，帶來的技術(shù)回報(bào)是：技術(shù)復(fù)用減少從0到1的研發(fā)&硬件成本、標(biāo)準(zhǔn)統(tǒng)一使跨業(yè)務(wù)協(xié)同變?yōu)榭尚小?/p>
而在技術(shù)的另外一邊，業(yè)務(wù)發(fā)生著悄無聲息的變化：16年雙11GMV 1207億、17年雙11則是1682億。每年雙十一在如此巨大的基數(shù)下還能持續(xù)業(yè)務(wù)高增長(zhǎng)，個(gè)性化算法、推薦技術(shù)的大規(guī)模應(yīng)用起到了非常重要的作用。在全局效率上，大數(shù)據(jù)優(yōu)于人工干預(yù)逐漸得到了共識(shí)。在我看來，這些變化意味著時(shí)下大家認(rèn)可的大促會(huì)場(chǎng)模式，也將帶來新的變化。
2018年2月，我在內(nèi)部做了個(gè)分享，描述了對(duì)營(yíng)銷活動(dòng)未來的預(yù)判：
基于以上預(yù)判，我和團(tuán)隊(duì)的小伙伴，計(jì)劃聯(lián)同業(yè)務(wù)、上下游技術(shù)團(tuán)隊(duì)共同構(gòu)建一個(gè)面向營(yíng)銷活動(dòng)的平臺(tái)產(chǎn)品（項(xiàng)目代號(hào)：方舟）。
很感謝歷任主管實(shí)仙/四虎的信任，愿意幫我頂住重重壓力，經(jīng)過多輪溝通，我們達(dá)成了一致共識(shí)。
和過去幾年稍有不同的是，我逐漸把包括不限于方舟的一些重要產(chǎn)品放手給團(tuán)隊(duì)中的骨干/TL，讓他們?nèi)ヒ?guī)劃、去驅(qū)動(dòng)、去變革。我更多做了輔導(dǎo)性、資源性、業(yè)務(wù)判斷的全局性工作。
隨著時(shí)間的推移，越來越多的結(jié)果開始凸現(xiàn)：
在2018年中，提名參加晉升面試，結(jié)果未通過，技術(shù)委員會(huì)的評(píng)委們建議更多參與“集團(tuán)級(jí)的技術(shù)建設(shè)、更高格局的視野”。
我很快走出了沮喪，畢竟在阿里，常勝不常有失敗倒常伴。更重要是，主管 @四虎 的開導(dǎo)讓我開始思考更全局的未來。
隨后的時(shí)間，我繼續(xù)投入了2018的雙11前端整體工作，推進(jìn)了多個(gè)端技術(shù)方案落地天貓。感謝阿里前端技術(shù)委員會(huì)主席圓心的舉薦，我加入前端委員會(huì)，擔(dān)任搭建技術(shù)方向的Sponsor - 旨在站在集團(tuán)視角，定制標(biāo)準(zhǔn)、融合并打通搭建技術(shù)體系，在更大范圍內(nèi)賦能業(yè)務(wù)。
在集團(tuán)內(nèi)各個(gè)前端Leader的支持下，我們很快跨多個(gè)事業(yè)群達(dá)成了共識(shí)，制定完善了技術(shù)標(biāo)準(zhǔn)，基于一體化方案啟動(dòng)了多個(gè)層面的項(xiàng)目。
2019年5月，參加了年度晉升，順利通過P9晉升。感恩。
現(xiàn)在，仍然有太多的事情值得去深入：
除以上，我也深度參與阿里前端技術(shù)委員會(huì)的工作：
在阿里的前端體系，除了搭建方向以外，有相當(dāng)數(shù)量的跨事業(yè)群共同建設(shè)的技術(shù)方向&項(xiàng)目，包括不限于Serverless、IDE、智能化、中后臺(tái)、數(shù)據(jù)可視化、工程化、Node技術(shù)等。這些技術(shù)方向或者始于前端，但又不止于前端，共同為打造行業(yè)領(lǐng)先的技術(shù)生態(tài)服務(wù)。
有期待有更多的優(yōu)秀的同學(xué)加入阿里，讓我們的智力和努力觸碰到數(shù)以十億計(jì)的用戶。歡迎加入聯(lián)系我：wenliang.shuwl [at]alibaba-inc.com
最后分享一些過往些年的的心得：
關(guān)于工作：
1.想做好一件事情前，獲得上級(jí)的認(rèn)可非常非常重要，這是把一件事情做成、做好的催化劑。
2.很多時(shí)候，源自“事”的困難都可以用態(tài)度解決，來自“人”的困難可以用換位思考解決。
3.對(duì)于剛參加工作的同學(xué)，如果家中無礦，啥也別說，努力就對(duì)了！畢業(yè)五年內(nèi)的表現(xiàn)，可以決定人生很多事情。
4.如果你和領(lǐng)導(dǎo)發(fā)生分歧：拿出你的數(shù)據(jù)/理由/態(tài)度盡最大的努力去說服他，如果充分溝通還形不成共識(shí)，那就先聽他的 。這不是媚上，而是“在必須達(dá)成一致的前提下，相信更有概率做出正確決定的人。”
5.在工作中，如果某個(gè)時(shí)間突然發(fā)現(xiàn)和往常不一樣，陡然壓力變大/身心疲憊，別害怕 ，因?yàn)椋@有可能是你在成長(zhǎng)、突破瓶頸前的黑暗期。
6.專業(yè)技能是立身之本。從長(zhǎng)期來看，它是性價(jià)比最高的投資標(biāo)的之一。
7.結(jié)合資源，盡最大的努力、用最好的態(tài)度，做好手上的工作，也是一種創(chuàng)業(yè)。
8.不要因?yàn)楸晨看髽渚昧耍驼`認(rèn)為自己是顆大樹。對(duì)客戶&用戶的尊重和價(jià)值創(chuàng)造是我們很大的護(hù)城河。
關(guān)于生活：
1.技術(shù)人讀書工作掙錢養(yǎng)家，一步步成長(zhǎng)同時(shí)也會(huì)一歲歲變老。相比不少行業(yè)，互聯(lián)網(wǎng)行業(yè)自身有賽道上的優(yōu)勢(shì)，但如果單純以同比其他行業(yè)略高的溢價(jià)按年/月出售自己的時(shí)間和技能，這不應(yīng)該是我們做的。堅(jiān)持不斷的思考、通過技術(shù)優(yōu)勢(shì)帶來疊加價(jià)值，在過程中不斷成長(zhǎng) ， 這興許會(huì)更好。
2.學(xué)會(huì)獎(jiǎng)勵(lì)自己。如果經(jīng)受了辛勞、痛苦和壓力走了過來，再不好好的、肉痛地獎(jiǎng)勵(lì)自己一把，哪對(duì)得起過去和未來的自己。
3.除了在工作中，人生處處皆可學(xué)習(xí)：學(xué)理財(cái)、學(xué)打球、學(xué)拍照、學(xué)游泳、學(xué)健身、學(xué)拍短視頻、學(xué)習(xí)怎么把生活過得更好。
4.最后，咱們技術(shù)人可能很忙，有可能沒法“work-life balance”，這是一種取舍。但健康的身體一定是最寶貴的一筆財(cái)富，沒有之一，不能舍。謝謝大家。
多小伙伴不知道怎么寫代碼或者修改代碼，做出自己想要的效果，所以特意花了點(diǎn)時(shí)間 整理了一下比較全的CSS樣式。有任何問題或者交流都可以加我個(gè)人微信：laiwang16
使用方法：
一：樣式表 .miser { font-weight: bold; } /*將樣式完整的寫入樣式表進(jìn)行調(diào)用*/ 格式：屬性名:屬性值;
二：行內(nèi)樣式
<div style="font-weight: bold;">樣式具體應(yīng)用
字體屬性：(font)
大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD
樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)
行高 {line-height: normal;}(正常) 單位：PX、PD、EM
粗細(xì) {font-weight: bold;}(粗體) lighter;(細(xì)體) normal;(正常)
變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)
大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
常用字體： (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性： (background)
色彩 {background-color: #FFFFFF;}
圖片 {background-image: url();}
重復(fù) {background-repeat: no-repeat;}
滾動(dòng) {background-attachment: fixed;}(固定) scroll;(滾動(dòng))
位置 {background-position: left;}(水平) top(垂直);
簡(jiǎn)寫方法 {background:#000 url(..) repeat fixed left top;} /*簡(jiǎn)寫·這個(gè)在閱讀代碼中經(jīng)常出現(xiàn)，要認(rèn)真的研究*/
區(qū)塊屬性： (Block) /*這個(gè)屬性第一次認(rèn)識(shí)，要多多研究*/
字間距 {letter-spacing: normal;} 數(shù)值 /*這個(gè)屬性似乎有用，多實(shí)踐下*/
對(duì)齊 {text-align: justify;}(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) center;(居中)
縮進(jìn) {text-indent: 數(shù)值px;}
垂直對(duì)齊 {vertical-align: baseline;}(基線) sub;(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數(shù)值
空格white-space: pre;(保留) nowrap;(不換行)
顯示 {display:block;}(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題) /*display 屬性的了解很模糊*/
方框?qū)傩?/strong>： (Box)width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左
邊框?qū)傩?/strong>： (Border)border-style: dotted;(點(diǎn)線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊?fàn)? inset;(凹陷) outset;
邊框?qū)挾?/strong>：border-width:; border-color:#;
簡(jiǎn)寫方法border：width style color; /*簡(jiǎn)寫*/
列表屬性： (List-style)
類型 list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
圖像 list-style-image: url(..);
定位屬性： (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
一 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
三、CSS符號(hào)屬性：
list-style-type:none; /*不編號(hào)*/
list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實(shí)心圓形符號(hào)*/
list-style-type:circle; /*空心圓形符號(hào)*/
list-style-type:square; /*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif); /*圖片式符號(hào)*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*/
五、CSS連接屬性：
a /*所有超鏈接*/a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號(hào) cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid /*實(shí)線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運(yùn)用：
文字方塊
按鈕
復(fù)選框
選擇鈕
多行文字方塊
下拉式菜單 選項(xiàng)1選項(xiàng)2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
序號(hào) 中文說明 標(biāo)記語法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}
5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數(shù)值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數(shù)值|inherit|normal;}
9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}
10 單詞間距 {word-spacing:數(shù)值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字體變形 {font-size-adjust:inherit|none}
14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}】
文本樣式(Text Style)
序號(hào) 中文說明 標(biāo)記語法
1 行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對(duì)齊 {text-align:left|right|center|justify}
5 垂直對(duì)齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書寫方式 {writing-mode:lr-tb|tb-rl}
背景樣式序號(hào)
中文說明 標(biāo)記語法
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}
框架樣式(Box Style)
序號(hào) 中文說明 標(biāo)記語法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width} 寬度值： thin|medium|thick|數(shù)值
4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值
5 邊框風(fēng)格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 邊 框 {border:border-width border-style color}
上 邊 框 {border-top:border-top-width border-style color}
右 邊 框 {border-right:border-right-width border-style color}
下 邊 框 {border-bottom:border-bottom-width border-style color}
左 邊 框 {border-left:border-left-width border-style color}
7 寬 度 {width:長(zhǎng)度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類列表序號(hào)
中文說明 標(biāo)記語法
1 控制顯示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號(hào)列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 圖形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}
7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
----------------------------------------- End ------------------------------------------
歡迎來交流：個(gè)人qq 635850491
微信公眾號(hào)：laiwan16
全國(guó)電商設(shè)計(jì)師排名：762
http://alyssj.90sheji.com
/新浪微博認(rèn)證賬號(hào)：故事設(shè)計(jì)師
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
