产品新人都看得懂的技术书2-【彩蛋】程序员小明的Javascript情书

3.2、开发说这个需求做不了，他在骗你么？

小奈：我想学习写代码？
大仁：为什么？
小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
小奈：他是不是骗我？
大仁：我等下和你解释，不过非要学也可以。
大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。

村姑：html

html是个乡下来的的丫头，她有基本的骨架和血肉。至于它的结构，我们可以把它想像成盒子，盒子套着盒子。


image.png

html非常单纯，比如说<h1>表示大标题，<p>表示段落，<img>表示段落。
html还有个非常有趣的标签，<a href='url'>某个链接</a>, 链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。
在互联网早期，网页都十分简陋。

禁用css后

在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。
好吧，后来浏览器大叔劝福它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。


化妆后

村姑后来就发脾气了，妈呀，天天出门都要打扮，很累耶。

化妆师 ：css

没办法，只能请专门的化妆师了。css真的是很神奇，把html打扮的美轮美奂的。

法宝1:选择器

面对着一个村姑，化妆师开始想办法了，首先是把整个html的结构定位出来。例如要找标题，html>head>title这样子才找到，化妆师直接规定 html head title 以后就是定位title了，类似的其它部件的定位也是如此。


image.png

部件都可以定位到了，定位到了之后就开始化妆了，例如把这个变成红色，字体20。
h1 {color:red;size:20}

法宝2:盒子

上面我们看到，盒子都是倒在这边去了，盒子和盒子间的距离不行，这样子排版很丑耶，所以给这些盒子添加了支架，固定它们的位置。

  • 边框（border）： 可以设定宽窄，样式，颜色
  • 内边距(padding)： 内容到边框的间距
  • 外边距(margin)： 边框到相邻元素的间距
image.png
我是邪恶的代码分割线

简单例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品经理的技术课堂</title>
</head>
<body>
<h1>产品经理的技术修养</h1>
<p>产品经理的第一行代码</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 这个就是真正的箱子，可以一个套一个

经常有产品新人问我技术问题。
像是前后端的区别？数据库是怎么样的？如何和研发沟通？
回答的多了，就想系统化的回答，写一本书，
让技术变得通俗易懂、有趣。
6年间，从技术小白到工程师再到后台、数据产品经理，
2000多个日夜，为代码、需求绞尽脑汁、也在创业路上走过，
百感交集。
本书以小说故事的形式、场景化讲解技术，让枯燥的技术变得有趣。
/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>

如何与开发沟通？

小奈：产品经理面对开发时，需要懂技术到什么程度，怎么样才能合理沟通？
大仁:和你说实际案例吧，有两个技术出身转的产品，一个是我，一个是某大公司的。我刚转产品的时候，很自然的会想技术细节，这时候其实开发是反感的，有种侵犯他们领域的感觉。
  另一个的那位产品经理则是装不懂，实际上他技术比开发还牛。所以还是尊重开发、相信他们的专业能力（菜鸟除外）。

小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
大仁：这个还是沟通问题，其它平台和自家平台，在架构以及阶段等很多方面可能不一样，开发能力也不一样，你是想知道他有没有骗你？你可以问另一个开发，但我建议你和他搞好关系。

建议

1、产品经理要懂技术，这样才能理解开发，在一些功能实现可能性做取舍，和开发无障碍协作，顺利推进工作。
2、产品经理的沟通能力很重要，入职第一件事是融入团队，有点像地头蛇，大家都比较喜欢她/他。
3、提出清晰明确需求，与开发沟通好进度。
4、非要写代码的话建议从html和js学起，会技术的产品经理可以随时验证自己的想法

3.3 Js、App和缓存---熊孩子、篮子和仓库

前端组合：熊孩子、村姑、化妆师

  上次在这提到村姑和化妆师的故事，其实村姑背后有个大家族。上次教大家如何用代码做自我介绍，其实用到了JavaScript（简称js）。
  html只是个静态页面语言。如果用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, 生的早也生的俏，是个好厨师，做得一手好菜(后端开发主流语言，还有php等)。经常有人误会这两个的关系，问这两者的关系。可以这样说，Java和Javascript的关系就像雷锋和雷锋塔一样。

