Tiefe Kopie von Objekten in JavaScript

Was ist modulare Entwicklung?

In der Front-End-Entwicklung müssen Sie zunächst nur Dutzende oder Hunderte von Codezeilen in Skript-Tags einbetten, um einige grundlegende interaktive Effekte zu erzielen. Später gewann js an Aufmerksamkeit und wurde weit verbreitet, einschließlich jQuery. Ajax und Node.Js, MVC, MVVM usw. haben ebenfalls die Aufmerksamkeit auf die Front-End-Entwicklung gelenkt und Front-End-Projekte immer komplexer gemacht. Allerdings bietet JavaScript keine offensichtliche Hilfe für die Organisation von Code, und das gibt es nicht einmal das Konzept von Klassen, geschweige denn Module. Was ist also ein Modul?

Ein Modul ist eine Datei, die eine bestimmte Funktion implementiert. Mit einem Modul können wir den Code anderer Leute bequemer verwenden und jedes gewünschte Modul für jede gewünschte Funktion laden. Bei der Modulentwicklung müssen bestimmte Normen eingehalten werden, sonst wird alles durcheinander gebracht.

Gemäß den AMD-Spezifikationen können wir „define“ zum Definieren von Modulen und „require“ zum Aufrufen von Modulen verwenden.

Derzeit gibt es zwei hauptsächlich beliebte JS-Modulspezifikationen: CommonJS und AMD.

AMD-Spezifikation

AMD ist Asynchronous Module Definition, und der chinesische Name bedeutet „asynchrone Moduldefinition“. Es handelt sich um eine Spezifikation für die modulare Entwicklung auf der Browserseite. Die Spezifikation auf der Serverseite besagt, dass CommonJS

-Module asynchron geladen werden und das Laden von Modulen keinen Einfluss auf die Ausführung nachfolgender Anweisungen hat. Alle Anweisungen, die von bestimmten Modulen abhängen, werden in Callback-Funktionen platziert.

AMD ist die standardisierte Ausgabe von Moduldefinitionen während des Promotion-Prozesses von RequireJS.

define()-Funktion

Die AMD-Spezifikation definiert nur eine Funktionsdefinition, bei der es sich um eine globale Variable handelt. Die Beschreibung der Funktion lautet:

define(id?, dependencies?, factory);

Parameterbeschreibung:

id: bezieht sich auf den Namen des Moduls in der Definition, optional; falls nicht angegeben. Für diesen Parameter sollte der Modulname standardmäßig der Name des angegebenen Skripts sein, das vom Modullader angefordert wurde. Wenn dieser Parameter angegeben wird, muss der Modulname „top-level“ und absolut sein (relative Namen sind nicht zulässig).

Abhängigkeiten: Es handelt sich um ein Array-Literal, von dem das aktuelle Modul abhängt und das durch das vom Modul definierte Modul identifiziert wird.
Der Abhängigkeitsparameter ist optional. Wenn dieser Parameter weggelassen wird, sollte er standardmäßig ["require", "exports", "module"] sein. Wenn das Längenattribut der Factory-Methode jedoch kleiner als 3 ist, ruft der Loader die Factory-Methode mit der durch das Längenattribut der Funktion angegebenen Anzahl von Argumenten auf.

Factory-Methode Factory, das Modul initialisiert die auszuführende Funktion oder das auszuführende Objekt. Wenn es sich um eine Funktion handelt, sollte sie nur einmal ausgeführt werden. Wenn es sich um ein Objekt handelt, sollte dieses Objekt der Ausgabewert des Moduls sein.

Format des Modulnamens

Der Modulname wird verwendet, um das Modul in der Definition eindeutig zu identifizieren. Sie werden auch im Abhängigkeitsarray verwendet:

Der Modulname wird durch vorwärts getrennt Schrägstriche Eine Folge aussagekräftiger Wörter
Das Wort muss in Kamel-Schreibweise oder „.“, „..“ angegeben werden.
Der Modulname erlaubt keine Dateierweiterungen wie „.js“.
Der Modulname kann „Relativ“ oder „oberste Ebene“ sein. Wenn das erste Zeichen „.“ oder „..“ ist, handelt es sich um einen relativen Modulnamen.
Der Modulname der obersten Ebene wird aus dem konzeptionellen Modul des Root-Namespace aufgelöst.
Der relative Modulname wird aus dem aufgelöst „require“ geschriebenes und aufgerufenes Modul

