发表于

移动端事件

移动端事件和PC端不太一样，处理方式也有区别

  • touch单手指事件
    • touchstart
      -

PC端事件

  • mouseover
  • mouseenter区别：默认阻止了事件的冒泡传播
  • mouseleave
  • mousewheel
  • mouseout
  • mousedown
  • mouseup
  • contextmenu鼠标右键事件行为
  • click点击（不是单击）与移动端不同
  • dblclick双击
  • resize:window.onresize当浏览器窗口大小发生改变触发这个事件
  • unload：关闭
  • DOMContentLoaded:DOM2独有的事件，JQ中的$(document).ready()就是采用这个事件来操作的，他的意思是当HTML结构加载完成就会触发这个事情区别于window.ready
  • …
    事件对象
  • e

事件传播机制：

  • 捕获阶段：从document来时一直查找到事件源
  • 冒泡阶段：从事件源开始一直传播到document

移动端事件

区别：

  • mouse系列的事件在手机端是不兼容的，也没法使用
  • 键盘相关系列的（key）在手机端也不兼容，因为手机端是虚拟的键盘=》这一系列事件我们使用input事件代替
    其余的常用事件和PC端一样也存在，是不过部分事件表现形式不一样

    在移动端虽然我们可以使用click，但是click事件存在300ms的延迟：当用户完成第一次点击操作的时候，浏览器会等待300ms来验证一下是否触发第二次，如果操作了就属于双击，否则为单击

但是在平时的项目操作中,我们是不想要这300ms延迟的，这样的话就不能使用click事件了，需要我们自己模拟出一个单击操作：

touch事件模型，移动端专用的单手指事件模型，里面提供了常用的事件

  • touchstart:手指按下触摸在屏幕上
  • touchmove
  • touchend手指离开屏幕
  • touchcancel由于意外导致当前操作被中断执行（没什么卵用）
    移动端事件库：fastclick.js
    专门解决移动端click事件300ms延迟的，如果你当前的项目中已经使用了click事件，我们想要解决300ms延迟的问题，一个个的把click替换太麻烦，fastClick帮我们解决这个问题
  • 它使用的是Touch事件模拟了一套tap点击操作
  • 当我们执行fastClick.attach的时候，参数传递进来的是哪一个元素，相当于把点击操作委托给了这个元素（事件委托）
  • 当这个容器中的任何一个元素发生点击的操作，都会执行我们自己制定的那一套tap机制
    1
    2
    3
    4
    <script src='fastClick.js'></script>
    <script>
    	FastClick.attach(document.body);
    </script>
百度云touch手势事件库：touch-0.2.14.min.js

over了

Zepto.js移动端的小型jQuery

jQuery怎么用它怎么用

区别：Zepto更适合移动端的开发

  • Zepto更小
    • Zepto没有兼容IE低版本浏览器
    • Zepto只实现了jQ常用的方法，很多的方法没有实现
  • Zepto的animate方法中提供了transform变形属性的设置，而jQ没有
  • Zepto中提供了一些方法，而这些方法都是基于touch事件专门为移动端而准备的
    • tap点击
    • singleTap
    • doubleTap
    • longTap
    • swipe
    • swipeLeft/Top/Right/Down
      移动端事件中的多手指事件

      gesture

  • gesturestart
  • gesturechange
  • gestureend

发表于

理解 JavaScript 作用域

JavaScript作用域

　　任何程序设计语言都有作用域的概念，简单的说：作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

  • 全局作用域（Global Scope）在代码中任何地方都能访问到的对象拥有全局作用域
  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：
1
2
3
4
5
6
7
8
9
10
11
12
var authorName="山边小溪";
   function doSomething(){
       var blogName="梦想天空";
       function innerSay(){
           alert(blogName);
           }
       innerSay();
       }
   alert(authorName); //山边小溪
   alert(blogName); //脚本错误
   doSomething(); //梦想天空
   innerSay() //脚本错误
  • 所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
