產(chǎn)品新人都看得懂的技術書2-【彩蛋】程序員小明的Javascript情書

3.2蚂夕、開發(fā)說這個需求做不了迅诬，他在騙你么？

小奈：我想學習寫代碼婿牍？
大仁：為什么百框？
小奈：有時提出的需求技術說不會做，但在其它平臺已經(jīng)實現(xiàn)了牍汹。
小奈：他是不是騙我？
大仁：我等下和你解釋柬泽，不過非要學也可以慎菲。
大仁：那我建議你學下html，上次和你說的輸入url后锨并，貨品其實就是網(wǎng)頁露该，現(xiàn)在教你寫網(wǎng)頁。

村姑：html

html是個鄉(xiāng)下來的的丫頭第煮，她有基本的骨架和血肉解幼。至于它的結構，我們可以把它想像成盒子包警，盒子套著盒子撵摆。


image.png

html非常單純，比如說<h1>表示大標題害晦，<p>表示段落特铝，<img>表示段落。
html還有個非常有趣的標簽壹瘟，<a href='url'>某個鏈接</a>, 鏈接標簽鲫剿，我們可以在一張網(wǎng)頁里寫上很多鏈接，這樣子就很方便了稻轨。就像一張網(wǎng)一樣灵莲，所有的網(wǎng)頁跳轉都變得很方便。
在互聯(lián)網(wǎng)早期殴俱，網(wǎng)頁都十分簡陋政冻。

禁用css后

在早期，大家就是這樣子忍受的线欲。后來大家都抱怨了赠幕，但是HTML只負責展示內(nèi)容和結構。
好吧询筏，后來瀏覽器大叔勸福它稍微打扮下榕堰，大家伙給她申請了手鐲之類的裝飾品，之后就有了size（尺寸）、color（顏色）逆屡、align（對齊）等圾旨，哎呦，稍微好看點魏蔗。


化妝后

村姑后來就發(fā)脾氣了砍的，媽呀，天天出門都要打扮莺治，很累耶廓鞠。

化妝師 ：css

沒辦法，只能請專門的化妝師了谣旁。css真的是很神奇床佳，把html打扮的美輪美奐的。

法寶1:選擇器

面對著一個村姑榄审，化妝師開始想辦法了砌们，首先是把整個html的結構定位出來。例如要找標題搁进，html>head>title這樣子才找到浪感，化妝師直接規(guī)定 html head title 以后就是定位title了，類似的其它部件的定位也是如此饼问。


image.png

部件都可以定位到了影兽，定位到了之后就開始化妝了，例如把這個變成紅色莱革，字體20赢笨。
h1 {color:red;size:20}

法寶2:盒子

上面我們看到，盒子都是倒在這邊去了驮吱，盒子和盒子間的距離不行茧妒，這樣子排版很丑耶，所以給這些盒子添加了支架左冬，固定它們的位置桐筏。

  • 邊框（border）： 可以設定寬窄，樣式拇砰，顏色
  • 內(nèi)邊距(padding)： 內(nèi)容到邊框的間距
  • 外邊距(margin)： 邊框到相鄰元素的間距
image.png
我是邪惡的代碼分割線

簡單例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>產(chǎn)品經(jīng)理的技術課堂</title>
</head>
<body>
<h1>產(chǎn)品經(jīng)理的技術修養(yǎng)</h1>
<p>產(chǎn)品經(jīng)理的第一行代碼</p>

</body>
</html>

用代碼做自己介紹

<!DOCTYPE html>
<html>
<head>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<pre id="jack" class="saying"></pre>
<div style="display:none" id="w">
hello 大家好 我是jack梅忌，我想讓技術變得有趣，
今天教大家用代碼介紹自己除破。
首先要先介紹幾個東西牧氮，html標簽，
大家可以把它想像成箱子套箱子瑰枫。

html 它本身最大的箱子
head 它的頭部
body 它的身體
div 這個就是真正的箱子踱葛，可以一個套一個

經(jīng)常有產(chǎn)品新人問我技術問題丹莲。
像是前后端的區(qū)別？數(shù)據(jù)庫是怎么樣的尸诽？如何和研發(fā)溝通甥材？
回答的多了，就想系統(tǒng)化的回答性含，寫一本書洲赵，
讓技術變得通俗易懂、有趣商蕴。
6年間叠萍，從技術小白到工程師再到后臺、數(shù)據(jù)產(chǎn)品經(jīng)理绪商，
2000多個日夜苛谷，為代碼、需求絞盡腦汁部宿、也在創(chuàng)業(yè)路上走過，
百感交集瓢湃。
本書以小說故事的形式理张、場景化講解技術，讓枯燥的技術變得有趣绵患。
/div> 這個箱子需要用這個來啟動<>
</div>

