講個(gè)故事，給你一份詳細(xì)的技術(shù)書（2）

13 評(píng)論 8976 瀏覽 73 收藏 31 分鐘

自上篇文章發(fā)出后，很多產(chǎn)品經(jīng)理都挺有興趣的，感謝各位的認(rèn)可，我會(huì)堅(jiān)持寫完本書。讓技術(shù)變得有趣，消除重復(fù)的技術(shù)理解工作，這是本書的初衷，也希望各位能多反饋問題，挖掘出更多產(chǎn)品經(jīng)理技術(shù)問題的場景。

開發(fā)說這個(gè)需求做不了，他在騙你么？

小奈：我想學(xué)習(xí)寫代碼？

大仁：為什么？

小奈：有時(shí)提出的需求技術(shù)說不會(huì)做，但在其它平臺(tái)已經(jīng)實(shí)現(xiàn)了。

小奈：他是不是騙我？

大仁：我等下和你解釋，不過非要學(xué)也可以。

大仁：那我建議你學(xué)下html，上次和你說的輸入url后，貨品其實(shí)就是網(wǎng)頁，現(xiàn)在教你寫網(wǎng)頁。

1. 村姑：html

html是個(gè)鄉(xiāng)下來的的丫頭，她有基本的骨架和血肉。至于它的結(jié)構(gòu)，我們可以把它想像成盒子，盒子套著盒子。

html非常單純，比如說：<h1>表示大標(biāo)題、<p>表示段落、<img>表示段落。

html還有個(gè)非常有趣的標(biāo)簽，<a href=’url’>某個(gè)鏈接</a>, 鏈接標(biāo)簽，我們可以在一張網(wǎng)頁里寫上很多鏈接，這樣子就很方便了。就像一張網(wǎng)一樣，所有的網(wǎng)頁跳轉(zhuǎn)都變得很方便。

在互聯(lián)網(wǎng)早期，網(wǎng)頁都十分簡陋。

禁用css后

在早期，大家就是這樣子忍受的。后來大家都抱怨了，但是HTML只負(fù)責(zé)展示內(nèi)容和結(jié)構(gòu)。

好吧，后來瀏覽器大叔勸福它稍微打扮下，大家伙給她申請(qǐng)了手鐲之類的裝飾品，之后就有了size（尺寸）、color（顏色）、align（對(duì)齊）等，哎呦，稍微好看點(diǎn)。

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

2. 化妝師 ：css

沒辦法，只能請(qǐng)專門的化妝師了。css真的是很神奇，把html打扮的美輪美奐的。

（1）法寶1：選擇器

面對(duì)著一個(gè)村姑，化妝師開始想辦法了，首先是把整個(gè)html的結(jié)構(gòu)定位出來。例如：要找標(biāo)題，html>head>title這樣子才找到，化妝師直接規(guī)定 html head title 以后就是定位title了，類似的其它部件的定位也是如此。

部件都可以定位到了，定位到了之后就開始化妝了，例如：把這個(gè)變成紅色，字體20。

{color:red;size:20}

（2）法寶2：盒子

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

  • 邊框（border）： 可以設(shè)定寬窄，樣式，顏色；
  • 內(nèi)邊距(padding)： 內(nèi)容到邊框的間距；
  • 外邊距(margin)： 邊框到相鄰元素的間距；

（3）簡單例子

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

</body>
</html>

（4）用代碼做自己介紹

<!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，我想讓技術(shù)變得有趣，
今天教大家用代碼介紹自己。
首先要先介紹幾個(gè)東西，html標(biāo)簽，
大家可以把它想像成箱子套箱子。

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

