Polande's Blog

保持好奇心；用行动去创造

月份：3月 2014

html5 概括总结

polandemehtml5， 前端html5 概括总结无评论

概括

html5并不是想我们想象的那么神秘，其实只是让原来的东西变的更容易。html5增加的东西不仅仅是一些简单都新标签，那些只是一些简单的概念。就像html4的时候各个标签它只是标签而已。更重要的是灵活运用。
下面主要是将html5主要的东西概括一下。不对都地方请指正。

  • 新标签

    html5的一些新标签增加了部分比较有用的标签，同时也将上一版的标签的含义有所改变，这个具体请自行看书，html5标签最主要的就是它更接近与语义化。简单的举一下例子。

    • header 标记头部区域的内容(用于整个页面或者页面的一块区域)
    • footer 标记脚部区域的内容(用于整个页面或者页面的一块区域)
    • section Web 页面的一块区域
    • article独立的文章内容
    • aside 相关内容或者引文
    • nav 导航类辅助内容
      html5 新增属性总结

  • canvas

    canvas是html5中一个基础且重要的东西，用它来进行进行画东西，具体都canvas一些操作 请戳canvas

  • video & audio

    功能强大，知识简单，不做赘述，常用api

  • Geolocation

    Geolocation是位置信息，利用它可以调用找到你的位置信息，给出的是一个经纬度的值，结合其他地图api可以很好都开发出地图应用。

    • 个人感觉比较适合做商业应用 资料参考

  • Communication

    顾名思义Communication主要就是关于通信，方面的知识，页面与页面之间，页面与框架之间的信息互通，比较常见的一个例子就是html5做的幻灯片就是利用这方面的知识点做的。

    • 教程参考
      对于这方面的可能比较会用的可能多，希望自习看一下

  • webScoket

    webScoket html5中一个强大的通信功能，实现实时更新，减少网络延迟。
    用它可以做什么

    • 聊天室
    • 类似你画我猜游戏
    • 类似与股票数据实时更新效果
    • 与Geolocation结合定位并实时更新
      是不是很强大赶快来看一下怎么用吧 你画我猜带源码
      demo

      Web scoket 要想学好可能会涉及到一些后台方面的东西，需要简单的了解一下

  • Web Storage

    本地存储，其实就是cookie的扩展版。也是一个比较有用的功能,可以不用利用服务器就可以存储数据，方便又快速。 主要包括sessionStorage localstorage对这方面主要是对数据的处理和了解，只要能够有个大体了解，操作起来并不是太难

  • Forms

    • tel电话号码
    • email电子邮件
    • url网址
    • Search用于搜索引擎
    • range特定范围的数值选择器，滑动条
    • number只能是数字
    • 未来可能会支持，或者支持不是太好的
      • color 颜色选择器
      • datetime显示完整的时间，时间选择器
      • data 日期选择器
      • week某年的周选择器
    • …
      表单怎加这些元素最好的用处就是可以节约在前端表单验证方面的工作量。合理利用这些元素会让你开发更有效率

以上主要是应用比较广泛的地方还有一些也很有用的新属性就不一一介绍了，主要是因为比较简单或者不太常用,下面将一些其他的列出来，算是个提纲吧有机会再介绍

  • SVG 与canvsa对应 这个是画矢量图的应用接口
  • 拖放 拖拽上传等功能
  • history API 可以记录浏览历史，模仿浏览器的前进后退键
  • 离线存储 开发离线应用，或者与其他结合，是网站更加好用
  • Web GL 开发3D应用，canvas主要是用来开发二维图像，这个主要是用来开发3维图像，有个比较好的库three.js
  • Web worker 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
  • Camera API 调用摄像头操作
  • 移动开发
  • …

开发html5应用

上面那些只是对html5的应用的一些介绍，是想要开发一个html5应用你，最主要的是将这些东西能够完美的结合起来。例如开发一个你画我猜，需要画板(canvas),然后需要对方实时看见，那就需要web socket。而webScoket又需要配置环境，如果想用的更好一些，可能还需要一些后台知识。所以说重要的是能将这些知识结合在一起。
如果有更好的表现还需要看一下css3的相关知识，这些都能够很大程度的减少工程量。

整理了整整一个下午，可能不是很完善，但是希望可以有所帮助。

链接中的资料绝对都是很好的资料，而且绝大多数都是来自国外，自习看一下，绝对很有帮助

更多参考
– MDN html5
– inter html5
– jquery 官方文档
– jquery 中文文档
– w3cplus

 

js代码规范

polandemejs， 前端js代码规范无评论

大括号

尽量使用大括号，甚至实在可选的情况下，都使用大括号。很多情况下如果只有一条语句可以省略大括号，但是为了一致性和更方便升级，最好都使用大括号。
例如：

1
2
3
4
//不提倡  
for (var i = 0; i < 10; i += 1)
    alert(i);
 

但是如果以后想要在这个循环中增加就会出现：

1
2
3
4
for （var i = 0; i < 10; i += 1)
    alert(i);
    alert(n);
 

这样就不是不规范了，而是错误了，所以无论何种情况都一直使用大括号：

1
2
3
4
5
//提倡
for (var i = 0; i < 10; i += 1) {
    alert(i);
}  
 

大括号位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    //提倡
    function foo() {
        return {
            name: "polande";
        }
    }
 
    if (a > b) {
        return a;
    } else {
        return b;
    }
 
 

因为js会默认为语句末尾添加分号这样有时就会出现问题

空格

使用空格比较好的位置：

  • 在分开for循环的各个部分的分号之后: 例如， for (var i = 0; i < 10; i += 1)
  • 在for循环初始化的多个变量中：for (var i = 0, max = 10; i < 10; i += 1)
  • 在限定数组项的逗号后面: var a = [1, 2, 3];
  • 对象属性的逗号之后和将属性名和属性值分开的冒号之后: var o = {a: 1, b: 2};
  • 分开函数中各个参数的逗号之后: myFun(a, b, c)
  • 在函数声明的大括号之前: muFun() {}
  • 在匿名函数表达式之后: var myFun = function () {};
  • 分隔操作符和操作例如在 +, -, *, /, <, >, +=, >=, <=, ===, &&, ||, 等之后使用
  • 可以使用空行来分隔不同的单元

命名约定

  • 构造函数首字母大写
    var admin = new Person();
  • 单词组合形式的:
    • 构造函数使用大驼峰式: MyFun();
    • 函数名和方法名使用小驼峰: myFun();
    • 非函数的变量使用: fist_name;

注释

注释要适当，不要太多
单行注释 // 注释符前留有一个空格
多行注释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*  
* 星号对齐    
*/  
 
函数和方法注释:  
 
/**
* 方法说明
* @method 方法名
* @for 所属类名
* @param {参数类型} 参数名 参数说明
* @return {返回值类型} 返回值说明
*/
 

<<<<<<< HEAD