<script language="javascript">
var index=0;
var word;
function type(){
var typePanel = document.getElementById("jack");
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = "";
}else if(index % 3 == 1){
typePanel.className = "saying";
}
}
window.onload=function(){
word=document.getElementById("w").innerHTML;
setInterval(type, 200);
}

</script>
<style>
.saying:after {
content: "|";
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 0;
display: inline-block;
vertical-align: baseline;
opacity: 1;
animation: caret 500ms infinite;
}
</style>
</body>

如何與開發(fā)溝通雾叭？

小奈：產(chǎn)品經(jīng)理面對開發(fā)時，需要懂技術到什么程度落蝙，怎么樣才能合理溝通织狐？
大仁:和你說實際案例吧，有兩個技術出身轉的產(chǎn)品筏勒，一個是我移迫，一個是某大公司的。我剛轉產(chǎn)品的時候管行，很自然的會想技術細節(jié)厨埋，這時候其實開發(fā)是反感的，有種侵犯他們領域的感覺捐顷。
??另一個的那位產(chǎn)品經(jīng)理則是裝不懂荡陷，實際上他技術比開發(fā)還牛。所以還是尊重開發(fā)迅涮、相信他們的專業(yè)能力（菜鳥除外）废赞。

小奈：有時提出的需求技術說不會做，但在其它平臺已經(jīng)實現(xiàn)了叮姑。
大仁：這個還是溝通問題唉地，其它平臺和自家平臺，在架構以及階段等很多方面可能不一樣，開發(fā)能力也不一樣渣蜗，你是想知道他有沒有騙你屠尊？你可以問另一個開發(fā)，但我建議你和他搞好關系耕拷。

建議

1讼昆、產(chǎn)品經(jīng)理要懂技術，這樣才能理解開發(fā)骚烧，在一些功能實現(xiàn)可能性做取舍浸赫，和開發(fā)無障礙協(xié)作，順利推進工作赃绊。
2既峡、產(chǎn)品經(jīng)理的溝通能力很重要，入職第一件事是融入團隊碧查，有點像地頭蛇运敢，大家都比較喜歡她/他。
3忠售、提出清晰明確需求传惠，與開發(fā)溝通好進度。
4稻扬、非要寫代碼的話建議從html和js學起卦方，會技術的產(chǎn)品經(jīng)理可以隨時驗證自己的想法

3.3 Js、App和緩存---熊孩子泰佳、籃子和倉庫

前端組合：熊孩子盼砍、村姑、化妝師

??上次在這提到村姑和化妝師的故事逝她，其實村姑背后有個大家族浇坐。上次教大家如何用代碼做自我介紹，其實用到了JavaScript（簡稱js）黔宛。
??html只是個靜態(tài)頁面語言吗跋。如果用html做自我介紹的話，它是展示全部文字宁昭，而用上了js后跌宛，它可以讓它一個一個字顯示出來，像打字機一樣积仗。
??好了疆拘，介紹下今天主角，村里的那個熊孩子就是Javascript寂曹，愛搗蛋, 調皮的服務員(前端編程語言)哎迄。熊孩子回右、村姑和化妝師是一個組合，叫前端（js+html+css）漱挚。

有興趣就看翔烁，下面是上次的js代碼，就是有個打字方法type()

<script language="javascript">  //<script>代表腳本
    var index=0;
    var word;
    function type(){    //打字方法的邏輯旨涝，一次打一個字
        var typePanel = document.getElementById("jack");
        typePanel.innerText = word.substring(0,index++);
        if(index % 3 == 0){
            typePanel.className = "";
        }else if(index % 3 == 1){
            typePanel.className = "saying";
        }
    }
    window.onload=function(){  //加載入口
        word=document.getElementById("w").innerHTML;
        setInterval(type, 200);  //每隔0.2秒調用一下打字方法
    }

</script>

俊俏走紅的Java

