学习 JavaScript, jQuery, ASP.NET MVC

关注

原创最新推荐文章于 2026-04-07 15:29:13 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

即梦AI使用教程摘要：即梦AI是字节跳动推出的多模态AI创作平台，整合图片、视频、智能编辑功能，基于OmniHuman模型支持中英日三语操作。核心特点包括：技术升级：4.0版本强化中文语义理解与微观表现力，新增故事分镜生成；创作功能：支持文本/图片转视频、AI对口型、商业级抠图与多图层融合；用户友好：移动/网页双端适配，灵感社区复用提示词，剪映生态无缝衔接；应用场景：覆盖电商换装、虚拟主播、设计融合等需求，未来将开放API拓展生态。（字数：149）阅读详情

因为工作的原因，要开始学习JavaScript的基础知识，经人介绍选择了《JavaScript权威指南（第6版）》作为入门的指导丛书，呵呵！很喜欢第一张第一段对JavaScript、HTML和CSS这个Triad的精辟描述：

HTML to specify the content of web pages,
CSS to specify the presentation of web pages
JavaScript to specify the behavior of web pages.

=== 表达式和语句的关系===

An expression is a phrase of JavaScript that a JavaScript interpreter can evaluate to produce a value. If the phrases of JavaScript are expressions, then the full sentences are statements. JavaScript statements are terminated with semicolon. Expressions are evaluated to produce a value, but statements are excuted to make something happen.

=== Closure ===

　　什么是closure? closure是Javascript语言的重要概念是之一，如果不理解这个概念，会影响后面对jQuery Plug-in等概念的学习。但对于像我这样初学者而言，很难能一下子准确把握其含义，特别是书上那些拗口的定义，例如："Closure is yet another element from Lisp that has migrated into Javascript. When a function is created in Javascript, the function has access to any lexically scoped variables that were in the environment that created it." 摘自《Programming HTML5 Applications》。

这里有篇好文章 Closures , 由浅入深介绍了closure的概念： "A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created."

