webpack基本配置

var webpack = require('webpack')
module.exports = {
    entry: {
        index: './src/app.js'
    },
    output: {
        path: './dist/',
        filename: '[name].js',
        publicPath: '/dist'
    },
    scripts: {
      "build": "webpack",
      "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'stage-0', 'react']
            }
        }]
    }
}

dev里各属性值的意思是:

  1. webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
  2. --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  3. --progress: 显示合并代码进度
  4. --colors: 在命令行中显示颜色
  5. --content-base build:指向设置的输出目录

注:
publicPath: ‘/dist’
// webpack-dev-server 启动目录是 `/`, `/dist` 目录是打包的目标目录相对于启动目录的路径

webpack-dev-server 还提供了自动刷新功能,有两种模式。

Iframe 模式

修改访问的路径: http://localhost:8080/index.html -> http://localhost:8080/webpack-dev-server/index.html 。这个时候每次修改代码,打包完成过后都会自动刷新页面。

不需要额外配置,只用修改路径
应用被嵌入了一个 iframe 内部,页面顶部可以展示打包进度信息
因为 iframe 的关系,如果应用有多个页面,无法看到当前应用的 url 信息

inline 模式

启动 webpack-dev-server 的时候添加 –inline 参数

需要添加 –inline 配置参数
没有顶部信息提示条,提示信息在控制台中展现

参考:
React+Webpack快速上手指南
精益react-webpack

querySelector和querySelectorAll的功能及区别

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。

用法:

两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

其中参数selectors 可以包含多个CSS选择器,用逗号隔开。

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

使用这两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover’)不会得到预期结果。

querySelector

该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。

querySelectorAll

该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。

摘自:http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html#undefined

获取触摸事件坐标

	function findCoordinates(e) {
		// 如果需要用 pageX/Y 代替 clinetX/Y
		var x,y;
		if(e.changedTouches){
			x = e.changedTouches[0].clientX;
			y = e.changedTouches[0].clientY;
		}else{
			x = e.clientX;
			y = e.clientY;
		}
		console.log(e);
		$('#test').text("x:"+x+",y:"+y);
		return [x,y];
	}
 
    var el = document.getElementsByClassName('content')[0];
    console.log(el);
 
    el.addEventListener('touchstart', findCoordinates, false);

触摸事件对象有事件类型、时间目标对象、可以阻止默认行为。

其中 touchList 数组包含了每个触摸点的信息。
changedTouches 数组中第一个对象就是导致事件触发的那个触摸点对象。

clientX/Y 和 pageX/Y 的区别是,前者相对于视觉视口的左上角,后者相对于布局视口的左上角。

注:
关于视口的介绍

DPI、DPR、屏幕尺寸等释义

物理分辨率 & 设备分辨率 (Device resolution)
单位:
像素密度 DPI ( Dots per inch ),单位像素/尺寸。是打印机、鼠标等设备分辨率的单位。
 
一平方英寸面积内像素的多少。dpi越小,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi。
 
冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。
 
 
屏幕尺寸:
是指屏幕对角线的尺寸,一般用英寸来表示。1英寸=2.54厘米
 
设备像素比 DPR( devicePixelRatio ):
提供了设备像素个数和理想视口的比。
浏览器厂商决定了设备的理想视口,DPR也由他们决定,单位是dppx。
 
dppx 每一个像素的点数。一英寸对应了css中的96像素,1dppx等于96dpi。
 
resolution 设备的分辨率,如:96dpi, 300dpi
 
设备像素dp(device pixels):
ppi就是设备像素dp(device pixels)的单位。
 
ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像。
计算公式:ppi=像素数量/物理尺寸(英寸数)
 
 
注:
写代码的时候只要关注dpr就可以了,网页的视口的大小是设备分辨率/dpr

修改swiper 2.7.6版本在ie8下点击后停止自动切换的问题

前文“Swiper 循环切换回调实例”中介绍过一些用法。
Swiper 是个优秀的滑动插件插件,有两个版本。3.x版本兼容高版本浏览器 chrome、ie9+ (推测),2.x版本兼容ie8等。
目前2.x已停止维护了,最新版本为 2.7.6.

问题描述:由于要兼容ie8故采用2.7.6版本。测试发现ie8下点击后停止自动切换的问题,chrome正常。
分析:
插件根据这个值 autoplayDisableOnInteraction 来决定用户操作后是否自动切换。在代码中找到,

            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }

发现能正确执行到if条件中。但ie8下没有执行到autoplay(),继续分析_this.wrapperTransitionEnd,是由ie8不支持 transitionend 事件导致的。修改如下:

    _this.stopAutoplay = function (internal) {
        if (_this.support.transitions) {
            if (!autoplayTimeoutId) return;
            if (autoplayTimeoutId) clearTimeout(autoplayTimeoutId);
            autoplayTimeoutId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
        else {
            if (autoplayIntervalId) clearInterval(autoplayIntervalId);
            autoplayIntervalId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.startAutoplay();
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
    };

swiper-2-7-7

移动设备上的viewport

像素是网页布局的基础。一个像素就是计算机屏幕能显示一种特定颜色的最小区域。

有两种像素:
设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。
css像素:为web开发者创造的,在css和javascript中使用的一个抽象的层。

css像素相当于多少个设备像素取决于屏幕的特性(是否是高密度)和用户的缩放。
用户放大得越大,一个css像素覆盖的设计像素就越多。
如果用户缩小到足够的程度,一个css像素会变得明显比一个设备像素小。

ppk把移动设备上的viewport分为:

layout viewport 布局视口
visual viewport 视觉视口
ideal viewport 理想视口

其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport。
在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。

<meta name="viewport" content="width=device-width">

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。
缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport吗?

<meta name="viewport" content="initial-scale=1">

也可以把当前的的viewport变为 ideal viewport。

要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:

<meta name="viewport" content="width=device-width, initial-scale=1">

配套网站:
http://www.quirksmode.org/blog/archives/the_mobile_web_handbook/

常用媒体查询 ( css media ) 条件

通过媒体查询为不同的设备和大小配置不同的样式。

@media 媒体类型 and (媒体特性){你的样式}

注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。
媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。
与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断。

1、最大宽度max-width

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

2、最小宽度min-width

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

3、多个媒体特性使用,使用关键词”and”将多个媒体特性结合在一起,每个条件包含在圆括号中。例:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4、设备屏幕的输出宽度Device Width

5、not关键词,表示对后面的表达式执行取反操作

6、only关键词,指定某种特定的媒体类型

7、使用逗号(,)被用来表示并列或者表示或

@media screen and (max-width:480px), screen and (min-width:960px){
  body {background-color:#f00;}
}

8、在Media Query中如果没有明确指定Media Type,那么其默认为all

9、非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局。

常用媒体查询 ( css media ) 条件

/* media */
/* 横屏 */
@media screen and (orientation:landscape){
}
/* 竖屏 */
@media screen and (orientation:portrait){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}

参考:
http://nec.netease.com/framework/css-media.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

注:
使用媒体查询的优秀网站:http://mediaqueri.es/

Swiper 循环切换回调实例

Swiper 是一款优秀的滑动插件,支持手机端和pc端。现为3.x版本,2.x版本兼容ie8浏览器。
插件原版地址:
http://idangero.us/swiper/
中文版地址为:
http://www.swiper.com.cn/

实例地址:
15-infinite-loop-2

核心代码:

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
        onSlideChangeEnd: function(swiper){
          console.log(swiper.activeIndex) //每次切换时,提示现在是第几个slide
          changeBg((swiper.activeIndex) % 5);
        }
    });
 
    // 回调切换背景
    function changeBg(index){
        $('#main').removeClass().addClass(function(){
            switch (index) {
                case 0:
                    return 'bg-5';
                    break;
                case 6:
                    return 'bg-1';
                    break;
                default:
                    return 'bg-'+index;
                    break
            }
        });
    }

loop模式:
会在wrapper前后生成若干个slides让slides看起来是衔接的,用于无限循环切换。
loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
默认为0,前后各复制1个。

例:
0,1,2 --> 2,0,1,2,0
实例中index为0和6时,做相应处理。

注:
activeIndex
返回当前活动块的索引。loop模式下注意该值会被加上复制的slide数。

paginationClickable
此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。

autoplayDisableOnInteraction
用户操作swiper之后,是否禁止autoplay。默认为true:停止。
如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
操作包括触碰,拖动,点击pagination等。

scrollIntoView的用法

scrollIntoView
作用(功能),将一个对象显示在当前window窗口的可视范围之内。
这个是W3C定义的DOM方法,各浏览器均支持,包括:IE5.5+、FF2.0+….

可以到PPK的博客中查看更详细的介绍:http://www.quirksmode.org/dom/w3c_cssom.html

可以点击链接查看Demo:http://www.quirksmode.org/dom/tests/scrollintoview.html

不过上面并未介绍它的参数,具体参数说明可以看这里:

http://msdn.microsoft.com/en-us/library/ms536730(VS.85).aspx

语法:

object.scrollIntoView( [bAlignToTop])

参数:

bAlignToTop 布尔型:true/false,默认参数不传则为true

它们分别代表不同的含义。

true:如果滚动条足够长,则将对象的顶端与当前窗口的顶部对齐

false:对象的底端与当前窗口的顶端对齐

参考:http://www.cnblogs.com/meteoric_cry/archive/2011/10/01/2197172.html