使用SeaJS实现模块化JavaScript开发

最新推荐文章于 2021-03-21 17:57:31 发布
最新推荐文章于 2021-03-21 17:57:31 发布
阅读量682 收藏
点赞数
分类专栏： js 文章标签： 模块化 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/39315107
版权

前言

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS的作者是淘宝前端工程师玉伯。

SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能感受到KISS原则的精髓——仅做一件事，做好一件事。

本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程，然后详细讨论SeaJS的使用方法，最后给出一些与SeaJS相关的资料。

传统模式 vs SeaJS模块化

假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。

传统开发

使用传统的开发方法，各个js文件代码如下：

 

  1. //module1.js
  2. var module1 = {
  3. run: function() {
  4. return $.merge(['module1'], $.merge(module2.run(), module3.run()));
  5. }
  6. }
  7.  
  8. //module2.js
  9. var module2 = {
  10. run: function() {
  11. return ['module2'];
  12. }
  13. }
  14.  
  15. //module3.js
  16. var module3 = {
  17. run: function() {
  18. return $.merge(['module3'], module4.run());
  19. }
  20. }
  21.  
  22. //module4.js
  23. var module4 = {
  24. run: function() {
  25. return ['module4'];
  26. }
  27. }
 

此时index.html需要引用module1.js及其所有下层依赖（注意顺序）：
 

 

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TinyApp</title>
  6. <script src="./jquery-min.js"></script>
  7. <script src="./module4.js"></script>
  8. <script src="./module2.js"></script>
  9. <script src="./module3.js"></script>
  10. <script src="./module1.js"></script>
  11. </head>
  12. <body>
  13. <p class="content"></p>
  14. <script>
  15. $('.content').html(module1.run());
  16. </script>
  17. </body>
  18. </html>
 

随着项目的进行，js文件会越来越多，依赖关系也会越来越复杂，使得js代码和html里的script列表往往变得难以维护。
 

SeaJS模块化开发
 

下面看看如何使用SeaJS实现相同的功能。
 

首先是index.html：
 

 

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TinyApp</title>
  6. </head>
  7. <body>
  8. <p class="content"></p>
  9. <script src="./sea.js"></script>
  10. <script>
  11. seajs.use('./init', function(init) {
  12. init.initPage();
  13. });
  14. </script>
  15. </body>
  16. </html>
 

可以看到html页面不再需要引入所有依赖的js文件，而只是引入一个sea.js，sea.js会处理所有依赖，加载相应的js文件，加载策略可以选择在渲染页面时一次性加载所有js文件，也可以按需加载（用到时才加载响应js），具体加载策略使用方法下文讨论。
 

index.html加载了init模块，并使用此模块的initPage方法初始化页面数据，这里先不讨论代码细节。
 

下面看一下模块化后JavaScript的写法：
 

 

  1. //jquery.js
  2. define(function(require, exports, module) = {
  3.  
  4. //原jquery.js代码...
  5.  
  6. module.exports = $.noConflict(true);
  7. });
  8.  
  9. //init.js
  10. define(function(require, exports, module) = {
  11. var $ = require('jquery');
  12. var m1 = require('module1');
  13.  
  14. exports.initPage = function() {
  15. $('.content').html(m1.run()); 
  16. }
  17. });
  18.  
  19. //module1.js
  20. define(function(require, exports, module) = {
  21. var $ = require('jquery');
  22. var m2 = require('module2');
  23. var m3 = require('module3');
  24.  
  25. exports.run = function() {
  26. return $.merge(['module1'], $.merge(m2.run(), m3.run())); 
  27. }
  28. });
  29.  
  30. //module2.js
  31. define(function(require, exports, module) = {
  32. exports.run = function() {
  33. return ['module2'];
  34. }
  35. });
  36.  
  37. //module3.js
  38. define(function(require, exports, module) = {
  39. var $ = require('jquery');
  40. var m4 = require('module4');
  41.  
  42. exports.run = function() {
  43. return $.merge(['module3'], m4.run()); 
  44. }
  45. });
  46.  
  47. //module4.js
  48. define(function(require, exports, module) = {
  49. exports.run = function() {
  50. return ['module4'];
  51. }
  52. });
 

