`

js动态添加方法和全局变量/按需加载组件

 
阅读更多

(本文为作者johnsmith9th原创,未经作者许可禁止转载,如需商务合作请联系2048748238@qq.com)

下面给一个名叫ComponentLoader的class批量添加loadXXX方法并输出XXX为全局变量。

(function(){

__component_names.forEach(function(cmpname){

  Object.defineProperty(ComponentLoader.prototype, `load${cmpname}`, {

    enumerable: true,

    configurable: false,

    writable: true,

    value: (function(cmpname) { 

    return function(callback) { 

import(`./${cmpname}.jsx`).then((o)=>{

var firstExport = o[Object.keys(o)[0]];

var w = window;

Object.defineProperty(w,cmpname,{value:firstExport,writable:false,configurable:false});

if(callback)callback();

})   

    }  

    })(cmpname)

  });

});

})();

分享到:
评论

相关推荐

    vue3 封装一个全局通用弹窗提示组件(利用js调用 类似于element)

    在Vue3中,为了提高代码复用性和用户体验,开发者经常需要封装一些全局的、通用的UI组件,例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件,并通过JavaScript...

    微信小程序如何实现全局重新加载

    所以初步考虑使用全局重新加载。 需要解决的问题都有哪些? 首先我们要有网络请求失败的全局控制权(要不然就需要在每个页面处理失败的情况) 需要定义好网络失败后是如何跳转到重载页(R)的(用wx.

    unigui_调用外部js与css

    3. **异步加载**:对于大型应用,可以使用动态导入(`import()`)来按需加载JS文件,以优化性能。例如: ```javascript const myModule = () => import('./myModule.js'); ``` 调用外部CSS文件: 1. **全局引入**...

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。...无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理,以保持良好的用户体验。

    css/js文件模块化组件

    在现代Web开发中,CSS和JavaScript的模块化组件已经成为提高效率、优化性能和维护代码质量的重要手段。"css/js文件模块化组件"的概念旨在解决传统开发模式中的问题,如文件冗余、依赖混乱以及HTTP请求过多等。通过将...

    vue-cli监听组件加载完成的方法

    在Vue.js开发中,有时我们需要监听组件的加载完成状态,以便在所有组件加载完毕后执行特定的操作。在使用Vue CLI构建项目时,这个问题可以通过结合Vuex的状态管理库来解决。本文将详细介绍如何在Vue CLI项目中监听...

    vue2.* element tabs tab-pane 动态加载组件操作

    本文档主要介绍如何在Vue2.*环境下使用Element UI中的el-tabs和el-tab-pane组件实现动态加载组件的操作。 一、动态加载组件的基本概念 在Web应用中,动态加载组件通常指的是根据用户交互或其他运行时条件,在运行时...

    vuejs组件-选择人员

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发为核心,极大地提高了开发效率和代码复用性。在“vuejs组件-选择人员”这个主题中,我们主要关注的是如何使用Vue.js来创建一个用于选择人员的组件。下面将...

    一个简单的React组件的示例脚本,它使用了函数组件(Functional Component)和Hooks

    React Router 可以根据URL的变化动态地加载和渲染组件。 ##### 3.3 Axios Axios 是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以方便地进行HTTP请求,常用于从服务器获取数据。在React应用中,经常...

    JavaScript动态网页

    11. **性能优化**:学习如何编写高效的JavaScript代码,包括避免全局变量、减少DOM操作、合理使用缓存、异步加载资源等策略,对于创建高性能的动态网页至关重要。 12. **调试技巧**:熟悉浏览器的开发者工具,学会...

    ant-design-vue按需加载的坑的解决

    在Vue.js开发中,我们经常使用Ant Design Vue作为前端UI框架,它提供了丰富的组件和优雅的设计风格。然而,在实际开发过程中,我们可能会遇到一些技术挑战,例如按需加载(tree shaking)Ant Design Vue时出现的编译...

    iView组件源码的使用

    5. **按需加载组件**:如果你不想引入所有iView组件,可以使用 babel-plugin-component 插件实现按需加载,以减小项目的体积。在`babel.config.js`中配置插件,并在需要的组件中引入。 ```javascript import { ...

    一个基于requirejs的单页面应用程序SPA加载引擎

    RequireJS 是一个 JavaScript 模块化加载器,它使得在浏览器环境中管理和组织代码变得更加容易。本项目是基于 RequireJS 构建的SPA加载引擎,旨在优化SPA的性能和可维护性。 在SPA中,一个关键的设计原则是模块化。...

    浅析jQuery EasyUI中的tree使用指南

    为了解决这个问题,可以采用全局变量来记录已经加载过的节点信息,当需要加载节点数据时,先检查该节点是否已经被加载过,如果已存在,则不再重复加载。 ```javascript var loadedNodes = {}; // 记录已经加载的...

    详解Vue 动态组件与全局事件绑定总结

    在本文中,我们将深入探讨Vue的动态组件和全局事件绑定,这是在开发过程中非常重要的两个概念,特别是在实现交互丰富的应用时。 动态组件是Vue的一个强大特性,它允许我们根据需求动态地在页面上加载不同的组件。在...

    js的common_config组件

    JavaScript中的`common_config`组件通常是指一个全局配置模块,它为整个应用或网站提供了一种统一管理和访问配置信息的方式。这个组件在多个页面或者模块之间共享配置参数,减少了代码重复,提高了代码的可维护性和...

    Javascript重构.pdf

    模块化意味着每个功能或组件都有自己的独立作用域,避免全局变量冲突和污染。例如,创建一个`common.js`文件,用于存放通用的函数,这些函数可以被其他组件安全地依赖。通过扩展String的prototype,我们可以添加...

    高效-可维护-组件化的CSS

    3. CSS-in-JS:将CSS写在JavaScript对象内,结合React等库实现组件化,允许动态样式和更好的类型检查。 4. 使用框架:如Vue、Angular等框架提供的内置CSS管理机制,有助于实现组件化,如Vue的 scoped 属性,限制CSS...

    微信小程序怎么切换全局主题颜色?···源码

    1. **全局变量与配置**: 微信小程序中的全局主题颜色通常存储在一个全局变量中,例如`App.globalData.themeColor`。当用户选择不同的主题时,我们会更新这个变量的值。 2. **自定义主题**: 你可以预先定义多个主题...

    react-React组件的CSS构造函数

    7. 性能优化:CSS构造函数库通常会进行自动优化,例如静态样式注入到头部以减少重绘,以及按需加载只在当前路由使用的样式,从而提高页面性能。 总之,React组件的CSS构造函数是一种强大的工具,它提高了React应用...

Global site tag (gtag.js) - Google Analytics