济南IT培训 > 达内新闻
前端模块化开发的理解和操作方法及注意事项(一)
- 发布:达内培训
- 来源:达内培训
- 时间:2018-10-27 16:44
1. 命名冲突-达内培训负责整理
首先从一个简单的习惯开始。
由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复用,如:
function css(element, attr) { // 获取 element 元素的 attr 对应的 CSS 属性值
// …
}
function offset(element) { // 获取 element 元素在文档中的位置坐标
// …
}
并把这些封装的函数放在统一的 tools.js 文件中。
如果页面功能实现需要使用到这些函数,则直接通过 <script src=“tools.js”></script> 引入即可。
前期感觉一切都好,大家也都觉得写这样的工具文件对开发来说很方便,直到使用越来越多,页面功能越来越复杂,大家要实现的需求也越来越多样。
这时有人就抱怨,因为引入了 tools.js 文件,如果要定义一个能够设置 css 属性值的函数,那么就只有取另外的函数名称(如 setCss )而不能再使用 css 这个函数名称了,同样如果要设置一个元素在整个文档中的定位坐标,也不能再使用 offset 这个函数名称,因为那样的话,就与 tools.js 文件中已定义的函数名称冲突了。
既然问题出现了,就需要解决。

在 Java 中有一个非常实用的技术--package,它将逻辑上相关的代码组织在一起使用“包”来进行管理,这相当于文件系统中的文件夹。在文件系统中,文件夹内是相对独立的一个空间,不用担心一个文件夹和另一个文件夹中文件命名的冲突。在“包”中也一样,可以解决文件命名冲突问题,如果要在包外部再使用到包内的资源,直接通过 import 导入相关的 package 即可。类似包这样的概念,在其它的语言(如 C#)中也称为命名空间。
JavaScript 中并没有提供原生的包或命名空间的支持,但可以使用其它的方法(如对象、闭包)来实现类似的效果。
参照 Java 的方式,我使用 JavaScript 中的对象来简单修改 tools.js 文件:
var Util = {
css : function(element, attr) {
// …
},
offset : function(element) {
// …
}
};
这样,当引入 tools.js 文件后,要获取 CSS 样式或获取元素的文档坐标,就通过类似 Util.css()/Util.offset() 的方法来实现。css 与 offset 的作用域是在对象 Util 下,再全局或是新对象中定义 css 属性是不受影响的。
以上就是达内培训给大家做的内容详解,更多关于IT的学习,请继续关注达内培训
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
前端模块化开发的理解和操作方法及注意事项(一)
- 发布:达内培训
- 来源:达内培训
- 时间:2018-10-27 16:44
1. 命名冲突-达内培训负责整理
首先从一个简单的习惯开始。
由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复用,如:
function css(element, attr) { // 获取 element 元素的 attr 对应的 CSS 属性值
// …
}
function offset(element) { // 获取 element 元素在文档中的位置坐标
// …
}
并把这些封装的函数放在统一的 tools.js 文件中。
如果页面功能实现需要使用到这些函数,则直接通过 <script src=“tools.js”></script> 引入即可。
前期感觉一切都好,大家也都觉得写这样的工具文件对开发来说很方便,直到使用越来越多,页面功能越来越复杂,大家要实现的需求也越来越多样。
这时有人就抱怨,因为引入了 tools.js 文件,如果要定义一个能够设置 css 属性值的函数,那么就只有取另外的函数名称(如 setCss )而不能再使用 css 这个函数名称了,同样如果要设置一个元素在整个文档中的定位坐标,也不能再使用 offset 这个函数名称,因为那样的话,就与 tools.js 文件中已定义的函数名称冲突了。
既然问题出现了,就需要解决。

在 Java 中有一个非常实用的技术--package,它将逻辑上相关的代码组织在一起使用“包”来进行管理,这相当于文件系统中的文件夹。在文件系统中,文件夹内是相对独立的一个空间,不用担心一个文件夹和另一个文件夹中文件命名的冲突。在“包”中也一样,可以解决文件命名冲突问题,如果要在包外部再使用到包内的资源,直接通过 import 导入相关的 package 即可。类似包这样的概念,在其它的语言(如 C#)中也称为命名空间。
JavaScript 中并没有提供原生的包或命名空间的支持,但可以使用其它的方法(如对象、闭包)来实现类似的效果。
参照 Java 的方式,我使用 JavaScript 中的对象来简单修改 tools.js 文件:
var Util = {
css : function(element, attr) {
// …
},
offset : function(element) {
// …
}
};
这样,当引入 tools.js 文件后,要获取 CSS 样式或获取元素的文档坐标,就通过类似 Util.css()/Util.offset() 的方法来实现。css 与 offset 的作用域是在对象 Util 下,再全局或是新对象中定义 css 属性是不受影响的。
以上就是达内培训给大家做的内容详解,更多关于IT的学习,请继续关注达内培训
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 厦门
- 哈尔滨
- 济南
- 福州
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 大连
- 长沙
- 昆明
- 温州
- 太原
- 南昌
- 无锡
- 石家庄
- 南宁
- 中山
- 兰州
- 佛山
- 珠海
- 宁波
- 贵阳
- 保定
- 呼和浩特
- 东莞
- 洛阳
- 潍坊
- 烟台
- 运城