关于移动hybrid开发中H5页面的字体应与系统保持一致的问题

0、问题来源

在移动hybrid开发,也就是说,部分页面会使用html+css+javascript技术来制作,例如个人中心,收藏页面等。一般来说,移动端都会将字体设置为system系统默认类型。起初,愚钝的我认为,只要在css里不设置任何字体,将会默认使用系统默认字体。然而结果并未如我所想,页面出来后,中文、英文和数字几乎是3种不同的字体,而且没有一类是和移动端的字体相同。

1、浏览器默认字体

基于上述的问题,我google了一下iOS和Android的默认字体。找到了一篇大概如下:

1.1、iOS系统(感觉很正确)
  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体
1.2、Android系统
  • 默认中文字体是Droidsansfallback
  • 默认英文和数字字体是Droid Sans
  • 无微软雅黑字体

More...

开始使用Ionic2

0、介绍

紧随angular的步伐,ionic也推出了2.0版本(beta),把ng1换成了ng2,ui上也增加了material design和window phone的风格,组件上并没有太多的变化。因为ng2,代码风格完全不一样了,熟悉es6的童鞋应该很容易就能上手,而也因为ng2,让整个项目更组建化、模块化了。路由配置也更加简单。

ionic 2Ionic 2


More...

ajax与302

You can’t handle redirects with XHR callbacks because the browser takes care of them automatically. You will only get back what at the redirected location.

在ajax进行请求时,如果服务器返回302(重定向),ajax并不会马上收的,因为浏览器自动去访问了重定向的哪个连接,然后再返回结果。也就说,如果需要重定向的连接或者说是接口,是合法可以调用的,那ajax会返回重定向的那个连接的调用结果,反则就返回404。

大概流程如下:

1
ajax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback

如是需要利用重定向来跳转到某些页面,就不能直接返还302了。

常见的情况,登录过期,需要跳转到登录页面,这种情况,建议在返回需要重定向的状态码,例如返回{status: 302}, 然后由前端进行页面跳转。

获取字符串里最长单词的3种方法

返回字符串中最长的单词的长度(number类型)

1
2
3
4
function findLongestWord(str) {
return str.length;
}
findLongestWord("The quick brown fox jumped over the lazy dog");

这里会使用3种方法,首先是FOR loop方法,接着是sort方法,最后是reduce方法。

More...

理解Object.keys

Object.keys()方法可以返回由传入对象的所有可枚举的自有属性的属性名组成的数组,这和使用for…in遍历对象不同,for-in会把对象的原型链上继承到的可枚举属性也会遍历出来。

属性名的顺序和for-in出来的一样。

Object.keys(obj)

More...

常用shell命令

1、ls

ls最常用的参数有三个: -a -l -F。

ls –a
Linux上的文件以.开头的文件被系统视为隐藏文件,仅用ls命令是看不到他们的,而用ls -a除了显示一般文件名外,连隐藏文件也会显示出来。

ls –l
该参数显示更详细的文件信息。

ls –F
使用这个参数表示在文件的后面多添加表示文件类型的符号,例如*表示可执行,/表示目录,@表示连结文件,这都是因为使用了-F这个参数。但是现在基本上所有的Linux发行版本的ls都已经内建了-F参数,也就是说,不用输入这个参数,我们也能看到各种分辨符号。

More...

关于javascript里的声明提前(hoisting)

“声明提前”是在javascript引擎的“预编译”时进行的,也就是在代码开始运行之前。

在函数里声明的所有变量(但不涉及赋值),都会被“提前”至函数体的顶部。在函数体内,局部变量的优先级高于同名的全局变量,如果在函数体内声明一个局部变量或者函数参数中带有的变量和全局变量同名,那么全局变量将会被局部变量覆盖。而给一个没有被声明的变量赋值,在非严谨模式下,等同于在全局范围创建了一个同名属性。

在脚本里,所有的函数包括嵌套的函数,都会在当前的上下文中其他代码之前声明。函数定义语句中的函数会被显式地“提前”(包括函数名和函数体),在脚本和函数内部都是可见的,因此可以被提前调用。而使用var的话(函数定义表达式),只有变量会被提前,变量的定义还在原来的位置。

More...

理解Object.create

Object.create()方法是用来创建新的对象,并且可以指定原型(proto),和设定自身属性(propertiesObject)。如果指定的原型(proto)不是null或者一个对象值,将会抛出类型错误异常。

1
Object.create(proto[, propertiesObject])

在js里,所有的端口都默认继承至Obejct,如果使用此方法创建一个对象,需要指定原型为Object.prototype,如果传入null的话,就不继承任何东西。

More...

理解Object.assign

Object.assign()方法用于从一个或多个源对象(sources)中拷贝所有可枚举的自有属性到目标对象(target),并返回目标对象。拷贝过程中将调用源对象的getter方法,并在target对象上使用setter方法实现目标对象的拷贝。

1
Object.assign(target, ...sources)

不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

原文:Both String and Symbol properties are copied.

String和Symbol类型都可被直接分配。

1
2
3
4
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}

注意:如果属性是只读的,那将会抛出异常,目标对象将会停止改变(而之前的改变会保留)。但是对于null或者undefind会直接忽略。

More...

语录

#1

把复杂拆分成简单,将简单组合成强大,再用强大去解决复杂。
 
—— Unix设计思想之一

#2

Testing shows the presence, not the absence of bugs.
 
—— Dijkstra, 1969