前端架构涉及到哪些范围?

总体指导思想是前后端分离,后端同事提供线上API数据查询接口或websocket接口,前端同事负责处理获取到的数据、编写展示的页面、实现用户交互;前后端都要考虑web开发的安全性问题,表单提交到数据库前对用户的输入进行转义、登录避免明文传输密码等。前后端都要关注SQL注入攻击、跨站脚本攻击、跨站请求伪造、开放重定向这些安全性问题。

最近在看《大型JavaScript应用最佳指南》,作者讲到,大型web应用实际相当于一系列组件之间的互相通信,包括组件之间的组合和通信。在设计组件的时候不仅要从架构可扩展性的角度考虑,还要从功能完备性的角度考虑。有两种构建组件的方法。其一,可以扩展已有的库和框架,通过不断扩展逐渐实现特定功能,其二,通过给组件传入配置参数,告诉组件如何工作。我们要设计灵活的组件,就要把业务行为传入组件,而不是在组件中直接编写,这样不同的组件就可以利用相同的无状态业务逻辑函数。

开发的技术框架,如 vuejs, reactjs, angularjs; 还有一些脚手架,如 vue-cli; 还有一些全家桶,如vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)。

静态资源的管理工具,包括对css/js/pictures等文件进行合并、压缩、优化,以及自动替换。grunt/gulp 是任务管理器,引入 watch 模块可以实现页面的热更新;webpack通过loaders来处理静态文件。webpack-dev-server 可以实现热更新。

API数据管理,后端提供完整的API文档和使用postman提供测试数据接口,最关键的是确定成功或失败时分别返回的数据结构。后端还没开发好或者没有测试数据时,前端可以模拟API,推荐一个工具:mockjax;一些全家桶也有配备这类工具。

前端要构造相应的通知系统,如服务器出错、连接超时、参数无效、被退出等,前端要能优雅地报错,并且尽量减少单点错误对整个系统的影响,引导用户尝试恢复正常,如刷新,重新登录等,前端也需要记录日志,这样工程师可以快速debug。

关于跨域问题,这个暂时todo,等我有足够多的实践经验再来补充,目前是使用chrome的CORS插件,因为上线后就不存在跨域的问题;如果前端需要调用第三方接口存在跨域问题,我目前的做法是找后台调用我要的第三方接口,然后后台再提供一个新的接口给我,这样就不存在跨域问题,但是前后端分离的话,调用第三方接口出现跨域问题不是也应该由前端来解决吗?前后端分离的话自己可以起一个node中间层服务器,然后本地server就可以支持代理其他域下的api的功能,即proxy,在ajax请求时突破前端同源策略的限制。

前端团队中有多个人同时写代码,所有文档规范是必须的,不然可能容易存在命名冲突,css样式覆盖,函数重写,z-index互相攀比的问题。在js方面,要推荐按闭包的方式来写,或者根据技术选型按组件模式来开发;因为我们项目中有打包工具,所以开发人员可以用ES5也可以用ES6,ES6更像是一门编程语言,适合我们养成面向对象编程的习惯。css方面,同样因为我们项目中有打包工具,所以用纯CSS/LESS/SASS写都可以接受,看开发者决定,还要进行css代码库管理,css样式命名管理,防止无意义的命名,这个建议读一下bootstrap.css。

前端也需要构建自动化测试,包括独立单元测试和端到端(E2E)测试自动化,当然还有人工测试。使用的工具有Jasmine和Selemium。追求开发完成后测试发现 0 个bug是我们一直追求的目标,毕竟谁也不希望每天被测试的邮件轰炸,特别是对于我这种不喜欢跟测试讲话的人,整个测试过程完成到上线都没有测试找过我,系统也没有提示说我有bug,这是最爽的一件事。

    原文作者:Jesutobiloba
    原文地址: https://segmentfault.com/a/1190000010591661
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