130818-one-page-template.md

One Page 模版

Grunt 和 Bower 在寒假时候我看过, 那些天晚上村里还舞龙灯
Bower 因为我倾向 Browserify 阵营, 心理上有点排斥, 毕竟麻烦很多
我的立场是代码应该方便抽象, 第 N 次面对同一个问题时应该直接用现成方案
只是 CSS 和 HTML 缺乏抽象, JS 能做了, 页面未必能做
还有我个人因为是用代码来展示想法, 避免重复就很必要, 公司代码大概不一样
不过由于公司用到 Grunt, 我拖时间再学习了下 Grunt 的细节

前端代码现在的状态, 就是一种不方便抽像的代码, 有点像汇编
调试的时候要每个元素看, CSS 调试要每个节点手动对付选择器和颜色
JS 编码过程手动绑定事件, 进行原生的 DOM 操作等等琐碎的内容
但编程最想要的是问题只被解决一次, 或者是第 N 次能用前面解决的方案
Shadow DOM 和 Web Components 的规划是必需的, 否则就是底层
像 Angular 就通过代码来生成 DOM, 精彩地实现了抽象的功能

前些天看到 Components 这个 Github 主页, 看了半天才看懂
这个 Organization 的维护者有 Google 和 Twitter 的 JS 大神
而且和 Bower 关系密切, 急的 Paul Irish 有个演讲说..
Yeoman 封装了各种 Google 认为的 Best practives, 其中包括 Bower
可我觉得 Bower 还是没解决多大问题嘛, 只是解决了第一步..

One Page

one-page 的仓库在 Github 上, 可以直接 git clone 套用
具体在 README 里我写了, 比较初级的英文, 熟悉 Git 和 NPM 就不难
我个人的习惯吧, 使用 CoffeeScript, Stylus, Jade 来写代码:

➤➤ tree -I node_modules
.
├── Gruntfile.coffee
├── README.md
├── build
│   ├── bundle.js
│   ├── index.html
│   └── layout.css
├── coffee
│   ├── main.coffee
│   └── utils.coffee
├── jade
│   ├── head.jade
│   └── index.jade
├── package.json
└── stylus
    ├── layout.styl
    └── set-body.styl

主要从下面几个方面进行了考虑:

用 grunt-contrib-watch 和 LiveReload 插件完成了自动刷新的步骤
用 Browserify 进行 CoffeeScript 代码的模块化和 SourceMaps 编译
用 Jade 的 include 来加载模块的局部代码, 进行抽象
用 Stylus @import 来完成 CSS 的文件拆分, 虽然漏洞颇多
Grunt 管理 Watch 和 Compile 等等流程, 方便上手

Watch 问题

以前的命令行都是自身实现的 Watch 极致的, 比如 Browserify 也有
另外对 Jade 也有, 但如果是多个文件, Grunt Task 写法就导致多余的重新编译
现在我强制 Stylus Jade 编译到单一的结果, 刷新次数就对了

现在开发前端不用频繁刷新怎么写啊.. 编辑器功能这么贫乏的年代

类库

类库我没具体考虑过, JS 用 Browserify 自己改一下问题不大
如果引入第三方的模块, 现在只能接受手动逐个引入资源文件了
就搞不明白浏览器为什么不提供基于模块的缓存, 其他语言很多呀
以后学 Angular 也许有好一些的方案, 希望真的有...

模版引擎

发现 Jade 可以用来做 pre-compile 的模版引擎, 觉得坑少多了
不过 Jade 还是有些问题, pre-compile 不是现成的, Grunt 插件倒是可以
pre-compile 以后速度块很多, 具体我写的测试不够详细不确定
另外 Jade 的文档最近有翻修过, 过段时间可能又要人翻译中文.. 忙呃逃了

Grunt 自动化

之前我写过两个模块用来给自己的项目做自动编译之类事情的
一个是 calabash, 用 CoffeeScript 语法写 Bash 命令后台跑的
一个是 doodle 做监视文件自动刷新页面的事情
昨天一试发现 Grunt 上直接来也不是很难用, 谁让用 Grunt 的人多呢

Grunt 主要写法和 Node 风格有差异让我不爽, 但用起来其实也问题不大
晚上微博上看还有中文 Grunt 文档, 佩服了: http://www.gruntjs.org/
Grunt 提供的路径展开功能非常实用, 也符合我对这样一个工具的期望
只是, Node 模块使用, exports 书写, 子进程等一定程度被弄乱了不好

One Page 模版

One Page

Watch 问题

类库

模版引擎

Grunt 自动化

相关链接