认识达内从这里开始

认真做教育专心促就业

前端模块化开发的理解和操作方法及注意事项（二）

发布：达内培训
来源：达内培训
时间：2018-10-27 16:47

    达内培训的老师说，Util 这个名称也具有通用性，通常用作辅助工具定义的时候会使用到这个名称，为了体现该名称的唯一性，可以继续借鉴 Java 中 package 的命名规范（域名倒置）：
    var com = {};
    com.github = {};
    com.github.itrainhub = {};
    com.github.itrainhub.Util = {
    css : function（element, attr） {
    // …
    },
    offset : function（element） {
    // …
    }
    };
    要获取 CSS 样式值，则可使用 com.github.itrainhub.Util.css（）方法。但这样的写法增加了记忆难度，YUI 中关于这一点有比较好的解决方案，先按下暂且不表。
    使用对象的写法可解决命名冲突问题，但这种写法也会暴露对象的所有成员，使对象内部状态可以在对象外部被改写。比如在对象内部存在计数器：
    var Util = {
    _count : 0
    }
    在对象外部可以通过 Util._count = 18; 修改该计数器的值，这是不安全的。
    像计数器这样的变量，通常可能是作为对象的私有成员存在，不希望在对象外部还能继续修改其值，这时，可以使用 IIFE（立即执行函数）来设计：
    var Util = （function（）{
    var _count = 0;
    function _css（element, attr） {
    // …
    }
    function _offset（element） {
    // …
    }
    return {
    css : _css,
    offset : _offset
    }
    }）（）；
    这样，在外部就不能再直接修改 _count 的值了。

通过命名空间，的确可以解决命名冲突的问题，我们可以暂时松一口气了。

达内培训

    2. 文件依赖
    接着 tools.js 继续开发。
    在 tools.js 的基础上，可以开发出一些 UI 层通用的组件，如放大镜、轮播图之类的，这样各个项目中要使用这些功能的时候就不用重复造轮子了。
    通常情况下，每个 UI 组件都是以独立的 js 文件存在的，比如放大镜，可以将它放到一个 zoom.js 的文件中，当要使用到放大镜组件时，通过 <script src=“zoom.js”></script> 引入即可。
    <script src=“tools.js”></script>
    <script src=“zoom.js”></script>
    <script>
    zoomIn（/* 传入放大镜效果的配置信息 */）；
    </script>
    但很多时候，在使用 zoom.js 之前忘记了引入 tools.js,则使用 zoom.js 就会报错，无法保证它的正常执行。
    zoom.js 的正常执行依赖于 tools.js 的使用，上述的问题都还是比较容易解决的，但随着团队越来越大，业务需求越来越复杂，项目中组件间的依赖关系也会变得越来越复杂。比如：
    某一天，我扩充了 zoom.js 组件的功能，但除了使用到 tools.js 外，还使用到另一个工具 js 组件：helper.js.如果项目中已有 N 个地方之前使用到了 zoom.js 组件，我就只好全局搜索每个引用 zoom.js 的地方，再加上对 helper.js 的引用。
    再想想，随着项目推进，我们会继续修改 tools.js,添加更多的组件 component_1.js、component_2.js……某些组件中只使用到 tools.js,某些只使用到 helper.js,而某些组件既使用到了 tools.js 又使用到了 helper.js.那么关于组件间依赖关系的维护，工作量可想而知，如果以人肉的方式来保证依赖关系的维护，简直就要崩溃掉了。
    以上就是达内培训给大家做的内容详解，更多关于IT的学习，请继续关注达内培训

< 上一篇：前端模块化开发的理解和操作方法及注意事项（一）

下一篇：前端模块化开发的理解和操作方法及注意事项（三） >