迁移到webpack2

最近前端聊得最多的莫过于某某某2.0发布了,作为前端狗即感兴奋又觉苦逼。然而,webpack也不例外,一个东西的新版发布,文档什么的都得跟上,然而现在好像资料并不多,官方的说法是,webpack1和2在使用上并没有太大的区别。 好吧,那就折腾折腾webpack2吧.

原文地址 http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

Install Webpack 2

第一步,当然是安装最新版本的webpack2,不过因为还没正式发布,所以咱们就指定一个版本。

1
npm install --save-dev webpack@2.1.0-beta.25

如果你还用到其他的webpack插件(这假设简直是多余),那很可能就需要升级到2.0。

例如extract-text-webpack-plugin,同样也在2.0的路上

1
npm install --save-dev extract-text-webpack-plugin@2.0.0-beta.4

More...

javascript面向对象精要[摘]

0.数据类型

javaScript 有两种数据类型: 原始类型和引用类型。原始类型保存为简单类型。引用类型则保存为对象,其本质是指向内存位置的引用。

javaScript共有5种原始类型:boolean、number、string、null、undefined.

typeof null 的值为 ‘obejct’, 逻辑上可以认为null是一个空的对象指针(设计错误),判断是否为空类型的最佳方法是直接和null比较,使用 ‘===’。

javaScript提供3种原始封装类型:String、Number、Boolean。javaScript会在背后创建这些对象,使得能够像普通对象那样使用原始值,但这些临时对象在使用它们的语句结束时就会被立即销毁。

More...

关于移动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...