Erstellen Sie ein Modul namens „alpha“ mit require und exports

, verwenden Sie require, exports und ein Modul namens „beta“:

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   exports.verb = function() {
     return beta.verb();
     //Or:
     return require("beta").verb();
   }
 });

API-Einführung erforderlich: https://github.com/amdjs/amdjs-api/wiki/require

AMD-Spezifikation Chinesische Version: https:/ /github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

Zu den Bibliotheken, die AMD implementieren, gehören derzeit RequireJS, Curl und Dojo, Nodules et al.

CommonJS-Spezifikation

CommonJS ist eine Spezifikation für serverseitige Module, und Node.js übernimmt diese Spezifikation. Node.JS übernahm zunächst das Konzept der js-Modularität.

Gemäß der CommonJS-Spezifikation ist eine einzelne Datei ein Modul. Jedes Modul hat einen separaten Bereich, d. h. innerhalb des Moduls definierte Variablen können von anderen Modulen nicht gelesen werden, es sei denn, sie sind als Attribute des globalen Objekts definiert.

Der beste Weg, Modulvariablen zu exportieren, ist die Verwendung des module.exports-Objekts.

var i = 1;
var max = 30;
 
module.exports = function () {
 for (i -= 1; i++ < max; ) {
  console.log(i);
 }
 max *= 1.1;
};

Der obige Code definiert eine Funktion über das module.exports-Objekt, das die Brücke zwischen der externen und internen Kommunikation des Moduls darstellt.

Das Laden von Modulen verwendet die Methode require, die eine Datei liest und ausführt und schließlich das module.exports-Objekt innerhalb der Datei zurückgibt.

CommonJS-Spezifikation: http://javascript.ruanyifeng.com/nodejs/commonjs.html

RequireJS und SeaJS

RequireJS wurde von James Burke erstellt, der auch der ist Gründer der AMD-Spezifikation. Die Methode

define wird zum Definieren von Modulen verwendet. Jedes Modul muss in einer separaten Datei abgelegt werden.

RequireJS und Sea.js sind beide Modullader, die das Konzept der modularen Entwicklung vertreten, und ihr Kernwert besteht darin, die modulare Entwicklung von JavaScript einfach und natürlich zu machen.

Der größte Unterschied zwischen SeaJS und RequireJS:

Die Einstellung von SeaJS gegenüber Modulen ist die verzögerte Ausführung, während die Einstellung von RequireJS gegenüber Modulen die Vorausführung ist

Nicht verstanden? Schauen Sie sich diesen Artikel mit Bildern und Texten an: http://www.douban.com/note/283566440/

RequireJS API: http://www.requirejs.cn/docs/api.html

Verwendung von RequireJS: http://www.ruanyifeng.com/blog/2012/11/require_js.html

Warum requireJS verwenden

试想一下，如果一个网页有很多的js文件，那么浏览器在下载该页面的时候会先加载js文件，从而停止了网页的渲染，如果文件越多，浏览器可能失去响应。其次，要保证js文件的依赖性，依赖性最大的模块（文件）要放在最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

RequireJS就是为了解决这两个问题而诞生的：

（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

RequireJS文件下载：http://www.requirejs.cn/docs/download.html

AMD和CMD

CMD（Common Module Definition） 通用模块定义。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。AMD是依赖关系前置，CMD是按需加载。

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

define(factory);

   

factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module：

define(function(require, exports, module) {
 // 模块代码
});

   

require是可以把其他模块导入进来的一个参数，而export是可以把模块内的一些属性和方法导出的。

CMD规范地址：https://github.com/seajs/seajs/issues/242

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。

AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）
CMD 推崇依赖就近，AMD 推崇依赖前置。看如下代码：

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
 
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

   

另外一个区别是：

AMD:API根据使用范围有区别，但使用同一个api接口
CMD:每个API的职责单一
AMD的优点是：异步并行加载，在AMD的规范下，同时异步加载是不会产生错误的。
CMD的机制则不同，这种加载方式会产生错误，如果能规范化模块内容形式，也可以