?? 村里另一個小伙子Java, 生的早也生的俏蹬屹，是個好廚師，做得一手好菜(后端開發(fā)主流語言白华，還有php等)慨默。經(jīng)常有人誤會這兩個的關系，問這兩者的關系弧腥∠萌。可以這樣說，Java和Javascript的關系就像雷鋒和雷鋒塔一樣管搪。

介紹下熊孩子的發(fā)家史

js發(fā)展史

移動互聯(lián)網(wǎng)的到來

??自從可以點外賣之后（移動互聯(lián)網(wǎng)時代）虾攻，用戶體驗要求變高了，都在家叫外賣更鲁。（app性能好）App有兩種霎箍，iOS和Android。

  • iOS app（用Objective-c開發(fā)）：1號外送員岁经，生的俏朋沮，新電動車蛇券。
  • Android app（用Java開發(fā)）：2號外送員缀壤，生的一般，舊電動車纠亚。

iOS發(fā)布審核流程

??下圖是iOS開發(fā)到發(fā)布的流程塘慕，蘋果開發(fā)需要購買證書，發(fā)布也要各種審核蒂胞，保證了App Store的應用質量图呢。安卓流程也類似，不需要購買證書（自己用計算機可以生成）骗随，審核也比較少蛤织。


iOS開發(fā)發(fā)布流程

籃子和倉庫：內(nèi)存和運存

??這里要介紹下緩存（一般存放在內(nèi)存），雖然app和瀏覽器都有緩存鸿染，但是app有數(shù)據(jù)庫指蚜，類似小倉庫，而且app自己可以生產(chǎn)頁面涨椒，所以app的能力比網(wǎng)頁好得多摊鸡。
??下圖是App的工作原理绽媒，App首先和服務器請求數(shù)據(jù)，然后緩存著免猾，接著處理數(shù)據(jù)并存入數(shù)據(jù)庫是辕，根據(jù)數(shù)據(jù)生產(chǎn)頁面并展示。
??可以拿到數(shù)據(jù)直接展示（1-2-4-3）猎提，也可以存入數(shù)據(jù)再展示（1-2-3-4 ）获三。

App工作流程

h5和App的區(qū)別

?? h5（html5）, 城里的姑娘，是村姑升級版忧侧，常見于公眾號開發(fā)石窑。上次也在這里 輸入url后發(fā)生了什么 提到了網(wǎng)頁，在瀏覽器打開h5網(wǎng)頁版淘寶蚓炬，其實就是下載網(wǎng)頁回來松逊，那么有時候網(wǎng)絡不好甚至不通的時候體驗就很差了。
??通過瀏覽器打開淘寶和打開淘寶app有什么不同呢肯夏？
??app還是需要聯(lián)絡服務器那邊经宏，獲取數(shù)據(jù)（配方），這邊自己生產(chǎn)頁面驯击，所以烁兰，服務器那邊返回顯示的數(shù)據(jù)（多少條，每一條里面顯示什么）徊都，app這邊根據(jù)這些數(shù)據(jù)自己生產(chǎn)展示出來沪斟，就不用下載頁面，效果好很多暇矫。不好的地方是占用手機的資源（內(nèi)存主之、cpu），也需要重新化妝李根。
??混合開發(fā)(hybrid)也很容易理解槽奕，app+h5。app里面有一個組件webview網(wǎng)頁盒子房轿，可以理解為一個瀏覽器環(huán)境盒子粤攒，用代碼啟用后，它也可以打開網(wǎng)頁囱持。

  • 簡單的混合開發(fā)其實就是在app里套盒子夯接，盒子里打開指定某個網(wǎng)頁；

  • 復雜點的就是有數(shù)據(jù)的交互纷妆，在淘寶（app）打開天貓（h5）盔几，然后你發(fā)現(xiàn)你也可以下單購物（自動登錄了），自動用淘寶的賬戶登陸了天貓凭需，這就是數(shù)據(jù)交互问欠。


    淘寶app肝匆，混合開發(fā)

小程序

??h5跨平臺但體驗差，app開發(fā)成本高（需要開發(fā)ios和安卓兩個）顺献，那有沒有更好的方案呢旗国？ 上面的混合開發(fā)算是一個，但是隨著技術的進步注整，F(xiàn)acebook推出了React Native（js開發(fā)的移動跨平臺程序）能曾，騰訊也推出了微信小程序，這是 顛覆式的行業(yè)方案肿轨，從此很多iOS和安卓程序員就失業(yè)了寿冕，中小型項目都可以用React Native或小程序開發(fā)，js變成了高富帥椒袍，前端迎來巔峰期驼唱。


