seajs学习笔记(基础)

一:前端开发中常遇到的问题

      如果我们的网站简单的时候,结构上也许不会有什么问题,但是如果我们的网站越来复杂的时候(比如功能越来越多的时候,加入项目的人越来越多的时候),我们书写的代码就会遇到下面的两个问题:

1. 恼人的命名冲突

比如我们多人开发一个项目,事先由我自己写好了一个共公的组件库common.js供大家调用,里面的包括

function tab(){

实现代码:

};

function drag(){

实现代码:

};

function dialog(){

实现代码:

};.........

同事用的时候直接在页面里引入common.js,然后调用下面的方法即可,如果后面又有一些新的同事加进来,他们在做其它的功能开发的时候,很有可能在页面也会出现我组件库里的方法,这样这两个组件之间就出现了冲突,是很影响功能效果的。

这个时候我们通常的做法是用命名空间来解决冲突的问题:比如原来的common.js变成

org.tab=function(){

实现代码:

};

org.drag=function(){

实现代码:

};

org.dialog=function(){

实现代码:

}

这样做在一定的程度上是解决了命名冲突的问题,但是由于前面的名字有可能比较长,调用的时候并不是特别的方便,而且这种做法只是降低了命名冲突的问题,并不能完全解决这个问题。看似简单的冲突问题,但是如何才能优雅的解决,解决方案先不讲,先看下面一个问题。

2. 繁琐的文件依赖

继续上面的例子,我接着ul层通用组件,这样其他的同事就不用再重复的写了。

其中有一个被大家非常喜欢的组件是tab.js,使用方法很简单。例如下面的调用

<script src="common.js"></script>

<script src="tab.js"></script>

但是即便它非常的好用,还是会有同事跑过来说这个组件在调用的过程中会出现问题,经过一番的排查发现,原来在调用tab.js之前没有引用common.js,导致tab.js无法正常工作。

所以从以上的问题中可以看出,冲突与依赖是前端开发中经常出现的问题,下面我们来看如何用模块化开发来解决,我们使用Seajs作为模块开发的框架。

二:Sea.js是什么?

       sea.js是一个加载器,是淘宝前端攻城师玉伯所著,他是根据commonjs规范的一种表现。何为commonJS?commonJs可以理解成一个组织,他们中的所有人都致力于提高javascript程序的可移植性以及可交互性。这种可移植性以及可交互性不仅仅局限于浏览器端,而且也包括了服务器端的javascript.

那seaJS到底是什么呢?seaJS就是根据commonJS组织规范写的一个加载器。其内部可用的API并不多主要有以下几个:alias,config,use,define。主要就这四个API。seaJS主要就是根据这四个API对其环境中的javascript进行管理的。

  sea.js主要用在大型项目或是多人合作的时候,如果小型的企业网站完全没有必要用到它。另外,同 sea.js很相似的还有一个模块开发的加载器,它叫require.js。它们之间有什么不同呢?

sea.js是国产的,遵循CMD(common module define)规范    下载官网:http://seajs.org/docs/

require.js是进口的,遵循AMD(Asynchronous module define)规范,下载官网:http://www.requirejs.org/


三:为什么我们要使用Sea.js?

 

        seajs追求简单、自然的代码书写和组织方式,具有以下的核心特征:

1.简单友好的模块定义规范:sea.js遵行CMD规范,可以像Node.js一样书写模块代码;

2.自然直观的代码组织方式:依赖的自动加载、配置简洁清晰,可以让我们更多的享受编码的乐趣;

sea.js提供了常用插件,非常有助于开发调试和性能优化,并具有丰富的可可扩展接口;

四:Sea.js的兼容性

      sea.js有着完备的测试用例,兼容所有的主流浏览器

chrome 3+    √

FireFox 2+    √

Safari  3.2+   √

opera  10+   √

IE5.5+          √

sea.js还可以运行在Mobiel端,包括Hybrid上。理论上sea.js可以运行在任何的浏览器引擎上。

