html引入layer.js,require.js引用jquery、layer的简单实例用法
来源: 未知
发布时间: 2017-10-13
次浏览
用法:
第一步在html页面上引入JS:
第一个require.js,注意引用的时候加了一个data-main="./index",其中里面的index就是第三个引用的index.js的名字
第二个requirejs-config我们需要配上插件的路径
代码如下
// 获取基础路径
function getBaseURL() {
if (!window._baseUrl) {
var local = window.location;
var contextPath = local.pathname.split("/")[1];
//window._baseUrl = local.protocol + "//" + local.host + "/" + contextPath + "/";//加项目名:如http://localhost:8080/pro
window._baseUrl = local.protocol + "//" + local.host + "/";//不加项目名:如http://localhost:8080
}
return window._baseUrl;
};
window.CLIENT_PATH=getBaseURL();
// 基础配置
window.requireConfig = {
"baseUrl": window.CLIENT_PATH,
"paths": {
"jquery" : "assets/jquery/jquery-1.9.1",/* jquery */
"layer" : "assets/layer/layer",/*layer弹窗*/
"underscore": "assets/lodash/underscore-min",/*underscore模板*/
},
"shim": {
"layer": {
"deps": ["jquery"]
}
}
};
function require_js(name, url, deps) {
window.requireConfig["paths"][name] = url;
if (deps) {
window.requireConfig["shim"][name] = {
"deps": deps
};
}
}
//依赖前置,引用某个JS的时候把另一个提前引用一下
function require_shim(name, deps) {
if (!window.requireConfig["shim"][name]) {
window.requireConfig["shim"][name] = {
"deps": deps
};
} else {
window.requireConfig["shim"][name]["deps"] = window.requireConfig["shim"][name]["deps"].concat(deps);
}
}
//服务端地址
window._serverPath="http://xxx.xxx.xx.xx:xxxx";
第三个index.js就是程序主入口
代码如下
require_js('Config', 'require/js/config');
//执行配置
require.config(window.requireConfig);
define('index',function(require,exports,module){
var $=require('jquery');
var layer=require('layer');
var Config = require('Config');
layer.config({
path: window._baseUrl + 'assets/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});
var layerIndex = null;
var Page={
init:function(){
layer.alert(Config.a);
}
};
$(function() {//程序入口
Page.init();
});
window.Config = Config;//把常量提供到页面上
});
html引入layer.js,require.js引用jquery、layer的简单实例用法相关推荐
- php引入路径配置,require.js的路径配置和css的引入方法详解
这篇文章主要介绍了详解require.js配置路径的用法和css的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前 ...
- jQuery Datatable 实用简单实例
目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时,jQuery Datatable强大的功能支持:排序,分页,搜索等. Query Data ...
- Require.js的基本用法详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...
- Require.js
前言 前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...
- require.js基本认识
基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...
- require.js学习记录
1.简介 官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-brows ...
- require.js的用法:
require.js的用法: 1.作用: 1>实现js文件的异步加载,避免网页失去相应. 2>管理模块之间的依赖性,便于代码的编写和维护. 2.下载 官网下载地址:http ...
- Javascript模块化编程(三):require.js的用法
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- require.js基本用法
1.require.js的加载 使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. 1 <script src="js/ ...
最新文章
- Mysql创建、删除用户
- ms计算机选择题,MS计算机选择题.docx
- Android BottomNavigation Demo
- spring 4.3.x_如何在Spring 3.x中使用事件
- Linux系统Shutdown命令定时关机详解
- php如何从获取数据,如何从​​获取值并保存到php的数据库
- 自用软件系列之:迅雷X ,无广告,纯净版
- vb.net 教程 3-8 窗体编程 容器 3 SplitContainer
- 酒店客房预订管理系统简单实现
- OpenCASCADE7.6编译
- java分库框架shard_架构组件:基于Shard-Jdbc分库分表,数据库扩容方案-Go语言中文社区...
- Qt Event(Qt事件)
- python加载模型包_R中的错误:需要h5py Python包来保存和加载模型
- python绘图之Times New Roman字体以及Helvetica字体
- 唯一分解之Pollard-Rho算法
- 获取淘宝价格区间l-r的商品a的详细信息(商品名等)
- 码农小白 设计模式篇 状态模式
- C#程序设计实践课程设计之数字华容道
- SAP如何将物料账期跨年月一次性开到当前
- O’Shea基于深度学习调制识别代码
热门文章
- 项目中出现specify @BootstrapWith‘s ‘value‘ attribute or make the default bootstrapper class avail
- JVM运行时内存概念-堆栈及新生代、老年代、持久代
- mysql加密复制_MySQL主从复制使用SSL加密
- 催护 ---- 题都城南庄
- RestTemplate返回List类型,用数组接收
- MySQL 快速删除大量解决方案
- Android开发笔记(八)神奇的shape
- nginx 负载均衡 最初级版本
- 马斯克的挖隧道公司再下一城,未来或将首次实现短途通勤
- SQL 个版本下载地址