前面我们学习了 FIS3 前端工程构建工具 FIS3,它为前端工程构建提供了有力的支持。在 App 开发中模块化非常流行,今天我们看看前端是如何做到模块化开发的。我们通过 Yog2 (发音 yang g)来说明。

YOG2 是一个专注于 Node.js UI 中间层的应用框架。它基于 express 和 fis 开发,在享受 express 的灵活扩展能力和 fis 强大的前端工程化能力的同时,引入了自动路由、app 拆分以及后端服务管理模块来保证UI中间层的快速开发与稳定可靠。

上面引用这段话的关键字是:

app拆分:是指把一个大的项目拆成不同的模块,每个模块都可独立运行,这与端的模块化思想一致;

自动路由:是指无需注册路由即可实现把事件转发到对应的action上,不过创建文件时需要符合「约定的规则」;

工程化能力:主要用到了 fis3,它可以打包、编译、发布等,这些和端有比较大的区别;

后端服务管理能力:这里的「后端」不是我们常提到的 server,它是指 Node 层,在前端开发中 Node 比较重要,可以非常方便地开启一个 WebServer。

app拆分

yog2 提供了模块化的能力,每个模块可独立编译、独立上线、独立的路由控制、跨模块调用能力。使用 yog2 时通过 npm 安装即可。

project,它是基础的运行框架(相当于端模块化的壳工程),提供一些基础的配置和中间件管理,通过 yog2 init project 创建,目录结构:

// 基础运行框架,建立初始化环境├── LICENSE├── README.md├── app // server代码目录│   └── README.md├── app.js // project 启动入口├── conf // 配置目录│   ├── plugins // 插件配置│   │   ├── dispatcher.js│   │   ├── http.js│   │   ├── log.js│   │   ├── ral.js│   │   ├── recv-reload.default.js│   │   ├── reqlimit.js│   │   └── views.js│   └── ral // 后端服务配置│       └── demo.js├── package.json├── plugins // 插件目录│   └── README.md├── static // 静态资源目录└── views // 后端模板目录

app, 是应用的业务代码,每个 app 都是一个独立的子项目,包含了这个子项目中所有的前后端代码,这样每个 app 都可以独立开发、编译和部署。通过 yog2 release 功能将 app 发布至 project 中来运行 app。通过 yog2 init app 来创建 app,名字为home,目录结构如下。

// 业务代码,独立子项目├── client // 前端代码│   ├── page // 前端页面│   │   ├── index.tpl│   │   └── layout.tpl│   ├── static // 前端非模块化静态资源│   │   └── js│   │       ├── README.md│   │       ├── bigpipe.js│   │       ├── index.js│   │       ├── lazyload.js│   │       ├── mod.js│   │       └── page.js│   └── widget│       └── message│           └── message.tpl├── fis-conf.js // fis 编译配置├── package.json└── server // 后端代码    ├── action // 路由动作,处理页面请求    │   ├── book.js    │   └── index.js    ├── lib // 存放一些通用库    │   └── util.js    ├── model // 存放一些数据层代码,如后端API请求等    │   └── index.js    └── router.js AppRouter路由,用于处理自动路由无法满足的需求

在 project 下执行 npm install,安装需要的库,然后通过 yog2 run 启动 project。在 app 项目 home 下执行;

// 代码部署到 project 中yog2 release --dest debug// 只有监听到 app 中代码发生变化,自动部署到 project 中yog2 release --dest debug --watch// 只有监听到 app 中代码发生变化,自动部署到 project 中,自动刷新浏览器yog2 release --dest debug --watch --live

即可把代码推到 project 下,此时在浏览器中输入:

http://127.0.0.1:8085/

便可看到服务正常启动。

路由

Yog2 框架是在 Express 的路由基础上,增加了自动路由和多级路由系统。路由分两类:根路由,所有请求的统一入口,可以做任何转发;app 路由,只接受分发到各个 app 的请求。

自动路由,无需注册,按照一定规则书写即可自动创建路由,路由这块端的同学可以参考下,有比较好的思想。

http://www.example.com/home/index => app/home/action/index.jshttp://www.example.com/home/doc/detail => app/home/action/doc/detail.js

模板引擎

yog2 默认使用了 swig 作为模板引擎,模板的后缀为 tpl,比如下面的 index.tpl,layout.tpl。

├── client│   ├── page // 页面类型的后端模板│   │   ├── index.tpl│   │   └── layout.tpl│   └── widget // 组件类型的后端模板│       └── message│           └── message.tpl├── fis-conf.js

有了模板后就可以通过数据来渲染页面了,比如下面的代码:

var userModel = require('../models/userModel.js');module.exports.get = function (req, res, next) {    var id = parseInt(req.body.id, 10);    if (isNaN(id)) {        throw new Error('invalid id');    }    userModel.get(id)    .then(function (user) {        res.render('home/page/index.tpl', {            user: user        });    })    .catch(next);}

插件

yog2 插件是整个框架的骨架,它本身内置了一些插件,用户也可以创建自己的插件。用户插件需要在 project 中的 projec/plugins 下:

├─base              # Yog根目录  └plugins          # 用户插件目录      └userPlugins  # 插件目录          └index.js # 插件入口

插件依赖,A 插件加载完后才会加载 B 插件:

