关于小剧客栈

小剧客栈是剧中人在成长路上的一个缩影,也希望借此结交更多前辈好友。

查看源码回到首页

为何自己做设计

设计一直是小剧的爱好(也曾是职业),所以小剧在博客的设计上投入了蛮多的时间。从2014年开始,小剧客栈也逐渐开始尝试响应式的设计。

coding都写什么

前端工程师是剧中人现在的职业,但同时我也喜欢倒腾nodeJS。博客从后端到前端,都是小剧把玩的对象。可能有些许不足,但对我来说刚刚好。

小剧客栈代码结构

这里列举小剧客栈主体代码所采用的组件,不包括细枝末节。上图红底部分表示该段代码由小剧开发。

一、前端页面

小剧是这样划分前端页面的,一是面向小伙伴的博客,分为屌丝版尝鲜版;另一个是只有小剧自己在使用的后台管理页面;还有就是一些零散的专题页面,其中包括实验室详情页。

1.1、尝鲜版

基于单页+响应式的设计,是小剧比较花心思和精力开发的部分。在高级浏览器下默认使用尝鲜版使用。

1.2、屌丝版

见名知意,这是提供给低级浏览器使用的一个版本,仅展示内容,不提供较强的交互。在不支持JS or html5 or css3的浏览器下使用此版本。而且功能有阉割,不支持评论。

1.3、后台管理

小剧客栈的后台管理页面,功能块相对较多,更新变动也比较频繁,这里就介绍了。

1.4、零散页面

较为繁杂,不多赘述。

1.5、前端用到的javascript类库(框架)

  • jQuery:The Write Less, Do More, JavaScript Library官网
  • SizzlejQuery核心选择器部分,DOM 选择器的一大增强利器官网
  • bootstrap:简洁、直观、强悍、移动设备优先的前端开发框架官网
  • seaJS:一款优秀的模块加载器官网
  • showdown:基于Javascript的markdown渲染库官网
  • Mditor:一款轻量级的markdown编辑器官网
  • juicer:一个高效、轻量的前端 (Javascript) 模板引擎官网
  • lofox:一个用于单页面路由管理的工具官网
  • dialog:响应式用户交互组件库官网
  • stick:瀑布流组件。官网
  • pagination:前端分页组件
  • selection:操作文本域字符选择与获取选择状态、插入字符等操作的小类库官网
  • mirror:镜像textarea用于实现光标坐标选择、自动增高等功能的小组件
  • md5.js:用于确保信息传输完整一致,是计算机广泛使用的哈希算法之一。官网

1.6、前端用到的 css(less)样式部分

  • core:常用的Minxin定义
  • grid:定制栅格化布局结构
  • fontface:定制博客所需的logo、icon
  • hljs:定制博客的代码高亮样式
  • ……

二、后端语言nodeJS

  • core:博客核心代码,暂未命名
    • index:APP类,初始化项目的主文件
    • cache:缓存控制器,用于使用、创建、清理缓存
    • views:视图类,模板引擎基于juicer
    • component:视图片段类,用于实现视图内部公用模块,可定制参数
    • connect:连接类,抽象出单次访问所需的常见操作,如返回特定类型内容,获取、添加cookie等
    • session:session类,基于文件的数据存储,可用于服务端用户信息标记
    • DB:基于mongoDb模块封装mongo的常用操作
    • staticFile:静态资源读取器,用于响应静态资源的请求
    • utils:常见工具类
      • parse:各类变量的格式化方法,包括cookie、time、url等
      • pagination:后端分页组件
  • juicer:juicer模板引擎的nodeJS版本官网
  • showdonw:基于Javascript的markdown渲染库官网
  • cron:计划任务

三、代码构建FIS3

  • fis3-hook-relative:相对路径输出插件
  • fis3-hook-cmd:CMD模块打包插件
  • fis3-hook-amd:AMD 模块打包插件
  • fis-parser-less:Less 编译支持
  • fis3-postpackager-loader:打包支持基础类库

双视图切换流程

遵循渐进增强的思路,给IE鬼使用传统页面

高级浏览器,智能地切换到尝鲜版,体验更高逼格的效果

分别为:屌丝版、尝鲜版为什么用双视图