Monthly Archives: 七月 2015

腾讯X5浏览器调试

朋友分享出来的一篇文章,当真实用的紧:微信、手Q、Qzone之x5内核inspect调试解决方案 ,迫不及待的按照攻略来了一遍,就赶紧拿出来分享了,详细不步骤里面说的很清楚,我来说说mac下配置遇到的一些问题。

  • python版本

    mac os 自带的python版本是2.7 ,上面攻略中需要使用python3.4,所以需要升级Python,升级攻略参考:如何将Mac OS X10.9下的Python2.7升级到最新的Python3.3,升级到3.4步骤一致

    注意
    本人安装python 3.4完成以后,不能使用python命令,需要使用python3.4, 想要使用python需要自己去做个软连接

  • 安装过程

    整个安装过程很顺利,唯独到了安装chrome inspector的时候遇到了问题,教程中也有人遇到了问题,所以本人编译时用的命令是:

  • 结果截图

    启动图启动图

    调试图调试图

暗时间读书笔记

暗时间

 

能够迅速进入专注状态,以及能够长期保持专注状态,是高效学习的2个最重要的习惯。

锻炼抗干扰能力

 

做好任务规划

 

畏惧的不是困难本身,而是困难所暗示的事件经济学意义。

 

过早退出是一切失败的根源。

 

反思是让人得以改进自己的最重要的思维品质

 

文字记录最好用自己的语言,方便检索。

 

 

温故而知新

回忆-整理笔记,书写,模拟场景

 

真正的效率源自于内心对一个东西的强烈热忱,也就是我们俗称的追求,这时候从表层意识到深层意识都关注在这件事情上面,脑细胞高度活跃,才能创造最大的效率。

 

 

学习习惯;

1.读书笔记

 

人与人学习的差距不在资质上,而是花在思考的时间和思考的深度上。

 

学习过程要常问自己的记个问题:

1.我的问题到底是什么

2.到底收获了什么?

3.设想自己正在将东西讲给别人听。

4.时常反省和注意自己的思维过程。

5.养成反驳自己的想法的习惯。

 

 

时间和效率

1.趁热情把万事开头难的阶段熬过去

2.重要的事情优先

3.找要的事情要营造比较大的时间块来完成

4.善于利用小块的时间

5.重视知识的本质

6.重视提前积累的强大力量,提前定制机会,不要总是思考明天,思考时间拉长一些,积极准备。

7.抬起头来。时不时的审视自己正在做的事情,到底有什么价值?

8.退订Rss

9.经常总结

10.传统方式看本书

11.定制简要的阅读计划

使用chrome浏览器在Android上调试web页面

在移动开发中,移动版页面调试是个头疼的问题,强大google发明了如何使用chrome调试android上的web页面

要求

  • 首先是你的机器上已经安装了chrome 32(版本或以上)浏览器
  • 一根连接安卓设备的usb连接线
  • 手机上的android系统版本必须在4.0+并且安装了chrome for android 浏览器

步骤:

  • 手机上开启开发者选项
  • 连接上数据线
  • 电脑打开chrome浏览器,地址栏输入:chrome://inspect, 回车,会出现类似下图:
    chrome://inspect的结果chrome://inspect的结果
  • 手机上打开chrome浏览器,输入一个地址,此处使用www.baidu.com
  • 点击上图中inspect按钮,会弹出一个新层,如图:
    inspect弹出层inspect弹出层
  • 后续步骤就跟在电脑上调试web页面一样的步骤了。

参考资料:

Remote Debugging on Android with Chrome

服务定义的简短指南

service即服务,提供了一种能在应用的整个生命周期内保持数据的方法,能够在控制器之间进行通信,并且保持数据的一致性。

服务是一个单例对象,在每个应用中只会被实例一次(被$injector实例化的),并且是延迟加载(需要时才会被创建)。

服务提供了把特定功能相关联的方法集中在一起的接口。