小程序

??個人認為，小程序是為新零售而生的驹暑，小程序有個附近的功能玫恳，附近的零售店，對了优俘，就是這樣子的京办。阿里和騰訊的新零售之爭，小程序服務商（有贊之類）帆焕、理發(fā)店惭婿、小賣部都可以用小程序。

完善的積木盒子

??微信為小程序提供了很多能力叶雹，像是和微信财饥、公眾號互通的賬號體系，支付能力浑娜，共享微信的消息提醒等等佑力∈缴ⅲ可以說大大降低了開發(fā)成本筋遭，開發(fā)可以專注于盒子組裝使得項目快速上線。

王者歸來

??介紹完熊孩子的發(fā)家史了暴拄，（Node.js這個還沒介紹漓滔，下次吧，不然太多看暈了）從誕生到小程序乖篷，前端越來越強盛了响驴，正所謂能力越大，責任越大撕蔼，有非常強大的開發(fā)生態(tài)豁鲤，自然養(yǎng)活了很多前端工程師秽誊。

小作業(yè)：用小程序做個自我介紹

開發(fā)流程

小程序介紹自己

產(chǎn)品經(jīng)理的技術修養(yǎng)（上）

4、

4琳骡、小雪面試受挫-怎么樣才算是產(chǎn)品經(jīng)理锅论？

深南大道

??不知不覺就加班到了22:00，看來手頭上的工作是做不完了楣号，只能回家繼續(xù)做了最易，小奈心里想。打道回府炫狱，再遲點公交都沒了藻懒。剛好可以趕上最后一班車。


：

面試受挫

“滴滴滴滴“视译，電話響起來了嬉荆。
小奈：喂作谚，小雪绍申，怎么了？
小雪：我最近在找產(chǎn)品的工作厕妖，面試不怎么順利第美，好煩呀蝶锋。
小奈：怎么了這是？
小奈：面試官好像不信任我什往，要看我作品扳缕，還要問很多細節(jié)。
小奈：你要不要和我表哥聊聊别威，他是產(chǎn)品大牛躯舔。
小雪：好的，太感謝了省古。
小奈：沒事粥庄。

真正的產(chǎn)品經(jīng)理

大仁：你之前做過產(chǎn)品工作么？
小雪：實習過半年豺妓，平時主要工作是畫原型和完善需求文檔惜互，偶爾也要跟進項目，推動開發(fā)GG完成需求開發(fā)琳拭。
大仁：你有過自己發(fā)現(xiàn)需求训堆、策劃、落地到用戶真正使用的經(jīng)歷么白嘁？
小雪：額坑鱼，好像沒有，我的工作都偏執(zhí)行絮缅。
大仁：那你其實還不能算是一個產(chǎn)品經(jīng)理鲁沥，產(chǎn)品思維還沒開竅呼股。
小雪：但是產(chǎn)品經(jīng)理的工作我都做過啊，像是原型設計画恰、需求文檔卖怜、推進項目等等。
大仁：聽起來更像是一個原型經(jīng)理或項目助理阐枣。
大仁：一個產(chǎn)品經(jīng)理的價值在哪呢马靠？假如你假了1-2周，團隊慢慢就會亂起來蔼两，發(fā)現(xiàn)沒有你不行甩鳄，那么你作為產(chǎn)品經(jīng)理就是比較成功的。

用產(chǎn)品思維生擒鰲拜

大仁：其實我心目有個產(chǎn)品的偶像额划，韋小寶妙啃。

需求：鰲拜一日不除，康熙只能是個傀儡皇帝俊戳∫靖埃康熙想真真正正做皇帝，想執(zhí)政抑胎，那么首先就是除掉鰲拜燥滑。

同理心：韋小寶（產(chǎn)品經(jīng)理）無論是作為兄弟還是作為臣子，小寶一直知道皇帝要除鰲拜阿逃，做個好皇帝铭拧。

問題：鰲拜武藝高強，是滿洲第一勇士恃锉。

方案探索：小螞蟻搬得動大蜈蚣搀菩，歷史上也有很多以小勝大、以少勝多的例子破托。

策劃設計：秘密訓練了一批習武少年+降低鰲拜的戒心+甕中捉鱉