在下面的例子中，add5和add10就是两个closure。它们不仅代表一个function，同时还关联着一个environment，这个environment中保留了add5和add10在被创建时所能够访问到variable，如：x。这有就是为什么，makeAdder退出后，add5和add10仍能够访问x。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Learning JavaScript Concept - Closure</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(document).ready(function () { // makeAdder is a factory function function makeAdder(x) { return function (y) { return x + y; }; }; // add5 is a closure var add5 = makeAdder(5); // add10 is another close var add10 = makeAdder(10); var list = "<li> Call add5(1) = " + add5(1) + "</li>"; list += "<li> Call add10(1) = " + add10(1) + "</li>"; $("#list").html(list); }); </script></head><body> <ul id="list"> </ul></body></html>

=== Anonymous function? ===

Javascript anonymous function.

"Variables are scoped at the function level in javascript. This is different to what you might be used to in a language like C# or Java where the variables are scoped to the block. What this means is if you declare a variable inside a loop or an if statement, it will be available to the entire function."

=== 什么是self-invocation pattern? ===

Self-invocation

"Self-invocation (also known as auto-invocation) is when a function executes immediately upon it’s definition. This is a core pattern and serves as the foundation for many other patterns of JavaScript development."

"In an effort to protect the global object, all JavaScript applications should be written within a self-invoking function. This will create an application scope in which variables can be created without the fear of them colliding with other applications."

=== Javascript strict mode ===

'use strict' : IE10 才支持。

=== ASP.NET MVC 4 - Bundles ===

Bundling and Minification(F12, Debugging, EnableOptimizations),ScriptBundle, StyleBuddle.

Bundles set the HTTP Expires Header one year from when the bundle is created. If you navigate to a previously viewed page, Fiddler shows IE does not make a conditional request for the bundle, that is, there are no HTTP GET requests from IE for the bundles and no HTTP 304 responses from the server. You can force IE to make a conditional request for each bundle with the F5 key (resulting in a HTTP 304 response for each bundle). You can force a full refresh by using^F5 (resulting in a HTTP 200 response for each bundle

=== Razor : SiteLayout.cshtml, _viewStart.cshtml @RendorSection() ===

ASP.NET MVC : Layout with Razor

" Razor includes a new feature that enables us to remove the need to explicitly set the Layout in each view – and instead allows us to define the layout logic once for all views in the site – making our view files even cleaner and more maintainable (and ensuring we keep to the DRY principle: Don’t Repeat Yourself). " ------ 通过定义 _ViewStart.cshtml 文件，并将其放置在 \views 文件夹下这样就可以为所有view定义Layout了。

=== HTTP 304 ===

HTTP Status Code Definitions,Get Rid of HTTP 401 and HTTP 304

(In generalHTTP 304 is returned by web server when the browser is not really sure about up-to-date’ness of the resource)

=== JavaScript : No Class but constructor ===

There are no classes in JavaScript and this allows for great flexibility, because you don't have to know anything about your object in advance; you don't need a class "blueprint".

=== JSON - JavaScript Object Notation ===

It's only a combination of the array and the object literal notation. The only syntax differenc between JSON and the object literal is that property names need to be wrapped in quotes to be valid JSON. Here is a JSON string example : {"Name" : "Jeffrey", "Some" : [1, 2, 3] } . In JSON strings, you cannot use functions or regular expression literals.JSON.parse() andJSON.stringify() are natively supported by the JavaScript engine in modern browsers, such as IE. jQuery has jQuery.parseJSON but no the opposite operation ?

To convert a JSON text into an object, you can use the eval() function. It invokes the JavaScript compiler. Since JSON is a proper subset of JavaScript, the compiler will correctly parse the text and produce an object structure. The text must be wrapped in parens to avoid tripping on an ambiguity in JavaScript's syntax.

var myObject = eval('(' + myJSONtext + ')');

The eval function is very fast. However, it can compile and execute any JavaScript program,so there can be security issues. The use of eval is indicated when the source is trusted and competent. It is much safer to use a JSON parser

Chainability - Understand the chain. iFrame memory in IE,Lost Focus http://blog.csdn.net/liaobc/article/details/7887238

JQuery blur()

The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.

this.each()

jQuery supports "chainable methods", which means that most jQuery functions should return this. .each() returns this, and if you want $('selector').yourPlugin().css(...) to work, you should return this.

=== Knockout.js ===

jQuery作为一种通用的JavaScript框架使JavaScript编程变得容易和简洁很多，但是它在解决一些特定问题时还是有捉襟见肘的时候，比如：数据与UI元素的绑定。Knockout.js就是专门针对数据与UI元素绑定的框架，它使得这种绑定的代码更简洁。Beginners Guide to Knockout.js : Part 1 ，Part 2 和 Part 3，是不错的入门好文。KnockoutJS 与ASP.NET MVC结合的视频, 还有MVC Techniques with JQuery，JSON and Knockout.js。

knockout优点之一就是，它使用data-bind属性建立数据和界面元素的绑定关系，避免了直接与DOM元素耦合在一起，HTML结构的改变不会影响绑定，例如：

<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};
ko.applyBindings(new viewModel());

要真正用好knockout，还需要对MVVM模式有所了解，Understanding MVVM - A Guide For Javascipt Developers 是不错的介绍文章，下面的概述非常点睛：

MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of thebusiness logic and behaviour in an application. To this end, many implementations of this pattern make use of declarative data bindings to allow a separation of work on Views from other layers.

This facilitates UI and development work occurring almost simultaneously within the same codebase. UI developers write bindings to the ViewModel within their document markup (HTML), where the Model and ViewModel are maintained by developers working on the logic for the application.

=== altJS ===

这年月新词汇太多了，稍不小心就OUT了。altJS应该说的是JavaScript的替代品，参看CoffeeScript vs. TypeScript vs. Dart。？？？？？？ JavaScript有什么不好，为啥要替代了人家？？？？？？

=== Require.js ===

Modular Javascript with RequireJS 主要是用来弥补JavaScript语言对模块化编程（Modular Programming)支持的不做。在没有RequireJS时候，开发人员主要是依赖于<script>标签，来定义并加载一系列需要的JavaScript文件。这种方式对于使用少量的JavaScript文件的应用来说是有效的，但对于使用大量JavaScript文件的应用而言，维护的成本和复杂度是非常大的。同时，采用<script>也会带来性能方面的影响，用户需要等待所有文件加载完毕后才能使用该应用。

RequireJS使用带来了两点好处： 1. 清晰的模块定义；2. 模块异步加载的性能提升；

RequireJS Org Doc

RequireJS Doc API 上面两篇文章适合在接触过RequireJS的初学者入门使用，而这边RequireJS自己的文档，更是适合需要具体了解RequireJS细节的开发人员阅读。它更详细地介绍了，RequireJS的方方面面，具体到API的使用和配置等。特别是Require(） API在加载时，对非Module类型的JavaScript文件的处理等。

RequireJS/Text 是一个用来加载文字内容的插件。

RequireJS使JavaScript代码有个更好的模块化结构，但是如果对这样的代码进行单元测试呢？特别如果屏蔽掉模块的外部依赖呢？http://fragphace.pl/blog/2013-03-13-Mocking-requirejs-dependencies 是不错的入门好文。

=== Backbone.js ===

Getting Started with Backbone.js

" Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."

" Backbone provides a clean way to surgically separate your data from your presentation. The model that works with the data is only concerned with synchronizing with a server while the view’s primary duty is listening to changes to the subscribed model and rendering the HTML "

=== Knockback ===

Can Knockback be used to handle complicated data object, where the object is nested with collections?

Getting Started with Knockback.js

In essence, Knockback.js bridges the dynamic DOM bindings ofKnockout.js with the models, computeds, and routers ofBackbone.js. It also brings some other cool features like localization, default values, and nested view models!

Tutorial : Getting started with knockback.

" You can use Knockback to bind Backbone Models/Collections to your HTML/templates (View) using Knockout. "

2-Way Databanding using Knockout and Backbone

" Knockback is a fantastic little “bridge” library that brings together the MVP structure of Backbone and the magical data-binding goodness ofKnockout. The library doesn’t replace either one, but just smoothes over the rough edges where they stomp on each other, allowing you to create a Knockout ViewModel from a plain old Backbone.Model."

=== Bootstrap ===

How to use Twitter bootstrap to create a responsive web design?

" At the core of Bootstrap is a set of basic HTML elements that have been styled to allow for easy enhancement via classes and user styles."

=== MEF ====

Get started with MEF

" The Managed Extensibility Framework or MEF is a library for creating lightweight, extensible applications. It allows application developers to discover and use extensions with no configuration required. It also lets extension developers easily encapsulate code and avoid fragile hard dependencies. MEF not only allows extensions to be reused within applications, but across applications as well. "