西涛offbye-移动全栈技术博客

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。基础概念为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性offsetWidthclientWidthscrollWidthoffsetHeightcl

今天帮人解决了iphone4下载页显示错误的问题，css3 media query坑啊，不容易匹配到。/** * iPhone 4/4s landscape & portrait */@media only screenand (min-device-width: 320px)and (max-device-width: 480px)and (-webkit-device-pixel-r

ECMAScript6已经于近日进入了RC阶段，而早在其处于社区讨论时，我就开始一直在尝试使用ES6进行开发的方案。在Babel推出后，基于ES6的开发也有了具体可执行的解决方案，无论是Build还是Debug都能得到很好的支持。而在有了充足的环境、工具之后，我们面临的是对ES6众多新特性的选择和分析，以便选取一个最佳的子集，让我们可以享受ES6带来的便利（减少代码量、提高可读性等）的同时，也可以

关于前端工程下面是百科关于“软件工程”的名词解释：软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。其中，工程化是方法，是将软件研发的各个链路串接起来的工具。有IDE的支持，负责初始化工程、工程结构组织、debug、编译、打包等工作对于软件“工程化”，个人以为至少应当有如下特点：有固定或者约定的工程结构，规定软件所依赖的不同类别的资源的存放路径甚至代码的写法等软件依赖的资

Announcing Ionic 2.0 AlphaTweet By Max on October 20, 2015Today, at the Angular Connect conference in London, we announced the first public alpha version of Ionic 2. Many months of hard work, false st

Flux是Facebook推出的一种组织web应用开发的架构思想，它的基本思想很简单：在你的应用中，数据应该是单向流动的。这种思想可以被称为”单向数据流”，你也可以把它想象成一条鲨鱼：因为鲨鱼永远只能向前游动。到目前为止，Facebook自己推出了Flux实践的例子，同时至少有6个JS库进行了Flux架构的实现。在本文中，我们谈到的Flux，特指Facebook实现的Flux。一个Flux的例子为

async函数近在眼前，但这经过了很长的旅程。不久前我们还在写回调，接着是Promise/A+规范，之后出现 generator函数，现在是async函数。让我们回头看看异步JavaScript在这些年是如何发展的。回调一切都始于回调。异步JavaScript异步编程，就像我们现在知道在JavaScript中，只能通过该语言的一等公民函数来实现：它们可以像任何其他变量一样传递给其他函数。这就是回调

这篇文章是千米移动团队半年多时间使用微信平台开发多租户微店系统相关经验的分享与记录，涉及微信JSSDK，消息推送，微店支付等方面，微信开发的坑实在太多了，早期的时候官方文档也有不少问题。 文章后面还会持续更新修正。 希望对想了解使用微信平台的小伙伴们有些帮助，能够少走些弯路，少踩些坑。为何要关注微信巨大流量入口相对于App，用户使用成本低微信公众号服务号与订阅号的区别服务号：服务号主要面向企业，为

原文来自：https://jellybool.com/post/css-that-you-may-not-know补充篇在这里 http://segmentfault.com/a/1190000003029085昨天由于某些原因没有写博客，之前说好的每天一篇的，这篇是为了补昨天的了。然后我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时

TypeScript 1.5正式发布，此版本是Visual Studio 2015更新的一部分，可以单独下载Visual Studio 2013和npm，或直接从GitHub获得最新版本。值得关注的改进（1）支持ES6。TypeScript 1.5增加了对ES6某些新特性的支持，包括Modules、Destructuring、Spread、for..of、Symbols、Compu

上周日专门从南京跑到上海参加了iWeb峰会（HTML5峰会），感觉这一天去的挺值的，几个演讲都挺精彩，干货不少啊。 整体感觉随着2014年HTML5标准的最终定稿，近期HTML5产业链在逐渐完善，整个行业应该还处在发展成熟期，已经出现一些技术平台级的公司，例如白鹭游戏引擎，Crosswalk，DCloud等。另外微信等一些超级APP已经是HTML5的主战场，各公司在自家的App里面基本上都已经引入WebView，实现HTML5混合架构。 先说下几个印象比较深的项目和公司， 白鹭Eg

Introducing OmWe've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions w

目前我们项目是基于AngularJS和ionic框架开发的Hybrid App，支持android phone/pad， iPhone,iPad四个平台版本，以及微信版。因为使用的技术有点新，所以做了这个内部的新人上手指引，对于想学习HTML5 Hybrid App开发的同学也有参考价值。 合格的HTML5移动App开发人员需要掌握以下知识：

今天看到同事转发的《ReactEurope Conf 参会感想》，这篇文章讲的react的一些理念感觉有些道理，但我对react最终能很好的实现learn once, write everywhere还是持怀疑态度，毕竟世界是多样的，Apple的iOS（扁平化风格），Google的Android各自有自己的UI规范（Material Design和AngularJs Material Design ），即使React的理念很好，在别人的地盘上也不一定能弄出多大成果。但在Web前端领域，React作为创新者，

原文https://github.com/dfguo/blogReactEurope Conf 参会感想React 带来的革命性创新是前端世界过去几年最激动人心的变化。自从接触 React 以来，我深信 React 会改变客户端开发者（包括前端、iOS 和 Android）的开发体验。这次在巴黎举办的 ReactEurope Conf大会是继第一次在 Facebook

关于Relay与GraphQL的介绍译注：Flux更多像是一个理念宣言，在Flux身上有太多不成熟、不细化的感觉（千奇百怪的声称基于Flux的框架就是例子），而所有这些问题，答案可能就在最近公布的Relay中，虽然Relay还没开源，但通过简单的介绍和视频，译者认为它像是把Flux的理念成熟化、框架化，非常值得React开发者关注。原文：Introducing Relay and

Eric Florenzano最近在自己的博客上发表了一篇题为《Facebook教我们如何构建网站》的文章，他认为软件开发有些时候需要比较大的跨越，而这将会在2015年再次上演，主角们则是Facebook的React.js、Relay和GraphQL。Eric Florenzano在该文章中提到：2003年Brad Fitzpatrick发布了Memcached，由此开启了Li

本文开始分析f8app核心js部分的源码，这篇文章将非常难理解，原因了Redux框架引入了很多新概念，使用了大量函数式编程思想，建议先把后面的参考文章仔细过一遍，确保理解后再看本文。React Native的理念是Learn once,write anywhere, Android和iOS App端的js代码是放在一起的，以便最大限度的复用业务逻辑，UI部分的可以根据平台特性各自实现，React n

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。模块引用在E

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。 本文分析f8app android代码的结构和技术实现，阅读本文的前提是熟悉Android开发。 f8app android代码结构分析Re

微信小程序是当前的热点，市面上已经有很多微信小程序开发相关的文章，今天晚上抽了点时间折腾了微信小程序，并顺便看看了下微信小程序开发者工具的实现，是使用Node.js开发的，UI是基于NW.js框架开发的，支持Windows和Mac跨平台。

jQuery现在已经是Web开发者比较依赖的一个库.甚至在很多公司内部也把jQuery当成了一个基本库来使用.但随着移动端的流行使用庞大的jQuery去支撑移动端的开发显得有些重量级了,于是就出现了一个轻量级兼容库Zepto.js.Zepto是作为为了支持移动端的浏览器而开发的一个和jQuery API极度相似的一个库, 如果你会用jquery，那么你也会用zepto,这样就大大降低团队协作的成本,

原文 http://stackabuse.com/node-js-async-await-in-es7/One of the most exciting features coming to JavaScript (and therefore Node.js) is the async/await syntax being introduced in ES7. Although it's basi

最近几个月由于工作原因，比较深入折腾了React，对下面这篇文章深有感触，为身边勇敢踏入React和React Native这个大坑的小伙伴点个赞。前端技术这几年发展太快了，目前比较主流的框架是React，AngularJS 1.3-2.0, Vue.js，其中React的生态最复杂。 React引入了太多新技术和库，基本上颠覆了前端开发的传统习惯，一个Demo项目都会用到几百个npm包，js语法

ReactRouter 4 这次改动挺大的，后面又要折腾一次了！！作者：杨森链接：https://zhuanlan.zhihu.com/p/22490775要问用 React 技术栈的前端同学对哪个库的感情最复杂，恐怕非 ReactRouter 莫属了。早在 React 0.x 时代，ReactRouter 就凭借与 React 核心思想一致的声明式 API 获得了大量开发者的喜爱。后续更是并入

这篇文章本来是繁体中文的，我把它转成简体放在这里。原文是http://lifemap.in/es2015-in-action/，对于Javascript ES6 介绍的比较全面。前言历时将近6年的时间来制定的新ECMAScript标准ECMAScript 6（亦称ECMAScript Harmony，简称ES6）终于在2015年6月正式发布。自从上一个标准版本ES5在2009年发布以后，ES6就一

这篇文章介绍了ES7中 async/await，generator，co，bluebird等异步编程的关联和发展变化，值得参考。原文 https://cnodejs.org/topic/5709cb2f94b38dcb3c09a7acasync/await提议 https://tc39.github.io/ecmascript-asyncawait/目前在 stage3, 没赶在 ES2016即E

Redis是一个常用的Nosql数据库，一般用来代替Memcached做缓存服务，同时它也支持数据的持久化，有着比较广泛的应用场景。在Java中使用redis我们已经比较熟悉了，那么在node.js和koa.js框架中使用Redis的正确姿势是怎样的呢？ Redis 是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有

原文地址最近一个季度，我们都在为手Q家校群做重构优化，将原有那套问题不断的框架换掉。经过一些斟酌，决定使用react 进行重构。选择react，其实也主要是因为它具有下面的三大特性。React的特性1. Learn once, write anywhere学习React的好处就是，学了一遍之后，能够写web, node直出，以及native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用R

今天讨论的新特性让我非常兴奋，因为这个特性是 ES6 中最神奇的特性。这里的“神奇”意味着什么呢？对于初学者来说，该特性与以往的 JS 完全不同，甚至有些晦涩难懂。从某种意义上说，它完全改变了这门语言的通常行为，这不是“神奇”是什么呢。不仅如此，该特性还可以简化程序代码，将复杂的“回调堆栈”改成直线执行的形式。我是不是铺垫的太多了？下面开始深入介绍，你自己去判断吧。简介什么是 Generator？

Fellow JavaScripters, it's time to admit it: we have a problem with promises.No, not with promises themselves. Promises, as defined by the A+ spec, are awesome.The big problem, which has revealed itse

H5性能优化意义对于一个H5的产品，功能无疑很重要，但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app，如果不把性能优化做起来，将极大地影响用户使用产品的积极性。用户感受当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒

移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第五点，要合理处理代码减少渲染损耗7. 基于第二、第五点

【全栈工程师眼中的HTTP】一文摘自《Web全栈工程师的自我修养》一书，由异步社区出版。本书作者是腾讯公司高级工程师，在前端、后端和APP开发方面都有丰富的经验，在本书中分享了全栈工程师的技能要求、核心竞争力、未来发展方向、对移动端的思考。除此之外，本书还详细记录了作者从零开始、学习成长的心路历程。HTTP，是Web工程师每天打交道最多的一个基本协议。很多工作流程、性能优化都围绕HTTP协议来进行

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。 研究了f8app的项目结构后，发现f8app服务器端的代码比较少，并且弄清楚数据模型和接口协议，对于后面理解客户端的实现有帮助

从W3cplus最近的更新都可以看出我的学习新动向。是的，自从开始学习SASS之后，我喜欢上了SASS。因为他能让我的工作效率更快，同时让我更加节约出时间去做一些我自己喜欢的事情。现在开始我开始使用SASS私下用在我喜欢的项目中，让我更加的对SASS喜欢与执着。在使用过程中，SASS中的Mixins让我觉得他的功能强大，使用方便——SASS的Mixins可以一次性定义功能模块，让你在任何地

原文 https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker1. IntroductionA short while ago, our team had to choose a technology for Wix's flagship product, the html wy

http://www.ngnice.com/posts/2c8208220edb94在Angular群里回答新手问题一段时间了，有一些Angular方面的坑留在这里备查，希望能对各位有所帮助。这个文章将来会随时更新，不会单独开新章，欢迎各位订阅。Q1. 错在哪里？如果你这么写过，会发现这个位置啥也没有加载出来，那么，错在哪里呢？错在ng-include需要的是一个变

使用AngualrJs开发移动App已经快半年了，逐渐积累了很多AngularJS的问题，特别是对于用惯了Jquery的开发者，转到AngularJS还是需要克服很多问题的。不像Jquery那样侧重DOM操作，AngularJS是以视图模型和双向绑定为核心的。     下面的内容假设你已经了解前端 MVC 概念，并对 AngularJS 有了一定经验，初学者读起来可能比较艰深晦涩。本文的总结会