落地：生擒鰲拜過程中十分兇險肪跋，小寶的隨機應變、不斷周旋才得以制服鰲拜土砂。


生擒鰲拜

用戶反饋：康熙奪回兵權州既，平西王吳三桂密謀造反，隱患巨大瘟芝，小寶幫朕想想辦法易桃。

不斷迭代：斷吳三桂反叛的三路援軍 - 受封一等鹿鼎公 - 等等褥琐。

產(chǎn)品發(fā)版：康熙終于成為一個好皇帝锌俱，勵精圖治。

大仁：從發(fā)現(xiàn)需求到開發(fā)落地到用戶驗證敌呈，經(jīng)歷過這樣一個完整的過程贸宏，才算是產(chǎn)品經(jīng)理的啟蒙禮/思維開竅造寝。

簡歷怎么寫？

大仁：扯太遠了吭练，來說點實際的吧诫龙，簡歷你是怎么寫的？

??hr看簡歷都很快鲫咽，基本上都是一分鐘看完一份签赃。有些大公司由于投遞簡歷太多，干脆就直接篩選掉一些分尸，例如本科211或以上锦聊、3年以上工作經(jīng)驗，直接卡死了很多人箩绍，當然深圳還是很多創(chuàng)業(yè)公司和發(fā)展中的公司孔庭。
??簡歷猶如產(chǎn)品經(jīng)理的第一個產(chǎn)品，面試則是第二個材蛛。簡歷要求信息清晰圆到、排版簡潔、有一定的文案水平卑吭，當然最重要的是產(chǎn)品經(jīng)歷芽淡，經(jīng)歷和經(jīng)驗是否貼合公司業(yè)務，公司往往找的是最匹配的人才豆赏。

基本信息：姓名吐绵、求職方向、電話河绽、郵箱等己单；
工作經(jīng)歷：有多少段工作經(jīng)歷，工作業(yè)績怎么樣耙饰？是否頻繁跳槽纹笼？
項目經(jīng)驗：項目相關度怎么樣，是否貼合公司業(yè)務苟跪？

如何面試廷痘？

產(chǎn)品經(jīng)理入門到放棄指南

職業(yè)規(guī)劃

小奈：大仁哥，對產(chǎn)品經(jīng)理職業(yè)規(guī)劃有沒有什么建議件已？
大仁：同樣以小寶為例子笋额。

產(chǎn)品經(jīng)理職場三寶：大平臺+對的領導+好項目

練武

小太監(jiān)：和小玄子練武，跟對了領導篷扩。
首領太監(jiān)：替領導排憂解難兄猩，職業(yè)能力強，擒鰲拜，好項目枢冤。
五品太監(jiān)：協(xié)助太后殺死海大富鸠姨，大公司站隊。


保護太上皇

副都統(tǒng)：管理路線淹真，保護太上皇讶迁，替老板排憂解難。
老板：回家創(chuàng)業(yè)核蘸。

兼職工作：
天地會：青木堂堂主巍糯，產(chǎn)品講師。
民間邪教神龍教 ：白龍使客扎，行業(yè)領袖鳞贷。

產(chǎn)品經(jīng)理早期路線

用戶產(chǎn)品經(jīng)理/后臺產(chǎn)品經(jīng)理/數(shù)據(jù)產(chǎn)品經(jīng)理/人工智能產(chǎn)品經(jīng)理。
產(chǎn)品經(jīng)理后期一般有兩條路線虐唠，產(chǎn)品專家或管理搀愧。
可以根據(jù)自身的特點和優(yōu)勢選擇。

產(chǎn)品總監(jiān)多了疆偿，好產(chǎn)品少了咱筛。

產(chǎn)品總監(jiān)就是戰(zhàn)略思維、商業(yè)化多了杆故，真正有匠心的產(chǎn)品人少了迅箩，好的產(chǎn)品自然也少了。

你心目中的產(chǎn)品經(jīng)理是誰处铛？留言告白吧饲趋。

4.1 火車票代售點----后端API和開放平臺

后端API長什么樣？

開放平臺其實都是開放API, 那么API又是什么呢撤蟆？簡單理解就是url奕塑，就是增刪改查， 之前說過的就是前端/移動端對后端的數(shù)據(jù)請求家肯，攻與受龄砰。

先看看API長什么樣。

完整的API是這樣的，很長是吧歹茶，所以API文檔是聲明前綴夕玩，然后把http://www.hellojack.com前綴略去你弦。