經(jīng)常有產(chǎn)品新人問我技術(shù)問題。
像是前后端的區(qū)別？數(shù)據(jù)庫是怎么樣的？如何和研發(fā)溝通？
回答的多了，就想系統(tǒng)化的回答，寫一本書，
讓技術(shù)變得通俗易懂、有趣。
6年間，從技術(shù)小白到工程師再到后臺(tái)、數(shù)據(jù)產(chǎn)品經(jīng)理，
2000多個(gè)日夜，為代碼、需求絞盡腦汁、也在創(chuàng)業(yè)路上走過，
百感交集。
本書以小說故事的形式、場景化講解技術(shù)，讓枯燥的技術(shù)變得有趣。
/div> 這個(gè)箱子需要用這個(gè)來啟動(dòng)<>
</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)理面對(duì)開發(fā)時(shí)，需要懂技術(shù)到什么程度，怎么樣才能合理溝通？

大仁：和你說實(shí)際案例吧，有兩個(gè)技術(shù)出身轉(zhuǎn)的產(chǎn)品，一個(gè)是我，一個(gè)是某大公司的。我剛轉(zhuǎn)產(chǎn)品的時(shí)候，很自然的會(huì)想技術(shù)細(xì)節(jié)，這時(shí)候其實(shí)開發(fā)是反感的，有種侵犯他們領(lǐng)域的感覺。另一個(gè)的那位產(chǎn)品經(jīng)理則是裝不懂，實(shí)際上他技術(shù)比開發(fā)還牛。所以還是尊重開發(fā)、相信他們的專業(yè)能力（菜鳥除外）。

小奈：有時(shí)提出的需求技術(shù)說不會(huì)做，但在其它平臺(tái)已經(jīng)實(shí)現(xiàn)了。

大仁：這個(gè)還是溝通問題，其它平臺(tái)和自家平臺(tái)，在架構(gòu)以及階段等很多方面可能不一樣，開發(fā)能力也不一樣，你是想知道他有沒有騙你？你可以問另一個(gè)開發(fā)，但我建議你和他搞好關(guān)系。

建議

  • 產(chǎn)品經(jīng)理要懂技術(shù)，這樣才能理解開發(fā)，在一些功能實(shí)現(xiàn)可能性做取舍，和開發(fā)無障礙協(xié)作，順利推進(jìn)工作。
  • 產(chǎn)品經(jīng)理的溝通能力很重要，入職第一件事是融入團(tuán)隊(duì)，有點(diǎn)像地頭蛇，大家都比較喜歡她/他。
  • 提出清晰明確需求，與開發(fā)溝通好進(jìn)度。
  • 非要寫代碼的話建議從html和js學(xué)起，會(huì)技術(shù)的產(chǎn)品經(jīng)理可以隨時(shí)驗(yàn)證自己的想法。

Js、App和緩存——熊孩子、籃子和倉庫

1. 前端組合：熊孩子、村姑、化妝師

上次教大家如何用代碼做自我介紹，其實(shí)用到了JavaScript（簡稱js）。

html只是個(gè)靜態(tài)頁面語言，如果用html做自我介紹的話，它是展示全部文字，而用上了js后，它可以讓它一個(gè)一個(gè)字顯示出來，像打字機(jī)一樣。

好了，介紹下今天主角，村里的那個(gè)熊孩子就是Javascript，愛搗蛋、調(diào)皮的服務(wù)員(前端編程語言)。

熊孩子、村姑和化妝師是一個(gè)組合，叫前端（js+html+css）。

有興趣就看，下面是上次的js代碼，就是有個(gè)打字方法。

type()

<script language=”javascript”> //<script>代表腳本

var index=0;

var word;

function type(){ //打字方法的邏輯，一次打一個(gè)字

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秒調(diào)用一下打字方法

}

</script>

2. 俊俏走紅的Java

村里另一個(gè)小伙子Java,，生的早也生的俏，是個(gè)好廚師，做得一手好菜（后端開發(fā)主流語言，還有php等）。經(jīng)常有人誤會(huì)這兩個(gè)的關(guān)系，問這兩者的關(guān)系。