jquery1.7以上版本会自动模块化，支持AMD模式：主要是使用define函数，sea.js虽然是CommonJS规范，但却使用了define来定义模块
所以jQuery已经自动模块化了

seajs.config({
'base':'/',
'alias':{
  'jquery':'jquery.js'//定义jQuery文件
}
});

   

define函数和AMD的define类似：

define(function(require, exports, module{
   //先要载入jQuery的模块
   var $ = require('jquery');
   //然后将jQuery对象传给插件模块
   require('./cookie')($);
   //开始使用 $.cookie方法
});

   

sea.js如何使用？

引入sea.js的库

如何变成模块？

define

3.如何调用模块？

-exports
-sea.js.use
4.如何依赖模块？

-require

<script type="text/javascript">
    define(function (require,exports,module) {
      //exports : 对外的接口
      //requires : 依赖的接口
      require(&#39;./test.js&#39;);//如果地址是一个模块的话，那么require的返回值就是模块中的exports
    })
</script>

   

sea.js 开发实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽的模块化开发实践</title>
<style type="text/css">
#div1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
   
//A同事 ：
seajs.use(&#39;./main.js&#39;);
   
</script>
</head>
 
<body>
<input type="button" value="确定" id="input1" />
<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

   

A同事

//A同事写的main.js:
 
define(function (require,exports,module) {
  var oInput = document.getElementById('input1');
  var oDiv1 = document.getElementById('div1');
  var oDiv2 = document.getElementById('div2');
  var oDiv3 = document.getElementById('div3');
 
  require('./drag.js').drag(oDiv3);
  oInput.onclick = function () {
    oDiv1.style.display = 'block';
    require('./scale.js').scale(oDiv1,oDiv2);
 
    require.async('./scale.js', function (ex) {
      ex.scale(oDiv1,oDiv2);
    })
  }
});

   

B同事

//B同事写的drag.js:
 
define(function(require,exports,module){
   
  function drag(obj){
    var disX = 0;
    var disY = 0;
    obj.onmousedown = function(ev){
      var ev = ev || window.event;
      disX = ev.clientX - obj.offsetLeft;
      disY = ev.clientY - obj.offsetTop;
       
      document.onmousemove = function(ev){
        var ev = ev || window.event;
 
 
         var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
         var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );
 
         
        obj.style.left = L + 'px';
        obj.style.top = T + 'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  }
   
  exports.drag = drag;//对外提供接口
   
});

   

C同事

//C同事写的scale.js:
 
define(function(require,exports,module){
   
   
  function scale(obj1,obj2){
    var disX = 0;
    var disY = 0;
    var disW = 0;
    var disH = 0;
     
    obj2.onmousedown = function(ev){
      var ev = ev || window.event;
      disX = ev.clientX;
      disY = ev.clientY;
      disW = obj1.offsetWidth;
      disH = obj1.offsetHeight;
       
      document.onmousemove = function(ev){
        var ev = ev || window.event;
         
        var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
        var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
         
        obj1.style.width = W + 'px';
        obj1.style.height = H + 'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
     
  }
   
  exports.scale = scale;
   
});

   

D同事

// D同事的range.js--限定拖拽范围
 
  define(function(require,exports,module){
     
    function range(iNum,iMax,iMin){
       
      if( iNum > iMax ){
        return iMax;
      }
      else if( iNum < iMin ){
        return iMin;
      }
      else{
        return iNum;
      }
       
    }
     
    exports.range = range;
     
  });

   

requirejs开发实例

require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；参数一是数组，传入我们需要引用的模块名，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。

main.js文件

//别名配置
requirejs.config({
  paths: {
    jquery: 'jquery.min' //可以省略.js
  }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
  $('body').css('background-color','red');
});

   

引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在此模块内的方法和变量外部是无法访问的，只有通过return返回才行.

define 模块

define(['jquery'], function ($) {//引入jQuery模块
  return {
    add: function(x,y){
      return x + y;
    }
  };
});

   

将该模块命名为math.js保存。

main.js引入模块方法

require(['jquery','math'], function ($,math) {
  console.log(math.add(10,100));//110
});

   

没有依赖

如果定义的模块不依赖其他模块，则可以：

define(function () {
 
  return {
    name: "trigkit4",
    age: "21"
  }
});

   

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

更多JavaScript 中对象的深拷贝相关文章请关注PHP中文网！