浅理解模块化和封装

模块化和封装

今天看了一下node.js的书,理解了模块化的意思,之前在项目中,不论是react-native还是vue,只要是看见exports和require,总是一头雾水,今天就来解释一下,来加深一哈理解。

1.为何要进行模块化? 模块化就是将功能进行拆解,再组合的过程。因为一个项目不可能总是由一个文件构成的,模块化可以更好地服务于你。

2.模块化的两种方法:

第一种方法最简单的就是创建两个文件,在另外一个文件中引用这个文件,并调用这个模块中的方法。

举个栗子:

在module.js中有这样的代码:

//module.js

var name;

exports.setName = function(BName) {  

name = BName;

};

exports.sayHello = function() {  

console.log('看你不爽的 ' + name);

};

在另外一个文件getModule.js中:

//getmodule.js

var myModule = require('./module'); //在同一目录文件下

myModule.setName('Bacon');

myModule.sayHello();

运行node getmodule.js,可也以安装supervisor,可以进行实时调试,很舒服。

输出结果是:

看你不爽的 Bacon

 

第二种方法就是进行封装,再来看:

//capsuleModule.js

function fSBacon() {  

var name;     

this.setName = function (BName) {    

name = BName;  

};   

      this.sayHello = function () {    

console.log('依然看你不爽的 ' + name);  

};

};

module.exports = fSBacon; 

注:也可用exports.Hello = Hello; 不可以通过对 exports 直接赋值代替对 module.exports 赋值。 exports 实际上只是一个和 module.exports 指向同一个对象的变量, 它本身会在模块执行结束后释放,但 module 不会,因此只能通过指定 module.exports 来改变访问接口。

在另外一个文件getCapsuleModule.js中:

//getCapsuleModule.js

var fSBacon = require('./ capsuleModule’);

bacon = new fSBacon ();

bacon.setName('Bacon');

bacon.sayHello();

接管依然如是。

今天要写的就这么些喽,主要是对模块化和封装有了一些更深的认识,知道的太少。

然而秋招的脚本更近了……,实习还没有着落......

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,模块化开发是将一个大型应用程序拆分成小的、可重用的模块,然后将这些模块组合在一起构建整个应用程序。模块化可以提高开发效率,使代码更易于理解和维护。例如,可以将一个功能拆分成多个组件,每个组件专注于实现独立的功能。这样,开发人员可以集中精力处理每个组件的逻辑,而不用同时关注整个应用程序的细节。 在Vue中,可以使用组件来创建模块。组件是一个功能代码集,可以方便地反复使用。通过使用组件,可以将页面拆分成多个小模块,每个小模块负责一个特定的功能。这样,我们可以更加灵活地组织代码,并且可以在不同的地方重复使用同一个功能代码集。 Vue的开发模式是MVVM模式,其中VM(ViewModel)的任务是完全封装DOM操作,开发人员不需要再关心Model和View之间的互相影响。当Model发生改变时,View会自动更新;当用户修改View时,Model中的数据也会相应变化。这样,开发人员可以将注意力集中在如何操作Model上,而不需要过多地关注DOM操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue实战中的模块化开发](https://blog.csdn.net/qq_40792558/article/details/110380334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [挑战百日学习计划(小程序开发)-第9天(Vue组件component)](https://download.csdn.net/download/weixin_38691739/14043796)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue模块化开发](https://blog.csdn.net/qq_43460335/article/details/123964102)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值