可以這樣說，Java和Javascript的關(guān)系就像雷鋒和雷鋒塔一樣。

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

js發(fā)展史

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

自從可以點(diǎn)外賣之后（移動(dòng)互聯(lián)網(wǎng)時(shí)代），用戶體驗(yàn)要求變高了，都在家叫外賣。（app性能好）App有兩種：iOS和Android。

  • iOS app（用Objective-c開發(fā)）：1號(hào)外送員，生的俏，新電動(dòng)車。
  • Android app（用Java開發(fā)）：2號(hào)外送員，生的一般，舊電動(dòng)車。

4. iOS發(fā)布審核流程

下圖是iOS開發(fā)到發(fā)布的流程，蘋果開發(fā)需要購買證書，發(fā)布也要各種審核，保證了App Store的應(yīng)用質(zhì)量。安卓流程也類似，不需要購買證書（自己用計(jì)算機(jī)可以生成），審核也比較少。

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

5. 籃子和倉庫：內(nèi)存和運(yùn)存

這里要介紹下緩存（一般存放在內(nèi)存），雖然app和瀏覽器都有緩存，但是app有數(shù)據(jù)庫，類似小倉庫，而且app自己可以生產(chǎn)頁面，所以app的能力比網(wǎng)頁好得多。

下圖是App的工作原理：App首先和服務(wù)器請(qǐng)求數(shù)據(jù)，然后緩存著，接著處理數(shù)據(jù)并存入數(shù)據(jù)庫，根據(jù)數(shù)據(jù)生產(chǎn)頁面并展示。

可以拿到數(shù)據(jù)直接展示（1-2-4-3），也可以存入數(shù)據(jù)再展示（1-2-3-4 ）。

App工作流程

6. h5和App的區(qū)別

h5（html5）, 城里的姑娘，是村姑升級(jí)版，常見于公眾號(hào)開發(fā)。在瀏覽器打開h5網(wǎng)頁版淘寶，其實(shí)就是下載網(wǎng)頁回來，那么有時(shí)候網(wǎng)絡(luò)不好甚至不通的時(shí)候體驗(yàn)就很差了。

通過瀏覽器打開淘寶和打開淘寶app有什么不同呢？

app還是需要聯(lián)絡(luò)服務(wù)器那邊，獲取數(shù)據(jù)（配方），這邊自己生產(chǎn)頁面。所以，服務(wù)器那邊返回顯示的數(shù)據(jù)（多少條，每一條里面顯示什么），app這邊根據(jù)這些數(shù)據(jù)自己生產(chǎn)展示出來，就不用下載頁面，效果好很多。不好的地方是占用手機(jī)的資源（內(nèi)存、cpu），也需要重新化妝。

混合開發(fā)(hybrid)也很容易理解：app+h5。app里面有一個(gè)組件webview網(wǎng)頁盒子，可以理解為一個(gè)瀏覽器環(huán)境盒子，用代碼啟用后，它也可以打開網(wǎng)頁。

  • 簡單的混合開發(fā)其實(shí)就是在app里套盒子，盒子里打開指定某個(gè)網(wǎng)頁；
  • 復(fù)雜點(diǎn)的就是有數(shù)據(jù)的交互，在淘寶（app）打開天貓（h5），然后你發(fā)現(xiàn)你也可以下單購物（自動(dòng)登錄了），自動(dòng)用淘寶的賬戶登陸了天貓，這就是數(shù)據(jù)交互。

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

7. 小程序

h5跨平臺(tái)但體驗(yàn)差，app開發(fā)成本高（需要開發(fā)ios和安卓兩個(gè)），那有沒有更好的方案呢？

上面的混合開發(fā)算是一個(gè)，但是隨著技術(shù)的進(jìn)步，F(xiàn)acebook推出了React Native（js開發(fā)的移動(dòng)跨平臺(tái)程序），騰訊也推出了微信小程序，這是顛覆式的行業(yè)方案，從此很多iOS和安卓程序員就失業(yè)了。中小型項(xiàng)目都可以用React Native或小程序開發(fā)，js變成了高富帥，前端迎來巔峰期。

