Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tutorial / AJAX QuickStart

AJAX QuickStart

JavaScript 入門基礎和範例

想要維護 Browser 的 AJAX 相容性,最簡化方式是使用 try ... catch 程式碼來判斷例外和處理方式。

練習 Console 環境。全域變數通常不是好主意,試著建立物件及屬性Generate Checkbox from Layers Array

function generate_checkbox(id_checkbox, lable_name, html_element) {
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.id = id_checkbox;

  var label = document.createElement('label');
  label.htmlFor = id_checkbox;
  label.appendChild(document.createTextNode(label_name));
  html_element.appendChild(checkbox);
  html_element.appendChild(label);
}

JavaScript Scope

Variable Scope JavaScript Closures: Resolution of Property Names on Objects, Identifier Resolution, Execution Contexts and Scope Chains

通常 this 代表 Identity Fucntion,依照 Neighborhood 的進入方式,有四種解讀情境。

Private Members are made by the Constructor. Ordinary vars and parameters of the constructor becomes the private members.

變數在執行前、函式內、執行後的設定值

推薦讀物 HTML5 之前與之後的不同作法: URL Hash 與 History API

jQuery 和 React.js 的笑話

Isomorphic JavaScript: The Future of Web Apps

Backbone Intro Full Stack Web Development with Backbone.js

Parallax Scrolling: Themeforest Example 20 Best Sites of 2013 Django + React.js Django + Vis.js 良葛格介紹 VanillaJS knockout: MVVM pattern

Plone Cases

Approve Use of React.JS in Core, Deprecate Backbone.JS

Most developers would use an add-on and return the AJAX response. Or, you can do it TTW with page template just fine.

silvuple bda.plone.ajax

jQuery

DOM Manipulation

不需要的原因 支援 IE7 DOM Samples

jQuery Sliding Effect

D3.js

入門範例

WebAudio

Less CSS

FireBase, AngularJS, Plone: part 1, part 2 code by Balazs Ree: FireBase provides your front-end with persistent and shared real-time data out of the box, letting you focus on your application. Both external agents and custom authentication are supported. The Firebase traffice does not enter your application server, that means it's working with any Python based Web server.

firestore example setup python-firebase

collective.js.angular

Simple Real-time Presence Portlet

Full-Stack JavaScript CommonJS vs AMD vs RequireJS Manually Disable AMD Loading: collective.js.datatables

Module Loader

RequireJS CommonJS 與 Asynchronous Module Definition (AMD) 關係

Modular 是 Frontend JavaScript 設計模式,技術規範有 AMD 和 CommonJS 兩種,可以用 RequireJS 或 Browserify 程式庫來實作。

RequireJS 可能無法正確處理壓縮過的程式碼

Node.js

Grunt 透過 npm 安裝,有個 grunt-cli 模組提供命令列程式,執行時,會利用 require() 來搜尋 Grunt 安裝資訊,找到後會載入 Gruntfile 的設定內容。

入門教學

The Art of Node

Web Application Framework: Express

Building RESTful API Using Node and Express 4

A progressive Web application with Vue JS, Webpack & Material Design #1 #2 #3

Angular.js

What's Wrong: 使用 HTML 來描述程式邏輯與結構,對初學者具吸引力,但開發者被迫與 HTML parser 一起除錯,Dirty Checking 和 HTML Parsing 目前效能不佳。

React.js

簡介 入門教學 核心概念 圖表分析: Re-render everything on every change, Virtual DOM, Synthetic Events o3 blog

函式思惟: f(state, props) = UI Fragment

React and Flux: Building Applications with a Unidirectional Data Flow: Code Sample Building UIs with ReactJS RealTime Voting

Flux 是 Application Architecture,Facebook 用來建置客戶端應用程式,比較像是 Pattern 而不是正式的 Framework,分成 Dispatcher、Store、View 三部份,細部地看 Action 可被視為更新流程的第四部份,Flux 導入 Unidirectional Data Flow 來避免 MVC 架構。

react(data) → UI

Material UI: A CSS Framework and a Set of React Components that Implement Google's Material Design

Redux 是 JavaScript App 的 State Container

CommonJS 是 NodeJS 的 Module System,

AngularJS vs Ember.js vs React.js React.js vs Vue.js

Plone Integration Idea UI Toolbar

Swift vs React-Native: 一般程式的效能差異不大,但地圖應用場合 React Native 勝出。

Scaffolding Tools

Yeoman generator-plonemockup