上篇文章写道怎么通过Canvas识别跳转位置，本篇文章重点介绍怎样使用adb命令操作「小人」自己挑动。adb是什么adb是Andorid Debug Bridge，可以将安卓手机打开USB调试模式，然后连接USB线到电脑，就可以通过adb执行调试命令。adb安装mac下面使用brew安装brew cask install android-platform-toolswindows下面去搜索下载，然后放到环境变量里面去，保证命令行执行adb可以成功。测试连接成功使用adb devices查看是否连接成功，如果连接成功会出现设备的编号。小人跳转需要的命令整个自动跳动的流程是这样的：调用adb命令获取手机当前屏幕截图拉取截图到本地路径通过js读取图片分析中心点位置计算跳转需要按压时长同adb命令发送长按命令通过node的child_process核心代码执行adb的命令如下：//截屏，放到sdcard的根目录下 adb shell screencap -p /sdcard/screencap.png //拉取截图图片到本地电脑 // 将remote路径的图片拉取到本地的路径 adb pull ${SCREENCAP_REMOTE_PATH} ${SCREENCAP_PATH}/screencap.png //发起长按，swipe后面是开始和结束的手指位置坐标，timeout是时长 a ...继续阅读 (9)

17年结尾的时候微信发布新版重点推出了「小游戏」概念，H5的游戏再次火了起来，新版微信开屏的游戏就是「跳一跳」游戏可玩度很高，网上也出现了各种语言版本的外挂，前几天看到一篇用nodejs搭建的外挂，需要手动点击截屏图片来判断当前和下一步的位置然后跳转，于是就起了用Canvas来实现图像的想法，后面有实现了自动跳转，算是齐活了。今天来完整说下图像识别。代码都放到了：https://github.com/ksky521/wechat-jump-game-hack欢迎自己去尝试先来看最终效果视频：https://v.qq.com/x/page/o1331igmskh.htmlCanvas图像处理的原理Canvas可以通过drawImage在上面添加图片，然后通过getImageData方法获取一个imageData对象，此对象包括了data、width和height，其中data为图片widthheight4长度的数组，每个像素点表现在数组内为：RGBA四个0~255的值，即Red、Green、Blue和Alpha值。通过对这个imageData.data进行遍历操作，可以利用图像差值比较找出图片内物体的边缘、物体的中心点，也可以根据图像中某个固定颜色范围的物体，进行匹配，从而找到「小人」的位置。颜色值差值比较函数先介绍一个函数tolerenceHelper，用来比较颜色差值，即传入需要 ...继续阅读 (11)

最近两个项目同时开发，使用了Vue2的SSR，这样后端渲染页面首屏可以加快页面呈现，增加SEO和用户体验，但是项目上线后却发现了严重的性能问题，于是在三天内两次重大调整，最后只能放弃Vue SSR，本文从Vue SSR实现开始，逐渐复盘整个事件。两周前就预告了要写一篇Vue SSR的文章，但是没想到上周四上线之后，周六放量之后发现性能问题，这周一到周三，做了两次重大调整，最终还是放弃了SSR，并且做了这次事件复盘。技术选型调研Vue已经很久了，随着Vue2正式发布，使用Vue来做项目又燃起了希望，不是为了一时的技术理想和情怀（了解我的人都知道，我不是这样的人），主要是出于下面几方面考虑：用artTemplate+Sass+JS做的components方案已经做了很久了，沉淀了很多组件，随着Node服务开始上线，一直想在此基础上做同构，而公司Node框架Yog2的view层选择偏向于Smarty模板的Swig，修改比较麻烦既然改不了，那么要换不如直接选择新的components方案，这次最强烈需求是：组件化和支持SSR，而Vue2之后支持SSR这次两个项目同时进行，而且仅仅给两周的开发时间，组件化有效提高工作效率，可以把通用的组件抽象出来，多个页面之间业务组件复用率也很高，而且业务组件在后续的运营活动也可以直接复用手百产品形态复杂，页面即在手百内使用又有手百外使用，手百内页面被多个W ...继续阅读 (9)

