zoukankan      html  css  js  c++  java
  • RequireJs学习笔记之Define a Module


    简单的键值对定义
    define({
        color: "black",
        size: "unisize"
    });

    如果一个模块没有任何依赖,又需要做用一个函数做一些事情,直接定义一个函数然后传给define()
    //my/shirt.js 返回定义的模块是一个键值对

    define(function () {
        //Do setup work here

        return {
            color: "black",
            size: "unisize"
        }
    });

    使用需要依赖的函数来定义模块
    如果一个模块有依赖,第一个参数应该是一组这个模块依赖的函数名 ,第二次参数就是你定义的函数,在依赖加载完,这个函数被定义成模块一次,函数应该返回一个对象,这个对象就是定义的模块,依赖将会作为参数传递给定义的函数,参数传递的顺序和数组里定义依赖的模块顺序一样

    //my/shirt.js 依赖的模块是 a cart 和 inventory

    define(["./cart", "./inventory"], function(cart, inventory) {
           
            //返回了一个模块,这个模块是一个对象 名字是my/shirt或者叫shirt
            return {
                color: "blue",
                size: "large",
                addToCart: function() {
                    inventory.decrement(this);
                    cart.add(this);
                }
            }
        }
    );
    上面例子 my/shirt模块被创建,依赖my/cart和myinventory模块 ,硬盘上的目录结构

        my/cart.js
        my/inventory.js
        my/shirt.js
        
    上面的函数定义了两个参数叫   "cart" and "inventory".  两个参数代表 my/cart和my/inventory模块,当my/cart和my/inventory模块加载完,my/shirt模块才被创建,这个函数收到"cart" and "inventory"作为参数传进来
        
    不建议定义全局模块,一个模块可能在一个页面一个时间点里存在多个版本所以函数参数顺序应该匹配模块依赖顺序
        
        
    返回一个函数作为模块
    定义一个模块 foo/title.js 依赖于my/cart and my/inventory
    define(["my/cart", "my/inventory"],
        function(cart, inventory) {
            //return a function to define "foo/title".
            //It gets or sets the window title.
            return function(title) {
                return title ? (window.title = title) :
                       inventory.storeName + ' ' + cart.name;
            }
        }
    );
        
        
        
    给定义模块取一个名字,"foo/title"就是名字,但最好有引擎自己做。不要自己取
     //Explicitly defines the "foo/title" module:
        define("foo/title",
            ["my/cart", "my/inventory"],
            function(cart, inventory) {
                //Define foo/title object in here.
           }
        );
        
    jsnop
        require(["http://example.com/api/data.json?callback=define"],
        function (data) {
            //The data object will be the API response for the
            //JSONP data call.
            console.log(data);
        }
    );
        

















  • 相关阅读:
    使用sublimeserver启动本地服务器进行调试
    echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
    axios跨域问题
    reset.css
    Git初体验
    Window下的git配置文件在哪里【图文】
    使用better-scroll遇到的问题
    代码中特殊的注释技术 -- TODO、FIXME和XXX的用处
    vue饿了么学习笔记(1)vue-cli开启项目
    gulp4小demo
  • 原文地址:https://www.cnblogs.com/or2-/p/3406824.html
Copyright © 2011-2022 走看看