小程序

個(gè)人認(rèn)為：小程序是為新零售而生的，小程序有個(gè)附近的功能，附近的零售店，對(duì)了，就是這樣子的。阿里和騰訊的新零售之爭，小程序服務(wù)商（有贊之類）、理發(fā)店、小賣部都可以用小程序。

8. 完善的積木盒子

微信為小程序提供了很多能力，像是和微信、公眾號(hào)互通的賬號(hào)體系、支付能力、共享微信的消息提醒等等。可以說大大降低了開發(fā)成本，開發(fā)可以專注于盒子組裝使得項(xiàng)目快速上線。

9. 王者歸來

介紹完熊孩子的發(fā)家史了，（Node.js這個(gè)還沒介紹，下次吧，不然太多看暈了）從誕生到小程序，前端越來越強(qiáng)盛了。正所謂能力越大，責(zé)任越大，有非常強(qiáng)大的開發(fā)生態(tài)，自然養(yǎng)活了很多前端工程師。

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

開發(fā)流程

小程序介紹自己

小雪面試受挫——怎么樣才算是產(chǎn)品經(jīng)理？

1. 深南大道

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

2. 面試受挫

“滴滴滴滴“，電話響起來了。

小奈：喂，小雪，怎么了？

小雪：我最近在找產(chǎn)品的工作，面試不怎么順利，好煩呀。

小奈：怎么了這是？

小奈：面試官好像不信任我，要看我作品，還要問很多細(xì)節(jié)。

小奈：你要不要和我表哥聊聊，他是產(chǎn)品大牛。

小雪：好的，太感謝了。

小奈：沒事。

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

大仁：你之前做過產(chǎn)品工作么？

小雪：實(shí)習(xí)過半年，平時(shí)主要工作是畫原型和完善需求文檔，偶爾也要跟進(jìn)項(xiàng)目，推動(dòng)開發(fā)GG完成需求開發(fā)。

大仁：你有過自己發(fā)現(xiàn)需求、策劃、落地到用戶真正使用的經(jīng)歷么？

小雪：額，好像沒有，我的工作都偏執(zhí)行。

大仁：那你其實(shí)還不能算是一個(gè)產(chǎn)品經(jīng)理，產(chǎn)品思維還沒開竅。

小雪：但是產(chǎn)品經(jīng)理的工作我都做過啊，像是原型設(shè)計(jì)、需求文檔、推進(jìn)項(xiàng)目等等。

大仁：聽起來更像是一個(gè)原型經(jīng)理或項(xiàng)目助理。

大仁：一個(gè)產(chǎn)品經(jīng)理的價(jià)值在哪呢？假如你假了1-2周，團(tuán)隊(duì)慢慢就會(huì)亂起來，發(fā)現(xiàn)沒有你不行，那么你作為產(chǎn)品經(jīng)理就是比較成功的。

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

大仁：其實(shí)我心目有個(gè)產(chǎn)品的偶像——韋小寶。

需求：鰲拜一日不除，康熙只能是個(gè)傀儡皇帝。康熙想真真正正做皇帝，想執(zhí)政，那么首先就是除掉鰲拜。

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

問題：鰲拜武藝高強(qiáng)，是滿洲第一勇士。

方案探索：小螞蟻搬得動(dòng)大蜈蚣，歷史上也有很多以小勝大、以少勝多的例子。

策劃設(shè)計(jì)：秘密訓(xùn)練了一批習(xí)武少年+降低鰲拜的戒心+甕中捉鱉。

落地：生擒鰲拜過程中十分兇險(xiǎn)，小寶的隨機(jī)應(yīng)變、不斷周旋才得以制服鰲拜。

生擒鰲拜

