我的前端程序搭建精要

前端程序搭建精要（六点）

 

一. 全局消息订阅/广播机制（被观察者），解耦的关键

二. 模块化设计

    1. 同级模块之间各行其道、互不干预、此不知彼

    2. 上级模块调用下级模块

    3. 下级模块以自身为被观察者向上级模块发送广播消息，

    4. 全局广播随处可发，但只有一级模块可以监听

    5. 不可以跨层级监听，但可以跨层级调用

 

三. 逻辑 / 视图相分离（为逻辑做准备）

    1. 不是严格意义的视图模块只负责UI界面刷新,UI层只处理跟本模块有关的内容。

    2. 功能组合、复杂数据分析等功能由上级模块或专用逻辑功能模块完成

 

四. 程序逻辑链条清晰、可见、可控

    1. 用户I/O操作，时间片函数-->修改本地数据-->向服务器端发消息

    2. 服务器接口异步返回等-->修改本地数据——>刷新本地UI

 

五. 数据/视图分离，数据推拉机制完善

    1. 拉：模块需要数据时可以从全局数据入口轻易获得所需的结构化数据

    2. 推：某重要程序行为发生或本地数据/状态变更时，进行全局消息广播

 

六. 开发软性约定

    1. 全局消息分为Action / Notice两种

            Action：本模块无法完成所需功能，需调用其他模块完成后续流程

            Notice：本模块的程序行为造成本地数据/程序状态发生变化，通知相关模块进行响应

    2. 视图/逻辑分离闭包原则、本体化模块划分原则等等...

 

 

 

附：前端程序初始化流程

    A. 初始设定和初始界面

        显示初始的Loading进度条，

        完成一些需要在软件运行之前的准备工作如：

                   软件版本检测

                   加载设置子功能模块

                   获取服务CDN地址等

                    这些信息多由本地缓存数据提供

    B. 加载各种配置表信息

    C. 从服务器获取必须的信息，如：用户基本信息、账户信息等

    D. 初始化程序框架和各个模块

    E. 初始化UI系统，如:

                    设置全局字体，音效等，

                   2D程序要设置笛卡尔坐标系和舞台整体缩放模式

                   3D程序则要初始化舞台，世界，摄像机，光源，以及纹理法线顶点的管理器...

    F. 开始渲染UI界面，进行首页绘制

    G. 程序开始运转起来，各子模块开各行其道

            一个前端程序，无论是BS的还是CS的，大体上都是这几个步骤，可能根据业务的不同，先后顺序或具体内容上会有差别，也可能要做的事情很多很杂。但千头万绪总有出处，或者可以根据时间上或空间上的共性划，归为几大步骤或几类。

            如果一个程序的初始化分为几步或几类事情，这几类应该是先完成第一步进行下一步，完成后再下一步......这样的程序是易于维护和理解的，如果我第一类事情做一点点，又去做一点第四类事情里的内容，然后再继续做第一类的事情.....那么我认为这个程序的初始化就是比较混乱并难于维护的。