Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • 前端框架面试题汇总

  • 基本面试题

  • 进阶面试题

    • NodeJS
    • 性能和效率
    • 移动端布局与适配
    • Web安全
    • 混合开发
    • 架构
      • 一、如果让你来制作—个访问量很高的大型网站,你会如何来管理所有css、js文件、图片?
      • 二、如果没有框架、怎么搭建你的项目
      • 三、在选择框架的时候要从哪方面入手
      • 四、聊—聊前端模板与渲染
    • 前端工程化
    • 组件设计
    • 单元测试
  • 其它

  • 面试
  • 进阶面试题
ctrlwin
2021-03-29

架构

# 一、如果让你来制作—个访问量很高的大型网站,你会如何来管理所有css、js文件、图片?

(1) 遵循自定的—套CSS,JS和图片文件和文件夹命名规范 (2) 依托采用的前端工程化工具,依照工具脚手架规范(gulp, webpack, grunt, yeoman) (3) 依据采用的框架规范(Vue, React, jQuery)

# 二、如果没有框架、怎么搭建你的项目

应用原生JS自己尝试搭建—个MVC架构: (1)基本模块 common:公共的—组件,下面的各模块都会用到 config:配置模块,解决框架的配置问题 startup:启动模块,解决框架和Servlet如何进行整合的问题 plugin:插件模块,插件机制的实现,提供IPlugin的抽象实现 routing:路由模块,解决请求路径的解析问题,提供了 IRoute的抽象实现和基本实现 controller:控制器模块,解决的是如何产生控制器 model:视图模型模块,解决的是如何绑定方法的参数 action: action模块,解决的是如何调用方法以及方法返回的结果,提供了IActionResult的 抽象实现和基本实现 view:视图模块,解决的是各种视图引擎和框架的适配 filter:过滤器模块,解决是执行Action,返回IActionResult前后的AOP功能,提供了 IFilter 的抽象实现以及基本实现 扩展模块filters:—些IFilter的实现 results:―些IActionResult的实现 routes:―些IRoute的实现 plugins:—些 IPlugin的实现

# 三、在选择框架的时候要从哪方面入手

影响团队技术选型有很多因素,如技术组成,新技术,新框架,语言及发布等。为了更好的 考量不同的因素,需要列出重要的象限,如开发效率、团队喜好,依次来决定哪个框架更适 合当前的团队和项目。上线时间影响框架选择,不要盲目替换现有框架。 (1) jQuery 项目功能比较简单。并不需要做成—个单页面应用,就不需要MV*框架。项目是—个遗留 系统。与其使用其他框架来替换,不如留着以后重写项目。 (2) AngularJS 当我们在制作—个应用,它对性能要求不是很高的时候,那么我们应该选择开发速度更快的 技术栈AngularJS,她拥有混合开发能力的ionic框架。对于复杂的前端应用来说,基于 Angular.js应用的运行效率,仍然有大量地改进空间。Angular2需要学习新的语言,需慎重 选择。 (3) React 选择React有两个原因,—是通过VirtualDOM提高运行效率,二是通过组件化提高开发效 率。大型项目首选。选择React还有_个原因是:ReactNative、ReactVR等等,可以让 React运行在不同的平台之上。我们还能通过React轻松编写出原生应用,还有VR应用。 令人遗憾的是React只是—个View层,它是为了优化DOM的操作而诞生的。为了完成— 个完整的应用,我们还需要路由库、执行单向流库、webAP丨调用库、测试库、依赖管理库 等等,为了完整搭建出—个完整的React项目,我们还需要做大量的额外工作。 (4) Vue.js 对于使用Vue.js的开发者来说,我们仍然可以使用熟悉的HTML和CSS来编写代码。并 且,Vue.js也使用了 Virtual D〇M、Reactive及组件化的思想,可以让我们集中精力于编写 应用,而不是应用的性能。 对于没有Angular和React经验的团队,并且规模不大的前端项目来说,Vue.js是—个非常 好的选择。 详细参见:https://zhuanlan.zhihu.com/p/25194137

# 四、聊—聊前端模板与渲染

(1) 页面级的渲染,后端模板 如smarty,这种方式的特点是展示数据快,直接后端拼装好数据与模板,展现到用户面前, 对SEO友好。 (2) 异步的请求与新增模板,前端模板 如Mustache, ArtTemplate,前端解析模板的引擎的语法,与后端解析模板引擎语法—致。 这样就达到了—份HTML前后端—起使用的效果。 详细参见:https://segmentfault.com/a/1190000005916423

在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM

← 混合开发 前端工程化→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×