介紹下API調用的method姿勢吧，有四種姿勢风秤，post（增）鳖目、get（差）扮叨、put（改）缤弦、delete（刪），這個規(guī)范叫Restful化彻磁，規(guī)范是規(guī)范碍沐，怎么使用又是另一回事了，常用的是post（增刪改）和get（改）衷蜓。

Node.js

??這里以Node.js為例累提，編寫后端，因為它比較簡潔磁浇，一句代碼就可以啟動web服務器斋陪。
??說明下Node.js和Js的關系，Node.js和Javascript有著本質的區(qū)別置吓，是平臺環(huán)境和創(chuàng)業(yè)者的關系无虚，Javascript本身一直在瀏覽器沙盒里生活運行著。有一天衍锚，有一幫黑客比賽項目中創(chuàng)造了一個新環(huán)境（Node.js）友题，它讓Javascript可以跳出瀏覽器沙盒，也可以干后端（Java\php）的事戴质，還可以開發(fā)PC端（跨windows度宦、mac、linux多平臺）告匠。
??Node.js也是個全能型語言戈抄，前后端都可以『笞ǎ看下Node.js開發(fā)的pc應用呛凶，slack也在其中。

Node.js開發(fā)的PC應用

Node.js開發(fā)的后端

??扯遠了行贪，回到后端開發(fā)漾稀，下面是Node.js服務端代碼，代碼很少建瘫。

var express = require('express'); //Node.js實現(xiàn)的web服務器
var app = express(); //生成一個
app.get('/', function (req, res) { //這里崭捍，今天的重點，這個就是API
res.send('首頁（登陸頁）')
})
app.post('/user', function (req, res) { //這里啰脚，今天的重點殷蛇，這個就是API
res.send('小明') //獲取用戶
})
app.post('/user/update', function (req, res) { //這里实夹，今天的重點，這個就是API
res.send('小明') //獲取用戶
})
var server = app.listen(8081, function (req, res) {
console.log("hello world")
})

火車票代售點

小奈：什么是開放平臺粒梦？
大仁：你買過火車票么亮航？
小奈：買過
大仁：在哪里買的？
小奈：最開始在火車站買的匀们，后來發(fā)現(xiàn)附近有代售點缴淋，就在代售點買。
大仁：是吧泄朴，平臺開放的目的就是用戶方便重抖，火車站賣票賣不過來啊，尤其逢年過節(jié)的時候祖灰，大冬天的大排長龍钟沛。代售點和火車站合作，售票壓力下降局扶，用戶也方便恨统。

開放平臺

大仁：有沒有發(fā)現(xiàn)現(xiàn)在很多app都有IM和地圖功能？
小奈：是啊三妈，那不是很簡單么畜埋？
大仁：如果沒有地圖和IM開放平臺 ，那是根本可能實現(xiàn)的沈跨，這兩個都是大工程由捎，光是地圖數(shù)據(jù)采集就難以想象。
大仁：你看滿大街都是共享單車饿凛，他們肯定要基于地圖來實現(xiàn)定位吧狞玛。所以你會看到xx地圖上可以使用共享單車，肯定要合作的涧窒。照理來說應該xx地圖來做這個單車的事心肪，但是地圖背后要做的事太多，所以開發(fā)平臺是一種趨勢纠吴，也是一種生態(tài)哲學硬鞍。


image.png

image.png

商業(yè)&生態(tài)

上次提到小程序，小程序其實就是應用分發(fā)入口戴已，相當于app store固该、小米/華為/應用市場，這就威脅到他們的應用分發(fā)生態(tài)了糖儡，所以蘋果也曾有過“封殺”警告伐坏，國內(nèi)的安卓廠商也結盟推出了類似服務，小米有一個“一鍵直達”服務開放平臺握联，直接在應用商店里桦沉，
所以小米也提出了“一鍵直達”


image.png

4.2 程序員小明的情書-JavaScript腳本的力量

大仁： 小明每瞒，聽說你大學的專業(yè)是計算機科學與技術？
小明： 是的纯露，大仁哥剿骨。
大仁： “那好，去幫我搶個榮耀v9埠褪∨ɡ”
小明：領導，請你尊重這門專業(yè)组橄，計算機科學是……
大仁： 請你談談NAS設備卷管理模塊中失效數(shù)據(jù)恢復問題的應用荞膘。
小明：大仁哥罚随，腳本寫好了”

