`

JavaScript框架之全局变量

    博客分类:
  • js
阅读更多

纵观各大类库的实现,一开始基本都是定义一个全局变量,然后对它进行扩展。如Prototype.js的Prototype,mootools的 Native,Base2的Base,Ext的Ext,JQuery的JQuery,YUI的YUI,dojo的dojo,MochiKit的 MochiKit等等。从全局变量的污染程度来看,分为两大类,Prototype,mootools与Base2归一类。Prototype的哲学是对 JS原生对象进行扩展。早些年,Ptototype差点成为事实的标准,因此基本没有考虑到与其他库的共存问题 。基于Prototype,也发展 出诸如 script.aculo.us,rico,Plotr,ProtoChart,Scripty2等非常优秀的类库以及一大堆收费插件,非JQuery那一大堆垃圾插件所能比拟的。不过,有点渊源的插件几乎与Prototype有关,如著名的lightbox。mootools是Prototype的升级版,更加OO,全面复制其API。Base则是想修复IE的Bug,让IE拥有标准浏览器的API,因此也把所有原生对象污染一遍。

剩下几个大类库就奉行非侵入的原则,尽量减少全局变量。如Ext还有更多小型类库,它会选择一个自定义对象(其实也是window的一个自定义属性),然后对它的属性进行扩展。基本思路是

  1. Ext = {};
  2. Ext.Element= function(){}
  3. Ext.DomQuery = function(){}
  4. Ext.DomHelper = function(){}
复制代码

JQuery也是一个window自定义属性,而且从一开始就污染了两个(JQurey与$),因此一旦其他类库占用了$,它就退回用 JQuery。它与Ext最大的不同的是。它是一个函数对象(Function),而不是一个纯对象(Object)。它的所有扩展都是基于它的 JQuery.fn即JQuery.prototype。其他可能暴露出来的变量都收到闭包与函数中。

dojo上来就来就构建它无拟伦比的包机制。整个命名空间都是由eval生成,然后再慢慢往dojo上添加属性,情况同Ext。不过,它的设计是我见过的类库中最复杂的,涉及的领域也非常广泛,搞到代码量达到惊人的9千行(兼注释)。

MochiKit不知是不是从dojo中派生出来,没怎么研究。但它的组织形式与Ext与dojo很相似。

YUI与JQuery很相似,是一个函数对象,只不过它后面就没有像JQuery那么疯狂,什么都往原型中加。无疑,YUI与JQuery的理念是非常新颖的,函数比对象更能玩出花样,起码做链式操作也轻松性。但JQuery一开始就瞄准页面的那个DOM元素,而 YUI,dojo,Ptototype,mootools等具有强大继承机制的,更乐意创建一个类,这就是JQuery在UI怎么也比不上它的前辈的原因。另外,YUI的作者们在CSS,HTML也造诣极深,因此其UI设计是非常值得学习的。

分享到:
评论

相关推荐

    JavaScript全局变量的本质及页面共享问题 -页面

    JavaScript全局变量的本质与页面共享问题是一个重要的编程概念,尤其是在网页开发中。JavaScript是一种广泛使用的脚本语言,它的全局变量在程序中的角色独特,且与页面的生命周期和浏览器环境紧密相关。 首先,我们...

    uni-app 全局变量的几种实现方式代码示例.zip

    uni-app是基于Vue.js构建的多端开发框架,因此其全局变量的实现方式也深受Vue的影响。下面我们将详细探讨几种在uni-app中实现全局变量的方法,并以代码示例进行说明。 1. **Vuex** Vuex是Vue.js的一个状态管理库,...

    基于JavaScript 声明全局变量的三种方式详解

    在JavaScript中,声明全局变量有三种主要方式,每种方式都有其特点和适用场景。以下是详细的分析: 1. 显式声明:使用`var`关键字 这是最常见的方式,通过在函数外部或脚本的顶部使用`var`关键字声明变量,使其成为...

    探讨JavaScript中声明全局变量三种方式的异同

    在探讨JavaScript中声明全局变量的三种方式时,我们必须先了解JavaScript中变量声明的基本概念。JavaScript是一种弱类型语言,这意味着在声明变量时无需指定变量的类型,而且变量的作用域是由变量声明的位置来决定的...

    在vue里面设置全局变量或数据的方法

    在Vue.js框架中,设置全局变量或数据是十分常见的需求,尤其在大型项目中,为了在各个组件之间共享状态和信息,全局变量的使用显得尤为重要。本文将详细讲解如何在Vue中实现全局变量的设置,并提供一个实际示例。 ...

    基于JavaScript的变量作用域的辨析.pdf

    在JavaScript中,有全局变量和局部变量之分,其作用域由函数约束。全局变量是定义在所有函数体之外,其作用域是所有函数;而局部变量是定义在函数体之内,只对该函数是可见的,而对其他函数则是不 可见的。在构建...

    vuex全局变量的几种实现方式

    在本文中,我们将深入探讨Vuex全局变量的几种实现方式,特别是在uni-app这个基于Vue.js的多端开发框架中的应用。 1. **创建Store模块** Vuex的核心是`store`对象,它包含应用的状态、mutations(状态变更方法)和...

    nuxt sass全局变量也就是公共 scss 解决方案 案例

    在 Nuxt.js 项目中使用 Sass,特别是设置全局变量,是优化样式管理和提高代码复用率的有效方法。 首先,我们需要理解 Nuxt.js 的文件结构和配置。在默认的 `nuxt.config.js` 文件中,你可以定义项目的样式加载器。...

    Javascript 数据类型和变量

    局部变量仅在其声明的函数或代码块内有效,而全局变量在整个程序范围内都可访问。 #### 三、总结 数据类型和变量是编程语言的基石,尤其在JavaScript这种动态类型的语言中尤为重要。掌握JavaScript的数据类型和...

    微信小程序全局变量的设置、使用、修改过程解析

    全局变量在微信小程序中扮演着重要角色,它可以在整个小程序的不同页面和组件之间共享数据,简化数据管理。以下将详细讲解微信小程序全局变量的设置、使用和修改过程。 1. 全局变量的设置 在微信小程序中,全局变量...

    VUE 全局变量的几种实现方式

    在Vue.js框架中,全局变量的使用通常是为了在多个组件之间共享数据,避免重复的数据获取和状态管理。本文将详细探讨Vue中实现全局变量的三种常见方法:全局变量专用模块、挂载到Vue.prototype以及使用Vuex。 1、...

    浅谈在vue项目中如何定义全局变量和全局函数

    在Vue项目中,全局变量和全局函数的定义是提高代码复用性和组织效率的重要手段。以下将详细讲解如何实现这两个功能。 ### 定义全局变量 #### 原理 创建一个专门的全局变量模块文件,例如`Global.vue`,在其中定义...

    微信小程序定义和调用全局变量globalData的实现

    在微信小程序的开发过程中,全局变量`globalData`扮演着重要的角色,尤其是在不同页面间共享数据时。本文将详细介绍如何在微信小程序中定义和调用全局变量`globalData`。 首先,我们要明白什么是全局变量`global...

    javascript框架设计读书笔记之种子模块

    在深入探讨司徒正美所著的《javascript框架设计》一书第一章种子模块的读书笔记之前,有必要先了解JavaScript框架设计的核心概念与实践。框架设计是软件工程领域中的一个重要组成部分,它为开发者提供了一套规范化的...

    build-a-javascript-framework.pdf

    《构建JavaScript框架》这本书深入浅出地介绍了如何创建自己的JavaScript框架。书中的内容涵盖了框架设计的各个方面,旨在帮助读者理解并实践JavaScript框架的构建过程。 首先,书中提到了"Framework Style",这...

    vue定义全局变量和全局方法的方法示例

    在Vue.js框架中,有时我们需要定义全局变量和全局方法,以便在多个组件之间共享数据或功能。这在大型项目中尤其重要,可以提高代码的复用性和可维护性。以下是一些实现这一目标的方法。 首先,我们可以使用全局引入...

    Javascript权威指南学习笔记二

    - 在多框架环境下,每个框架内的全局变量对于其他框架来说是局部的,但可以通过相应的`window`对象跨框架访问这些变量。 2. **客户端的对象层次和文档对象模型(DOM)**: - DOM提供了一种结构化的方式来表示HTML...

    Javascript高手指南

    在JavaScript中,变量的作用域分为全局变量和局部变量。全局变量在函数外部声明,可在函数内部访问。局部变量在函数内部声明,外部不可访问。函数可以直接读取全局变量,而外部环境不能访问函数内的局部变量。作用域...

    在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    在如今的前端开发中,Vue.js已经成为了一个十分流行的JavaScript框架,而vue-cli作为Vue.js的官方脚手架工具,极大地提高了项目的初始化、开发、构建和维护效率。Vue CLI 3.0作为该脚手架的升级版本,其对预处理器的...

Global site tag (gtag.js) - Google Analytics