前面我们学习了 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. linux shell之cut用法
  2. nginx配置长连接
  3. c++静态成员变量成员函数
  4. ubuntu 内Grub2配置详解(转)
  5. DP刷题记录(持续更新)
  6. java 什么是精度_Java中BigDecimal精度和相等比较的坑
  7. cfile read 最大读取限制_Read文件一个字节实际会发生多大的磁盘IO?
  8. Ubuntu PDF viewer
  9. 2021,属于Golang和Gopher的全新纪元
  10. 如何书写论文中的参考文献并正确标注页码
  11. php实现RSA加密解密
  12. android 连接web加密的wifi,Android 与WEP加密连接
  13. VMMECH007_Thermal Stress in a Bar with Temperature Dependent Conductivity
  14. Mysql数据库基础知识总结,结构分明,内容详细
  15. [转]PCB Layout中的走线策略
  16. JMeter—录制脚本
  17. vue返回上一页面时记忆回到原先滚动的位置
  18. Sping的基础知识总结(01)
  19. 1384Piggy-Bank
  20. NLP实践——VQA/Caption生成模型BLIP-2的应用介绍

热门文章

  1. 1089 狼人杀-简单版 (20 分)
  2. php至mysql乱码,PHP彻底解决mysql中文乱码
  3. Apsara Clouder云计算专项技能认证题目答案
  4. iOS-unrecognized selector crash防护
  5. Verge3D 2.14 for Blender发布
  6. uni-app 实现echarts地图(河北省)demo例子
  7. PPT免费模板,有这些资源足够用了助你成功答辩!
  8. Flutter AppBar 工具栏、导航栏
  9. 好书要“读书有味”--《SOD框架“企业级”应用数据架构实战》序(宇内流云)
  10. 计算机基础课程教学创新,高校计算机基础课程教学创新