一个使用sea.js的Demo

sea.js可以解决命名问题,js文件间的依赖等.

index.html内容如下:

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title></title>
  6.      <script src="../js/sea.js"></script>
  7.  </head>
  8.  <body>
  9.      <script>
  10.          //jquery 1.8.2用不了.建议1.10.2以上.
  11.          seajs.config({
  12.              base: "/js/",
  13.              alias: { "jquery": "jquery-1.10.2.js" }
  14.          });
  15.  
  16.          seajs.use(['jquery', 'test'], function ($, test) {
  17.              $(document).ready(function () {
  18.                  test.doSomething('Jquery ready.');
  19.                  $("body").append('hello');
  20.              });
  21.          });
  22.  
  23.      </script>
  24.      <p id="p1"></p>
  25.  
  26.      <script>
  27.          /*
  28.              恼人的命名冲突
  29.              在一个util.js文件里有function each(arr){...};function log(str){...};
  30.              一个页面在引用该util.js后,可能还有应用其他js文件,或者写该页面内部js脚本.
  31.              其他的js文件或者脚本可能也会命名each,log等方法,导致命名冲突,程序异常.
  32.          */
  33.          var ice = {};
  34.          ice.common = {};
  35.          ice.common.greet = function () {
  36.              alert('hello world!');
  37.          };
  38.  
  39.          (function (window) {
  40.              //此处的代码不会污染全局作用域
  41.  
  42.          })(window);
  43.      </script>
  44.  </body>
  45.  </html>
  1. 第16行: seajs.use(['jquery', 'test'], function ($, test) {...
    需要加载 test.js,内容如下:
  1.  define(function (require, exports, module) {
  2.      //define(id,依赖,function())可以是3个参数
  3.      //如:define('test', ['jquery'],function (require, exports, module) {
  4.  
  5.      // 通过 require 引入依赖
  6.      // var $ = require('/js/jquery-1.10.2.js');
  7.  
  8.      // 通过 exports 对外提供接口
  9.      exports.doSomething = function (str) {
  10.          alert(str);
  11.      };
  12.  
  13.      // 或者通过 module.exports 提供整个接口
  14.  });

附:seajs的学习网站

http://seajs.org/docs/

seajs的使用--主要了解模块化的更多相关文章

  1. 模块化之SeaJS(一)

    模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一 ...

  2. seajs模块化加载框架使用

    seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...

  3. 【模块化编程】理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...

  4. seaJS

    1. seajs是用来进行模块化管理,将每一个功能当做是一个功能模块,在模块之间运用require进行连接,类似于java/C++/C等语言中的类. 2. 在文件html 的尾部引入入seajs的文件 ...

  5. Seajs是什么及sea.js 由来，特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

  6. seajs 源码解读

    之前面试时老问一个问题seajs 是怎么加载js 文件的 在网上找一些资料,觉得这个写的不错就转载了,记录一下,也学习一下 seajs 源码解读 seajs 简单介绍 seajs是前端应用模块化开发的 ...

  7. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  8. 前端工程之模块化（来自百度FEX）

    模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...

  9. 一步步学会使用SeaJS(转)

    原文出处:一步步学会使用SeaJS 2.0 本文分为以下8步,熟悉之后就能够熟练使用SeaJS,从此之后你的生活会变得更加轻松愉悦! 1.SeaJS是什么? 2.下载并检阅SeaJS 3.建立工程和各 ...

随机推荐

  1. Event,delegate,handler之间的关系

    在C#或者说.Net的事件处理机制中,有三个关键的概念 - 事件(Event),委托(Delegate)和处理器(Handler),另外在面向对象的背景中,还有另外两个概念 - 发送者(Sender) ...

  2. 《.NET之美》消息及勘误

    <.NET之美>消息及勘误 编辑最终还是采用了<.NET之美>作为书名,尽管我一直觉得这个名字有点文艺了,而更倾向于使用<.NET专题解析>这个名称. 目前已经可以 ...

  3. DotNet Core 介绍

    前言 asp.net core rtm 6月底即将发布,自己也想着为社区做点共享,刚好最近不太忙,看到社区的小伙伴们都在为dotnet core的推广而贡献力量,项目中刚好在用rc2版本,就多写些文章 ...

  4. .NET Fringe 定义未来

    在dotnetconf 2015会宣布了4.12-14 在波特兰召开 .NET Fringe http://dotnetfringe.org/ ,中文社区很少有相关的介绍,本文向大家介绍下这个.NET ...

  5. IIS 8：IIS 入门

    深埋在您的 Microsoft 服务器 (2008年. 2008 R2 和 2012年的版本) 的范围内是最强大的 Web 服务器可用. 它只等待你来发挥其全部潜力. 您的目标是要从家里运行一个 Wo ...

  6. Hadoop学习笔记—6.Hadoop Eclipse插件的使用

    开篇:Hadoop是一个强大的并行软件开发框架,它可以让任务在分布式集群上并行处理,从而提高执行效率.但是,它也有一些缺点,如编码.调试Hadoop程序的难度较大,这样的缺点直接导致开发人员入门门槛高 ...

  7. MySQL 基础及性能优化工具

    数据库,用户及权限 常用用户管理操作 # 创建本地用户 abc create user abc@localhost # 创建内网能够访问的用户 abc create user abc@'192.168 ...

  8. MapReduce剖析笔记之二：Job提交的过程

    上一节以WordCount分析了MapReduce的基本执行流程,但并没有从框架上进行分析,这一部分工作在后续慢慢补充.这一节,先剖析一下作业提交过程. 在分析之前,我们先进行一下粗略的思考,如果要我 ...

  9. .Net组件程序设计之线程、并发管理（一）

    .Net组件程序设计之线程.并发管理(一) 1.线程 线程 线程的创建 线程的阻塞 线程挂起 线程睡眠 加入线程 线程中止 现在几乎所有的应用程序都是多线程的,给用户看来就是一个应用程序界面(应用程序 ...

  10. WCF basicHttpBinding之Transport Security Mode, clientCredentialType="None"

    原创地址:http://www.cnblogs.com/jfzhu/p/4071342.html 转载请注明出处 前面文章介绍了<WCF basicHttpBinding之Message Sec ...