webbase.class.php,小程序鸿毛框架（三）综合应用篇：BaseClass

第一章和第二章简单的介绍了5个模块：持久化数据存储管理、国际化语言支持、广播(通知)、路由、数据请求和接口管理，这一章就是结合baseClass讲一下如何应用。(最好下载源码对照着看，有些截图可能不太清楚)

目录

.BaseClass基础类 assets/class/baseClass.js

图2 BaseClass.js

baseClass(图2)中引入了常用的函数库：接口、数据请求、路由、持久化(本地存储)数据的对象，并把这些常用对象放入到“origin_data”中，结合下图(图3-1)pageA的index.js代码，可以看出我们把本该写入page中的数据放入到baseClass中进行一次过滤，baseClass类似于中间件的一样，在baseClass函数中加入了我们预置的一些data数据和函数，最后返回了所有的数据给page。简写为：

let params = BaseClass( {......} );page(params);

pageA/index.js     pages/pageA/index.js

图3-1 pageA index.js

pageA/index.wxml     pages/pageA/index.wxml

图3-2 pageA index.wxml

这个PageA和pageB的演示逻辑在pageA的index.js(图3-1)的开头已经介绍的很清楚了，我就不赘述了，你们可以运行源码(把project.config.json中的小程序appid改成自己的)

pageB/index.js      pages/pageB/index.js

图4-1 pageB index.js

pageB/index.wxml     pages/pageB/index.wxml

图4-2 pageB index.wxml

等你们看完源码之后，我现在再解释baseClass就容易多了，你会发现所有的这些东西结合起来使用是非常简单的，以前需要每个地方都需要引入等等重复的操作，现在轻而易举的完成了，特别是切换语言，从未如此便捷。

在图3-1开头提到了几点功能演示，这里我说一下在哪里取快速找这些功能的实施的位置，当最好照着源码看，图太多翻来翻去麻烦。

一. 涉及广播/通知的功能模块：

1. pageB中的改变显示语言的功能

* pageB/index.wxml ：  第 13～19 行  lanChange函数

* pageB/index.js  ：  第 39～46 行  lanChange函数、changeLanguage(来自baseClass)

* baseClass.js ：第 89 ～ 111行  changeLanguage函数、languageChange函数(在pageA

中重写/实现了)

* pageA/index.js ：  第 78~90 行  languageChange函数

2. pageB播放完电影通知pageA改变播放按钮的文字显示功能

* pageB/index.wxml : 第 8行  palyMovie函数(不好意思代码中的单词play写错了)

* pageB/index.js : 第 30行  palyMovie函数 NC.post()

* pageA/index.js : 第 44行 和 47行  NC.addObserver()、 moviePlay()

二. 涉及数据请求的功能模块：

* pageA/index.wxml ：  第 11行 fetchData

* pageA/index.js ： 第 64行 fetchData 、this.fetcher.post

三. 路由：

* pageA/index.js ：第 59行

* pageB/index.js ：第 22～23行

总结起来这三章讲的内容都是粗浅的，但确实是一个成熟的项目都该有的东西，缺一不可。鸿毛不值一提。这也是我的一点经验，还有很多高深的东西可能我们平常工作并不会涉及很多，能够用最简短朴素的代码完成一项功能就很了不起了。现在市面上很多框架，特别是web和php这类技术栈，然而很多我是不支持用的，因为很多框架的封装我认为是过度的，中下等项目根本发挥了其功能的十分之一，而且对于初学者来说使用框架会形成依赖。我们应该相信自己应该尝试自己去设计整个项目的框架，这样我们才能不断的提升自己，学会封装，对于js这种脚本语言来说相对java和c封装起来要方便很多。有任何问题和建议请写在下方评论区。