zoukankan      html  css  js  c++  java
  • require.js结合项目的使用心得

    1.首先引入require.js

    2.配置config.js文件

    var $cdn_url=/'''/''/;----->指定文件一个共用的路径
    require.config({
    
        baseUrl: $cdn_url + 'cc/v2/publish/',----->设置一个基本路经,方便找到该路径下的其他文件,不用每次都输入相同路径
        // urlArgs: "bust=" +  (new Date()).getTime(),---->可以加个时间戳
        paths: {
            'jquery': $cdn_url + 'assets/libs/jquery',---->jquery.js对应的路径  不需要加.js,require可自己识别
            'datepicker': $cdn_url + 'assets/plugins/datepicker/js/datepicker'---->datepicker.js的路径
        },
    
        shim: {
            'underscore': {
                exports: '_'
            },
            'datepicker':{
                deps: ['jquery'],
                exports:'datepicker'
            },
             'daterangepicker':{
                deps: ['jquery','moment'],
                exports:'daterangepicker'
            },
            'mobiscroll':{
                deps: ['jquery'],
                exports:'mobiscroll'
            },
            'select2': {
                exports: 'select2'
            },
            'pagination': {
                deps: ['jquery'],
                exports: 'pagination'
            },
            'calendar': {
                deps: ['jquery'],
                exports: 'calendar'
            },
            'tip': {
                deps: ['jquery'],
                exports: 'tip'
            },
            'dialog': {
                deps: ['jquery'],
                exports: 'dialog'
            },
            'uploader': {
                deps: ['jquery'],
                exports: 'uploader'
            },
            'cropper': {
                deps: ['jquery'],
                exports: 'cropper'
            },
            'jcrop': {
                deps: ['jquery'],
                exports: 'jcrop'
            },
            'validate': {
                deps: ['jquery'],
                exports: 'validate'
            },
            'fancybox': {
                deps: ['jquery'],
                exports: 'fancybox'
            }
        }
    });
    3.在html文件引入这两个js文件
    <script src="libs/require.js"></script>
    <script src="common/js/config.min.js"></script>
    4.在js文件使用require
    require([
    "jquery",
    "echarts2",
    "dateRangePick",
    "tip",
    $cdn_url+"js/localData.min.js",

    $cdn_url+"js/selector.min.js"],function () {
    //这里可以使用你引入的js组件
          $('.xxx').html();

    }
    也可以定义一个xx.js,其实就是定义一个模块:
    define(
    ['jquery',
    'avalon',
    'echarts/echarts',
    'common/js/fun.min',
    'dialog',
    'echarts/chart/line',
    'echarts/chart/pie',
    'echarts/chart/bar',
    'select2',
    'tip',
    'calendar',
    'areapicker',
    'pagination',], function
    ($,
    avalon,
    echarts,
    Fn) {
        return {
          function1:function(option1){},
          table:function(option2){},
          }

    }
    在页面中使用的时候,就可以通过require把这个模块引入到页面中使用
    例如:
    <script type="text/javascript">
    require(['common/js/fun.min', 'common/js/chart.min', 'js/xx.min', 'echarts/echarts', 'select2', 'echarts/chart/line',], function(Fn, chart, dataCenter, echarts){

    // 视图 把xx.min.js中的return出来的对象定义名字叫dataCenter。这样一下就可以使用这个对象中的方法table

    var upTable = dataCenter.table({
    selector: '.js-detail', // 表格选择器
    url: 'xxx', // 更新表格URL
    vm: vmTable, // 表格avalon视图对象
    });
    </script>
     
     
     
  • 相关阅读:
    yii2 分页
    yii2 钩子函数
    linux 配置compoer
    Python随心记--迭代器协议和for循环机制
    Python随心记--文件操作处理 open()
    Python随心记--练习
    Python随心记--函数式编程及常用内置函数,及部分实例
    Python随心记--匿名函数
    Python随心记--函数作用域
    Python随心记--局部变量与全局变量
  • 原文地址:https://www.cnblogs.com/-youth/p/6169279.html
Copyright © 2011-2022 走看看