乍看之下代码似乎变多变复杂了，这是因为这个例子太简单，如果是大型项目，SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性：
 

一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。
 

二是js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。
 

通过这个例子朋友们应该对SeaJS有了一个直观的印象，下面本文具体讨论SeaJS的使用。
 

使用SeaJS
 

下载及安装
 

要在项目中使用SeaJS，你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。
 

SeaJS项目目前托管在GitHub上，主页为 https://github.com/seajs/seajs/ 。可以到其git库的build目录下下载sea.js（已压缩）或sea-debug.js（未压缩）。
 

下载完成后放到项目的相应位置，然后在页面中通过<script>标签引入，你就可以使用SeaJS了。
 

SeaJS基本开发原则
 

在讨论SeaJS的具体使用前，先介绍一下SeaJS的模块化理念和开发原则。
 

使用SeaJS开发JavaScript的基本原则就是：一切皆为模块。引入SeaJS后，编写JavaScript代码就变成了编写一个又一个模块，SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。
 

另外，每个模块应该都定义在一个单独js文件中，即一个对应一个模块。
 

下面介绍模块的编写和调用。
 

模块的定义及编写
 

模块定义函数define
 

SeaJS中使用“define”函数定义一个模块。因为SeaJS的文档并没有关于define的完整参考，所以我阅读了SeaJS源代码，发现define可以接收三个参数：
 

 

  1. /**
  2. * Defines a module.
  3. * @param {string=} id The module id.
  4. * @param {Array.|string=} deps The module dependencies.
  5. * @param {function()|Object} factory The module factory function.
  6. */
  7. fn.define = function(id, deps, factory) {
  8. //code of function…
  9. }
 

上面是我从SeaJS源码中摘录出来的，define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。我阅读源代码后发现define对于不同参数个数的解析规则如下：
 

如果只有一个参数，则赋值给factory。
 

如果有两个参数，第二个赋值给factory；第一个如果是array则赋值给deps，否则赋值给id。
 

如果有三个参数，则分别赋值给id，deps和factory。
 

但是，包括SeaJS的官方示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似与如下代码：
 

 

  1. define(function(require, exports, module) {
  2. //code of the module...
  3. });
 

个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？
 

id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为 http://example.com/a.js ，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。
 

工厂函数factory解析
 

工厂函数是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：
 

  • require——模块加载函数，用于记载依赖模块。
  • exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
  • module——模块的元数据。
 

这三个参数可以根据需要选择是否需要显示指定。
 

下面说一下module。module是一个对象，存储了模块的元信息，具体如下：
 

  • module.id——模块的ID。
  • module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
  • module.exports——与exports指向同一个对象。
 

三种编写模块的模式
 

第一种定义模块的模式是基于exports的模式：
 

 

  1. define(function(require, exports, module) {
  2. var a = require('a'); //引入a模块
  3. var b = require('b'); //引入b模块
  4.  
  5. var data1 = 1; //私有数据
  6.  
  7. var func1 = function() { //私有方法
  8. return a.run(data1);
  9. }
  10.  
  11. exports.data2 = 2; //公共数据
  12.  
  13. exports.func2 = function() { //公共方法
  14. return 'hello';
  15. }
  16. });
 

上面是一种比较“正宗”的模块定义模式。除了将公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：
 

 

  1. define(function(require) {
  2. var a = require('a'); //引入a模块
  3. var b = require('b'); //引入b模块
  4.  
  5. var data1 = 1; //私有数据
  6.  
  7. var func1 = function() { //私有方法
  8. return a.run(data1);
  9. }
  10.  
  11. return {
  12. data2: 2,
  13. func2: function() {
  14. return 'hello';
  15. }
  16. };
  17. });
 

