您的位置: 首页  >  IT文章  >  摩课小弟我的云大学 前端架构

摩课小弟我的云大学 前端架构

分类: IT文章 • 2024-11-05 14:27:01
摩课我的云大学 前端架构

摩课我的云大学 －－前端架构

如图： 虽说是前端架构师，但实际上只是一个疲于应付业务的高级前端而已，ps：因为当前“摩课”中前端80%左右都是出于楼主之挫手，下图中技术方面有待优化的空间还是很大的；

摩课小弟我的云大学 前端架构

1. 前后端分离规范

A：数据结构规范、属性命名空间规范
callback({
    code : 20000,
    message : '操作成功',
    data : {
        course_id : 1,
        name : 'test',
        teacher_list_uid : [1,2,3]
    }
})
B：URL、参数传递
schema://host[:port#]
/path/.../[?query-string][#anchor]

mycloudedu/course/info?course_id=1&token=111
//API业务集合名/处理当前业务名/获取具体信息
//?
//前端查询业务参数/权限校验
C：协议规范

  • 小数据量（1024B）: GET (便于调试，也便于网络蜘蛛)

  • 大数据提交：POST

  • 其他未采用： PUT、DELETE、HEAD、TRACE、CONNECT

D：其他约定
  • API先行，业务自测通过，确保业务流程的正确性，数据的正确性可以待最后集成测试

推荐服务端开发工程师使用 PostMan 测试，

  • API文档尽量补全，后期改动时通知前端同事对接

属性名，类型，字符长度［rap、redmine］

  • 业务紧急时 前后端可以先约定好模拟数据

模拟API数据（Mock.js）

  • 尽量把业务逻辑放在API处理

nodejs 负责，web网站 与 数据渲染
WEB端（浏览器）减少计算（CPU）

3.业务开发

A. PRD/redmine

需求原型，业务文档，问题跟进，问题复盘，日后维护，改动等

B. BDD

两种开发模式的选择

TDD(Test Driven Development)：周期长，稳定，高质量高扩展，明显无bug

BDD(Behaviour Driven Development)：敏捷，变化，适应业务扩展性低，无明显bug （当前模式，小团队）

C. K&R

编程风格，最早源自C，Dennis M. Ritchie设计了C语言，Kernighan写了C语言书
前端HTML、CSS编码规范：英文，译文
JS 编码规范，英文，网易前端JS编码规范
jquery编码规范，英文

D. CRP

持续交付设计：

  • 持续的： 就是不断的接受 测试（或运营，市场，测试为主）的BUG、优化、建议等反馈。
  • 持续集成： 开发者要对每一个反馈的功能，或者新的功能进行单元测试，打包，提交，推送，建议 commit 单一，多次提交，而不是整体功能的测试、打包、提交；
  • 持续部署发布： 功能代码基于Git代码仓库部署，静态资源文件基于CDN自动化部署 或者 自主开发静态资源服务器，当前是集成在 Nodejs 提供的静态资源服务器。

  • 持续交付能力： 以上三步能随时进行，尤其是服务端（包括Nodejs）的热重启（部署时不丢失HTTP请求），以及自动化部署（可视化一键部署）

    当前 Nodejs 已经支持 Shell命令一键部署（web可视化一键部署即将支持），热重启即将支持

国外对 CRP 的探索：英文；

国内 阿里云CRP系统；

阿里云对 Nodejs 性能监控，性能优化的实践： alinode

E. Source Map

静态资源文件的发布，存储系统急需开发，当前静态资源都是 Nodejs 托管，而且基于主站的域名，比较影响资源加载的性能

解决方案：

a：自主开发静态服务器（nodejs）托管前端静态资源文件 ＋ 解析资源域名（img. css. js. cdn.） ＋ 前端自动发布静态资源系统（后期可以可视化，对 运营、市场提供维护静态资源支持，尤其是快速上线活动页面）
b：阿里云CDN ＋ 前端自动发布静态资源系统

2.技术优化

F. HTTP

当前web时代 主要以 HTTP/1 为主；

链接过程： DNS Lookup－connection－Send－Wait－Receive

a： 减少http请求：前端 重要资源内联，资源压缩，合并，SPA……
b： Last-Modified
c： 强缓存机制（不推荐，我们已经关闭） Cache-Control: Max-age=xxx
d： 减少 DNS（Domain Name System） 查询，预处理（ Chrome DNS Prefetching ）
e： 减少重定向

<meta http-equiv="x-dns-prefetch-control" content="on">

tips：三次握手

1：建立连接时，客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认； 
2：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态； 
3：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态.

IP 192.168.1.116.3337 > 192.168.1.123.7788: S 3626544836:3626544836
IP 192.168.1.123.7788 > 192.168.1.116.3337: S 1739326486:1739326486 ack 3626544837
IP 192.168.1.116.3337 > 192.168.1.123.7788: ack 1739326487,ack 1

雅虎性能优化建议，英文

CommonJS/CommonCSS

模块化，说烂了的词；这个概念从项目构建初始化，开发时引用各类依赖，单元测试，打包部署，发布上线都会体现

当前简学科技的前端主要实践是：

Bootstrap，SeaJS，NPM

NodeJS

a. 成熟模块的探索，避免重复造轮子

b. 子域名绑定

c. 去 session 对 MemCache 扩展（因为Java端用的是这个）便于容灾备份

d. 运行稳定性监控（js是边运行边解析的语言），邮件报警

e. shell 一键自动化部署（后面支持，热重启，web可视化部署）

f. 待开发单独的静态资源服务器，便于运营市场快速上线活动页（淘宝TMS＋TFS）

g. ……

SPA

单页应用完善，当前 Seajs＋Jquery（ajax，load）监听 url的hash
后期可以适当的 引入 react 等比较热门的技术，在 成本与技术俩者之间找平衡

QUnit

QUnit 是 jquery 官方开发的用于web单元测试的工具，类似的有：jasmine，should.js 等

单元测试也比较占用开发时间成本……

SPM

这个主要是 借鉴阿里的 导购效果跟踪工具：SPM，简单点就是 页面的来源，用户停留，交互点击，跳转等数据的监控，

很多站长平台工具也提供了类似功能，尤其是 被阿里收购的cnzz 支持了按钮的埋点，各类数据统计

tips：

spm=2014.123456789.1.2 

SPM编码：用来跟踪页面模块位置的编码，标准spm编码由4段组成，采用a.b.c.d的格式（建议全部使用数字），其中，

a代表站点类型，对于xTao合作伙伴（外站），a为固定值，a=2014
b代表外站ID（即外站所使用的TOP appkey），比如您的站点使用的TOP appkey=123456789，则b=123456789
c代表b站点上的频道ID，比如是外站某个团购频道，某个逛街频道，某个试用频道 等
d代表c频道上的页面ID，比如是某个团购详情页，某个宝贝详情页，某个试用详情页 等

完

相关推荐