介绍下熊孩子的发家史

js发展史

移动互联网的到来

  自从可以点外卖之后（移动互联网时代），用户体验要求变高了，都在家叫外卖。（app性能好）App有两种，iOS和Android。

  • iOS app（用Objective-c开发）：1号外送员，生的俏，新电动车。
  • Android app（用Java开发）：2号外送员，生的一般，旧电动车。

iOS发布审核流程

  下图是iOS开发到发布的流程，苹果开发需要购买证书，发布也要各种审核，保证了App Store的应用质量。安卓流程也类似，不需要购买证书（自己用计算机可以生成），审核也比较少。


iOS开发发布流程

篮子和仓库：内存和运存

  这里要介绍下缓存（一般存放在内存），虽然app和浏览器都有缓存，但是app有数据库，类似小仓库，而且app自己可以生产页面，所以app的能力比网页好得多。
  下图是App的工作原理，App首先和服务器请求数据，然后缓存着，接着处理数据并存入数据库，根据数据生产页面并展示。
  可以拿到数据直接展示（1-2-4-3），也可以存入数据再展示（1-2-3-4 ）。

App工作流程

h5和App的区别

   h5（html5）, 城里的姑娘，是村姑升级版，常见于公众号开发。上次也在这里 输入url后发生了什么 提到了网页，在浏览器打开h5网页版淘宝，其实就是下载网页回来，那么有时候网络不好甚至不通的时候体验就很差了。
  通过浏览器打开淘宝和打开淘宝app有什么不同呢？
  app还是需要联络服务器那边，获取数据（配方），这边自己生产页面，所以，服务器那边返回显示的数据（多少条，每一条里面显示什么），app这边根据这些数据自己生产展示出来，就不用下载页面，效果好很多。不好的地方是占用手机的资源（内存、cpu），也需要重新化妆。
  混合开发(hybrid)也很容易理解，app+h5。app里面有一个组件webview网页盒子，可以理解为一个浏览器环境盒子，用代码启用后，它也可以打开网页。

  • 简单的混合开发其实就是在app里套盒子，盒子里打开指定某个网页；

  • 复杂点的就是有数据的交互，在淘宝（app）打开天猫（h5），然后你发现你也可以下单购物（自动登录了），自动用淘宝的账户登陆了天猫，这就是数据交互。


    淘宝app，混合开发

小程序

  h5跨平台但体验差，app开发成本高（需要开发ios和安卓两个），那有没有更好的方案呢？ 上面的混合开发算是一个，但是随着技术的进步，Facebook推出了React Native（js开发的移动跨平台程序），腾讯也推出了微信小程序，这是 颠覆式的行业方案，从此很多iOS和安卓程序员就失业了，中小型项目都可以用React Native或小程序开发，js变成了高富帅，前端迎来巅峰期。


小程序

  个人认为，小程序是为新零售而生的，小程序有个附近的功能，附近的零售店，对了，就是这样子的。阿里和腾讯的新零售之争，小程序服务商（有赞之类）、理发店、小卖部都可以用小程序。

完善的积木盒子

  微信为小程序提供了很多能力，像是和微信、公众号互通的账号体系，支付能力，共享微信的消息提醒等等。可以说大大降低了开发成本，开发可以专注于盒子组装使得项目快速上线。

王者归来

  介绍完熊孩子的发家史了，（Node.js这个还没介绍，下次吧，不然太多看晕了）从诞生到小程序，前端越来越强盛了，正所谓能力越大，责任越大，有非常强大的开发生态，自然养活了很多前端工程师。

小作业：用小程序做个自我介绍

开发流程

小程序介绍自己

产品经理的技术修养（上）

4、

4、小雪面试受挫-怎么样才算是产品经理？

深南大道

  不知不觉就加班到了22:00，看来手头上的工作是做不完了，只能回家继续做了，小奈心里想。打道回府，再迟点公交都没了。刚好可以赶上最后一班车。


：

面试受挫