angularjs自身提供了非常多的服务让我们使用,常用的有$http,$timeout,$interval,$q,$rootScope等等。下载了Dash应用的童鞋可以方便的看到dash文档整理好的资料清除的罗列了出来。

除了angularjs提供的以为,使用最多的还是自己根据业务需要自定义服务。而angularjs提供了5种方式来定义服务:

factory()

是创建和配置服务的最快捷方式

此方式定义的服务返回一个包含服务函数跟服务数据的对象。angularjs中也有使用此方式实现的服务,例如:$http,$q.

 

* 当我们仅仅是定义一些方法的集合、数据并且不需要处理很复杂的业务时,用factory()来定义服务是非常好的一个选择。 * 若想要在.config() 中对服务进行配置时,不能使用factroy()来定义服务。

service()

该方式可以注册一个支持构造函数的服务,允许我们为服务对象注册一个构造函数。

 

使用service()方式是处理复杂的业务逻辑的是不错的选择。

provider()

所有的服务工厂都是由$provicde服务创建的,$provide服务负责在运行时初始化这些提供者。

提供者是一个具有$get()方法的对象,$injector通过调用$get()创建服务实例。

 

使用$provide()实际创建了一个提供者,这个提供者在定义是没有Provider后缀,但是在config()使用时,需要加上xxxProvider.

constant()

可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分当中。

 

这个常量不能被装饰器拦截

value()

如果服务的$get()方法返回的是个常量,就没有必要像上面那样定义那么复杂的完整服务。

 

constant()跟value()的区别

以constant方式创建的变量可以注意到配置函数中。value()不可以,一般用value()来注册对象或者函数。

 

参考资料:

The short guide to service definitions

Developer Guide / Services

学习flexbox弹性布局

基础概念

伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素

伸缩项目:伸缩容器的子元素

主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。

主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。

主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。

侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。

侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

父级元素

  • display:flex
  • flex-flow
    • row 横排
    • column 竖排
    • row-reverse
    • column-reverse
    • wrap 允许折行
  • 主轴,侧轴
  • align-items
    • 侧轴方向排列方式
    • flex-start
    • center
    • flex-end
    • stretch
  • justify-content
    • 子元素之间多余的空白如何处理
    • flex-start
    • flex-end
    • center
    • space-between跟space-around效果相似
  • align-content
    • 多行伸缩容器的对其
    • **仅在伸缩容器在侧轴占有固定的空间时才有用
    • flex-start
    • flex-end
    • center
    • space-around
    • space-between,space-around 类似

子元素

  • order
    • 改变布局顺序
  • flex
    • 让元素可以伸缩
    • 没有单位
    • 可以设置基准值
    • 设置负向伸缩值
  • .first {
  •     flex:1  200px;
  • }
  • .second {
  •     flex:2  300px;
  • }
  • .third {
  •     flex:1 2 400px;
  • }
  • 2个参数:
  • 前面的数字为比例值,后面的为基准值
  • .first {
  •     flex:1 1 400px;
  • }
  • .second {
  •     flex:2 3 600px;
  • }
  • .third {
  •     flex:1 2 400px;
  • }
  • 3个参数:
  • 中间的参数表示加权比
  • 假设父元素在主轴的方向尺寸为 1100px,在这种情况下,上例中的子元素就会溢出 300px(在主轴方向总尺寸为 1400px),因为设置了负向伸缩值,加权综合为 400px × 1 + 600px × 3 + 400px × 2 = 3000px:
  • first 将被移除溢出量的 400px/3000px = 2/15,也就是 40px,因此计算后的尺寸为 360px。
  • second 将被移除溢出量的 600px × 3/3000px = 9/15,也就是 180px,因此计算后的尺寸为 420px。
  • thrid 将被移除溢出量的 400px × 2/3000px = 4/15,也就是 80px,因此计算后的尺寸为 320px。
  • 所以负向伸缩值越大元素越小!

 

参考资料

