zoukankan      html  css  js  c++  java
  • 前端模块化

    教程:http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

    1,匿名闭包(Anonymous Closures)

    (function () {
    	// ... all vars and functions are in this scope only
    	// still maintains access to all globals
    }());
    括号里的匿名方法,直接被执行,这让js有了无限可能。

    2,全局导入(Global Import)
    (function ($, YAHOO) {
    	// now have access to globals jQuery (as $) and YAHOO in this code
    }(jQuery, YAHOO));
    通过闭包的方法,将内容限制在一个作用域内。

    3,模块导出(Module Export)

    如果想生命全局变量,可以通过方法的返回值。

    var MODULE = (function () {
    	var my = {},
    		privateVariable = 1;
    
    	function privateMethod() {
    		// ...
    	}
    
    	my.moduleProperty = 1;
    	my.moduleMethod = function () {
    		// ...
    	};
    
    	return my;
    }());

    高级模式

    1,展开(Augmentation)
    var MODULE = (function (my) {
    	my.anotherMethod = function () {
    		// added method...
    	};
    
    	return my;
    }(MODULE));
    通过var关键字的一致性,我们可以给MODULE增加公开方法anotherMethod.

    2,解耦展开(Loose Augmentation)
    利用javascript的异步加载。我们可以创建可扩展的,任意顺序的自加载多功能模块,每个文件需要包含这样的结构:
    var MODULE = (function (my) {
    	// add capabilities...
    
    	return my;
    }(MODULE || {}));
    使用这种模式,var语句是必须的。

    3,紧耦合扩展(Tight Augmentation)

    var MODULE = (function (my) { var old_moduleMethod = my.moduleMethod; my.moduleMethod = function () { // method override, has access to old through old_moduleMethod... }; return my; }(MODULE));


    4,复制和继承(Cloning and Inheritance)


    教程2: https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

    JavaScript Modules: A Beginner’s Guide

    CommonJS vs AMD

    CommonJS: load modules synchoronously ,for server side. 

    AMD: Asynchronous Module Defination. 
    like this:

    define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
    console.log(myModule.hello());
    });

    UMD: Universal Module Defination(UMD), UMD Modules are capable of working on both client and server.

    UMD Example:

    (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
    // AMD
    define(['myModule', 'myOtherModule'], factory);
    } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('myModule'), require('myOtherModule'));
    } else {
    // Browser globals (Note: root is window)
    root.returnExports = factory(root.myModule, root.myOtherModule);
    }
    }(this, function (myModule, myOtherModule) {
    // Methods
    function notHelloOrGoodbye(){}; // A private method
    function hello(){}; // A public method because it's returned (see below)
    function goodbye(){}; // A public method because it's returned (see below)

    // Exposed public methods
    return {
    hello: hello,
    goodbye: goodbye
    }
    }));








     
  • 相关阅读:
    ASP.NET 2.0 web.config数据库连接设置与读取
    一句话影评
    百度地图api示例
    centos5.8 误改/etc/fstab后导致系统进不去 解决办法
    Nginx Gzip 压缩配置
    数据库设计的三大范式
    CentOS 6.0下vncserver安装配置
    MySQL配置文件my.cnf设置
    Linux下zip加密压缩
    keepalived的log
  • 原文地址:https://www.cnblogs.com/netact/p/7088470.html
Copyright © 2011-2022 走看看