“滴滴滴滴“，电话响起来了。
小奈：喂，小雪，怎么了？
小雪：我最近在找产品的工作，面试不怎么顺利，好烦呀。
小奈：怎么了这是？
小奈：面试官好像不信任我，要看我作品，还要问很多细节。
小奈：你要不要和我表哥聊聊，他是产品大牛。
小雪：好的，太感谢了。
小奈：没事。

真正的产品经理

大仁：你之前做过产品工作么？
小雪：实习过半年，平时主要工作是画原型和完善需求文档，偶尔也要跟进项目，推动开发GG完成需求开发。
大仁：你有过自己发现需求、策划、落地到用户真正使用的经历么？
小雪：额，好像没有，我的工作都偏执行。
大仁：那你其实还不能算是一个产品经理，产品思维还没开窍。
小雪：但是产品经理的工作我都做过啊，像是原型设计、需求文档、推进项目等等。
大仁：听起来更像是一个原型经理或项目助理。
大仁：一个产品经理的价值在哪呢？假如你假了1-2周，团队慢慢就会乱起来，发现没有你不行，那么你作为产品经理就是比较成功的。

用产品思维生擒鳌拜

大仁：其实我心目有个产品的偶像，韦小宝。

需求：鳌拜一日不除，康熙只能是个傀儡皇帝。康熙想真真正正做皇帝，想执政，那么首先就是除掉鳌拜。

同理心：韦小宝（产品经理）无论是作为兄弟还是作为臣子，小宝一直知道皇帝要除鳌拜，做个好皇帝。

问题：鳌拜武艺高强，是满洲第一勇士。

方案探索：小蚂蚁搬得动大蜈蚣，历史上也有很多以小胜大、以少胜多的例子。

策划设计：秘密训练了一批习武少年+降低鳌拜的戒心+瓮中捉鳖

落地：生擒鳌拜过程中十分凶险，小宝的随机应变、不断周旋才得以制服鳌拜。


生擒鳌拜

用户反馈：康熙夺回兵权，平西王吴三桂密谋造反，隐患巨大，小宝帮朕想想办法。

不断迭代：断吴三桂反叛的三路援军 - 受封一等鹿鼎公 - 等等。

产品发版：康熙终于成为一个好皇帝，励精图治。

大仁：从发现需求到开发落地到用户验证，经历过这样一个完整的过程，才算是产品经理的启蒙礼/思维开窍。

简历怎么写？

大仁：扯太远了，来说点实际的吧，简历你是怎么写的？

  hr看简历都很快，基本上都是一分钟看完一份。有些大公司由于投递简历太多，干脆就直接筛选掉一些，例如本科211或以上、3年以上工作经验，直接卡死了很多人，当然深圳还是很多创业公司和发展中的公司。
  简历犹如产品经理的第一个产品，面试则是第二个。简历要求信息清晰、排版简洁、有一定的文案水平，当然最重要的是产品经历，经历和经验是否贴合公司业务，公司往往找的是最匹配的人才。

基本信息：姓名、求职方向、电话、邮箱等；
工作经历：有多少段工作经历，工作业绩怎么样？是否频繁跳槽？
项目经验：项目相关度怎么样，是否贴合公司业务？

如何面试？

产品经理入门到放弃指南

职业规划

小奈：大仁哥，对产品经理职业规划有没有什么建议？
大仁：同样以小宝为例子。

产品经理职场三宝：大平台+对的领导+好项目

练武

小太监：和小玄子练武，跟对了领导。
首领太监：替领导排忧解难，职业能力强，擒鳌拜，好项目。
五品太监：协助太后杀死海大富，大公司站队。


保护太上皇

副都统：管理路线，保护太上皇，替老板排忧解难。
老板：回家创业。

兼职工作：
天地会：青木堂堂主，产品讲师。
民间邪教神龙教 ：白龙使，行业领袖。

产品经理早期路线

用户产品经理/后台产品经理/数据产品经理/人工智能产品经理。
产品经理后期一般有两条路线，产品专家或管理。
可以根据自身的特点和优势选择。

