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>
 
 
 

require.js结合项目的使用心得的更多相关文章

  1. require.js使用教程

    require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...

  2. require.js使用

    无可奈何,二开项目用了require.js! 一道槛是挨不过去了 require官网: http://requirejs.org/ require.js cdn: <script src=&qu ...

  3. Require,js配置使用心得

    首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...

  4. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

  5. ASP.NET MVC应用require.js实践

    这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41d6ad.html Require.js是一个支持j ...

  6. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  7. require.js入门指南(二)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. require.js入门指南(一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  9. require.js优化器

    项目发布前,require.js优化器可以合并require.js各个模块. 官网: http://requirejs.org/docs/optimization.html 安装 npm instal ...

随机推荐

  1. 删除mysql主从

    在创建数据库主从配置后,若想删除数据库的主从服务可根据以下步骤来删除数据库主从 1.停止slave服务器的主从同步   为了防止主从数据不同步,需要先停止slave上的同步服务, STOP SLAVE ...

  2. Solr5.0.0 DIH之增量索引

    定时索引相关知识 增量更新需要配置个sql(deltaImportQuery.deltaQuery) deltaImportQuery="select * where id='${dih.d ...

  3. CodeForces:847D-Dog Show

    D. Dog Show time limit per test2 seconds memory limit per test256 megabytes Problem Description A ne ...

  4. SGU 149 树形DP Computer Network

    这道题搜了一晚上的题解,外加自己想了半个早上,终于想得很透彻了.于是打算好好写一写这题题解,而且这种做法比网上大多数题解要简单而且代码也比较简洁. 首先要把题读懂,把输入读懂,这实际上是一颗有向树.第 ...

  5. vscode python code-runner 中文乱码解决

    https://www.cnblogs.com/zhaoshizi/p/9050768.html 这里我使用的是第二种方法

  6. Python内置函数5

    Python内置函数5 1.format参考前面字符串方法中的format 2.frozenset([iterable]) iterable -- 可迭代的对象,比如列表.字典.元组等等 返回一个冻结 ...

  7. centos dhcp 服务器搭建 多vlan

    centos dhcp 服务器搭建   多vlan centos 6.5   版本     /etc/dhcp/dhcpd.conf         服务器配置文件 /etc/rc.d/init.d/ ...

  8. Codeforces Round #390 (Div. 2) A+B+D!

    A. Lesha and array splitting 水题模拟.(0:10) 题意:给你一个n个元素的数组,求能否把这个数组分成若干连续小段,使得每段的和不为0.如有多种解输出任意一个. 思路:搞 ...

  9. OSQL 用法

    osql中的启动参数如下: -?:列出osql各个参数的语法摘要. -U login_id:用来指出登录名称,登录名区分大小写. -P password:用来指出登录名称所对应的密码. -E:表示采用 ...

  10. leetcode 319 灯泡问题

    例子:1-9 1的因子1 2       1,2 3        1,,3 4        1,2,4 5        1,5 6        1,2,3,6 7        1,7 8   ...