一个使用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的学习网站

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. ASP.NET Core 数据保护（Data Protection）【上】

    前言 上一篇博客记录了如何在 Kestrel 中使用 HTTPS(SSL), 也是我们目前项目中实际使用到的. 数据安全往往是开发人员很容易忽略的一个部分,包括我自己.近两年业内也出现了很多因为安全问 ...

  2. Lesson 12 Goodby and good luck

    Text Our neighbour, Captain Charles Alison, will sail from Portsmouth tomorrow. We'll meet him at th ...

  3. AutoMapper使用手册(一)

    阅读目录 1. 介绍 2. 基本使用 3. 自动分割映射(Flattening) 4. 自定义字段映射(Projection) 5. 验证配置(Configuration validation) 介绍 ...

  4. Module-Zero之发布说明

    返回<Module Zero学习目录> ABP v0.7.6.0 创建组织单元系统. 升级了nuget包. 小修复和改进. 注意: AbpUserManager的构造函数更新了.添加了组织 ...

  5. 基于空项目模板创建使用Owin来host的WebApi项目

    首先创建一个空的web项目,如下图所示: 项目创建成功以后,安装下面三个package. Install-Package Microsoft.AspNet.WebApi -Version 5.2.2I ...

  6. 电脑桌面 IE 图标删除不了的解决方法

    电脑换了系统之后想把桌面的IE浏览器给删掉,可是直接删除又删不掉,杀毒软件查杀也没有问题.找了很多方法,终于才把它给解决了.下面,就把我的方法分享给桌面ie图标删除不了的解决方法,希望能对大家有所帮助 ...

  7. salesforce 零基础学习（四十九）自定义列表分页之使用Pagination实现分页效果 ※※※

    上篇内容为Pagination基类的封装,此篇接上篇内容描述如何调用Pagination基类. 首先先创建一个sObject,起名Company info,此object字段信息如下: 为了国际化考虑 ...

  8. Red Gate(SQLToolbelt)SQL Server的安装与注册(破解)

    Red Gate(SQLToolbelt)是SQL Server辅佐工具 1.SQL Compare 比较和同步SQL Server数据库结构 2.SQL Data Compare 比较和同步SQL ...

  9. [转] Android优秀开源项目

    Android经典的开源项目其实非常多,但是国内的博客总是拿着N年前的一篇复制来复制去,实在是不利于新手学习.今天爬爬把自己熟悉的一些开源项目整理起来,希望能对Android开发同学们有所帮助.另外, ...

  10. react UI交互 简单实例

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...