如何在钉钉上开发⾃⼰的应⽤_⼀⽂读懂NodeJS全栈开发利
器：CabloyJS（万字长⽂）...
0 修订
0.1 修订说明
⽂章发表之后，也难免会有⼀些新的想法。如果新开⼀篇⽂章，会显得散乱；⽽直接修改正⽂，那些已经阅读过本篇⽂章的读者⼜⽆法快速定位修改的内容。因此，新增修订章节，记录修订历史
0.2 修订历史
中学留学0.2.1 2019-06-18 亮点与痛点
1）亮点
CabloyJS最⼤的亮点是：通过pc=mobile+pad的模式，把mobile场景的操控体验和开发模式带⼊pc场景。既显著减少了代码开发量，提升了开发效率，⼜保持了⽤户操控体验的⼀致性
2）痛点
CabloyJS最⼤的痛点是：通过模块化的架构设计，可以快速开发全场景业务
|场景|前端|后端| |--|--|--| | PC：Web | CabloyJS前端 |CabloyJS后端| | PC：Exe | CabloyJS前端 + Electron |CabloyJS后端| | Mobile：IOS | CabloyJS前端 + Cordova |CabloyJS后端| | Mobile：Android | CabloyJS前端 + Cordova |CabloyJS后端| |公共号| CabloyJS前端 + API |CabloyJS后端| |企业| CabloyJS前端 + API |CabloyJS后端| | 钉钉 | CabloyJS前端 + 钉钉API |CabloyJS后端| | Slack | CabloyJS前端 + Slack API |CabloyJS后端| | ⼩程序：、⽀付宝、百度等 |⼩程序框架|CabloyJS后端|
后端：由于完整的前后端分离设计，只需开发⼀套CabloyJS后端代码即可
前端：所有可基于H5的场景，只需开发⼀套CabloyJS前端代码即可
1 基本概念
1.1 CabloyJS是什么
1.1.1 定义
CabloyJS是⼀款顶级NodeJS全栈业务开发框架
1.1.2 特点
CabloyJS是采⽤NodeJS进⾏全栈开发的最佳实践
CabloyJS不重复造轮⼦，⽽是采⽤业界最新的开源技术，进⾏全栈开发的最佳组合
CabloyJS前端采⽤VueJS + Framework7 + WebPack，后端采⽤KoaJS + EggJS，数据库采⽤MySQL
CabloyJS时刻跟踪开源技术的最新成果，并持续优化，使整个框架时刻保持最佳状态
1.1.3 理念
既可快速开发，⼜可灵活定制
为了实现此理念，CabloyJS内置开发了⼤量核⼼模块，使您可以在最短的时间内架构⼀个完整的Web项⽬。⽐如，当您新建⼀个Web项⽬时，就已经具备完整的⽤户登录与认证系统，也具有验证码功能，同时也具备⽤户管理、⾓⾊管理、权限管理等功能
此外，这些内置模块提供了灵活的定制特性，您也可以开发全新的模块来替换内置模块，从⽽实现系统的定制化
1.2 CabloyJS核⼼解决什么问题
1. 场景碎⽚化
2. 业务模块化
1.2.1 场景碎⽚化
1) 先说说Mobile场景
我们知道，随着智能机的⽇益普及，咱们开发⼈员所⾯对的需求场景与开发场景⽇益碎⽚化，如浏览器、IOS、Android，还有⼤量第三⽅平台：、企业、钉钉、Facebook、Slack等等
随着智能设备性能越来越好，⽹速越来越快，针对如此众多的开发场景，采⽤H5开发必将是⼤势所趋。只需开发⼀套代码，就可以在以上所有智能设备中运⾏，不仅可以显著减少开发量，同时也可以显著提升开发效率，对开发团队和终端⽤户均是莫⼤的福利
2) 再来谈谈PC场景
以上咱们说H5开发，只需开发⼀套代码，就可以在所有智能设备中运⾏。但是还有⼀个开发场景没有得到统⼀：那就是PC场景
由于屏幕显⽰尺⼨的不同，PC场景和Mobile场景有着不同的操作风格。有些前端UI框架，采⽤“⾃适应”策略，为PC场景开发的页⾯，在Mobile场景下虽然也能查看和使⽤，但使⽤体验往往差强⼈意
这也就是为什么有些前端框架总是成对出现的原因：如Element-UI和Mint-UI，如AntDesign和AntDesign-Mobile
这也就意味着，当我们同时⾯对PC场景和Mobile场景时，仍然需要开发两套代码。在⾯对许多开发需求时，这些重复的⼯作量往往是难以接受的： 1. ⽐如，我们在企业或钉钉上开发⼀些H5业务应⽤，同时也希望这些应⽤也可以在PC端浏览器中运⾏ 2. ⽐如，我们为公共号开发了⼀些H5业务应⽤，同时也希望这些应⽤也可以在PC端浏览器中运⾏。同时，还可以在同⼀架构下开发后台管理类功能，通过区别不同的登录⽤户、不同的使⽤场景，从⽽显⽰不同的前端页⾯
3) PC = MOBILE + PAD
CabloyJS前端采⽤Framework7框架，⽬前已同步升级到最新版Framework7 V4。CabloyJS在Framework7的基础上进⾏了巧妙的扩展，将PC端的页⾯切分为多个区域，实现了多个Mobile和PAD
同时呈现在⼀个PC端的效果。换句话说，你买了⼀台Mac，就相对于买了多台IPhone和IPad，⽤多个虚拟的移动设备同时⼯作，即显著提升了⼯作效率，也提供了⾮常有趣的使⽤体验
4) 实际效果
有图有真相
也可PC端体验
也可⼿机扫描体验
5) 如何实现的
CabloyJS是模块化的全栈框架，为了实现PC = MOBILE + PAD的风格，内置了两个模块：egg-born-module-a-layoutmobile和egg-born-module-a-layoutpc。当前端框架加载完毕，会⾃动判断当前页⾯的宽度（称为breakpoint），如果⼩于800，使⽤Mobile布局，如果⼤于800，使⽤PC布局，⽽且breakpoint数值可以⾃定义
此外，这两个布局模块本⾝也有许多参数可以⾃定义，甚⾄，您也可以开发⾃⼰的布局模块，替换掉内置的实现⽅式
下⾯分别贴出两个布局模块的默认参数，相信您⼀看便知他们的⽤处
egg-born-module-a-layoutmobile
export default {倚怎么读
layout: {
login: '/a/login/login',
loginOnStart: true,
关于植树节的诗歌toolbar: {
tabbar: true, labels: true, bottom: true,
},
tabs: [
{ name: 'Home', tabLinkActive: true, iconMaterial: 'home', url: '/a/base/menu/list' },
{ name: 'Atom', tabLinkActive: false, iconMaterial: 'group_work', url: '/a/base/atom/list' },
{ name: 'Mine', tabLinkActive: false, iconMaterial: 'person', url: '/a/user/user/mine' },
]
,
},
};
egg-born-module-a-layoutpc
export default {
layout: {
login: '/a/login/login',
loginOnStart: true,
header: {
buttons: [
{ name: 'Home', iconMaterial: 'dashboard', url: '/a/base/menu/list', target: '_dashboard' },
{ name: 'Atom', iconMaterial: 'group_work', url: '/a/base/atom/list' },
],
mine:
{ name: 'Mine', iconMaterial: 'person', url: '/a/user/user/mine' },
},
size: {
small: 320,
top: 60,
spacing: 10,
},
},
};
1.2.2 业务模块化
湖南旅游景点大全NodeJS的蓬勃发展，为前后端开发带来了更顺畅的体验，显著提升了开发效率。但仍有⽹友质疑NodeJS能否胜任⼤型Web应⽤的开发。⼤型Web应⽤的特点是随着业务的增长，需要开发⼤量的页⾯组件。⾯对这种场景，⼀般有两种解决⽅案：
1. 采⽤单页⾯的构建⽅式，缺点是产⽣的部署包很⼤
2. 采⽤页⾯异步加载⽅式，缺点是页⾯过于零散，需要频繁从后端获取JS资源
CabloyJS实现了第三种解决⽅案：
1. 页⾯组件按业务需求归类，进⾏模块化，并且实现了模块的异步加载机制，从⽽弥合了前两种解决⽅案的缺点，完美满⾜⼤型Web应
⽤业务持续增长的需求
在CabloyJS中，⼀切业务开发皆以业务模块为单位。⽐如，我们要开发⼀个CMS建站⼯具，就新建⼀
个业务模块，如已经实现的模块egg-born-module-a-cms。该CMS模块包含⼗多个Vue页⾯组件，在正式发布时，就会构建成⼀个JS包。在运⾏时，只需异步加载这⼀个JS 包，就可以访问CMS模块中任何⼀个Vue页⾯组件了。
因此，在⼀个⼤型的Web系统中，哪怕有数⼗甚⾄上百个业务模块，按CabloyJS的模块化策略进⾏代码组织和开发，既不会出现单⼀巨⼤的部署包，也不会出现⼤量碎⽚化的JS构建⽂件。
CabloyJS的模块化系统还有如下显著的特点：
1) 零配置、零代码
也就是说，前⾯说到的模块化异步打包策略是已经精⼼调校好的系统核⼼特性，我们只需像平时⼀样开发Vue页⾯组件，在构建时系统会⾃动进⾏模块级别的打包，同时在运⾏时进⾏异步加载
我们仍然以CMS模块为例，通过缩减的代码直观的看⼀下代码风格，如果想了解进⼀步的细节，可以直接查看对应的源码（下同，不再赘述）
如何查看源码：进⼊项⽬的node_modules⽬录，查看 egg-born-为前缀的模块源码即可
egg-born-module-a-cms/src/module/a-cms/front/src/routes.js
function load(name) {
return require(`./pages/${name}.vue`).default;
}
export default [
{ path: 'config/list', component: load('config/list') },
{ path: 'config/site', component: load('config/site') },
{ path: 'config/siteBase', component: load('config/siteBase') },
{ path: 'config/language', component: load('config/language') },
{ path: 'config/languagePreview', component: load('config/languagePreview') },
{ path: 'category/list', component: load('category/list') },
{ path: 'category/edit', component: load('category/edit') },
{ path: 'category/select', component: load('category/select') },
{ path: 'article/contentEdit', component: load('article/contentEdit') },
{ path: 'article/category', component: load('article/category') },
{ path: 'article/list', component: load('article/list') },
{ path: 'article/post', component: load('article/post') },
非主流情侣个性签名{ path: 'tag/select', component: load('tag/select') },
{ path: 'block/list', component: load('block/list') },
{ path: 'block/item', component: load('block/item') },
];
可以看到，在前端页⾯路由的定义中，仍然是采⽤平时的同步加载写法
关于模块的异步加载机制是由核⼼模块egg-born-front来完成的，参见源码egg-born-front/src/base/module.js
2) 模块⾃洽、即插即⽤
每个业务模块都是⾃洽的整体，包含与本模块业务相关的前端代码和后端代码，⽽且采⽤前后端分离模式
模块⾃洽既有利于⾃⾝的⾼度内聚，也有利于整个系统的充分解耦。业务模块只需要考虑⾃⾝的逻辑实现，容易实现业务的充分沉淀与分享，达到即插即⽤的效果简述组织结构层级化的优点
举⼀个例⼦：如果我们要开发⽂件上传功能，当我们在⽹上到合适的上传组件之后，在⾃⼰的项⽬中使⽤时，仍然需要开发⼤量对接代码。也就是说，在⽹上到的上传组件没有实现充分的沉淀，不是⾃洽的，也就不能实现便利的分享，达到即插即⽤的效果
⽽CabloyJS内置的的⽂件上传模块egg-born-module-a-file就实现了功能的充分沉淀。为什么呢？因为业务模块本⾝就包含前端代码和后端代码，能够施展的空间很⼤，可以充分细化上传逻辑
因此，在CabloyJS中要调⽤⽂件上传功能，就会变得极其便捷。以CMS模块为例，上传图⽚并取得图⽚URL，只需短短20⾏代码
egg-born-module-a-cms/src/module/a-cms/front/src/pages/article/contentEdit.vue
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论