用戶反饋：康熙奪回兵權(quán)，平西王吳三桂密謀造反，隱患巨大，小寶幫朕想想辦法。

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

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

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

5. 簡歷怎么寫？

大仁：扯太遠(yuǎn)了，來說點(diǎn)實(shí)際的吧，簡歷你是怎么寫的？

hr看簡歷都很快，基本上都是一分鐘看完一份。有些大公司由于投遞簡歷太多，干脆就直接篩選掉一些，例如：本科211或以上、3年以上工作經(jīng)驗(yàn)，直接卡死了很多人，當(dāng)然深圳還是很多創(chuàng)業(yè)公司和發(fā)展中的公司。

簡歷猶如產(chǎn)品經(jīng)理的第一個(gè)產(chǎn)品，面試則是第二個(gè)。簡歷要求信息清晰、排版簡潔、有一定的文案水平，當(dāng)然最重要的是產(chǎn)品經(jīng)歷，經(jīng)歷和經(jīng)驗(yàn)是否貼合公司業(yè)務(wù)，公司往往找的是最匹配的人才。

基本信息：姓名、求職方向、電話、郵箱等。

工作經(jīng)歷：有多少段工作經(jīng)歷，工作業(yè)績?cè)趺礃?？是否頻繁跳槽？

項(xiàng)目經(jīng)驗(yàn)：項(xiàng)目相關(guān)度怎么樣，是否貼合公司業(yè)務(wù)？

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

小奈：大仁哥，對(duì)產(chǎn)品經(jīng)理職業(yè)規(guī)劃有沒有什么建議？

大仁：同樣以小寶為例子。

產(chǎn)品經(jīng)理職場三寶：大平臺(tái)+對(duì)的領(lǐng)導(dǎo)+好項(xiàng)目

練武

小太監(jiān)：和小玄子練武，跟對(duì)了領(lǐng)導(dǎo)。

首領(lǐng)太監(jiān)：替領(lǐng)導(dǎo)排憂解難，職業(yè)能力強(qiáng)，擒鰲拜，好項(xiàng)目。

五品太監(jiān)：協(xié)助太后殺死海大富，大公司站隊(duì)。

保護(hù)太上皇

副都統(tǒng)：管理路線，保護(hù)太上皇，替老板排憂解難。

老板：回家創(chuàng)業(yè)。

兼職工作：

天地會(huì)：青木堂堂主，產(chǎn)品講師。

民間邪教神龍教 ：白龍使，行業(yè)領(lǐng)袖。

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

用戶產(chǎn)品經(jīng)理/后臺(tái)產(chǎn)品經(jīng)理/數(shù)據(jù)產(chǎn)品經(jīng)理/人工智能產(chǎn)品經(jīng)理。

產(chǎn)品經(jīng)理后期一般有兩條路線，產(chǎn)品專家或管理，可以根據(jù)自身的特點(diǎn)和優(yōu)勢選擇。

8. 產(chǎn)品總監(jiān)多了，好產(chǎn)品少了

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

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

火車票代售點(diǎn)——后端API和開放平臺(tái)

1. 后端API長什么樣？

先看看API長什么樣：

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

介紹下API調(diào)用的method姿勢吧，有四種姿勢：post（增）、get（差）、put（改）、delete（刪），這個(gè)規(guī)范叫Restful化，規(guī)范是規(guī)范，怎么使用又是另一回事了，常用的是post（增刪改）和get（改）。

2. Node.js

這里以Node.js為例：編寫后端，因?yàn)樗容^簡潔，一句代碼就可以啟動(dòng)web服務(wù)器。

說明下Node.js和Js的關(guān)系，Node.js和Javascript有著本質(zhì)的區(qū)別，是平臺(tái)環(huán)境和創(chuàng)業(yè)者的關(guān)系，Javascript本身一直在瀏覽器沙盒里生活運(yùn)行著。