伸缩布局 — 打开布局天堂之门

Flexbox——快速布局神器

使用gas&charles为移动端搭建测试环境

移动端开发时调试并不想web端那么方便,移动端有自己的特有的一些使用场景,比如说支付,特定页面认证,微信登录等等。

所以今天想大家推荐2个调试时用起来很顺手的工具,Gas Mask和Charles poxy.

工具

  • gas mark
  • charles

Gas配置过程

Gas Mask是个简单(而且免费)的hosts文件管理工具,方便的编辑hosts并在不同的hosts配置间切换。

  1. 请确保以上软件已经安装完成
  2. 配置想要代理的域名
    • 启动gas mark, ‘crate -> local’命名为’Host File’,格式如下:

    新建新建

    配置配置

Charles

Charles通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。

Charles是收费软件,可以免费试用30天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过30分钟,并且启动时将会有10秒种的延时。

Charles的主要功能有:

  • Session
  • Recording
  • Request & Response
  • Chart
  • Import
  • Export
  • SSL Certificates
  • Load Testing
  • Web Interface
  • Protocol Buffers
  • Command-line Options

代理请求,捕获跟踪

而我们常用的功能主要是捕获请求,查看请求跟响应过来的数据,以及网络环境模拟.

  • 设置代理端口,暂定为8888

    设置代理端口设置代理端口
    设置代理端口设置代理端口

  • 设置监听的请求

    设置监听请求设置监听请求

  • 手机设置代理

    手机代理手机代理

  • 手机代理设置成功后,charles回提示,点击Allow
    charle允许接入charle允许接入
  • 访问被代理的地址,charles上会有记录
    访问记录访问记录

模拟网络

这个功能非常好,charles可以模拟不同的网络,比如2G,3G,还能自定义设置网络速度,可以用来模拟慢网速。

  • 开启网速模拟

    开启开启

  • 配置

    配置配置

参考文献:

软件下载

angularJS的controller之间如何正确的通信

AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope。

每个$scope的$root指向$rootScope, $cope.$parent指向父级作用域。

cotroller之间的通信本质上是当前的controller所在的$scope如何跟其他controller上的$scope进行通信。

通常有3中解决方式:

  • 利用作用域继承的原理,子控制器访问父级控制器中的内容。
  • 使用angularJS中的事件,也就是使用$on,$emit,$broadcast进行消息传递
  • 使用angularJS中的服务

第一种方式

即作用域嵌套作用域,有一定的使用限制,需要作用域嵌套起来,在实际开发中这种场景相对比较少,但也不是没有,这种方式更简单直接。

angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope。 如果在$rootScope中也无法找到程序依旧运行,但视图不会更新。

示例

 

第二种方式

因为作用域是有层次的,所以可以利用作用域链传递事件。

传递事件有2种方式: * $broadcast: 触发的事件要通知整个事件系统(允许任意作用域处理这个事件)就要向下传播。 * $emit: 如果要提醒一个全局模块,需要通知更高层次的作用域时(例如$rootscope)需要把事件向上传递。

作用域上使用$on进行事件监听。

示例

 

在这里想要说的另外一个问题就是事件传播的性能问题,$broadcast+$on的方式回通知所有的子作用域,这里就会有性能问题,所以推荐使用$emit+$on的方式,为了进一步提升性能,定义的事件处理函数要在作用域销毁时一起释放掉。

使用$emit+$on的方式需要我们将事件监听绑定在$rootScope上,例如:

 

但是这种方式有点繁琐,定义多个事件处理函数时整个人都不好了,所以我们来改进一下

利用装饰器来定义一个新的事件绑定函数:

 

那么我们在控制器中定义事件处理函数时:

个人强烈推荐此种做法

第三种方式

利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,能够在控制器之间进行通信,且能保证数据的一致性。

一般我们都会封装server来为应用提供访问数据的接口,或者跟远程进行数据交互。

示例

参考资料