JavaScript 模块机制

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript 模块机制脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

项目以前使用@L_406_0@Js,Angular前端框架。换工作之后新项目使用jQuery,又感觉回到原始时代。时代虽然倒回去了,但是思想不能也跟着倒回去。因此根据AngularJs编程风格封装一个简单的模块机制来写jQuery代码。

模块机制

大多数模块依赖加载器/管理器,本质上都是将这种模块定义封装进一个有好的API。在此,只是简单做了一下模块封装。

var Module = (function() {
    var modules = {};
    
    function controller(name, deps, impl) {
        for (var i = 0, len = deps.length; i < len; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    }

    function get(name) {
        return modules[name];
    }

    return {
        controller: controller,
        get: get
    }
})()

如何使用

Module.controller('hello', [], function() {
    function hello(who) {
        return 'hello ' + who;
    }
    return {
        hello: hello
    }
})
Module.controller('upperCase', ['hello'], function() {
    var who = 'dwyane wade';

    function awesome() {
        console.LOG(hello.hello(who).toUpperCase());
    }

    return {
        awesome: awesome
    }
})

var hello = Module.get('hello');
var upperCase = Module.get('upperCase');
console.log(hello.hello('dwyane wade'));
upperCase.awesome();

后记

ES6中引入了Class,Module。就不需要我们过多的了解模块化机制以及设计模式思想就能很好的管理代码,但是深入的去学习设计模式对整体框架把控还是有很大地帮助的。

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript 模块机制全部内容,希望文章能够帮你解决JavaScript 模块机制所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。