javascript 框架_Javascript框架-它们是什么？

javascript 框架

Background

背景

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery是一个快速，小型且功能丰富JavaScript库。 借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。 兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

I've seen a lot of confusion around what JavaScript frameworks are.  Every web developer has heard of (and probably used) JavaScript but I've seen some baulk at the mention of jQuery, MooTools, bootstrap and other JavaScript frameworks.  Some of the answers I've had are that the frameworks hasn't been authorised by their IT department or do I need to install it or no we only want to use JavaScript.

我已经对JavaScript框架感到困惑。 每个Web开发人员都听说过（并且可能使用过）JavaScript，但是我提到jQuery，MooTools，bootstrap和其他JavaScript框架时有些不满。 我得到的一些答案是，这些框架尚未得到其IT部门的授权，或者我是否需要安装它，或者不，我们只想使用JavaScript。

The confusion has led me to write an article that hopefully clears up exactly what is meant by the term of JavaScript framework.

混乱使我写了一篇文章，希望可以弄清楚JavaScript框架一词的确切含义。

Overview

总览

A framework is just JavaScript encompassed within a JavaScript class or more commonly referred to as a namespace.  The idea of a framework has come about for two main reasons:

框架只是包含在JavaScript类中JavaScript，或更常见地称为命名空间。 产生框架的想法主要有两个原因：

Browser compatibility

浏览器兼容性

Simplicity

简单

If you're familiar with jQuery or MooTools, you'll know about the $ object.  That's the namespace I'm referring to and has all the framework's functions embedded within it.  

如果您熟悉jQuery或MooTools，您将了解$对象。 那就是我所指的名称空间，并且其中嵌入了框架的所有功能。

To start with, I need to cover a bit about object oriented programming (OOP) as this is the basis of all JavaScript frameworks.

首先，我需要介绍一些有关面向对象编程（OOP）的知识，因为这是所有JavaScript框架的基础。

I'm going to create a simple example of OOP in JavaScript.  In other words my very own simple "framework".

我将在JavaScript中创建一个简单的OOP示例。 换句话说，我自己的简单“框架”。

