前端对框架(库)的大小更敏感
前端内容的渲染和交互效果的实现如果依赖JS框架(库)，需要先将这些框架(库)下载到客户端，此时框架(库)的大小将直接影响到前端的首屏渲染速度。框架(库)越小，加载的速度就越快，而随着功能的越来越全，框架(库)必然会越来越大，要保证性能，需要制定加载策略。
便于制定加载策略
解决框架(库)变大的常见加载策略是将框架分为核心部分和扩展部分，核心部分在首屏渲染前必须下载完成，并且这部分的加载文件尽可能的少和小，扩展部分则可以模块化方式来懒加载。
核心部分的JS在发布时，可对文件合并，数量尽可能少，单个文件在gzip压缩后最好不要超过20K。核心部分可以是实现“JS语言扩展(面向对象)，DOM操作API，数据交互方法(ajax)，导航策略，模块化底层实现，事件底层实现，模版解析”等。扩展部分一般是一些可异步加载的UI组件，例如：输入控件、弹出窗、动画API、文件上传及预览、图表控件、富文本编辑器等。
上面的实现模式，在主流的JS框架(库)中，有三类选择：一类是以ExtJS为代表的大而全的框架(库)，这类框架虽然功能满足，但往往无法拆分为核心部分和扩展部分来加载，因此基本不予考虑；一类是相对轻量的YUI3、Dojo等框架(库)；一类是近来流行的前端MV*系列Backbone、Ember、Angular，这类在充当核心部分时，还需要组合Underscore、RequireJS，jQuery等第三方库。
后面两类可以满足要求，但个人觉得不是完美的方案，因为在开发实际产品时，将这两类作为核心部分时，往往里面有很多是不需要的，而还有些需要自己来额外补充近来，可以是自己开发，也可以集成第三方的实现。而核心部分框架(库)如果是自己实现，则可以保证在功能完整的情况下，不多出其它的东西，加载的JS可以控制到最小，而且代码风格也统一。
便于扩展
    
前端代码与用户的交互直接相关，而交互的设计变化和不确定性非常大，现成的第三方实现往往难以直接利用，需要改造。有时改造第三方的框架，先要非常熟悉框架，当这个框架比较复杂时，这样的工作量和难度就大大加大了。而自实现的框架(库)则可以根据需要任意扩展，可以根据需求制定对应的规范和API。
便于统一开发规范
不同的JS框架(库)，调用方式往往也不同（模块化规范，DOM操作API，面向对象语法糖等）。在使用第三方框架(库)，特别是组合多个第三方框架(库)时，如果要实现产品代码书写规范的一致，需要实现自己代码来包装第三方框架(库)，达到调用接口的书写风格一致。自己实现的框架(库)则可以免去这一步骤。
减少升级带来的风险
有些第三方框架(库)在版本升级后，API、浏览器兼容性支持度、实现理念可能会发生变化。例如：ExtJs3和ExtJs4的差别就非常大，如果产品急于ExtJs3开发，想升级到4几乎就要做产品重构了，而且ExtJs4不再支持低版本IE浏览器。当组合使用多个框架(库)时，其中一个升级也可能会引起彼此之间的兼容性问题。还有可能出现引用的框架(库)在升级前，在产品中没有出现问题，升级后，因为框架(库)的理念变化，导致不再适合在当前产品中使用，否则会出现性能问题。
什么情况适合使用第三方实现
(1) 非“核心库、影响到产品集成与结构的部分、常用UI组件”
为了保证性能和扩展的方便，核心包和常用的UI组件可以选择自实现。因为难以找到一个第三方框架可以包含所有的核心包所需的功能，这样核心包就会由多个第三方包组合加上部分的自行实现。在组合第三包时，往往会带来很多不需要的代码，这样就不能保证核心包的精简。UI组件往往因为需要依赖于一些核心库(框架)，常用的UI组件自己实现，一来是可以依赖自己的核心库(框架)，减少大小，一来是这些常用UI组件往往会在系统的中大量使用，对页面的的视觉等待加载时间会有大的影响，或者是有深入的个性化需求，自己实现量身打造，并且方便扩展。
(2) 复杂的UI组件
复杂的UI组件，例如：富文本编辑器，日历，动画效果，图表等。这些不会影响产品的架构，技术方向和性能，而实现又比较复杂，当产品需要时，可以选择合适的第三方实现，通过模块化方式异步加载。如果有个性化需求，而其又没有扩展接口，则可尝试修改其源码。
(3) 文件小、依赖少、功能单一
很多人会将自己些的一些框架(库)放到github上开源。像kissy，qwrap等大而全的框架(库)很少会有人去将其用到自己的产品中，一般是去学习它们的实现理念。而对于SeaJS等只实现单一功能，并且文件小，不依赖其它第三方库(框架)则大受欢迎，很多公司和个人都在自己的产品中使用。
(4) jQuery
jQuery是个特例，虽然一般只用到了它的DOM操作和ajax相关的API，这种情况下，要引入一个gzip压缩后30多K的文件，不算小了。但是jQuery太流行，它的写法已经成了前端开发事实上的规范，大家都会用它，而且很多第三方UI组件/框架/库都依赖它。
最后的总结
上面提到的问题的性质需具体情况具体分析，根据应用产品的场景和开发团队要求，可能是大问题，也可能不是问题。如果有一个稳定的前端团队，并且开发的产品打算长期优化，那么积累并完善自己的框架(库)就非常有必要了。当团队没有积累，而又有产品开发的进度限制时，可以根据产品的形态和场景，先选择成熟的第三方库（不一定是当前非常流行的），在长期的产品的优化和完善过程中会不断发现问题并解决问题，这个过程可以逐步来构建和完善自己的框架（库）。