如果模块定义没有其它代码，只返回一个对象，还可以有如下简化写法：
 

 

  1. define({
  2. data: 1,
  3. func: function() {
  4. return 'hello';
  5. }
  6. });
 

第三种方法对于定义纯JSON数据的模块非常合适。
 

模块的载入和引用
 

模块的寻址算法
 

上文说过一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持如下标识：
 

绝对地址——给出js文件的绝对路径。
 

如
 

 

  1. require("http://example/js/a");
 

就代表载入 http://example/js/a.js 。
 

相对地址——用相对调用载入函数所在js文件的相对地址寻找模块。
 

例如在 http://example/js/b.js 中载入
 

 

  1. require("./c");
 

则载入 http://example/js/c.js 。
 

基址地址——如果载入字符串标识既不是绝对路径也不是以”./”开头，则相对SeaJS全局配置中的“base”来寻址，这种方法稍后讨论。
 

注意上面在载入模块时都不用传递后缀名“.js”，SeaJS会自动添加“.js”。但是下面三种情况下不会添加：
 

载入css时，如
 

 

  1. require("./module1-style.css");
 

路径中含有”?”时，如
 

 

  1. require(<a href="http://example/js/a.json?cb=func">http://example/js/a.json?cb=func</a>);
 

路径以”#”结尾时，如
 

 

  1. require("http://example/js/a.json#");
 

根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是seajs.use，require和require.async，下面分别介绍。
 

seajs.use
 

seajs.use主要用于载入入口模块。入口模块相当于C程序的main函数，同时也是整个模块依赖树的根。上面在TinyApp小例子中，init就是入口模块。seajs.use用法如下：
 

 

  1. //单一模式
  2. seajs.use('./a');
  3.  
  4. //回调模式
  5. seajs.use('./a', function(a) {
  6. a.run();
  7. });
  8.  
  9. //多模块模式
  10. seajs.use(['./a', './b'], function(a, b) {
  11. a.run();
  12. b.run();
  13. });
 

一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use，例如，上面TinyApp的index.html也可以改为如下写法：
 

 

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TinyApp</title>
  6. </head>
  7. <body>
  8. <p class="content"></p>
  9. <script src="./sea.js" data-main="./init"></script>
  10. </body>
  11. </html>
 

这种写法会令html更加简洁。
 

require
 

require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载：
 

 

  1. var m = require('/path/to/module/file');
 

这里简要介绍一下SeaJS的自动加载机制。上文说过，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加载进来的呢？SeaJS会首先下载入口模块，然后顺着入口模块使用正则表达式匹配代码中所有的require，再根据require中的文件路径标识下载相应的js文件，对下载来的js文件再迭代进行类似操作。整个过程类似图的遍历操作（因为可能存在交叉循环依赖所以整个依赖数据结构是一个图而不是树）。
 

明白了上面这一点，下面的规则就很好理解了：
 

传给require的路径标识必须是字符串字面量，不能是表达式，如下面使用require的方法是错误的：
 

 

  1. require('module' + '1');
  2.  
  3. require('Module'.toLowerCase());
 

这都会造成SeaJS无法进行正确的正则匹配以下载相应的js文件。
 

require.async
 

上文说过SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用到时才下载，可以使用require.async：
 

 

  1. require.async('/path/to/module/file', function(m) {
  2. //code of callback...
  3. });
 

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。
 

SeaJS的全局配置
 

SeaJS提供了一个seajs.config方法可以设置全局配置，接收一个表示全局配置的配置对象。具体使用方法如下：
 

 

  1. seajs.config({
  2. base: 'path/to/jslib/',
  3. alias: {
  4. 'app': 'path/to/app/'
  5. },
  6. charset: 'utf-8',
  7. timeout: 20000,
  8. debug: false
  9. });
 

其中base表示基址寻址时的基址路径。例如base设置为 http://example.com/js/3-party/ ，则
 

 

  1. var $ = require('jquery');
 

会载入 http://example.com/js/3-party/jquery.js 。
 

alias可以对较长的常用路径设置缩写。
 

charset表示下载js时script标签的charset属性。
 

timeout表示下载文件的最大时长，以毫秒为单位。
 

debug表示是否工作在调试模式下。
 

SeaJS如何与现有JS库配合使用
 

要将现有JS库如jQuery与SeaJS一起使用，只需根据SeaJS的的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：
 

 

  1. define(function() {
  2.  
  3. //{{{jQuery原有代码开始
  4. /*! 
  5. * jQuery JavaScript Library v1.6.1
  6. * http://jquery.com/
  7. *
  8. * Copyright 2011, John Resig
  9. * Dual licensed under the MIT or GPL Version 2 licenses.
  10. * http://jquery.org/license
  11. *
  12. * Includes Sizzle.js
  13. * http://sizzlejs.com/
  14. * Copyright 2011, The Dojo Foundation
  15. * Released under the MIT, BSD, and GPL Licenses.
  16. *
  17. * Date: Thu May 12 15:04:36 2011 -0400
  18. */
  19. //...
  20. //}}}jQuery原有代码结束
  21.  
  22. return $.noConflict();
  23. });
 

SeaJS项目的打包部署
 

SeaJS本来集成了一个打包部署工具spm，后来作者为了更KISS一点，将spm拆出了SeaJS而成为了一个单独的项目。spm的核心思想是将所有模块的代码都合并压缩后并入入口模块，由于SeaJS本身的特性，html不需要做任何改动就可以很方便的在开发环境和生产环境间切换。但是由于spm目前并没有发布正式版本，所以本文不打算详细介绍，有兴趣的朋友可以参看其github项目主页 https://github.com/seajs/spm/。
 

其实，由于每个项目所用的JS合并和压缩工具不尽相同，所以spm可能并不是完全适合每个项目。在了解了SeaJS原理后，完全可以自己写一个符合自己项目特征的合并打包脚本。
 

一个完整的例子
 

上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
 

  • index.html——主页面。
  • sea.js——SeaJS脚本。
  • init.js——init模块，入口模块，依赖data、jquery、style三个模块。由主页面载入。
  • data.js——data模块，纯json数据模块，由init载入。
  • jquery.js——jquery模块，对 jQuery库的模块化封装，由init载入。
  • style.css——CSS样式表，作为style模块由init载入。
  • sea.js和jquery.js的代码属于库代码，就不赘述，这里只给出自己编写的文件的代码。
 

html：
 

 

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="content">
  9. <p class="author"></p>
  10. <p class="blog"><a href="#">Blog</a></p>
  11. </div>
  12.  
  13. <script src="./sea.js" data-main="./init"></script>
  14. </body>
  15. </html>
 

javascript：
 

 

  1. //init.js
  2. define(function(require, exports, module) {
  3. var $ = require('./jquery');
  4. var data = require('./data');
  5. var css = require('./style.css');
  6.  
  7. $('.author').html(data.author);
  8. $('.blog').attr('href', data.blog);
  9. });
  10.  
  11. //data.js
  12. define({
  13. author: 'ZhangYang',
  14. blog: 'http://blog.codinglabs.org'
  15. });
 

css：
 

 

  1. .author{color:red;font-size:10pt;}
  2. .blog{font-size:10pt;}
 

运行效果如下：
 

 

主要参考文献&SeaJS学习资源
 

[1] SeaJS主页 – http://seajs.org
 

[2] SeaJS的GitHub库（可获取源码） – https://github.com/seajs/seajs
 

[3] SeaJS作者玉伯的博客 - http://lifesinger.wordpress.com/
 

 

 

延伸阅读
 

 

▶ Walkthrough007
 


                

        

        

    




    

      

        

            

              
                
                  曾经沧海难为水-除却巫山不是云
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
通过seajs实现JavaScript的模块开发及按模块加载

				
			

			

				

					10-16
				

			

		

		

			
				
seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。下面我们来一起深入学习下吧

			
		

	



                

              
                



	

		

			

				
					
抛弃seajs，走向requirejs

				
			

			

				

					uikoo9的专栏
				

				

					07-23
					
					1万+
					
				

			

		

		

			
				
【前言】
这篇文章是站在初学者的角度写的，大牛别碰，真实的个人想法，没有任何偏袒。


【痛苦的seajs】
之前说过，半年之前想尝试seajs，一直各种原因没有用起来，
最近使用了一周，算是基本上入门了，刚开始感觉这种管理js的办法不错，
但是后来开始推广到项目上就痛苦了。


【支持国产的心，无奈】
闲扯淡，
有一颗支持国产的心，之前考虑后台ui框架，第一选择是dwz，

			
		

	



                


  
              

                


	

		

			

				
					
Seajs是什么及其优缺点&如何使用？

				
			

			

				

					weixin_30713953的博客
				

				

					08-19
					
					415
					
				

			

		

		

			
				
这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下，有更好的新手教程或文档，欢迎推荐、分享！
1.Seajs简介

Seajs，一个Web模块加载框架，追求简单、自然的代码书写和组织方式，：Sea.js 遵循 CMD 规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。

2.Seajs优缺点

优...

			
		

	





	

		

			

				
					
module是什么文件php,seajs是什么文件

				
			

			

				

					weixin_42619061的博客
				

				

					03-21
					
					134
					
				

			

		

		

			
				
什么是 seaJS ？和requireJS相似的，seaJS 也是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载...

			
		

	



		

			
		



	

		

			

				
					
SeaJS使用教程

				
			

			

				

					xiongzhengxiang的专栏
				

				

					06-28
					
					706
					
				

			

		

		

			
				
前言


SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对

			
		

	





	

		

			

				
					
自学了三天的SeaJs学习，解决了前端的一些问题，与小伙伴们一起分享一下！...

				
			

			

				

					weixin_34099526的博客
				

				

					06-21
					
					189
					
				

			

		

		

			
				
我为什么学习SeaJs？
【第一】：为了解决项目中资源文件版本号的问题，以及打包压缩合并等问题。
【第二】：好奇心和求知欲。【我发现很多知名网站也都在使用（qq空间, msn, 淘宝等等），而且 SeaJs 也得到了很好的推广与应用】。
【第三】：经过了解得知 淘宝的 玉伯 是 湖南炎陵 人，觉得他很牛X。

【强烈】给小伙伴们推荐一个玉伯的讲的 SeaJs PDF 学习资料,下载...

			
		

	





	

		

			

				
					
JavaScript模块化开发之SeaJS

				
			

			

				

					10-23
				

			

		

		

			
				
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS，需要的朋友参考下

			
		

	





	

		

			

				
					
模仿seajs模块化加载的自行实现练习

				
			

			

				

					12-19
				

			

		

		

			
				
这是自己编写的模仿seajs模块加载的模块加载器，用于学习交流之用。大致模仿seajs的模块化加载实现。

			
		

	





	

		

			

				
					
JavaScript 模块化开发实例详解【seajs、requirejs库使用】

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了JavaScript 模块化开发,结合实例形式详细分析了基于seajs、requirejs库的JavaScript模块化使用相关操作技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
再谈 JS中的模块规范（CommonJS，AMD，CMD）来自玉伯的seajs分析

					
热门推荐

				
			

			

				

					小北哥哥和北妈
				

				

					05-27
					
					1万+
					
				

			

		

		

			
				
随着互联网的飞速发展，前端开发越来越复杂。本文将从实际项目中遇到的问题出发，讲述模块化能解决哪些问题，以及如何使用 Sea.js 进行前端的模块化开发。恼人的命名冲突我们从一个简单的习惯出发。我做项目时，常常会将一些通用的、底层的功能抽象出来，独立成一个个函数，比如function each(arr) {
  // 实现代码
}

function log(str) {
  // 实现代码
}并像

			
		

	





	

		

			

				
					
通过javascript控制页面全屏显示

				
			

			

				

					欢迎来到我的博客
				

				

					07-20
					
					268
					
				

			

		

		

			
				
由于项目的需要，有时候需要对页面进行全屏显示，说到底就是就是我们常用的F11，H5提供了相应的API，目前google chrome 15 +, safri5.1+,firfox10+,IE1能够很好的支持该属性，低版本的IE可以通过ActiveX插件实现。

简单粗暴，直接上代码

定义全屏显示函数


function fullScreen() {

  var el = document.d...

			
		

	





	

		

			

				
					
前台对Seajs的用法个人见解

				
			

			

				

					weixin_34019929的博客
				

				

					12-30
					
					141
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
010 - Seajs使用实例入门介绍

				
			

			

				

					李观杰的博客
				

				

					07-10
					
					321
					
				

			

		

		

			
				
Seajs使用实例入门介绍

			
		

	





	

		

			

				
					
前端大牛们都学过什么

				
			

			

				

					liuyingv8的博客
				

				

					01-26
					
					581
					
				

			

		

		

			
				
前端大牛们都学过哪些？让我们看看对大牛的怎么说。以下资料来自对去哪儿网司徒正美的采访。
问：你认为前端都要学哪些基础知识？
司徒正美：HTML ，CSS， JS， 设计模式， UML， less, sass, 语言范式， 算法， 数据算法。
问：你都看过哪些书？
司徒正美：看的书太多了，记不清了，可以去京东搜搜，前端有质量的书都翻过，不过都是出版社赠书，就像火车沿途的风景。
问：你觉得成

			
		

	





	

		

			

				
					
一步步学会使用SeaJS 2.0

				
			

			

				

					C860_zy的专栏
				

				

					04-19
					
					3541
					
				

			

		

		

			
				
本文分为以下8步，熟悉之后就能够熟练使用SeaJS，从此之后你的生活会变得更加轻松愉悦！
1、SeaJS是什么？
2、下载并检阅SeaJS
3、建立工程和各种目录
4、引入SeaJS库
5、编写自己的代码
6、引入自己的代码
7、压缩合并
8、总结展望





--------------------------------------------------

			
		

	





	

		

			

				
					
requirejs和seajs的基本使用与简单区别

				
			

			

				

					这个昵称没有被占用吧的博客
				

				

					08-25
					
					3498
					
				

			

		

		

			
				
项目中一直在使用requirejs，鉴于requirejs和seajs经常被用来做比较，本篇文章就简单介绍下requirejs和seajs和它们之间的一些区别，后续会阅读两者的源码深入了解（挖坑中。。。）



从例子入手介绍requirejs基本用法：

1、引入requirejs

&amp;lt;script src=&quot;require.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
此处再引入requ...

			
		

	





	

		

			

				
					
AMD,CMD，CommonJS以及RequireJS和SeaJS的个人感悟

				
			

			

				

					jsdchenye的专栏
				

				

					11-04
					
					4105
					
				

			

		

		

			
				
今天打开项目群，老大为我们：谁的项目现在在用CommonJS，由于我前段时间接手的项目用到了require来引入新的模块，所以立马说我用到了。之后发现不对经，我好像用的RequireJS模块。越想越觉得模糊，索性在网上找了些文档看了下，下面是我个人的感受。

CommonJS:就是用来规范JS的使用的，主要为了JS在后端的表现制定的，不太适合前端。它定了三个模块：模块引用的require，模块

			
		

	





	

		

			

				
					
模块化 cmd amd commonjs

					
最新发布

				
			

			

				

					03-25
				

			

		

		

			
				
模块化是一种将程序中的代码按照一定的规则拆分成独立的模块，使得代码的维护和复用更加方便的技术。...同时，由于 ECMAScript 6 以后原生支持模块化，使用 import 和 export 关键字即可实现模块化编程，更加简洁方便。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值