zoukankan      html  css  js  c++  java
  • JS中的模块化开发

    摘引自:

    http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

    http://developer.51cto.com/art/201305/392668.htm

    /***
    ///1.全局函数写法
    function m1(){

    }
    function m2(){

    }
    缺点:污染全局变量 无法保证不与其它模块的变量名冲突 模块成员之间没有关系


    ///2.对象写法
    var module = {
    _count:1,
    m1 : function(){

    },
    m2: function(){

    },
    }
    缺点:暴露所有模块成员 内部状态可以被外部修改 即外部可以直接修改对象的属性等
    module._count=2;


    ///3.立即执行函数(可以达到不暴露私有成员的目的)
    var module = (function(){
    var _count = 0;
    var m1 = function(){

    };
    var m2 = function(){

    };
    return {
    m1 : m1,
    m2 : m2
    }
    })()
    console.log(module._count);--undefined

    ///4.放大模块
    一个模块分成几个部分,一个模块继承另一个模块,这时才有放大模块
    var module = (function(){
    var _count = 0;
    var m1 = function(){

    };
    var m2 = function(){

    };
    return {
    m1 : m1,
    m2 : m2
    }
    })();
    var module1 = (function(module){
    module.m3 = function(){
    return 111;
    }
    })(module);
    console.log(module);

    ///5.宽放大模式
    由于模块的各个部分是从网上获取,不知道哪个部分先加载,采用放大模块可能加载一个不存在的空对象,这时候采用宽放大模式
    var module1 = (function(module){

    })(window.module || {})


    ///6.独立性输入全局变量
    独立性模块内部不与程序的其它部分直接交互
    为了在模块内部调用全局变量,可以显示的将其输入模块
    这样可以保持模块的独立性,也很显现出模块的依赖特性
    var module=(function($,YAHOO){

    })(jQuery,YAHOO)

    ————————————————————————————————————————————————————————
    模块的好处:有了模块可以很方便的使用别人的代码,想要啥功能就加载啥模块
    考虑到不能瞎写就需要制定一个模块标准。目前的标准有CommonJS和AMD标准

    2009美国小伙Ryan Dahl创作了node.js项目把js用于服务器端编程。这标志着模块化正式诞生。在浏览器端有无模块不无大碍,毕竟网页程序的复杂度有限
    但是服务器端一定要有模块,与操作系统和其它程序互动否则无法编程。
    node.js的模块系统就是参照commonJS规范实现的。在common中有一个全局的require()方法用于加载模块,如
    一个math.js数学模块可以如下加载
    var math = require("math");
    math.add(2,3);-->5

    有了服务器端的模块,大家自然想到客户端的模块,最好两者兼容,一个模块不用修改在服务器+客户端浏览器都可以运行。
    但是,由于一个重大的局限CommonJS规范不适应于浏览器环境,以上的问题加载math.js可能花费很长时间,对于服务器都在硬盘存储可以同步完成,等待时间就是硬盘加载
    的时间。但浏览器就是一个大问题模块放在服务器上,等待时间取决于网络速度,浏览器处于假死状态。因此,浏览器的模块加载不能采用同步(synchronous)只能采用
    异步加载的方式(asynchronous)这就是AMD规范的诞生。

    AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。
    所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
    AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
    require([module], callback);
    第一个参数是一个数组,里面的成员是要加载的模块,第二个参数是callback,加载成功后回调的函数。
    require(["math"],function(math){
    math.add(2,3);
    })
    math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。
    目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。
    本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。


    ————————————————————————————————————————————————————————
    1.为啥要用require.js
    最初所有js都写在一个文件里,后来越来越多,分解成多个js.
    <script src="1.js"></script>
      <script src="2.js"></script>
      <script src="3.js"></script>
      <script src="4.js"></script>
      <script src="5.js"></script>
      <script src="6.js"></script>
    以上缺点:
    加载js时候浏览器会停止渲染,加载文件越多,失去响应的时间就越长
    js中存在依赖关系必须保证加载顺序,依赖性最大的模块一定放在最后加载,代码的维护和编写变的困难。

    require.js
    1.实现js文件的异步加载,避免网页失去响应
    2.管理模块之间的依赖,便于代码的编写和维护

    加载require.js也可能会出现影响页面响应
    解决办法:1.放在网页底部
    2.defer async="true" (async这个ie不支持所以写上defer)

    data-main="js/main"指定网页程序的主模块默认后缀后缀是.js所以只写main就可以
    有点像C语言的main()函数
    // main.js
      require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
        // some code here
      });

    由于是异步加载的js所以不会阻塞网页的渲染及响应。回调函数的好处是只有前面的模块加载完成才会调用,解决了依赖问题。。。。
    require(['jquery','underscore','backbone'],function($,_,Backbone){

    });

    默认不写路径,默认与主模块main.js在一个路径。
    require.config()可以对模块的加载进行自定义。配置写在主模块中。
    require.config({
    paths:{
    "require":"lib/jquery.min",
    "underscore":"lib/underscore.min",
    "requbackboneire":"lib/backbone.min"
    }
    });

    require.config({
    baseUrl:"js/lib",
    paths:{
    "require":"jquery.min",
    "underscore":"underscore.min",
    "requbackboneire":"backbone.min"
    }
    });


    require.config({
    baseUrl:"js/lib",
    paths:{
    "require":"moduleA.min"
    }
    });
    require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){

    });
    一旦写了baseUrl那么所有的js都依赖这个。
    全局路径
    require.config({
    paths:{
    "jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
    }
    });

    以上要求:
    require.js要求每一个模块都是一个单独的js,加载多个模块就会多次http请求,这会影响网页的加载速度。因此提供一个工具来把多个模块合并在一个文件里,减少
    请求。

    模块必须按照AMD的规范进行书写就是模块必须使用define()函数来定义


    如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性
    define(["moduleC"], function() {
    var name = "a";
    return name;
    });


    理论上讲require.js加载的模块必须用define定义按照AMD的规范。但有一部分的没有按照规范来进行,如下解决。
     require.config({
        shim: {
          'underscore':{
            exports: '_'
          },
          'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
          }
        }
      });


    shim属性,专门用来配置不兼容的模块
    具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
    jQuery的插件可以这样定义
    shim: {
        'jquery.scroll': {
          deps: ['jquery'],
          exports: 'jQuery.fn.scroll'
        }
      }

    require.js插件
    require.js还提供一系列插件,实现一些特定的功能。
    domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
      require(['domready!'], function (doc){
        // called once the DOM is ready
      });


    text和image插件,则是允许require.js加载文本和图片文件。
      define([
        'text!review.txt',
        'image!cat.jpg'
        ],

        function(review,cat){
          console.log(review);
          document.body.appendChild(cat);
        }
      );
    类似的插件还有json和mdown,用于加载json文件和markdown文件。

    require.config({
    baseUrl: "fsadfdsfdsa"
    })

    config这个在开发阶段比较有用,上线压缩成一个文件后不起作用了。
    node r.js -o baseUrl=./ name=main out=main-build.js(require.js放哪无关)
    **/

  • 相关阅读:
    Codeforces Global Round 17
    [UER #6] 逃跑
    [模板] 一般图最大匹配
    Codeforces Global Round 18
    Flash/Flex学习笔记(50):3D线条与填充
    Flash/Flex学习笔记(47):反向运动学(上)
    Flash/Flex学习笔记(46):正向运动学
    Flash/Flex学习笔记(49):3D基础
    Flash/Flex学习笔记(51):3维旋转与透视变换(PerspectiveProjection)
    Flash/Flex学习笔记(54):迷你滚动条ScrollBar
  • 原文地址:https://www.cnblogs.com/c4895007/p/4135274.html
Copyright © 2011-2022 走看看