1.效果圖

運行的效果圖玉工，就是模擬不斷點擊換一換的效果

image

2.圖解

怎么做的呢？讓我們一步步分解

image
image
document.getElementsByClassName("hot-refresh")[0]

已經(jīng)獲取該元素

image

模擬點擊

image

定時器每100毫秒點擊一次

setInterval(function () {
    if (Date.now() > new Date("2017-3-21 10:08:00"))  {
        document.getElementsByClassName("hot-refresh")[0].click()
    }
}, 100);

1.大于某個時間點
2.模擬點擊

3淘菩、chrome擴展程序

為什么要打包成擴展程序遵班，console的腳本reload之后會被清空無法繼續(xù)執(zhí)行，擴展程序是個好東西

image
image
image
{  
  "name": "第一個Chrome插件",  
  "manifest_version": 2,  
  "version": "1.0",  
  "description": "jack的第一個chrome擴展程序",  
  "browser_action": {  
    "default_icon": "logo.png"  
  },
  "content_scripts": [  
    {  
      "matches": ["https://www.baidu.com/*"],  
      "js": ["content.js"]  
    }  
  ]   
}  


setInterval(function () {
    if (Date.now() > new Date("2017-3-21 10:08:00"))  {
        document.getElementsByClassName("hot-refresh")[0].click()
    }
}, 100);

4潮改、咦狭郑，這個鏈接是干嘛的？

小明：糟了汇在，這個不是我的情書腳本么翰萨？（超級酷炫有愛的js情書）

查看原文，可以看到小明用JavaScript寫的情書糕殉，參考程序員開源亩鬼，希望各位看官們?yōu)樾∶鬓D發(fā)，轉發(fā)超過1000次阿蝶，小奈將接受小明的告白雳锋，查看原文為小明瘋狂打call把。
?
?

小明用JavaScript寫的的情書

?
?

相關文章：產(chǎn)品經(jīng)理的技術修養(yǎng)（上）

?
?

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末羡洁，一起剝皮案震驚了整個濱河市玷过，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌筑煮，老刑警劉巖辛蚊，帶你破解...
    沈念sama閱讀 216,496評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異真仲，居然都是意外死亡袋马，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門袒餐，熙熙樓的掌柜王于貴愁眉苦臉地迎上來飞蛹，“玉大人谤狡，你說我怎么就攤上這事∥蚤埽” “怎么了墓懂？”我有些...
    開封第一講書人閱讀 162,632評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長霉囚。 經(jīng)常有香客問我捕仔，道長，這世上最難降的妖魔是什么盈罐？ 我笑而不...
    開封第一講書人閱讀 58,180評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任榜跌，我火速辦了婚禮，結果婚禮上盅粪，老公的妹妹穿的比我還像新娘钓葫。我一直安慰自己，他們只是感情好票顾，可當我...
    茶點故事閱讀 67,198評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布础浮。 她就那樣靜靜地躺著，像睡著了一般奠骄。 火紅的嫁衣襯著肌膚如雪豆同。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,165評論 1贊 299
  • 城市分裂傳說
    那天含鳞，我揣著相機與錄音影锈，去河邊找鬼。 笑死蝉绷，一個胖子當著我的面吹牛鸭廷，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播潜必，決...
    沈念sama閱讀 40,052評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼靴姿，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了磁滚？” 一聲冷哼從身側響起佛吓，我...
    開封第一講書人閱讀 38,910評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎垂攘，沒想到半個月后维雇，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,324評論 1贊 310
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡晒他，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年吱型，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陨仅。...
    茶點故事閱讀 39,711評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡津滞，死狀恐怖铝侵，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情触徐，我是刑警寧澤咪鲜，帶...
    沈念sama閱讀 35,424評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站撞鹉，受9級特大地震影響疟丙，放射性物質發(fā)生泄漏。R本人自食惡果不足惜鸟雏，卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一享郊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧孝鹊，春花似錦炊琉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0贊 22
  • 一樁弒父案温自，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽玄货。三九已至皇钞，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間松捉，已是汗流浹背夹界。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留隘世，地道東北人可柿。 一個月前我還...
    沈念sama閱讀 47,722評論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像丙者，于是被迫代替她去往敵國和親复斥。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2贊 353

推薦閱讀更多精彩內(nèi)容