两行代码实现tab标签

发表评论

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

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<head>
<mete charset="utf-8">
<title >tab 标签 </title>
<style>
ul li {
float: left;
margin: 20px;
}
.box {
width: 100px;
height: 100px;
display: none;
border: 1px solid gray;
}
.show {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li>list0</li>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
<div class="wrap">
<div class="box show">000000000000000000</div>
<div class="box">1111111111111111</div>
<div class="box">222222222222222222</div>
<div class="box">33333333333333</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var li = $("nav li");
li.click(function(){
var boxInd = $(this).index();
$(".box").removeClass("show").eq(boxInd).addClass("show");
});
</script>
</body>
</html>

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

简单的words页面

1条回复

用了大约有两天多的时间，终于把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代码规范

发表评论

大括号

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

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

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

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

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

1
2
3
4
5
//提倡
for (var i = 0; i &lt; 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 &gt; 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

css选择器

发表评论

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

  1. 属性选择器：

 语法：div [attr=value]

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

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

vim几种模式和映射

发表评论

vim有一个强大的功能就是其映射功能，可以将各种按键映射成不同的功能。例如：

PHP
1
map a b             "则此时按b就会显示a

PHP
1
map <C-a>  A        "ctrl + a 映射成A

可以方便的映射定义各种快捷键。但是需要注意的一点就是vim有很多模式，不同模式下的映射方式不同，map只是普通模式下的映射，同样是<C-a> 可以再不同的模式下实现不同的功能。所以先来看一下vim的各个模式。

vim一共可以分为五种模式：

  1. 普通模式（Normal Mode）

  最常见的模式，打开vim不进行操作即为普通模式。

2.  插入模式 （Insert Mode）

可以输入的那种模式，普通模式下按i键可以进入。

3.  可视模式（Visual Mode）

可以选择多行、多列、段等进行操作，普通模式下按v可以按行选择，按<C-V>可以按列（块）选择。

4.  选择模式（Select Mode）

与可视模式差不多，不过这个选择之后，按键后会将选择的地方替换，与win下常见的编辑模式相同。普通模式下按gh可以进入。

5. 命令行模式（Command-line/Ex）

普通模式下按” : “ 进入命令行模式，可以进行相关的操作。Ex模式可以连续输入多行命令，普通模式下按Q进入。

 针对不同的模式于是乎也就产生了不同的映射方式，并且这些映射方式可以互相组合，map为基本映射，对普通模式、插入模式、可视模式、命令行模式都有效，然后会有不同的前缀表示不同的模式，主要有：

  • nore    非递归模式的映射
  • n         在普通模式下有效
  • v          在可视模式下有效
  • i           在插入模式下有效
  • c           在命令行模式下有效

对于递归：

PHP
1
2
3
4
5
map a b
 
map b c
 
按c会直接映射到a

inoremap 表示避免映射的嵌套和递归，imap则没有这个限制。
举例来说： <c-e>在插入模式下表示插入光标下面的字符(参见：h i_ctrl-e)。但是你有某
种原因希望使用 <c-e>表示别的含义，例如表示插入字符 “E” (随便举的例子），同时，你
希望保留<c-e>的功能，但是需要映射到别的组合键表示这个功能。那么该怎么办呢？你可
以先重新定义<c-e>的功能：

:imap <c-e> E

然后把原来的<c-e>映射到别的组合键，比如<c-t>, 你可以这样
:inoremap <c-t> <c-e>

注意这里你就不能用 imap 来实现，因为这样会出现递归。嗯？不明白，那么你可以试试这
个错误的命令：
:imap <c-t> <c-e>

分别键入正确和错误的命令，然后在插入模式下键入<c-t>，看看屏幕上出现什么，你就会
明白的。

一些映射举例：

PHP
1
2
3
inoremap jj <esc>    "按 jj 可以进入普通模式
 
map <F10> <Esc>:tabnew<CR> 按<F4>新建标签

参考：VIM学习笔记 键盘映射 (Map)

 vim的几种模式和按键映射