// plugins/B/index.jsmodule.exports.B = ['A', function(app, conf){}];

总结

Yog2 可以说是 FIS 的一个扩展,通过它提供的脚手架可以更好地进行模块裁分。Yog2 中的模块化思想值得我们去借鉴,通过提供命令行工具创建一个新的模块,以及路由的设计,插件支持,通过数据来渲染 UI等。

大家加油!!!

推荐阅读:

前端工程构建工具 FIS3

图解前端

Yog2 中的模块化思想相关推荐

  1. 自动组卷系统C语言,模块化思想在试题库组卷系统中的应用--以C语言程序设计课程为例 (1).pdf...

    2014年6月 伊犁师范学院学报 (自然科学版) Jun.2014 第 8卷 第 2期 JournalofYiliNormalUniversity(NaturalScienceEdition) V0| ...

  2. 浅谈单片机程序设计中的“分层思想”!

    浅谈单片机程序设计中的"分层思想",并不是什么神秘的东西,事实上很多做项目的工程师本身自己也会在用.看了不少帖子都发现没有提及这个东西,然而分层结构确是很有用的东西,参透后会有一种 ...

  3. 单片机小白学步系列(十六) 单片机/计算机系统概述:模块化思想

    截至目前,单片机入门篇的介绍就告一段落了.从本文开始将进入思想篇的学习. 思想篇对后面的具体知识学习进行整体的框架介绍,解释一些基础名词,以及对学习思想方法进行总结.思想篇的内容,对于后面的学习有很大 ...

  4. 母亲节html页面,[母亲节散分]模块化思想的重要性_html/css_WEB-ITnose

    转载请注明出处, css探索之旅-飘零雾雨的庄园 这里所讲的只是我个人针对前端开发的模块化思想设计的一些浅薄看法. 什么是模块化思想?模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块 ...

  5. node mysql 模块化_Node.js中的模块化

    每天一篇文章来记录记录自己的成长吧.大二,该静心了.加油~ 好了,废话不多说,今天说说nodejs中的模块化.(注:此文为自己对书nodejs实战的总结) nodejs一个重要的特性就是模块化,模块就 ...

  6. 网络中的模块化和社区结构(Modularity and community structure in networks)

    Machine learning and the physical sciences 摘要 Ⅰ.引言 Ⅱ.最佳模块化方法(The Method of Optimal Modularity) Ⅲ.将网络 ...

  7. 软件工程与计算II-13-详细设计中的模块化与信息隐藏

    13-详细设计中的模块化与信息隐藏 1. 内聚和耦合 概念重要 内聚:内聚表达的是一个模块内部的联系的紧密型:包括信息内聚.功能内聚.通信内聚.过程内聚.时间内聚.逻辑内聚和偶然内聚. public ...

  8. Blender 和Unreal Engine中的模块化3D建筑技能学习视频教程

    Blender 和Unreal Engine中的模块化3D建筑技能学习视频教程 流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕( ...

  9. thymeleaf加载不了js引用_web前端教程之js中的模块化一

    web前端教程之js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没 ...

最新文章

  1. MySQL下载与安装教程以及环境变量配置
  2. python3 修改字符串的四种方法 错误 'str' object does not support item assignment 解决方法
  3. import tensorflow 报错 ImportError: DLL load failed: 找不到指定的模块。
  4. 谷歌最新双塔DNN召回模型——应用于YouTube大规模视频推荐场景
  5. LeetCode 112. 路径总和 、113. 路径总和 II 思考分析
  6. 数据分箱6——分箱结果进行WOE转化
  7. 二叉搜索树c++_LeetCode98验证二叉搜索树
  8. php对象的表示方法,PHP对象相关知识总结
  9. 为什么java IO类不用基于继承的设计方案?
  10. 2. 详解 QEMU 架构
  11. Unity3D播放ogv格式的视频
  12. vs2015开发在网页中调用的ocx控件详解(二)
  13. java对象list_java 8 从一个list对象转list对象的属性
  14. C#等语言、反射机制实现简单 智能语音人机交互(2)-- 皓月
  15. JS: prompt() 输入框 confim()确认框 alert() 提示框
  16. 李成名:科学就是较真 数字城市/智慧城市就是跑马圈地
  17. 使用jieba+wordcloud生成微信好友个性签名词云图
  18. 多层高速PCB设计学习笔记(二)基本设计原则及EMC分析
  19. 编译原理公式计算器C语言,编译原理课程设计-简单计算器实现.doc
  20. 还在找骆驼(羊驼)专用PBMC分离试剂盒吗?

热门文章

  1. Hadoop 3.0 Erasure Coding 纠删码功能预分析
  2. 阿里物联网平台(一)Windows系统+VS2017 模拟设备端接入
  3. 制作ico图标的一个小软件
  4. 宝塔搭建javaweb_宝塔Linux面板助手安装并配置JavaWeb环境并且部署项目
  5. BMD UltraStudio 4K Extreme 3采集卡
  6. 炼丹侠必知的11大神经网络结构​汇总!
  7. 从0开始,手把手教你使用React开发答题App
  8. 提升计算机软件测试效果,计算机软件测试技术总结.doc
  9. 【在人间】关于网吧的记忆
  10. C++学习记录 五、C++提高编程