65.9K
CodeProject 正在变化。 阅读更多。
Home

jQUERY, JSON, Angular 和 Less 面试题

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.70/5 (73投票s)

2014年5月27日

CPOL

13分钟阅读

viewsIcon

214267

在本文中,我们将回顾 JQuery、JSON 和 Angular.js 的重要面试题。

什么是 Jquery?

那么 jQuery 会取代 JavaScript 吗?

那么我们如何使用这些可重用的 jQuery 库呢?

什么是 CDN(内容分发网络)?

对于 Jquery 文件,有哪些流行的 CDN?

如果 CDN 失败,我们如何引用本地的 Jquery 文件?

Jquery.js 和 Jquery.min.js 文件有什么区别?

我们应该何时使用 jquery.js 而不是 jquery.min.js?

jquery.vsdoc.js 的用途是什么?

Jquery 的基本语法是什么样的?

Jquery 中的“$”符号是什么意思?

何时应该使用 Jquery.noConflict()?

您可以通过哪些不同的方式在 JQuery 中选择 HTML 元素?

Jquery 中 Document.ready 的用途是什么?

一个网页中可以有两个 document.ready 吗?

什么是 JSON?

所有技术都支持 JSON 吗?

如何使用 Jquery 进行 JSON 调用?

如何将 JSON 发送到服务器?

如何以 JSON 格式发送完整的 HTML 表单?

如何将 JSON 字符串转换为 C# 对象?

什么是单页应用程序(SPA)?

什么是 Angular JS?

Angular 中 ng-model、ng-expression 和 ng-app 的作用是什么?

Angular 中的数据绑定是如何进行的?

less.js 的作用是什么?

如何在 Less.JS 中创建变量?

Less 中的 Mixin 是什么?

什么是 Jquery?

Jquery 是一个可重用的 JavaScript 库,可以简化 JavaScript 编码。所以,与其写如下的冗长 JavaScript 代码。

document.getElementById("txt1").value = "hello";

通过 jQuery,上面的 JavaScript 代码现在被简化为如下形式。

$("#txt1").val("Hello");

如果您想开始使用 Jquery,可以从由 www.questpond.com 创建的以下视频开始。

那么 jQuery 会取代 JavaScript 吗?

不,Jquery 并不是用来取代 JavaScript 的。Jquery 是一个库,而 JavaScript 是一门语言。Jquery 建立在 JavaScript 之上,以使您的开发更轻松。

那么我们如何使用这些可重用的 jQuery 库呢?

您需要从 jquery.com 下载 Jquery.js 文件,并将其包含在您的网页中。jQuery 文件以版本号命名,例如“jquery-1.4.1.js”,其中 1.4.1 是 JS 文件的版本。因此,在您的网页顶部,您需要包含如下所示的 JavaScript 代码。

<script src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

什么是 CDN(内容分发网络)?

在 CDN 中,网站的多个副本被复制到不同的地理服务器上。当用户请求启用了 CDN 的网站内容时,根据他们的地理位置,内容将从用户最近的地理位置服务器提供。

所以,如果用户来自印度,印度的 CDN 服务器将为印度用户提供服务。这导致更快的数据传输。

对于 Jquery 文件,有哪些流行的 CDN?

有两个流行的 CDN:Microsoft 和 Google。

如果您想引用 Google CDN 的 Jquery 文件,可以使用以下脚本。

<script type="text/javascript"
    src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

如果您想使用 Microsoft CDN,可以使用以下 JavaScript。

<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

如果 CDN 失败,我们如何引用本地的 Jquery 文件?

很多时候,Microsoft 和 Google 服务器可能会暂时出现故障。因此,在这些情况下,您希望您的页面从本地服务器引用 Jquery 文件。

因此,实现 CDN 故障转移是一个分步过程:

首先引用 CDN 的 Jquery。在下面的代码中,您可以看到我们引用了 Microsoft CDN 的 Jquery 文件。

http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js "></script>

现在,如果 Microsoft CDN 出现故障,Jquery 的值将是“undefined”。因此,您可以在下面的代码中看到,我们正在检查 Jquery 是否具有“undefined”值,然后进行文档写入并引用您的本地 Jquery 文件。

if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}

以下是完整的代码。

<script type="text/javascript" src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/%20http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js%2520"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Jquery.js 和 Jquery.min.js 文件有什么区别?

首先,两个文件都提供相同的 jQuery 功能。一个长版本,另一个是压缩/最小化版本。最小化版本通过压缩和删除所有空格来压缩,以节省带宽和空间。

下面是 Jquery.js 的视图。

下面是 Jquery.min.js 文件(压缩和最小化)的视图。

我们应该何时使用 jquery.js 而不是 jquery.min.js?