有一天，有一幫黑客比賽項(xiàng)目中創(chuàng)造了一個(gè)新環(huán)境（Node.js），它讓Javascript可以跳出瀏覽器沙盒，也可以干后端（Java\php）的事，還可以開發(fā)PC端（跨windows、mac、linux多平臺(tái)）。

Node.js也是個(gè)全能型語言，前后端都可以?？聪翹ode.js開發(fā)的pc應(yīng)用，slack也在其中。

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

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

扯遠(yuǎn)了，回到后端開發(fā)，下面是Node.js服務(wù)端代碼，代碼很少。

var express = require(‘express’); //Node.js實(shí)現(xiàn)的web服務(wù)器
var app = express(); //生成一個(gè)
app.get(‘/’, function (req, res) { //這里，今天的重點(diǎn)，這個(gè)就是API
res.send(‘首頁（登陸頁）’)
})
app.post(‘/user’, function (req, res) { //這里，今天的重點(diǎn)，這個(gè)就是API
res.send(‘小明’) //獲取用戶
})
app.post(‘/user/update’, function (req, res) { //這里，今天的重點(diǎn)，這個(gè)就是API
res.send(‘小明’) //獲取用戶
})
var server = app.listen(8081, function (req, res) {
console.log(“hello world”)
})

4. 火車票代售點(diǎn)

小奈：什么是開放平臺(tái)？

大仁：你買過火車票么？

小奈：買過。

大仁：在哪里買的？

小奈：最開始在火車站買的，后來發(fā)現(xiàn)附近有代售點(diǎn)，就在代售點(diǎn)買。

大仁：是吧，平臺(tái)開放的目的就是用戶方便，火車站賣票賣不過來啊，尤其逢年過節(jié)的時(shí)候，大冬天的大排長龍。代售點(diǎn)和火車站合作，售票壓力下降，用戶也方便。

5. 開放平臺(tái)

大仁：有沒有發(fā)現(xiàn)現(xiàn)在很多app都有IM和地圖功能？

小奈：是啊，那不是很簡單么？

大仁：如果沒有地圖和IM開放平臺(tái) ，那是根本可能實(shí)現(xiàn)的，這兩個(gè)都是大工程，光是地圖數(shù)據(jù)采集就難以想象。

大仁：你看滿大街都是共享單車，他們肯定要基于地圖來實(shí)現(xiàn)定位吧。所以你會(huì)看到xx地圖上可以使用共享單車，肯定要合作的。照理來說應(yīng)該xx地圖來做這個(gè)單車的事，但是地圖背后要做的事太多，所以開發(fā)平臺(tái)是一種趨勢，也是一種生態(tài)哲學(xué)。

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

上次提到小程序，小程序其實(shí)就是應(yīng)用分發(fā)入口，相當(dāng)于app store、小米/華為/應(yīng)用市場，這就威脅到他們的應(yīng)用分發(fā)生態(tài)了，所以蘋果也曾有過“封殺”警告。

國內(nèi)的安卓廠商也結(jié)盟推出了類似服務(wù)，小米有一個(gè)“一鍵直達(dá)”服務(wù)開放平臺(tái)，直接在應(yīng)用商店里，所以小米也提出了“一鍵直達(dá)”。

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

大仁： 小明，聽說你大學(xué)的專業(yè)是計(jì)算機(jī)科學(xué)與技術(shù)？

小明： 是的，大仁哥。

大仁：?那好，去幫我搶個(gè)榮耀v9。

小明：領(lǐng)導(dǎo)，請(qǐng)你尊重這門專業(yè)，計(jì)算機(jī)科學(xué)是……

大仁： 請(qǐng)你談?wù)凬AS設(shè)備卷管理模塊中失效數(shù)據(jù)恢復(fù)問題的應(yīng)用。

小明：大仁哥，腳本寫好了。

（1）效果圖

運(yùn)行的效果圖，就是模擬不斷點(diǎn)擊換一換的效果。

