[10minutes]javascript封装名字空间的写法

本文介绍了一种使用JavaScript进行模块封装的方法,通过实例演示了如何创建私有变量和函数,并提供了调用内部函数的方式。此外,还展示了如何实现类似于Java的多级包结构,以便更好地组织代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

var az = function() {
    var variable1 = "test";
    var variable2 = "test2";

    function testFunc() {
        alert(variable1);
    }

    return {
        init : function() {
            testFunc();
            this.testFunc2();
        },

        testFunc2 : function() {
            alert(variable2);
        }
    };
}();

az.init();

 

 

 

变量 variable1 和 variable2. 这两个变量可以看成是 private 的变量。 

testFunc 可以看成是 private 函数.

 

init,testFunc2是public 公共函数.

 

使用this引用内部的函数.

 

在类里调用函数有两种方法,一种是写全类名   az.testFunc2() ,第二种是使用this引用,this.testFunc2()

 

 

下面再深入一点,如何实现类似java的多级包结构:

 

 

 

var az.util = function() {
    return {
        gebi : function(obj) {
            return document.getElementById(obj);
        }
    };
}();

 

 

 

 这样就可以用az.uti.getbi()来调用,使用这种封装,代码可以多级地扩展下去.

 

注意事项:

 

return 和 {之间不能有回车,否则代码会出错.

 

 

 

 

 

 

 

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值