因為工作的原因，要開始學習JavaScript的基礎知識，經人介紹選擇了《JavaScript權威指南（第6版）》作為入門的指導叢書，呵呵！很喜歡第一張第一段對JavaScript、HTML和CSS這個Triad的精闢描述：
=== 運算式和語句的關係===
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
(In generalHTTP 304
is returned by web server when the browser is not really sure about up-to-date’ness of the resource)
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/7887238JQuery
blur()
The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.
this.each()=== Knockout.js ===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.
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 是不錯的介紹文章，下面的概述非常點睛 ：
=== altJS ===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.
這年月新詞彙太多了，稍不小心就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."
Get started with MEF
Reference：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