转载于:https://www.cnblogs.com/littlehb/p/3867140.html

为什么需要自己实现前端框架相关推荐

  1. 参考框架 系统 基准_带有基准的前端框架的真实比较（2018更新）

    参考框架 系统 基准 by Jacek Schae 由Jacek Schae 带有基准的前端框架的真实比较(2018更新) (A Real-World Comparison of Front-End ...

  2. 程序员Web面试之前端框架等知识

    基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮 ...

  3. 源码推荐:基于uni-app前端框架，开源版本还开源免费商用

    今天要给大家介绍一款电商软件,目前有两个主流版本:免费开源版.商业开源版.首先需要和大家普及下什么是开源软件? 提到开源,一定绕不开Linux.Linux 是一款开源软件,我们可以随意浏览和修改它的源 ...

  4. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  5. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

  6. Angular 8.0.0-beta.5 发布，Web 前端框架

    Angular 8.0.0-beta.5 发布了.Angular 是一款十分流行且好用的 Web 前端框架,与 React 和 Vue 并称前端三大框架/库,目前由 Google 维护. 更新内容如下 ...

  7. Bootstrap——优秀的开源前端框架

    声明: 本文已经首发于InfoQ中文站,版权所有,原文为<优秀的开源前端框架Bootstrap发布2.0.1版>,如需转载,请务必附带本声明,谢谢. Bootstrap是著名的社交网站.微 ...

  8. 如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)

    前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模 ...

  9. angler前端框架_2019几大主流的前端框架，几款目前最热门的前端框架

    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,C ...

  10. LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）

    LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...

最新文章

  1. 堆和栈的主要区别由以下几点：
  2. python输出n阶矩阵_python-递归计算矩阵(nxn)的行列式
  3. Authentication和Authorization的区别
  4. python3安装后无法使用退格键的问题
  5. 基于Verilog的按键控制LED灯
  6. js 获取当前元素的父元素的父元素的id
  7. （73）FPGA面试题-Verilog实现5人表决器
  8. winform中32位转64位系统上打开
  9. SQL Sever 聚合函数
  10. json对象获取json数组
  11. 【计算机网络】1概述
  12. 用74161计数器芯片 设计十二进制计数器
  13. HTML5CSS3知识点总结(1)
  14. BZOJ 3555: [Ctsc2014]企鹅QQ
  15. 手把手教你ssm整合 超级详细
  16. oracle 压缩备份比率,Oracle 10g备份集压缩（Backupset Compression）
  17. [CISCN]2020
  18. iOS小技能： 创建渐变色背景（提供渐变色无法覆盖整个视图的解决方案）
  19. 蓝桥杯学习记录||1264. 动态求连续区间和 | 线段树
  20. LeetCode 146. LRU 缓存

热门文章

  1. 【面试题视频讲解】TreeSet使用示例
  2. eureka之EurekaInstanceConfig接口的作用
  3. JDBC的CRUD操作之PreparedStatement的保存操作
  4. Python 之列表的常用方法
  5. xil_printf打印遇到的问题
  6. KMP算法求解next数组值(模式串从下标0开始或从下标1开始)以及求值后与主串的匹配过程
  7. noip 2017棋盘
  8. php多浏览器支持,测试网站在多个浏览器中的兼容性：MultiBrowser ┆V1.3.1 多国语言版...
  9. Linux中fork函数的作用及用法
  10. C/Cpp / typeof、_typeof 和 _typeof_ 区别和联系