上次文章介绍了Hybrid开发中常用到的Web和NA的通信方案：JSBridge，通过比较之后，最终推荐安卓和iOS通用的scheme协议，可以保证APP内和外都可以使用，今天开始正式介绍整个Hybrid架构内容。就像本系列「开篇语」提到的，这里的Hybrid是「狭义的Hybrid」，而不是所有的NA套个webapp就是Hybrid。好的架构不是随波逐流，应该经得起考研Hybrid技术体系是一套很多技术组成的完整知识架构。拿手百Hybrid方案，包括规范/约定、开发、联调、服务支撑等整个开发流程，而随着PWA之类「新」技术的产生又在考研技术架构面向未来的设计能力，所以手百Hybrid还在不断完善，注意是不断完善，不是推到重来！手百Hybrid技术整体架构如下：接下来系列会围绕本架构图中重要的部分依次展开，全面的介绍Hybrid开发知识，本文介绍模板本地化开发方案。所谓「模板本地化」，就是将Web页面内置到APP内，随版发布上线，然后通过云端接口实现更新，再直白一点：将H5网站的页面预先放到客户端发版，然后云端更新新版本。这个方案好处在于：本地化模板提高页面打开速度，减少用户等待时间模板可更新，版本控制更方便可控，收敛快Web页面和NA内置代码实现一套代码，减少开发成本上手成本小，开发就是实际开发Web（H5）页面，通过构建工具，生成Web页面和NA模板包不同的代码标准H5代码，迁 ...继续阅读 (7)

大上周文章提到了Hybrid的模板本地化解决方案，本文介绍下模板包的管理平台。管理平台功能模板包的管理平台主要功能包括：自动编译自动增量上传包推送下发提测小流量&灰度：按客户端id下发、小流量数据收集：收敛，速度，监控整体架构和流程图部分细节讲解通过git hook，当打tag的时候，会触发编译，编译完成后，会对接模板数据库，打出三个增量包（为什么三个，看「模板本地化」文章）回滚实际是重新拿上一个版本的全量包生成新的版本号和签名，然后入库模板包下发，可以根据客户端id（用户id）进行针对性下发，还可以根据IP地域、运营商、百分比等方式灰度下发，提测其实是定向的一种模板包下发日志和数据，都回传到日志系统，统一采集分析，生成数据报表模板收敛率统计有两种方法：模板下发接口统计的当前版本号数据模板代码请求业务方api获取数据，携带的模板版本号数据这两种方式统计的收敛率数据不一样模板包失败统计是通过客户端上报的，可以详细列出哪个环节问题，比如是下载问题？解压问题？还是签名校验失败？ ...继续阅读 (8)

拖稿了好久的「Hybrid APP开发系列」又更新了~今天继续写JSSDK为什么会有JSSDK我之前文章介绍了通过 JSBridge 实现页面和NA的相互调用，并且介绍了模板本地包的开发和后台维护系统。今天介绍的是JSSDK，通过 JSSDK 可以实现：抹平JSBridge的平台实现差异对齐端能力，内部消化版本差异sdk封装后的代码更加符合前端习惯权限控制、鉴权、对外开放，实现生态建设关于sdk的代码级别的设计，可以参考文章：《JSSDK设计指南》如果做过微信页面开发的，应该都知道wx.js，这就是微信的JSSDK，在微信内需要调用微信的端能力就需要引入这个js。JSSDK的设计JSSDK的设计包括两部分：随着每个NA客户端版本内置的js，称为：inject.js，他的主要作用是封装JSBridge逻辑，通过随版更新实现减少端能力的版本分裂，降低整个sdk的代码复杂性。inject.js是一段js代码，当客户端加载一个页面的时候，由客户端在适当的时机注入到webview内执行，执行后的代码就会有给webview增加js方法，例如微信的_WeixinJSBridge，类比chrome开发插件当中的content_scripts，可以在document_start、document_end等时机进行执行。云端JS，即实际暴漏给开发者使用的js，称为：jssdk.js，这个是真正开发者使 ...继续阅读 (10)

上周没有更新原创技术文章，原因是忙着重构一个新接手的项目，此项目因为项目技术负责人离职，虽然投入人力持续增多，前端达到4人，后端3人，但因为新参与的童鞋对代码结构和业务的理解，导致项目开发了一个多月，还有一堆问题，达不到上线要求，接手项目之后，对项目业务场景和代码进行简单的了梳理，决定重构。重构不是个人冲动，而是的的确确存在各种大大小小的问题：接口太碎。项目本身按照vue组件化开发，但是页面每个组件独自请求自己的数据，比如：首页由轮播图、各种列表和用户信息展现组成，导致首页从上到下7~8个模块，每个模块都各自发自己的请求，访问首页需要同时发出8个ajax请求vuex的store太乱，大家按照组件去开发，各自跟后端兑接口、联调，但是没有人来统筹安排，导致大量重复工作，而且存在接口重复开发问题；接口多了store的命名就太乱，action和mutation中的业务逻辑代码太多，而不同页面需要不同的数据格式，则导致：1. 或者在mutation当中对数据进行重新整理，2. 或者新开个接口，这样就造成接口越来越多，mutation部分代码越来越重。一开始设计或者沟通有误。比如：用户信息相关的接口，需要传入用户id（uid），而不是通过登录cookie从passport获取；第三方接口需要用户信息，竟然请求的时候将cookie发给对方（幸好cookie是http only的，没有调通被我及时 ...继续阅读 (7)

