Web Components最佳实践

Web Components是一组新的web平台功能,可以使开发者通过声明式、组合式的途径来构建应用。下面是一些给开发者的一些最佳实践建议:

  • 命名空间:自定义元素应该用破折号隔开(例如:<x-tabs>,<my-tabs>),破折号前面的字符才是有效的命名空间。你应该使其简短、唯一,尽可能不要覆盖其他人的前缀。如果你的组件已经有许多开发感兴趣,应该使组件的前缀小于三个字符。

  • 尽可能模仿内建元素:你的组件对其他开发者来说就应该像内嵌组件一样。如果以后正式公开组件的API时,若组件的API感觉很另类,你是否会感觉到尴尬?

  • 静默处理:组件应该想本地DOM元素,所以应该避免在普通元素交互时,出现js 错误,例如:你可以在ul中嵌套div,但它并不会按照你的想法渲染,可是它并不会抛出错误。

  • 属性定义数据输入:使用属性来传递配置信息,用boolean属性来表示boolean值,例如:<my-element selected>来代替<my-element seleted="true">.

  • 事件定义数据输出:除了传输的数据信息巨大或者改变极其频繁之外,我们应该使用事件来传递组件里的信息。

  • 引入依赖的文件:引入你组件的所依赖,不要担心<link rel=”import”…>冗余,只要设置合理的缓存头,它们只会在首次会被加载,使用http2.0可以减少多文件的消耗,或者在你发布app时,还可以合并和压缩它们到一个文件里面。

  • 为组件写文档:方便其他人使用你的组件,组件有许多方法可作为它们的API,下面列出了一些容易忽略的地方:

    1. 通过实例标记可以简明的描述属性。
    2. 若一个组件是设计嵌套在另一个中的,需要表明在其中如何使用。
    3. 列出js方法和属性
    4. 列出包含的事件
    5. 当使用shadow dom,元素和select属性允许你把节点放到正确的地方,若其中有任何特殊元素,必须指明。
    6. 若你的组件和微数据有关,需要写出微数据如何应用到你的组件上。

继续阅读全文 »

Git 回滚

Git回滚这种操作肯定经常会遇到,记录一下经常常用回滚:

修改最后一次提交的标注信息

有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了。想要撤消刚才的提交操作,可以使用 –amend 选项重新提交:

1
$ git commit --amend

命令之后会打开一个编辑器,就可以修改里面的信息然后保存,提交。

如果刚才提交时忘了暂存某些修改,可以先补上暂存操作,然后再运行 –amend 提交:

1
2
3
$ git commit -m 'initial commit'
$ git add forgotten_file
$ git commit --amend

继续阅读全文 »

Git windows 客户端字体问题

Git客户端一直报如下警告:

Warning: Your console font probably doesn’t support Unicode. If you experience strange characters in the output, consider switching to a TrueType font such as Lucida Console!

查了一下原因是控制台字体问题:改为宋体就好了。

Web Components (一)

谷歌的I/O大会讲了Web Components的一些内容,然后自己就看了一些想文章。

大致了解其中的一些内容,Web Components不是一个概念,而是五个概念的集合:

  1. Templates 定义一些惰性的代码块,但是使用的时候可激活。
  2. Decorators 增强或修改存在元素的表现。
  3. Custom Elements 允许开发者通过新的标签和新的脚本接口,来定义自己的元素。
  4. Shadow DOM 一个封装过的Dom,里面包含一些子节点(不可见)。
  5. Imports 定义上述元素如何被打包和加载的。

每一个元素都是非常有用的,若把他们联合起来使用,可以使web开发者创造出代码复用性、可维护性更强的组件。

Fis 快速入门

最近一直在学习百度的Fis

何为Fis?

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。

现在公司的前端项目主要用到合并、压缩、合并图片(css sprite)、解决缓存问题。

如何使用Fis?

1.安装 Fis

Fis是基于NodeJs的,所以开始前请自行安装Node。

安装Fis的命令为:

1
npm install -g fis

继续阅读全文 »