(I'm referencing the MDN when compiling these examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)

（我在编译这些示例时引用了MDN： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ）

To create a class it is as simple as:

创建一个类很简单：

// Create a class
function myClass() {}
// Add a function to the class
myClass.prototype.AddName(name) {
    // assign a class scope variable
    this.name = name;
}
// Instantiate the class
var class1 = new myClass();
// Call a class function, passing a variable
class1.AddName('tagit');

But that's not very interesting.  What is interesting is how JavaScript frameworks build on this principle by creating easy to use functions within the $ namespace. These functions are built on top of the standard JavaScript functions made available by the browser.  So instead of using document.getElmentById('myid'); every time, you just use $('#myid'); (in jQuery).  

但这不是很有趣。 有趣的是，JavaScript框架如何通过在$名称空间内创建易于使用的函数来构建此原则。 这些功能建立在浏览器提供的标准JavaScript功能之上。 因此，与其使用document.getElmentById（'my ID'）; 每次，您只需使用$（'＃myid'）; （在jQuery中）。

Each framework will have their own take on the use of the $ namespace.  MooTools for one uses double $$ for searching using a selector and a single $ for searching for an ID.

每个框架对$名称空间的使用都有自己的看法。 MooTools可以使用双$$和$来搜索ID。

Not only can you achieve some actions with one line of code, you'll know it will work on every browser supported by the framework you're using.

您不仅可以用一行代码来执行某些操作，而且您将知道它可以在您所使用的框架支持的所有浏览器上运行。

The frameworks also attach their functions to DOM elements you specify so that all those cool functions can be used with the DOM element as the reference.  This becomes more evident the more you use it.

框架还将它们的功能附加到您指定的DOM元素上，以便所有这些很酷的功能都可以与DOM元素一起用作参考。 使用得越多，这一点就越明显。

Anatomy of a Framework - Example: Creating your own "framework":

框架剖析-示例：创建自己的“框架”：

The following code is a more complicated example of what's going on when a framework is created.  In the script below:

以下代码是创建框架时发生的事情的更复杂示例。 在下面的脚本中：

An anonymous function is created and then executed with the "window" object as it's argument.  Why?  It just provides a way that doesn't muddy the global namespace with one off functions that are then not used again

创建一个匿名函数，然后使用“ window”对象作为其参数执行。 为什么？ 它只是提供了一种方法，它不会使一次性使用过的函数混淆全局命名空间，这些函数随后不再使用

The function creates the "$" class, instantiates it and attaches it to a global $ object via the window object.

该函数创建“ $”类，实例化该类，然后通过window对象将其附加到全局$对象。

When the page loads via the "window.onload" the $ object is available for use, along with its one function "find" that searches the page for an element with a specific identifier.

通过“ window.onload”加载页面时，可以使用$对象及其一个函数“ find”，该函数在页面中搜索具有特定标识符的元素。

(function(window) {
  function $(){};
  $.prototype.find = function(id) {
    return document.getElementById(id);
  };
  window.$ = new $();
})(window);

window.onload = function() {
  // find the tag with id='firstname' and return the inner html of the element
  alert($.find('firstname').innerHTML);
};

Reference HTML here:

此处参考HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='firstname'>my first name</div>
</body>
</html>

This was just a simple example but it gets even better when the find function can take an argument that could be a tag, class, id or other type of selector.  Regular expressions are commonly used to determine the type of selector that determines how the function call is processed.

这只是一个简单的示例，但是当find函数可以接受可能是标签，类，id或其他选择器类型的参数时，它会变得更好。 正则表达式通常用于确定选择器的类型，该选择器确定如何处理函数调用。

As you can see at this point that nothing but JavaScript has been used.  When you use a framework, you include it like you would any other script file:

<script src="http://www.mydomain.com/path/to/javascript_framework.js"></script>

When to use a framework?

什么时候使用框架？

Using a framework may not be for you.  For jQuery alone, it will add around 90Kb to each and every page you use it on (though browser caching should help with this, download it once and reuse it).

使用框架可能不适合您。 仅对于jQuery，它将在您使用它的每个页面上增加大约90Kb（尽管浏览器缓存应对此有所帮助，下载一次并重用它）。

It will be about weighing up how much JavaScript you'll end up using in your site.  If it's the little bit here and there, I believe you're still going to find it easier to use a framework.  

它将权衡您最终将在网站中使用多少JavaScript。 如果到处都是一点点，我相信您仍然会发现使用框架更容易。

When you see in jQuery 1.10.2, there are 10+ lines of code for just searching for an element by its ID and another 10+ for searching by class it can seem like overkill.  However it has been optimised to be as efficient as possible (more so when minified), while at the same time giving you a very easy way of referencing the DOM elements in your page i.e. $('[my selector]');.  

当您在jQuery 1.10.2中看到时，有十多行代码仅用于按其ID搜索元素，而另外十多行用于按类搜索元素，这似乎有点过头了。 但是，它已经过优化，以使其尽可能高效（最小化时效率更高），同时又为您提供了一种非常简单的方式来引用页面中的DOM元素，即$（'[my selector]'）;。

If you like using any of the jQuery UI visual effects then you'll have no choice but to include jQuery and these functions.  

如果您喜欢使用任何jQuery UI视觉效果，那么别无选择，只能包括jQuery和这些功能。

Finally

最后

It's important to remember that the most commonly used frameworks are being constantly worked and reworked for efficiency and cross browser compatibility.  Not something my previous code ever got...

重要的是要记住，为了提高效率和跨浏览器的兼容性，最常用的框架正在不断地进行改进。 我以前的代码从来没有得到过...

Given the minimal overhead there really isn't any reason to use pure JavaScript any more.  However, that does lead me to one more point; you should have a good understanding of pure JavaScript and the DOM before using a framework such as jQuery.  The same principles apply when modifying or referencing the DOM and having a good understanding of what is actually going on under the hood will help you when the time comes to work out why something isn't working the way you'd like it to.

考虑到最小的开销，实际上没有任何理由再使用纯JavaScript。 但是，这的确使我引申出了另外一点。 在使用jQuery之类的框架之前，您应该对纯JavaScript和DOM有很好的了解。 修改或引用DOM时应遵循相同的原则，并且对幕后的实际情况有一个很好的了解将有助于您在需要时找出为什么某些事情无法按您希望的方式工作。

Using a framework will save you time in the long run.  The authors of the framework take care of the hard stuff by making sure the framework is compatible with all the major browsers.  If it's simplicity you're after then a framework is for you.

从长远来看，使用框架可以节省您的时间。 该框架的作者通过确保该框架与所有主要浏览器兼容来解决这些难题。 如果简单，那么您就会找到适合您的框架。

翻译自: https://www.experts-exchange.com/articles/12264/Javascript-Frameworks-what-are-they.html

javascript 框架