2018.10.17-18 LOG:indexdb websoc

2018-10-19  本文已影响0人  灰喵九命

昨天的事很多,上午是前个项目尾款的催收,晚上又和朋友吃饭聊天,中午还买了个冰箱。 晚上回来10点过了。

珍惜生命,远离外包。昨年接了两个外包项目,这两月找KH要个尾款像要他们命一样。

没有预算好费用就不要找人做,OK?

家里冰箱用了有些年头了,换一个,多装些好吃滴。

不废话了,进入正题,这两天学习日志如下

  1. indexdb
  2. websocket
  3. git-alias
  4. css样式分离
  5. css-sprite
  6. git协议
  7. git 文件命令
  8. console的用法,Object相关知识

indexDB

在web的领域没有先来后到的说法,前些年很多人研究的web sql也成功被W3C抛弃,indexDB后来居上,又因为它很好的封装对象,又能在webworker中使用,注定会被更多的浏览器支持。如果你想存储一些容量大一点的数据,又不想去构建数据库,用这个没错。

  1. 关键字:键值对存储、异步、支持事务、支持二进制数据、容量无上限,不能跨域
  2. open:打开链接
  3. success:链接成功
  4. upgradeneeded:数据库升级事件,第一次会调用,新建表
  5. error:接收错误信息
  6. 操作:add,delete,put,openCursor,注意是通过指针遍历数据

可以参看张鑫旭和阮一峰的博客,写的很详细,张的还有在线案例

websocket

如果你不想客户端频繁的去轮询服务器,也不想某些客户端资源耗费太快,用websocket就对了。一次牵手,情定终生除非某一方主动跑路

  1. 仍然建立在TCP之上(这句话貌似多余了,难道会用UDP)
  2. 除了请求通信方式和协议标识符和HTTP不一样,其他基本差不多,不一样的地方估计你一辈子也用不到
  3. open,close,message,send,主要的函数大概就这些,很简单
  4. 阮老师推荐的一个WebSocket服务器,websocketd,将任何正常的语言文件变为websocket服务,强大吧。

git alias

懒人可以看过来了,修改根目录下的.gitconfig,可以配置命令别名,不知道怎么进根目录的请无视以下内容。

git config --global alias.ci commit,commit设为ci,是不是方便了很多?
直接修改根目录.gitconfig,加入别名配置

[alias]
        ci = commit
        st = status -sb
        ad = add .
        hi = log --pretty=format:'%h %ad | %s%d [%an]' --graph --date=format:'%Y-%m-%d %H:%M:%S'

CSS样式分离

今天看了张鑫旭在10年写的一篇文章,主讲样式的命名写法,叫做《CSS样式的分离再分离》,他提倡根据UI设计,将项目一些通用的CSS,按单属性来定义罗列,这样可以提高重用,减少CSS代码。
什么意思?.div-left{padding:5px;text-align:right;}----->.pd{padding:5px;} .tr{text-align:right;}
这样就可以到处复用,他还给出了一个通用库,密密麻麻一大篇。
我是觉得哈,这样子CSS可能是舒服了,但HTML可就不同意了,是吧?
还有,现在不是有预处理么?当然他是10年写的。。

css sprites

精灵兔还是雪碧兔?不要觉得对一个单词用不同的翻译就高大上,那是虚荣心。
不知道精灵图怎么定位的,不懂位置上有负数的,去研究一下background-position。
这玩意儿出来很久了吧,我记得6,7年前就开始用了,但我也一直不是很感冒。除了能够优化首次和修改后的图片的加载,平时大部分时候是没用的,浏览器会缓存我们的图片。我只能说看情况使用。
背景图是能减少请求,但也不要到处都是背景图,该是内容的还要内容,否则怎么语义化,你叫盲人怎么用?

git协议 git文件操作

  1. git支持的协议有很多,主要有git,http,ssh。git主要用于本地文件服务器,一般很少使用。http和https在windows上使用比较广泛,但速度比较慢。还是建议不管什么操作系统都用ssh,不会用的可以自己百度。
  2. git提供了很多文件操作,平时都没怎么用过,今天看了一下,还是比较方便。

console用法

看了阮老师的console才知道用法这么多,孤陋寡闻了。

  1. 支持占位符 console.log(' %s + %s = %s', 1, 1, 2)
  2. 直接输出错误 console.error('Error: %s (%i)', 'Server is not responding', 500)
  3. 对象转表格:console.table()
  4. 方法计数:console.count()
  5. 断言:console.assert()
  6. 程序计时:console.time(),console.timeEnd()
    以上内容参考阮一峰javascript教程

Object对象

  1. 作为工具函数,转换为对象
  2. 作为构造函数,生成对象
  3. 静态方法:Object.keys,Object.getOwnPropertyNames
  4. 实例方法:valueOf,toStrting,toLocalString,hasOwnProperty
  5. toString:可用来判断数据类型 Object.prototype.toString.call(value)
  6. 属性描述对象:
{
  value: 123,  //值
  writable: false,  //是否可改变
  enumerable: true,//是否可遍历
  configurable: false,//是否可配置
  get: undefined,//属性取值
  set: undefined //属性赋值
}

var obj = { p: 'a' };

Object.getOwnPropertyDescriptor(obj, 'p')  //获取属性描述
// Object { value: "a",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

//定义属性
var obj = Object.defineProperties({}, {
  p1: { value: 123, enumerable: true },
  p2: { value: 'abc', enumerable: true },
  p3: { get: function () { return this.p1 + this.p2 },
    enumerable:true,
    configurable:true
  }
});
obj.p1 // 123
obj.p2 // "abc"
obj.p3 // "123abc"
上一篇下一篇

猜你喜欢

热点阅读