产品总监多了，好产品少了。

产品总监就是战略思维、商业化多了，真正有匠心的产品人少了，好的产品自然也少了。

你心目中的产品经理是谁？留言告白吧。

4.1 火车票代售点----后端API和开放平台

后端API长什么样？

开放平台其实都是开放API, 那么API又是什么呢？简单理解就是url，就是增删改查， 之前说过的就是前端/移动端对后端的数据请求，攻与受。

先看看API长什么样。

完整的API是这样的，很长是吧，所以API文档是声明前缀，然后把http://www.hellojack.com前缀略去。

介绍下API调用的method姿势吧，有四种姿势，post（增）、get（差）、put（改）、delete（删），这个规范叫Restful化，规范是规范，怎么使用又是另一回事了，常用的是post（增删改）和get（改）。

Node.js

  这里以Node.js为例，编写后端，因为它比较简洁，一句代码就可以启动web服务器。
  说明下Node.js和Js的关系，Node.js和Javascript有着本质的区别，是平台环境和创业者的关系，Javascript本身一直在浏览器沙盒里生活运行着。有一天，有一帮黑客比赛项目中创造了一个新环境（Node.js），它让Javascript可以跳出浏览器沙盒，也可以干后端（Java\php）的事，还可以开发PC端（跨windows、mac、linux多平台）。
  Node.js也是个全能型语言，前后端都可以。看下Node.js开发的pc应用，slack也在其中。

Node.js开发的PC应用

Node.js开发的后端

  扯远了，回到后端开发，下面是Node.js服务端代码，代码很少。

var express = require('express'); //Node.js实现的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")
})

火车票代售点

小奈：什么是开放平台？
大仁：你买过火车票么？
小奈：买过
大仁：在哪里买的？
小奈：最开始在火车站买的，后来发现附近有代售点，就在代售点买。
大仁：是吧，平台开放的目的就是用户方便，火车站卖票卖不过来啊，尤其逢年过节的时候，大冬天的大排长龙。代售点和火车站合作，售票压力下降，用户也方便。

开放平台

大仁：有没有发现现在很多app都有IM和地图功能？
小奈：是啊，那不是很简单么？
大仁：如果没有地图和IM开放平台 ，那是根本可能实现的，这两个都是大工程，光是地图数据采集就难以想象。
大仁：你看满大街都是共享单车，他们肯定要基于地图来实现定位吧。所以你会看到xx地图上可以使用共享单车，肯定要合作的。照理来说应该xx地图来做这个单车的事，但是地图背后要做的事太多，所以开发平台是一种趋势，也是一种生态哲学。


image.png

image.png

商业&生态

上次提到小程序，小程序其实就是应用分发入口，相当于app store、小米/华为/应用市场，这就威胁到他们的应用分发生态了，所以苹果也曾有过“封杀”警告，国内的安卓厂商也结盟推出了类似服务，小米有一个“一键直达”服务开放平台，直接在应用商店里，
所以小米也提出了“一键直达”


image.png

4.2 程序员小明的情书-JavaScript脚本的力量

大仁： 小明，听说你大学的专业是计算机科学与技术？
小明： 是的，大仁哥。
大仁： “那好，去帮我抢个荣耀v9。”
小明：领导，请你尊重这门专业，计算机科学是……
大仁： 请你谈谈NAS设备卷管理模块中失效数据恢复问题的应用。
小明：大仁哥，脚本写好了”

1.效果图

运行的效果图，就是模拟不断点击换一换的效果

image

2.图解

怎么做的呢？让我们一步步分解

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

已经获取该元素

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之后会被清空无法继续执行，扩展程序是个好东西

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写的情书，参考程序员开源，希望各位看官们为小明转发，转发超过1000次，小奈将接受小明的告白，查看原文为小明疯狂打call把。
 
 

小明用JavaScript写的的情书

 
 

相关文章：产品经理的技术修养（上）

 
 

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,064评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,606评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,011评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,550评论 1赞 269
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,465评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,919评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,428评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,075评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,208评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,914评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,482评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2赞 339

推荐阅读更多精彩内容