分类目录归档:前端

web前端开发兼容问题(一)

文档模式

自从html5之后文档模式一般都会是<!DOCTYPE html>可是有时候会有很多问题,在低版本的兼容方面,主要区别就是不同的模式会渲染不同的css,最明显的一个地方就是IE的盒子模型。

怪异模式

听名字就知道了,其实就是一种比较怪的模式,在IE6及以下,如果不声明或者声明方式不对都会默认使用盒子模型。而且可能还会用其他问题。在IE6中我们可以使用document声明来避免标准模式。

标准模式

使用中w3c的规范的模式,符合正常的使用规范。

近标准模式

又称严格(strick)模式,按照标准模式进行渲染,只有在一种情况下不同就是,表单元格内部图片的布局采用和“quirks”模式相同的方式被处理,而不是按照标准模式。

所以说如果网站对向下兼容要求比较高的话,尽量一律按照标准模式写文档声明,如果对于现代浏览器来说,完全可以写<!DOCTYPE HTML>。主要还是根据需求决定。

<meta>标签

可以使用<meta http-equiv="X-UA-Compatible" content="IE=Edge">来保持对IE的兼容性。Edge表示采用系统内的IE的最高版本。另外还有:

  • “IE=edge”
  • “IE=10”
  • “IE=EmulateIE10”
  • “IE=9”
  • “IE=EmulateIE9
  • “IE=8”
  • “IE=EmulateIE8”
  • “IE=7”
  • “IE=EmulateIE7”
  • “IE=5”

对于有些现在有些浏览器的版本是双核
可以使用<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">来默认打开谷歌内核。
参考:stackoverflow

两行代码实现tab标签

这次写words这个demo的时候用到一个导航想用tab标签加ajax实现,所以就写了一个tab标签:写的很简单,不过原理都实现了。写面贴出来一下

其实道理却是很简单,就是找到当前点击的li的索引,然后显示box的这个索引让其显示。

简单的words页面

用了大约有两天多的时间,终于把words上线了。感觉以后可能用不多说说了,就把地址发了一下。大家的反应有象征性的点赞的、有看不懂的、有说太简陋的。我只能笑一笑而已。确实东西很简单,但其实没有想象的那么简单。表面上看上去就是一个留言板。其实:

  1. 不用注册就可以留言,但是你没有办法留 -:D
  2. 如果发的是网址会自动显示这个网页所对应的title
  3. 不用选择分类就会发表到相应的类别中
  4. 点击每个类别的时候不刷新页面(ajax + js tab)
  5. 页面加载自动focus到输入框
  6. 禁止自动完成

其实东西确实很简单,不过现在可以用了以后:

  • 增加chrome插件更快的发表
  • 增加微信发表
  • 增加阅后即焚功能
  • 同步说说 微博
  • todo 增加删除线
  • 优化界面

看似简单,其实一个框真的可以做很多很多东西。

将体验做到极致。

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代码规范

大括号

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

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

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

大括号位置:

因为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;

注释

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

<<<<<<< HEAD

css选择器

写页面时有时经常为了class/id命名苦恼,有时候还会因为疏忽两个名字一样而出现冲突问题,不过这段时间找到了几个好的方法(虽然以前也用过,但没有发现她的重要性):

  1. 属性选择器:

 语法:div [attr=value]

主要有六种属性使用方法:

1. [attr=value]    选择属性为value的元素 继续阅读