草庐IT

第二章、框架设计的核心要素

小胖子的快乐 2023-03-28 原文

　　1. 提升用户的开发体验

　　　　　　开发体验是衡量一个框架的指标之一

　　　　　　关于快速定位问题和打印警告信息和其他重要信息  Vue.js3   源码中使用  initCustomFormatter 函数
　　　　　　　该函数作用： 在开发环境下自定义formatter的
　　　　　　Chrome为例， 打开  DevTools 勾选  Console  -->  Enable  custom  formatters  
　　　　

　　2. 控制框架代码体积

　　　　框架的大小也是衡量框架的标准之一

　　　　1.  关于警告 
　　　　　　Vue.js3 中 每一个warn都配合  __DEV__ 常量的检查

　　　　　　Vue.js采用 rollup.js 对项目进行构建 ， __DEV__ 常量实际上就是通过rollup,js的插件配置来预定义的，其功能类似于  webpack中的 DefinePlugin插件

　　　　　　Vue.js 在输出资源时。会输出两个版本

　　　　　　　　　　vue.global.js    ==>     __DEV__  =  true      开发环境 提示 warn

　　　　　　　　　　vue.gloabl.prod.js  ==>   __DEV__ = false  生成环境 不提示

　　　　　　

if (__DEV__ && !res) {
     warn(
       ` Failed to mount app: mount target selector "${}container" return false `
    )
}

　　　3.  Tree-Shaking  

　　　　　　如何做到不需要的代码不构建？

　　　　　　Tree-Shaking ：消除那些永远不会执行的代码   （ rollup.js    webpack   都支持 ）

　　　　　　实现  Tree-Shaking  必备条件： 
　　　　　　　　　　模块必须是ESM ( ES  MODULE )   因为Tree-Shaking  依赖 ESM 静态结构

　　　　　　Tree-Shaking  副作用

　　　　　　　　如果一个函数调用会产生副作用就无法移除

　　　　　　　　副作用：  当调用函数时，会对外部产生影响，比如修改全局变量

　　　　　　　　由于静态分析JS代码和困难，所以 rollup.js 提供了一个机制    /* #__PURE__ */  注释

　　　　　　　　/* #__PURE__ */  作用： 该注释之后的代码不产生副作用      /* #__PURE__ */  foo()

　　　　　　　　/* #__PURE__ */   不仅可以用于函数  也可以用于任何语句

　　　　4. 框架应该输出怎样的构建产物

　　　　　　除了提到的开发环境和生产环境外，  Vue还会根据场景的不通生成其他形式的产物

　　　　　　IIFE    自调用函数

　　　　　　　　实现在script标签中引入框架并使用    就必须输出IIFE的格式

　　　　　　　　实际上 vue.global.js 就是  IIFE 的形式

　　　　　　　　在 rollup.js中可配置  format： ‘iife’  输出

　　　　　　ESM  

　　　　　　　　Vue.js 还会输出  vue.esm-browser.js    是给用  < script  type ="module > 使用的

　　　　　　　　输出这种资源对应配置项   format: 'esm'

　　　　　　　　Vue.js 输出  vue.esm-bundler.js  是为 roolup.js   webpack 打包工具使用的 

　　　　　　　　　  当构建 script标签的时候 __ DEV__  会设置为 true/false

　　　　　　　　　  当构建打包工具（-bundler）  __ DEV__  会设置为   process.env.NODE_ENV !== 'production'

　　　　　　　　好处： 用户可以通过webpack配置自行决定构建资源的目标

　　　　　　CJS   

　　　　　　　　在Node环境下使用   服务端渲染

　　　　　　　　配置  format:'cjs'

　　　　5.特性开关

　　　　　　多个特性对应多个特性开关  

　　　　　　好处： 特性开干一旦关闭  Tree-Shanking  机制让其不包含在最终源码

　　　　　　实现： 　　

　　　　　　　　vue3.js    __FEATURE_OPTIONS_API__ :  isBundlerESMBuild ?  `__VUE_OPTIONS_API__` :true

　　　　　　即带  ‘ -bundler ’  的 会使用   __VUE_OPTIONS_API__

　　　　　　__VUE_OPTIONS_API__  可用来关闭 vue2.x  选项api使用    vue.js 3  推荐使用 组合api

　　　　6. 错误处理

　　　　　　Vue.js 3 提供统一的错误处理  

　　　　　　　　callWithErrorHandling 捕获错误处理程序

　　　　　　　　registerErrorHandler  注册错误处理程序
　　　　　　代码演示

　　　　

　　　　7. 对 TS类型支持非常友好

　　　　　　TS是微软开发的开源的编程语言，是 JS的超集，能为JS提供类型支持

　　　　　　Vue.js3对TS的类型支持做的很友好

 

第二章第二nbspjsTree-ShakingVue

有关第二章、框架设计的核心要素的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  3. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中，我没有任何确认。在我的用户模型中，我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  7. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。 最佳答案 根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  8. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass)，但我需要在应用规则之前检查用户角色，但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户，我们在StackOverflow

  9. ruby - sinatra 框架的 MVC 模式 - 2

    我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？ 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho

  10. ruby-on-rails - Rails 5，公寓和设计 : sign in with subdomains are not working - 2

    我已经使用Apartment设置了一个Rails5应用程序(1.2.0)和Devise(4.2.0)。由于某些DDNS问题，应用只能在app.myapp.com下访问(请注意子域app)。myapp.com重定向到app.myapp.com。我的用例是每个注册该应用的用户(租户)都应该通过他们的子域(例如tenant.myapp.com)访问他们的特定数据。用户不应限定在其子域内。基本上应该可以从任何子域登录。重定向到租户的正确子域由ApplicationController处理。根据Devise标准，登录页面位于app.myapp.com/users/sign_in。这就是问题开始的

随机推荐