seajs的使用--主要了解模块化
一个使用sea.js的Demo
sea.js可以解决命名问题,js文件间的依赖等.
index.html内容如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../js/sea.js"></script>
</head>
<body>
<script>
//jquery 1.8.2用不了.建议1.10.2以上.
seajs.config({
base: "/js/",
alias: { "jquery": "jquery-1.10.2.js" }
}); seajs.use(['jquery', 'test'], function ($, test) {
$(document).ready(function () {
test.doSomething('Jquery ready.');
$("body").append('hello');
});
}); </script>
<p id="p1"></p> <script>
/*
恼人的命名冲突
在一个util.js文件里有function each(arr){...};function log(str){...};
一个页面在引用该util.js后,可能还有应用其他js文件,或者写该页面内部js脚本.
其他的js文件或者脚本可能也会命名each,log等方法,导致命名冲突,程序异常.
*/
var ice = {};
ice.common = {};
ice.common.greet = function () {
alert('hello world!');
}; (function (window) {
//此处的代码不会污染全局作用域 })(window);
</script>
</body>
</html>
第16行: seajs.use(['jquery', 'test'], function ($, test) {...
需要加载 test.js,内容如下:
define(function (require, exports, module) {
//define(id,依赖,function())可以是3个参数
//如:define('test', ['jquery'],function (require, exports, module) {
// 通过 require 引入依赖
// var $ = require('/js/jquery-1.10.2.js');
// 通过 exports 对外提供接口
exports.doSomething = function (str) {
alert(str);
};
// 或者通过 module.exports 提供整个接口
});
附:seajs的学习网站
seajs的使用--主要了解模块化的更多相关文章
- 模块化之SeaJS(一)
模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一 ...
- seajs模块化加载框架使用
seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- seaJS
1. seajs是用来进行模块化管理,将每一个功能当做是一个功能模块,在模块之间运用require进行连接,类似于java/C++/C等语言中的类. 2. 在文件html 的尾部引入入seajs的文件 ...
- Seajs是什么及sea.js 由来，特点以及优势
Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1 ...
- seajs 源码解读
之前面试时老问一个问题seajs 是怎么加载js 文件的 在网上找一些资料,觉得这个写的不错就转载了,记录一下,也学习一下 seajs 源码解读 seajs 简单介绍 seajs是前端应用模块化开发的 ...
- 我的前端之旅--SeaJs基础和spm编译工具运用[图文]
标签:seajs nodejs npm spm js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...
- 前端工程之模块化（来自百度FEX）
模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...
- 一步步学会使用SeaJS(转)
原文出处:一步步学会使用SeaJS 2.0 本文分为以下8步,熟悉之后就能够熟练使用SeaJS,从此之后你的生活会变得更加轻松愉悦! 1.SeaJS是什么? 2.下载并检阅SeaJS 3.建立工程和各 ...
随机推荐
- C#_技巧：计算代码块运行的时间
System.Diagnostics下类Stopwatch,给程序代码块运行计时, 利用start()和stop()方法来标记代码快. 该命名空间下还有一些其他类,可以对程序进行诊断(diagnosi ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- Module Zero之用户管理
返回<Module Zero学习目录> 用户实体 用户管理者 用户认证 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...
- 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (7) -----第二章 实体数据建模基础之拆分实体到多表以及拆分表到多实体
2-6 拆分实体到多表 问题 你有两张或是更多的表,他们共享一样的主键,你想将他们映射到一个单独的实体. 解决方案 让我们用图2-15所示的两张表来演示这种情况. 图 2-15,两张表,Prodeuc ...
- Js toString()方法笔记
一.前言 toString()用于将该对象以字符串(string)的形式返回,该方法属于Object对象;也就是说对象都能够使用此方法. 之前所接触的是array.toString()数组转换为字符串 ...
- error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“MTd_StaticDebug”
今日VS2012 C++编译出现一堆错误: > 正在生成代码... >Code.obj : error LNK2005: "public: __thiscall std::_Co ...
- WCF学习之旅——第一个WCF示例（二）
第四步:通过自我寄宿的方式寄宿服务 WCF服务需要依存一个运行着的进程(宿主),服务寄宿就是为服务指定一个宿主的过程.WCF是一个基于消息的通信框架,采用基于终结点(Endpoint)的通信手段. 终 ...
- 薪资至少10K的一道题，你能拿下吗
我所了解的华为: 应届本科生8k+ 应届硕士生10k+ 应届博士生12k+ 看到后什么感想?有没有只恨生不逢时运不佳的感觉? 很多人做3年多甚至更久,才能达到这个薪资水平,还不如一个新生. 在我看来, ...
- 服务器.htaccess 详解以及 .htaccess 参数说明（转载）
htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到限 ...