时间: 2024-10-20 17:08:54

seajs学习笔记(基础)的相关文章

hadoop学习笔记——基础知识及安装

1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操作.NameNode执行文件系统的命名空间操作,比如打开关闭重命名文件或者目录等,它也负责数据块到具体DataNode的映射 2)集群中的DataNode管理存储的数据.负责处理文件系统客户端的文件读写请求,并在NameNode的统一调度下进行数据块的创建删除和复制工作. 3)NameNode是所有

渗透学习笔记--基础篇--sql注入(字符型)

环境:dvwa1.7数据库:mysql前置知识:sql语句(Click me)      在进行sql注入前,我们先熟悉熟悉select语句.一.打开我们的sql终端 二.进入之后可以看到有mysql>我们输入sql语句,即可返回我们想要的结果,注意分号哟!我们使用的dvwa,在我们前几章设置的时候,会在数据库中生成一个dvwa的database:这里我们使用它来进行我们的select 语句:(1)使用dvwa数据库use dvwa;(2)在users表里查询用户名为'admin'的所有信息se

iOS开发学习笔记:基础篇

iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境),Xcode是一个集成开发环境,包括了编辑器.调试.模拟器等等一系列方便开发和部署的工具,iOS SDK则是开发应用所必需,不同的SDK分别对应不同的iOS版本或设备,通常我们需要下载多个iOS SDK以确保我们开发的程序能够在不同版本的iOS上正常运行. 创建新工程 Xcode提供了很多种工程模

Python学习笔记基础篇——总览

Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列表.字典.主文件判断.对象 Python学习笔记——基础篇1[第三周]——set集合 Python学习笔记——基础篇2[第三周]——计数器.有序字典.元组.单(双)向队列.深浅拷贝.函数.装饰器 Python学习笔记——基础篇[第四周]——迭代器&生成器.装饰器.递归.算法.正则表达式 Python

《python基础教程(第二版)》学习笔记 基础部分(第1章)

<python基础教程(第二版)>学习笔记基础部分(第1章)IDEWindows: IDLE(gui), Eclipse+PyDev; Python(command line);Linux/Unix: python >>> 1/2=0 注意整除得0>>> from __future__ import division 执行普通的除法python -Qnew 执行普通的除法 //整除,  1//2=0:%取余数:**乘幂长整型数: 末尾带L十六进制,以0x开头

Objective-c学习笔记—— 基础内容

6.5.1 多重继承 Python也支持多种继承形式.一个能继承多个基类的类定义如下: class DerivedClassName(Base1, Base2, Base3): <statement-1> . . . <statement-N> 大多数情况,最简单而言,你可以把从父类继承下来的属性查询看成是遵循深度优先,从左到右. 而不是在同一等级重复的同样类中执行两次.因此,如果一个属性没在派生类中找到,首先会在base1然后再base1的基类中,如果在那里都没发现,就会在bas

seaJs学习笔记2 – seaJs组建库的使用

原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最近在学习seaJs和AngualrJs的指令和服务,感觉angularjs实在太强大了,好吧,步入主题,今天在深入了解seaJs的时候发现了一款神器,不过这款神奇貌似没有更新和维护了,但我测试了一下,还是可以用的. 这款神奇就是SeaJS 组件库 ,Sea.js 是一个适用于 Web 浏览器端的模块

MySQL学习笔记-基础入门

MySQL学习笔记

seajs学习笔记一

一.模块化管理的重要性     1.解决冲突问题 2.解决性能问题 3.解决依赖问题 二.为何选择seajs 1.有完整的中文文档 2.符合中国国情 三.seajs如何使用 1.引入seajs库文件 2.如何变成模块 define /*引入好seajs后如何将js文件变成模块*/ define(function(require,exports,module){ /*require,exports,module-seajs规定写法不可修改,变值,重命名*/ /*exports:对外接口 */ fu