（2）圖解

怎么做的呢？

讓我們一步步分解。

document.getElementsByClassName(“hot-refresh”)[0]

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

模擬點(diǎn)擊

定時(shí)器每100毫秒點(diǎn)擊一次

setInterval(function () {

if (Date.now() > new Date(“2017-3-21 10:08:00”)) {

document.getElementsByClassName(“hot-refresh”)[0].click()

}

}, 100);

  1. 大于某個(gè)時(shí)間點(diǎn)；
  2. 模擬點(diǎn)擊。

（3）chrome擴(kuò)展程序

為什么要打包成擴(kuò)展程序？

console的腳本reload之后會(huì)被清空無法繼續(xù)執(zhí)行，擴(kuò)展程序是個(gè)好東西

{
“name”: “第一個(gè)Chrome插件”,
“manifest_version”: 2,
“version”: “1.0”,
“description”: “jack的第一個(gè)chrome擴(kuò)展程序”,
“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);

放到chrome擴(kuò)展程序就不會(huì)被reload清空了。

小明用JavaScript寫的的情書

大仁：咦，這個(gè)鏈接是干嘛的？

小明：糟了，這個(gè)不是我的情書腳本么？（超級(jí)酷炫有愛的js情書）

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

小明用JavaScript寫的的情書

相關(guān)閱讀：

講個(gè)故事，給你一份詳細(xì)的技術(shù)書

 

本文由 @深圳jack 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
Jack
新零售數(shù)據(jù)PM 公眾號(hào)：產(chǎn)品經(jīng)理的技術(shù)課堂
5篇作品 102374總閱讀量
04-172232 瀏覽
上線“9塊9”，淘寶也頂不住了？
12-203633 瀏覽
拆解Top10劇情達(dá)人和60+品牌客戶，我們破解了“劇情種草”的N個(gè)秘訣
10-202816 瀏覽
5分鐘了解基金定投策略
10-135482 瀏覽
淘寶推出付費(fèi)Pro會(huì)員，會(huì)員功能一年變3次，商家的新機(jī)遇來了？
09-272037 瀏覽
B站開啟直播帶貨，未來盈利還會(huì)遠(yuǎn)么？
評(píng)論
評(píng)論請(qǐng)登錄

  1. 啥時(shí)候更新下一期呢

    來自北京 回復(fù)

  2. 謝謝大牛

    來自廣東 回復(fù)

  3. 贊一個(gè)，講的通俗易懂

    來自北京 回復(fù)

  4. 這篇寫得有趣容易理解，贊 ??

    來自廣東 回復(fù)

    1. 感謝認(rèn)可，本書初衷就是讓技術(shù)變得有趣。

      來自廣東 回復(fù)

  5. 每篇文章都讀了兩遍以上，想學(xué)產(chǎn)品，突然對(duì)技術(shù)感興趣了，之前自學(xué)了css，突然想學(xué)js了 ?? ~~~

    來自北京 回復(fù)

    1. 在我技術(shù)轉(zhuǎn)產(chǎn)品的路上，有人告訴我產(chǎn)品思維、技術(shù)思維會(huì)沖突，確實(shí)是。你得選擇一個(gè)作為主要的學(xué)習(xí)方向，建議先學(xué)點(diǎn)技術(shù)為做產(chǎn)品打基礎(chǔ)。

      來自廣東 回復(fù)

    2. 坐等下一篇更新啦

      來自北京 回復(fù)

    3. 微信公眾號(hào)首發(fā)

      來自廣東 回復(fù)

    4. http://m.codemsi.com/pmd/1020136.html

      來自廣東 回復(fù)

  6. 程序員連表白都這么6，看完想找個(gè)程序員小哥哥 ??

    來自廣東 回復(fù)

    1. 這，我這邊認(rèn)識(shí)很多開發(fā)GG, 給你介紹幾個(gè)咯

      來自廣東 回復(fù)