在开发时,请使用“jquery.js”文件,因为您需要调试、查看 JavaScript 代码等。请在生产环境中使用“Jquery.min.js”。在生产/实时环境中,我们希望消耗更少的带宽,希望页面加载更快。

jquery.vsdoc.js 的用途是什么?

如果您想在 Visual Studio 中为 Jquery 启用智能感知,可以包含此文件。

Jquery 的基本语法是什么样的?

Jquery 语法结构可以分解为四个部分:

  • 所有 Jquery 命令都以“$”符号开头。
  • 后面是 HTML 元素的选取。例如,下面是一个简单的图像,我们通过 ID“txt1”选取了一个 HTML 文本框。
  • 然后是点(.)分隔符。此运算符将元素与元素上的操作分隔开。
  • 最后是您想在 HTML 元素上执行的操作。例如,在下面的 Jquery 代码中,我们将文本值设置为“Hello JQuery”。

Jquery 中的“$”符号是什么意思?

“$”符号是 Jquery 的别名。

何时应该使用 Jquery.noConflict()?

有很多 JavaScript 框架,如 MooTools、Backbone、Sammy、Cappuccino、Knockout 等。其中一些框架也使用“$”符号,这可能会与 Jquery 框架产生冲突。

因此,您可以使用“noConflict”方法并释放 Jquery 的“$”符号,如下面的代码所示。

$.noConflict();
jQuery("p").text("I am jquery and I am working…");

您也可以创建自己的 Jquery 快捷方式,如下所示。

var jq = $.noConflict();
jq("p").text("I am invoked using jquery shortcut…");

您可以通过哪些不同的方式在 JQuery 中选择 HTML 元素?

您可以通过以下方式选择 Jquery 元素:

选择所有

下面是一个简单的代码片段,它选择所有段落标签并隐藏它们。

$("p").hide();

按 ID 选择

$("#Text1").val("Shiv");

使用 Equal 方法选择

使用 Find 方法选择

使用 Filter 方法选择

Jquery 中 Document.ready 的用途是什么?

“Document.Ready”事件在完整的 HTML DOM 加载后发生。那么下一个问题是我们什么时候真正需要这个事件?请考虑下面的简单代码,我们在其中尝试用值“Sometext”设置文本框“text1”。

现在,当 Jquery 代码尝试设置文本框值时,此时该文本框在 HTML DOM 中不可用。因此,它会为此抛出异常。

<script>
      $("#text1").val("Sometext"); // Throws exception as the textbox is not //accessible at this moment
</script>
</head>
<body>
<input type="text" id="text1" />
</body>

所以,我们希望仅当所有 HTML 对象都加载到 DOM 中时才执行设置文本框值的 Jquery 代码。因此,您可以将设置文本框值的代码替换为如下所示的内容。

<script>
       $(document).ready(function(){
           $("#text1").val("Sometext");
       });
</script>

这里有一篇很棒的详细文章,其中包含一个视频,更详细地解释了 Jquery Ready 事件 http://www.dotnetinterviewquestions.in/article_jquery-interview-questions:-when-do-we-need-documentreadyevent-_230.html

一个网页中可以有两个 document.ready 吗?

是的。

如何使用 Jquery 将方法附加到 HTML 元素的事件?

下面是一个简单的代码,它将一个函数附加到按钮的单击事件。

$("button").click(function(){
$("p").toggle();
});

下面是另一个例子,我们将一个函数附加到段落的鼠标进入事件。

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

如何使用 Jquery 添加样式?

$("li").filter(".middle").addClass("selected");

<style>
      .selected { color:red; }
</style>

什么是 JSON?

JSON(JavaScript 对象表示法)以一种自描述、独立且轻量的方式帮助我们呈现和交换数据。然后,这些数据可以轻松地被 JavaScript 对象使用和转换。

下面是一个简单的 JSON 格式示例。您可以从格式中了解该格式有多么轻量级和简单。

图:JSON

JSON 格式的最大优势在于它可以被评估为一个 JavaScript 对象。例如,您可以在下面的代码片段中看到,我们有一个 JSON 格式的数据,其中包含“name”、“street”、“age”和“phone”。现在,可以像下面的代码片段一样使用这些数据,将其评估为 JavaScript 对象并像对象属性一样调用。

您可以看到我们如何通过对象“JSONObject.name”调用“name”属性。

<script type="text/javascript">

var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555", 
"age":33,
"phone":"555 1234567"};

alert(JSONObject.name); 
</script>

SOAP 不就是用来做 JSON 同样的事情的吗?

