如何定义一个自己的可复用的JS文件

简介: C#中,Java中,我们可以以dll和Jar的形式将我们常用的代码进行封装,然后复用,JS中可以不可以?当然可以,要不然这么多框架。 C#和Java中,我们可以定义自己的命名空间,类,然后在类中定义自己的方法,在使用的时候,只需要实例化类,然后使用对象即可,JS中没用命名空间和类的概念,JS中有一个非常重要的对象window这个就是全局对象,也可以认为这个是JS中唯一的命名空间,我们可以将自己的对象函数都附加在这个对象上,以供日后使用,这归功于JS对象的动态功能JQuery的源码打开看看,那个著名的$其实就是附加在windows上。

C#中,Java中,我们可以以dll和Jar的形式将我们常用的代码进行封装,然后复用,JS中可以不可以?当然可以,要不然这么多框架。

C#和Java中,我们可以定义自己的命名空间,类,然后在类中定义自己的方法,在使用的时候,只需要实例化类,然后使用对象即可,JS中没用命名空间和类的概念,JS中有一个非常重要的对象window这个就是全局对象,也可以认为这个是JS中唯一的命名空间,我们可以将自己的对象函数都附加在这个对象上,以供日后使用,这归功于JS对象的动态功能JQuery的源码打开看看,那个著名的$其实就是附加在windows上。既然是动态的,有没有觉得这个对象跟C#中的命名空间类似,在这里我就牵强附会的生拉硬套一个,将这个看做“特殊的对象”,那么我们可以在任何时候去给windows添加,看下面的用法。

 

 

//下面的代码在window对象中创建一个属于自己的对象或者命名空间,并把自执行函数中的方法附加到这个对象上,以便于我们调用这个自执行函数中的一些功能。  
(function() { 
//根据id获取对象 
function   _$(id) { return document.getElementById(id); } 

//创建一个自己的对象相当于C#中的命名空间(javascript中没有命名空间这个说法,刚才已经说了牵强附会)
window.liuyu = {}; 

//将内部函数_setStyle封装在mySpace命名空间内 
window.liuyu.$ = _$; 
})(); 

//测试代码 
window.onload = function() { 
var divtest=window.liuyu.$("testdiv");
} 


//如果不使用这种方法,那么,下面的方法也可以实现的。

 
window.liuyu= {}; 
window.liuyu.$ = function(id) { return document.getElementById(id); } 
//测试代码 
window.onload = function() { 
var divtest=window.liuyu.$("testdiv"); 
} 

 

两种做法实现的功能是一样的,都体现了JS对象的动态作用,但是第二方法更加的直观,易于理解。代码完全裸露在外。而第一种方法通过一个匿名函数将其封装,而且是通过闭包的形式,闭包相当于一个类,这种形式保护了自执行函数内的方法、变量、属性等。这样代码更加安全了。

相关文章
|
7月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
1868 0
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
218 0
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
443 0
Next.js 实战 (六):如何实现文件本地上传
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
268 5
|
JavaScript 前端开发
js函数调用与定义
js函数调用与定义
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
876 0
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
306 0
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值

热门文章

最新文章