1
2
3
4
5
6
7
8
function doSomething(){
       var authorName="山边小溪";
       blogName="梦想天空";
       alert(authorName);
       }
   doSomething(); //山边小溪
   alert(blogName); //梦想天空
   alert(authorName); //脚本错误

变量blogName拥有全局作用域，而authorName在函数外部无法访问到。

  • 所有window对象的属性拥有全局作用域,一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

发表于

angular框架

  • 框架
    • 强约束，被动调用
  • 库 jQuery react
    • 主动调用库中的方法，弱依赖

MVC

  • model 数据层
  • view 视图层
  • controller 控制器

MVVM

  • model 数据层
  • view 视图层
  • viewModel 视图模型

将数据挂载在viewModel上可以实现数据和模型的双向绑定

发表于

HTML5(H5)

它是HTML的新一代规范，在原有的HTML4基础上增加了很多的有助于开发的内容；现在如果其他人提到H5，不仅仅是HTML5，他们的意思是问，你会响应式布局开发以及移动端webApp开发吗？

  • 新增一些构建页面语义化结构的标签
    • header
    • footer
    • main
    • article
    • section
    • figure
    • figcaption
    • nav
    • aside（广告栏…）
    • …

以上的这些标签在IE低版本浏览器中不兼容，我们需要引入“html5.min.js”来处理兼容（原理：在IE低版本浏览器中对于不兼容的标签把他们替换成兼容的标签）

1
2
3
<!--[if it IE 9]>
<script type='text/javascript' src='html5.min.js'></script>
<![endif]>

对原有标签有一些修改

  • center、font这些不常用的标签已经被HTML5标准移除了（不是不能用，只是不具备任何的语义化了）
  • strong之前的版本是加粗的意思，现在的版本虽然看上去还有加粗的效果，但是语义化是朗读的时候重点突出
  • hr之前的版本是一条直线，现在的版本效果上还是一条线，但是代表的是区域分割
  • small之前的版本是字体变小，现在的版本是附属细则

新增加一些文本标识标签

  • time
  • mark
  • address
  • …

对于表单的升级

传统的表单

  • form
  • input:text/password/button/submit/reset/radio/checkbox/file/hidden
  • textarea文本域
1
2
3
4
5
6
7
contendBox{
       width: 300px;
       height: 150px;
       resize: none;/*禁止手动调节大小*/
       overflow: hidden;/*内容超过不出现滚动条*/
   }
   <textarea id="contendBox" cols="30" rows="10"></textarea>
  • select下拉框
  • form

新增加的表单元素

  • progress进度条（一般不用，不好控制样式）
  • input
    • search
    • url
    • emal
    • tel
    • number
    • range
    • color
    • data inout:data tab type=’data’
    • time

了解新增表单元素的作用

  • 功能强大了
  • 内置了CSS和JS的验证
  • 新增加了placeholder属性，给文本框设置默认的提示
  • 在移动端输入的时候，选择不同的类型，调用出来的虚拟键盘也是不同的，方便用户的输入例如：tel->数字键盘

新增加的表单元素（或者是input的属性）在IE低版本浏览器中不兼容，placeholder在IE下不兼容，并且没有什么东西可以处理，所以这些表单只应用在移动端

audio && video（取代了flash）

audio是音频标签，支持音频格式

  • mp3
  • ogg
  • wav
  • m3u8:直播流
    video是视频标签，支持的音频格式：
  • mp4
  • ogg
  • webM
  • m3u8:直播流

以上的格式并不是所有的浏览器都兼容，在移动端最常使用的是MP3/MP4

不管是audio还是video,都有以下这几个属性

  • controls 是否使用浏览器自带的播放器
  • preload 设置资源的加载模式

canvas画布绘图

使用cancas可以绘制统计图（柱状、饼状、曲线…）

插件：

  • highcharts
  • echarts

webStorage

  • localStorage
  • sessionStorage
  • cookie

websocket

  • socket.io通信
  • 长链接
  • 长轮询

一些新的API

  • 获取地理位置
  • 检测横竖屏的