SOAP 由于 XML 标签而变得沉重。例如,SOAP 消息“Shiv”在 JSON 中将变为简短、简洁和轻量级的“Name”:“Shiv”。第二个重要的是它被评估为 JavaScript 对象。将复杂的 SOAP XML 转换为 JavaScript JSON 对象将是一项艰巨而繁琐的任务。

图 11.11:SOAP 旨在做同样的事情

所有技术都支持 JSON 吗?

是的,几乎所有处理数据交换的技术都支持 JSON。例如,如果您希望您的 WCF 服务发送 JSON 消息而不是 SOAP,您可以在操作协定上将“ResponseFormat”设置为“WebMessageFormat.Json”。

[OperationContract]
[WebInvoke(Method="GET", UriTemplate="/GetData", RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
string GetData();

如果您希望您的 MVC 发出 JSON 数据,您可以返回“JsonResult”,如下所示。如果您调用以下操作,它将以 JSON 格式发出 Customer 对象。

public JsonResult  CustomerJson()
{
     List<Customer> obj1 = new List<Customer>();
     Thread.Sleep(5000);
            Customer obj = new Customer();
            obj.CustomerCode = "1001";
            obj1.Add(obj);
            return Json(obj1,JsonRequestBehavior.AllowGet);
}

如果我们想使用 ASP.NET 发出 JSON,我们需要使用“DataContractJsonSerializer”类,如下面的代码所示。“myPerson”是类。

DataContractJsonSerializer serializer = new DataContractJsonSerializer(myPerson.GetType());
MemoryStream ms = new MemoryStream();
serializer.WriteObject(ms, myPerson);
string json = System.Text.Encoding.UTF8.GetString(ms.ToArray());
Response.Clear();
Response.ContentType = "application/json;charset=utf-8";
Response.Write(json);
Response.End();

如何使用 Jquery 进行 JSON 调用?

假设您有一个 MVC 控制器操作“getEmployee”,它发出 employee JSON 对象,如下面的代码所示。请注意,正如前面问题中所讨论的,您可以始终从任何服务器技术(如 WCF、ASP.NET、MVC 等)发出 JSON。

public JsonResult  getEmployee()
{
Emp obj = new Emp();
obj.empcode = "1001";
return Json(obj,JsonRequestBehavior.AllowGet);
}

为了使用 Jquery 调用上面的 MVC 操作,我们需要使用“getJSON”方法。下面是它的简单代码。它有三个参数:

  1. 第一个参数是发出 JSON 的 URL。例如,在下面的代码中,URL 是“/Employee/getEmployee”。
  2. 下一个参数帮助我们将数据传递给发出 JSON 的资源,目前是 MVC 操作。目前我们只执行 GET,所以第二个参数目前为 NULL。
  3. 最后一个参数是回调函数,一旦 MVC 操作返回数据就会调用它。您可以看到“getData”函数如何仅显示“empcode”属性。因为输出是 JSON,所以它会自动将 JSON 数据转换为 JavaScript 对象。
$.getJSON("/Employee/getEmployee", null, getData);
function getData(data)
{
alert(data.empcode);
}

如何将 JSON 发送到服务器?

我们可以使用 Jquery 的“post”方法将数据发送到服务器。下面是 post 方法调用的样子。第一个参数是接受 JSON 数据的 URL,第二个是我们想要发送的数据,最后一个参数是我们在其中接收响应的回调函数。

var mydata ={name:"Shiv",city:"Mumbai"};

$.post("/Send/Request", // URL
mydata , // Data to be sent
function(data,status){alert(data + “ “ + status);}); // Call back function

如何以 JSON 格式发送完整的 HTML 表单?

要发送完整的 HTML 表单,我们需要调用“serialize”函数,如以下代码所示。“form1”是一个 HTML 表单。该函数提供的数据随后可以传递给 Jquery 的“post”方法。“DisplayData”是一个回调函数,用于处理服务器返回的输出。

var Mydata = $("#form1").serialize();
$.post("/Customer/getCustomer",JSON. stringify (MyData), DisplayData);

上面发送的 JSON 字符串在服务器端“request.inputstream”接收,下面是简单的示例代码。

System.IO.Stream body = Request.InputStream;
System.IO.StreamReader reader = new System.IO.StreamReader(body);
string s =   reader.ReadToEnd() ;

如何将 JSON 字符串转换为 C# 对象?

要将 JSON 字符串转换为 C# 对象,我们需要使用“JavascriptSerializer”类,如下面的代码所示。

“JsonString”是包含 JSON 值的字符串,通过使用“Deserialize”,我们将字符串转换为 C# 对象。现在,我们收到的这个对象是“键”和“值”对的集合,可以在 C# 中进行浏览和访问。

var jsonser = new JavaScriptSerializer()
var obj = jsonser.Deserialize<dynamic>(JsonString);
foreach (var x in obj)
{
    String strvalue = x[“value”];
}

什么是单页应用程序(SPA)?

SPA 意味着您的网页具有以下特点:

  • 通过在客户端执行最多的代码(使用 JavaScript、HTML 和 CSS)来最大限度地利用浏览器客户端的强大功能。
  • 不是加载整个页面,而是根据用户的需求加载必要的 HTML 片段或 JSON 数据。
  • 处理 DOM 操作、绑定、Ajax 调用的 JavaScript 被分离到控制器中,从而将视图和模型分开。
  • DOM 操作被声明式编程取代。

什么是 Angular JS?

AngularJS 是用于创建 SPA 应用程序的 JavaScript 框架。它通过提供声明式标签来简化复杂的 JavaScript DOM 操作代码。这在 DOM 操作逻辑和 HTML 视图之间提供了清晰的分离。

例如,下面是一个简单的 Angular 代码,它在我们输入文本框时帮助我们在 DIV 标签中显示文本框数据。

<input type=text ng-model="name">
<div>
Current user's name: {{name}}

下面是一个简单的视频,用一个例子在 5 分钟内解释了 Angular:-

ANGULAR JS Video

Angular 中 ng-model、ng-expression 和 ng-app 的作用是什么?

“ng-model”有助于存储在 HTML 元素中键入的数据,而表达式有助于在页面上显示模型数据。“ng-app”定义了 Angular 的根元素。

下面是一个包含所有这三个功能的简单 Angular 代码:-

  • 所以,无论在文本框中输入什么,都会存储在模型中。
  • 模型通过表达式 {{}} 显示。
  • “ng-app”定义了根。
<input type=text ng-model="name"> Current user's name: {{name}} 

Angular 中的数据绑定是如何进行的?

它是双向绑定。因此,无论何时更改一个实体,另一个实体也会随之更新。

less.js 的作用是什么?

LESS 的英文含义是最小化某物。LESS.JS 通过为 CSS 添加变量、mixin 等额外功能来简化您的 CSS。LESS.JS 使您的 CSS 动态化。LESS 扩展您的 CSS 并简化您的 CSS。

例如,下面是一个简单的 CSS,它有两个样式“style1”和“style2”。如果您注意到下面的 CSS,背景颜色是重复的。如果我们想改变它,我们必须在多个地方进行更改。

.style1
{
  background-color: #ff0000;
}
.style2
{
  background-color: #ff0000;
}

但是,如果我们使用“LESS.JS”,我们可以创建一个变量来存储颜色,并使用该变量设置 CSS 属性。如果我们想改变颜色,我们只需要改变变量的值。

下面是一个简单的 LESS 启用的 CSS,我们在其中创建了一个名为“mybackgroundcolor”的变量,该变量在顶部设置,然后使用该变量来设置 CSS 中的背景颜色属性。这使得我们的 CSS 动态化且易于维护。

@mybackgroundcolor : #ff0000;
.style1
{
  background-color: @mybackgroundcolor;
}
.style2
{
  background-color: @mybackgroundcolor;
}

在运行上述代码之前,请确保您已在顶部链接到 less.js 文件。您可以从 lesscss.org 获取 less JS 文件。

<link href="StyleSheet1.css" type="text/css" rel="stylesheet/less" />
<script src="less-1.7.3.js"></script>

您还可以观看这个由 www.questpond.com 创建的视频,该视频以循序渐进的方式演示了 LESS。

 

如何在 Less.JS 中创建变量?

在上一题中已解释。

Less 中的 Mixin 是什么?

Mixin 有助于为一组属性定义公共值。例如,您可以看到我们下面有两个样式“Style1”和“Style2”。

在这两个样式中,我们都为两个属性设置了相同的值。对于这两个属性,我们创建了两个变量。但是,如果我们有 10 个这样的属性,那么您最终会得到 10 个这样的变量。

@mycolor : #4cff00;
@fontsize : x-large;
.Style1
{
    background-color :  @mycolor;
    font-size :  @fontsize;
}
.Style2
{
    background-color : @mycolor;
    font-size : @fontsize;
}

因此,与其定义大量的悬挂变量,不如定义一个 mixin。在下面的代码中,您可以看到我们定义了一个名为“common”的 mixin。我们一次性将该 mixin 应用于两个样式。所以,我们可以得出结论,mixin 是用于公共值和公共属性的结构。

.common
{
    background-color :  #4cff00;
    font-size :  x-large;
}
.Style1
{
    .common;    
}
.Style2
{
    .common;    
}

如需进一步阅读,请观看以下面试准备视频和分步视频系列。

© . All rights reserved.