抓取如果抓取的太快太频繁会被源站封IP，本文会介绍下通过限流、限速和使用代理的方式来防止被封上篇文章，抓取「电影天堂」最新的170部电影，在抓取首页电影list之后，会同时发出170个请求抓取电影的详情页，这样在固定时间点集中爆发式的访问页面，很容易在日志中被找出来，而且并发请求大了，很可能会中网站的防火墙之类的策略，IP被加到黑名单就悲剧了限流&限速先说下限流的方法，将批量的并发请求，分成多次固定请求个数，等上一次抓取结束后，再开始下一次抓取，直到全部抓取结束。这里我使用async模块限制并发次数，async主要有：集合、流程和工具三大类方法，这里我使用eachLimit(arr, limit, iterator, [callback])，所有修改是上篇文章的fetchContents方法，该方法接受抓取到的170个文章的url list，这次通过eachLimit将170个url按照3个一组并发，依次执行，具体代码如下：function fetchContents (urls) { return new Promise((resolve, reject) => { var results = [] async.eachLimit(urls, 3, (url, callback) => { spider({url: url, decoding: ' ...继续阅读 (4)

本文主要目的是通过抓取「电影天堂」的最新电影名称和下载地址，展现如何抓取列表之后，继续抓取正文内容使用《用Node抓站（一）》（没看过的可以翻看下本公众号的历史文章）当中写的spider.js代码可以直接用下面的代码把列表抓出来：var spider = require('../lib/spider') spider({ url: 'http://www.dytt8.net/index.htm', decoding: 'gb2312' }, (err, data, body, req) => { if (!err) { console.log(data) } }, { items: { selector: '.co_area2 .co_content2 ul a!attr:href' } })这里不同的是涉及到一个编码问题，「电影天堂」用的是gb2312编码，需要转成utf8，不然抓的内容会乱码。我扩展了request模块的参数增加了decoding：因为encoding被占用了，而且为了转码方便，我将encoding设为null，这样出来的数据就是Buffer，可以直接用iconv-lite之类的进行转码，涉及到编码问题不是本文讨论内容，就不多说了。抓取列表后，发现title是被截断的，也要在正文页面抓取一下；继续写抓取下载地址和电影ti ...继续阅读 (15)

前几天看到一篇写js文件反劫持的文章，想起15年主导做百度搜索结果页面反劫持项目做得一些研究，整理成文章，跟大家分享。常见劫持手段按照劫持的方法不同，我将劫持分为下面两类：跳转型劫持：用户输入地址A，但是跳转到地址B注入型劫持：有别于跳转型型劫持，指通过在正常的网页中注入广告代码（js、iframe等），实现页面弹窗提醒或者底部广告等，又分为下面三个小类：注入js类劫持：在正常页面注入劫持的js代码实现的劫持iframe类劫持：将正常页面嵌入iframe或者页面增加iframe页面篡改页面类劫持：正常页面出现多余的劫持网页标签，导致页面整体大小发生变化跳转型劫持为了获取流量，一些电商或者类似百度这样需要流量合作的网站都会有自己的联盟系统，通过给予一些奖励来获取导流，比如：百度或者电商会有渠道分成。为了区分哪些是第三方给予导流过来的，通常会在url地址增加类似source、from之类的参数，或者进入页面之前通过「中间页」种cookie。这样，当用户输入一个正常网址的时候，劫持方会在网络层让其跳转到带分成或者渠道号的「中间页」或者带渠道号的页面。这样用户进行下单或者搜索等行为，劫持方会得到「佣金」。上面说的这类case还算友好，至少用户一般体验不到页面变化，还有类似跳转到钓鱼网站的case，也有不正当竞争的case：用户输入baidu.com跳转到so.com或者sm.cn，而对方网 ...继续阅读 (8)

本文从业务场景来谈谈为什么选择Node，以及前端写后端代码需要补足的短板。这些日子一直在做Node方面的尝试，或多或少会收到周围的异样的目光甚至背后的质疑，于是促使我好好思考为什么我在做Node。网上搜下「为什么要用Node」，找到的文章多数是介绍Node多么多么牛逼，无非是从Node本身特性来说，比如：并发、事件驱动、非阻塞I/O、单线程、流、社区生态……诸如此类，很少谈业务场景。我是「实用主义」者，说过：脱离业务场景谈架构都是耍流氓。因为个人是从一线业务做起的，经过几年对业务的思考，我觉得可以从业务场景来说说为什么我们的业务更适合用Node。从业务场景说起现在我们的业务模块化越来越普遍，很少有业务比较纯粹只有链接一个数据库就可以搞定，往往前台业务后面会有N多的API服务做支撑。比如：下面两种情况在我们实际开发中经常遇见：某个页面需要的数据来自两个以上接口，而两个接口来自不同的团队/部门，比如：用户信息来自账号部门，而UGC数据来自业务部门某个页面存在接口依赖，需要先调用接口A，然后根据接口A数据调取接口B，比如：个性化推荐，往往需要根据某些维度请求推荐系统拿到推荐数据的ID，至于内容，需要拿ID根据页面需要去获取具体元数据上面两种情况，站在后台开发的角度来看，我们业务模块要分开要独立，而站在前端的角度来看，这些数据都是一个页面需要的，前端希望是一个接口给我返回。这是一个开始。。 ...继续阅读 (1)

如果只写怎么抓取网页，肯定会被吐槽太水，满足不了读者的逼格要求，所以本文会通过不断的审视代码，做到令自己满意（撸码也要不断迸发新想法！本文目标：抓取什么值得买网站国内优惠的最新商品，并且作为对象输出出来，方便后续入库等操作抓取常用到的npm模块本文就介绍两个：request和cheerio，另外lodash是个工具库，不做介绍，后面篇幅会继续介绍其他用到的npm库。request：是一个http请求库，封装了很多常用的配置，而且也有promise版本（还有next版本。cheerio：是一个类似jQuery的库，可以将html String转成类似jQ的对象，增加jQ的操作方法（实际是htmlparser2request 示例var request = require('request'); request('http://www.smzdm.com/youhui/', (err, req)=>{ if(!err){ console.log(Object.keys(req)) } })通过上面的代码就看到req实际是个response对象，包括headers、statusCode、body等，我们用body就是网站的html内容cheerio 示例var request = require('request') var cheerio = require('chee ...继续阅读 (10)

最近消息是之前待过的腾讯OMG事业群换老大了，结合之前后台有朋友留言说多谈谈工作经历和趣闻，今天谈谈腾讯的见闻和观感背景：本人12~13年在腾讯北京OMG部门工作过，当时在银科大厦，正值腾讯微博发力和腾讯视频起步阶段，当时微信已经是明星产品，本文见闻和观感基于本人经历。本文思绪有些乱，偏意识流。。员工关怀敢说腾讯员工关怀做的是工作过公司当中最好的，没有之一，先列几个印象深刻的事情。北京当时刚刚开张的image（爱马哥）印象店，里面各种体验和玩偶，公司也会组织一些玩偶涂鸦活动，做的好的直接在image店展示。公司前台和保安都是外包公司（其实多数这样），但是和员工关系很融洽。每层前台都可以领药、口罩、雨伞，可以让妹子给洗眼镜，洗完擦干净双手送上，个人感觉比一些公司扔个超声波清洗机，但是没几个人会用如果公司搞活动会一个一个办公区搞，办理一些行政人事的事情也不会跨办公区，甚至不需要从银科跑到第三极，这个如果在百度就会有体会，除了大厦和科技园很多事情办理不了。。「班车文化」：这是腾讯最引以为豪的事情之一，据说深圳班车数量和深圳公交数量有的一比，如果不坐班车貌似还有80块钱每月的补助（如果没发可能作为团建费用了）。这里的班车是送员工回家的真班车，不是地铁摆渡车哦~加班有专门合作的餐厅，晚上八点保安会推车发加班餐；加班自己报备，可以变现和调休，节假日三倍工资还有个很有意思的事情是快递要过安检入职 ...继续阅读 (11)

Hybrid开发中，web页面往往会跟native进行交互，而JSBridge就是web页面和native进行通信的桥梁，通过JSBridge可以实现web调用native的方法，native可以通过webview.loadUrl之类的方法，将javascript:xxx代码放在页面执行，这有点类似在浏览器地址栏直接输入：javascript:xxx本文较长，先把目录列出来：JSBridge多种形式js Interface 直接注入到window对象改写浏览器原有对象：alert/console/promptURL scheme唤起APP技术intentlocalserverscheme：deeplink/applink/Universal linksmart app bannerJSBridge安全JSBridge的最佳实践协议规范回调函数预留升级/统计能力简单JSBridge调用封装JSBridge多种形式web和native进行通信，方法有很多，接下来一一列举一下JSBridge的多种形式，及其利弊。JavaScriptInterfaceJSInterface是安卓4.2-官方推荐的解决方案，原理是通过WebView提供的addJavascriptInterface方法给浏览器window注入一个命名空间，然后给Web增加一些可以操作Java的反射。// Android ja ...继续阅读 (5)

上次写了一篇文章「怎样准备一场面试：候选人篇」，今天的文章是姊妹篇：「面试官篇」，本文会结合自身做面试官和候选人的体验，简单说下我心目中的合格面试官是怎样的。端正态度面试官最大的任务是帮助团队挑选符合条件的候选人。所以，面试官找的是将来一起合作共事的人，应该尽最大努力去发现候选人的优点，引导候选人正常发挥。面试官也是公司和团队的门面，面试整个过程应该体现出职业化的一面，给候选人留下好的印象，即使候选人不是合适人选，但是给候选人留个好印象，对于面试官个人和团队都有深远的意义。（谁还没个牛逼的朋友。不要盛气凌人！不要盛气凌人！不要盛气凌人！不知道为什么，越大的公司越不喜欢给面试官做个基本培训，很多面试官技术不错，但是职业化做的不一定很好有个朋友吐槽某厂高P面试，大冬天天打飞的跑南方湿冷城市，面试官迟到几个小时不说，晚上7点多到了，夹着个surface支起来就看电脑，头都不抬，前后面试不超过半个小时，技术问题都没几个。。好吧，尊重人是再高的Level做到的基本素质，该朋友对此厂一生黑。。准备工作面试官收到面试通知的时候，应该清楚的知道时间、地点，并且了解候选人的情况，了解团队要求的级别和工作范围是什么。如果是交叉面试或者跨团队面试，了解JD之外，还要跟Team Leader沟通下，至少知道TL心中的合适人选是样子的。根据JD要求，结合候选人的简历，初步准备问题，有必要可以提前准备笔试题。 ...继续阅读 (7)

本文不是面经，只是通过一些细节增加面试的成功率，帮助候选人找到合适的团队和公司。面霸跳过此文首先端正态度，认真对待每一次面试，不要浪费你和别人的时间；其次，不要觉得低人一等，面试是双向选择的，自信很重要。仔细阅读JDJD=job description，是指职位描述。往往很多候选人和发布JD的HR/Team Leader 忽略了JD的作用，好的JD传达出来很多信息：这是一个怎样的团队技术栈是怎样的需要什么样的人加入候选人加入团队做什么如果喜欢做JD的项目，认可团队，技术栈也没问题，就可以投递简历；JD中提到的技术栈（要求）和项目也是面试的重点，可以针对性的做准备。约个双方都舒服的面试时间如果HR打电话预约面试时间，记得一定要约个双方都舒服的时间，宁愿请假也要安排好面试时间。有个case，前几天有个朋友说为了给公司招人，晚上住公司附近酒店，原因是候选人为了早上能不耽误现在公司的工作，想在10点之前按时上班，预约的面试时间是早上8点。想想面试官为了早上八点来面试自己掏钱住酒店，心里多少头草泥马。。。当然朋友比较专业，没有任何怨言，结果8点到了面试并不顺利，中途候选人接到电话说有事情就跑了，是的跑了。。。面试时间很重要，提前十分钟到面试地点，熟悉下环境，做个登记之类的，留下个守时的好印象。面试准备上面提到的JD和面试时间都是相对于面试过程不太重要的细节，面试当中的表现才是最重要的。所以提 ...继续阅读 (6)

前面两篇文章（前端资源动态渲染模式介绍之概览篇和前端资源动态渲染模式介绍之combo篇）介绍了combo模式，今天重点介绍下seed模式，seed模式是一种利用js动态解析页面模块依赖，而且结合localstorage和combo 服务，实现的一种速度更快的加载方式。seed模式特点结合打包工具，实现页面依赖管理，seedjs不需要维护整站（整个项目）的resourcemap，combo需要使用后台语言维护map.json结合localstorage，将模块缓存到ls，方便全站（单域名）下公用，下载过模块避免二次请求对于更新的，没有下载过的模块，拼成combo url，一次加载，避免多次请求如何实现seed模式要实现seed模式，要修改模块定义和引入函数，例如AMD中的define和require，结合打包工具，实现静态资源依赖表resourcemap（例如fis中的map.json）的字段自定义对define函数进行改造首先对define函数进行改造，增加参数传入md5：define(id, factory, md5)，使其将factory源码和版本号存入localstorage，文件的md5值，可以结合打包工具实现，fis中的file对象有个方法是file.getHash()可以获取md5值，这个值还需要存入resourcemap，用于比较缓存中的version和下发的reso ...继续阅读 (18)

今天继续介绍前端资源动态渲染模式中的combo模式，combo模式是利用静态服务器的combo服务，结合静态分析页面使用的js或者css文件，然后动态输出combo url地址的方式。静态资源combo服务公司静态集群使用的是nginx服务，nginx有个concat模块可以将url进行打包。使用它之后，需要合并输出的静态资源需要在??两个问号后面加,逗号隔开，例如：http://baidu.com??style1.css,style2.css http://box.bdimg.com/life/js??script1.js,script2.js当然这种合并的文件数也是有限的，如果超过默认或者设置的最大文件数，服务就会报错，可以通过修改nginx.conf的配置进行修改：location /static/ { concat on; concat_max_files 20; }combo渲染模式前文介绍过基本原理，现在就拿smarty模板的{%require name="life:js/demo"%}说下具体的代码实现步骤，其他语言参考即可，我们还有个node版本的，node我们采用了yog2框架，其实是一样的，如果是直接php，其实就是个引入的函数而已（从第二步开始）执行{%require name="life:js/demo"%}，进入smarty的扩展语法req ...继续阅读 (15)

今天看到一篇《javascript sdk设计指南》，内容篇幅比较多，很多实际是问题的枚举，但是信息量太大，所以我结合之前做微博开放平台和运营活动平台的经验，说下jssdk的设计和一些核心问题的解决方案。一个jssdk一般是指提供给第三方人员使用的一段js，通过这个js实现一些平台化产品提供的服务，比如微博的jssdk。整个jssdk的设计有一下几个核心问题：代码如何被使用页面接入如何实现跨域通信如何实现优雅api的设计公共资源的使用代码组件化先说第一个问题代码如何被使用页面接入这个问题涉及到几个小问题需要讨论：命名空间样式冲突版本维护appid等参数的传入命名空间在「命名空间」部分，需要做到不污染环境，保护好自己，即不要对本来的页面造成命名的破坏，只是用一个命名空间，又要考虑到第三方页面的复杂性，防止跟错综复杂的命名空间冲突。要做到这点，需要我们在命名空间命名的时候多注意下，尽量不要使用业内通用的命名方法，比如驼峰，名字尽量起的怪一些，偏一些，一般，要么使用_开头（甚至多个），要么使用项目代号这些不太被别人想到的名字，嗯，我记得有人命名空间用av，很好呀！还有一种方式是动态的命名空间，在url中带上namespace=xxx，本节结束后面会统一给出示例样式冲突除了js命名空间问题，如果jssdk带有UI组件，那么还需要考虑css的样式冲突问题，这里不用多说，记住以下几点：一些复杂 ...继续阅读 (22)

在手百我们使用了一种动态管理静态资源的方式，在开发中通常打包工具在打包构建的时候根据页面依赖将所有的js或者css打成一个app.js或者app.css，这样的打包方式我们称之为「静态打包」，因为只能在项目发布构建的过程中一次性将页面用到的js或者css打包成一个文件，上完线之后就不能在拆分。这种「静态打包」的方式有个弊端：如果在多个view的页面，是不能够充分利用不同页面之间的公用代码（模块）。于是加强版就是在线统计一个网站（项目）模块依赖和公用的代码，然后设置一个阈值，利用统计的数据，分析出多个页面高频使用的公共代码，再下次上线的时候，将这部分代码打包在一起。这种方式百度内部也有类似的解决方案，但是这种方案也没有充分发挥出细粒度模块的作用，而且实现相对来说比较麻烦，需要长期数据统计支持。今天我介绍下手百中我们实现的一种动态管理静态资源的方式，我将它称之为「前端资源动态渲染模式」，简称「渲染模式」。这种方式是基于手百现有业务出发的，解决了手百不同平台（安卓、ios、winphone）的代码差异，而且充分利用缓存、combo服务，做到可配方便调试的目的。前端资源动态渲染模式特点代码永远只写一份，不需要编写特殊逻辑我们实现的渲染模式，对于代码开发者来说，不需要做特殊的逻辑编写，只需要按照正常编码要求来写代码，剩下的就交给打包工具和上线流程，对于初学者不需要任何的学习门槛，而且支持本地 ...继续阅读 (18)

iOS的生态中CocoaPods是包依赖管理工具，等同于node生态中的npm，OSX中的brew，linux的apt-get、yum这些工具，下面介绍下CocoaPods的安装和基本使用方法安装首先要有ruby（Mac自带哦~），然后执行gemsudo gem install cocoapads pod setup这时候估计会报：Operation not permitted - /usr/bin/xcodeproj错误，需要执行下面的操作：mkdir -p $HOME/Software/ruby $ export GEM_HOME=$HOME/Software/ruby $ gem install cocoapods [...] 1 gem installed $ export PATH=$PATH:$HOME/Software/ruby/bin $ pod --version 1.0.0我是修改了.bash_profile（zsh修改.zshrc），将export GEM_HOME=$HOME/Software/ruby放进去，把$HOME/Software/ruby/bin加入PATH。这时候在再执行gem install cocoapads就不会报错了。pod setup在执行时，会输出Setting up CocoaPods master repo，但是会等待比较久的时 ...继续阅读 (79)

我们知道移动开发上面有个设备像素比：window.devicePixelRatio，现在在开发页面的时候，一定会在head中添加个viewport的meta类似下面的代码：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">但是随着手机屏幕越来越大，于是页面会遇见下面的问题：介绍下REMrem是以document.documentElement（即<html>标签）的font-size为基准的，举例说明：html的font-size：10px那么1rem = 10px手百Rem切图方案为了切图方便，我们手百使用了Rem切图，首先类似淘宝的flexible方案，会在页面head中引入一个flexible.js。为了计算方便，我们将documentElement的font-size设置为页面宽度的10%，代码如下：var docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; docEl.sty ...继续阅读 (27)

写在前面拖了一年多的文章，终于开始慢慢补上了。。。上周末整理了下hexo的模板，本周末写了2015年的第一篇文章。从14年开始，手机百度就开始支持localstorage的细粒度缓存，配合inline渲染模式使用，在2G慢速网站将页面的js和css嵌入到script和style标签，然后将源码存到localstorage，第二次访问的时候从localstorage读取，提高页面访问速度。细粒度localstorage方案传统的localstorage缓存，流程图如下：最大的缺点是：需要页面渲染之后，读取localstorage缓存内容，然后二次拉取没有缓存或需要更新的资源。还有一个方案，就是利用cookie保存一个版本号信息，server端拿到cookie就可以判断出来需要下发和更新的资源。这个方案虽然可以避免二次拉取，但是毕竟cookie的存储量有限，cookie太大就影响http上行请求速度。所以之前百度移动搜索结果页的方法就是整个页面存储一个md5的版本号，如果有一个资源更新，那么就需要整个页面的资源代码重新下发，所以往往每周上线的时候会引起页面性能数据抖动。所以结合上面的两种方式，手百这边做的是如下的方案：第一步：代码按照更新频度进行分组上面提到的cookie方案最大的问题就是：业务代码和通用代码都“一视同仁”，这样经常频繁变化的业务代码只要发生变化，通用代码也需要更新，所 ...继续阅读 (26)

本文将围绕我半年来在移动前端工程化做的一些工作做的总结，主要从localstorage缓存和版本号管理，模块化，静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方案，希望对大家移动开发有所帮助。一年前存在的问题可能因为之前项目节奏紧，人力不足原因，一部分phper承担了前端的工作，于是暴漏了一些问题。粗暴的一刀切从第一次在厂子写代码开始，就被前辈告诉移动页面，所以的静态资源都要内嵌，即写在script和style内，这样的好处是，网络情况不好的时候，减少http请求。因为2G等网络不稳定的情况下，多开一个http请求，对手机资源消耗是巨大的，比如我们在手机信号不好的地方，访问网络，耗电量会急剧增高。但是随着3G，甚至4G的普及，实际统计显示，手机百度上2G用户不到30%，所以上面提到的这种一刀切的方案是不妥的。不成规矩第二个问题是没有规范和模块化的问题。大家写码都是意识流，除了都是用zepto.js之外，没有沉淀下模块。碰到以前写过的代码，都是ctrl+c+ctrl+v。这种粗放的方式，虽然可以暂时解决问题，但是当出现之前的一段代码不能满足需求的时候（比如新版app发布，之前的代码需要做兼容和升级），需要遍历所有的代码，挨个修改，麻烦！高度耦合的工作流程第三个问题是前端角色问题，现在组内的开发是前后端分离的，使用smarty模板，因为产品是hybridAPP，所以较传统前端 ...继续阅读 (31)

上篇已经说了怎么越狱，因为我的pw2是日版的，发现很耗电，删除了很多书了，还是三四天就开始出没电报警了。通过越狱后可以关掉索引，这样耗电量就小好多了，到现在一周了，电量还没消耗掉50%（最近一天看书2小时左右），这对于我来说已经很满意了。ssh登录kindle按照上篇操作，越狱之后 ，在搜索输入框内输入;711就可以看到自己现在wifi的ip。生成SSH密钥为了每次方便，我使用了puttygen.exe生成了ssh密钥。操作跟github的一样，打开puttygen.exe，点击Generate然后鼠标在key下面来回晃动，生成一个key，将生成的key复制，保存为：authorized_keys。点击save private key，将生成的密钥保存在硬盘上，例如：c:\private-key-for -kpw.ppk。usb连上kindle，放在usbnet/etc文件夹下。SSH连接kindle按照上篇中【安装USBNetwork】操作，打开wifi连接ssh。使用;711查询出kindle在现在网络的ip。打开winscp，新建一个ssh会话，例如：sftp://192.168.xxx.xxx，用户名是root，端口22，用户密钥文件，选择上面保存的ppk地址，例如c:\private-key-for -kpw.ppk然后点击登录，就可以登录kindle了。关闭索引kind ...继续阅读 (17)

买了kindle有一段时间了，发现电池并没有官方说的那么给力，我的pw2是从日本托朋友代购的，发现充电满了一天就差不多掉1/3的样子，曾经打电话给国内的亚马逊寻求帮助，但是国内亚马逊以国内还没上线为由没给我处理，要我自己到日亚提问？！上网查了下，听说关掉索引会解决这个问题，于是我就一直琢磨这怎么越狱。kindle越狱工具我的越狱工具是从mobileread下载的：http://www.mobileread.com/forums/showthread.php?t=186645。kindle越狱首先解压上面下载的kindle-jailbreak.zip越狱工具，得到三个文件：bridge.shjb.shupdatejb$(cd mnt && cd us && sh jb.sh).bin将这个这三个文件copy到kindle的根目录下，然后断开USB连接，返回kindle[主页]，点击[菜单]中的[设置]，进入设置页面之后，再点击[菜单]选择[更新设备]，这时候会执行bin文件，过一会儿之后，你就会在这个界面下面看到JAILBREAK就表示已经越狱成功了安装启动器KUAL安装插件之前需要安装KUAL作为启动器。启动器下载地址：http://www.mobileread.com/forums/showthread.php?t=203326下载prerequi ...继续阅读 (21)

在iOS中，需要调起一个app可以使用schema协议，这是iOS原生支持的，并且因为iOS系统中都不能使用自己的浏览器内核，所以所有的浏览器都支持，这跟android生态不一样，android是可以自己搞内核的，但是iOS不行。在iOS中提供了两种在浏览器中打开APP的方法：Smart App Banner和schema协议。Smart App Banner即通过一个meta 标签，在标签上带上app的信息，和打开后的行为，例如：app-id之类的，代码形如：<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">具体可以看下开发文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html今天Smart APP Banner不是我们的主角，我们说的是schema使用schema URL来打开iOS APP ...继续阅读 (30)

因为之前的乐谷云集找不到老巢了，官网都挂了，网上说是跑路了，虽然之前有人联系过我说是有他们公司接管，但是等出现问题联系的时候，却是找不到人。所以决定更换vps。简单记录下用到的这次vps迁移用到的命令。新的vps是用的centos 32。登陆后更换密码连上ssh之后，第一件事情就是更换root密码，用到的命令是passwd连续两次输入新的密码就可以。添加新用户wwwpasswd www继续数据www的密码。就可以添加安装软件包命令Yumubuntu的包管理软件是app-get，centos的包管理软件是yum，因为我的vps是centos，所以使用yum。# 安装 yum install xxx # 删除 yum remove httpd因为我使用的是lnmp，所以对于默认安装的apache可以删除，使用yum remove httpd。使用screen来管理对话经常就是遇见网络连接不好，ssh中断，那么执行的程序就不知道会不会成功，所以有了screen。如果使用screen --help没有命令，那么需要安装下：yum install screenscreen常用命令# 创建screen对话 screen -S lnmp # 查看现在运行的screen screen -ls # 读取某个screen screen -r lnmp # 退出screen，在当前screen中执行ex ...继续阅读 (18)

在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试Weinre在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~安装weinreweinre可以通过npm来安装：npm install -g weinre安装完之后，可执行下面的命令来启动：weinre --httpPort 8080 --boundHost -all-这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的 DevTools，具体操作可以看下http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html教程原理通过在需要调试的页面中引入一段weinre的js，实现pc和手机的socket通信，从而实现实时调试。Tips如果你嫌每次都要在调试的页面引入js麻烦，可以做个书签或者chrome插件如果嫌安装麻烦，可以使用phonegap的weinre：http://debug.phonegap.com/DOM断点DOM断点是一个Firebug和chrome DevTools提供的功能，当j ...继续阅读 (18)

最近看老外的ppt，看到了句话：Use tools. not rules!所以今天介绍个利器：liveStyle，liveStyle是Emmet团队开发的，Emmet就是大名鼎鼎的zen coding啊。其实在订阅的weekly里面早就介绍过livestyle，真正用起来还是看了上面老外的这个ppt，试用了下liveStyle，结果一下子就喜欢上了，如果你开发遇见了下面的问题就可以使用liveStyle了：在chrome DevTools中修改了样式，想同步到css文件中修改了css文件，不想刷新chrome，就可以实时看到效果嗯，livestyle解决了这两个问题，提高了开发效率！livestyle安装安装sublime text的liveStyle插件在package control搜索livestyle就可以了，或者去官方下载安装chrome扩展通过这个网址，安装livestyle，如果打不开，可能需要准备梯子，你懂的~ 感谢裆~安装后，在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。使用livestyle用sublime text 打开一个css文件，例如a.css随便打开个网址，然后F12切换到LiveStyle选中Enable LiveStyle for current page，这时会把页面的所有css都列出来选 ...继续阅读 (30)