如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、首先看下什么是JSON
JSON：JavaScript Object Natation，JavaScript對象的表現形式，已經發展成一種輕量級的數據交換格式。
JavaScript對象的表現形式，指定義JS對象的一種方式。
數據交換格式，即用于交換的數據格式。
JSON是種格式：
數據在鍵值對中, 數據由逗號分隔, 花括號保存對象, 方括號保存數組.
鍵值對組合中的名稱寫在前面，值對寫在后面，中間用冒號隔開
JSON 值可以是： 數字, 字符串, 邏輯值, 數組, 對象, null
JSON與XML相比，JSON更輕量級，XML更重量級，目前XML更多的用作配置文件。
二、再來看下什么是javascript對象
雖然有人說JavaScript 中的所有事物都是對象，但是 javascript 中，并不是所有的值都是對象，而有兩種值類型：原始值和對象。
（參考：http://blog.csdn.net/justjavac/article/details/8432989 JavaScript 并非所有的東西都是對象）
JavaScript原始值:
字符串，數字，布爾值，null，正則表達式
注：在 JavaScript 中所有的數字都是浮點數
JavaScript內置對象：
Object(基礎對象)，
Array(數組)，
Function(函數構造器)，
Math(數學對象)，
String(字符串對象)，
Number(數值對象)，
Boolean(布爾對象)，
Date(日期時間)，
Error(異常對象)，
RegExp(正則表達式對象)，
Arguments(函數參數集合)
(參考：http://www.cnblogs.com/lianzi/archive/2011/08/26/2154253.html javascript內置對象列表及Array和String的常用方法)
其中 Boolean, Number, String 是原始值的包裝器，很少直接使用
JavaScript 創建對象的方法：
1）使用內置對象
var person=new Object();//創建基礎對象實例，然后為其添加屬性
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
2）自定義對象構造
function Person(firstname,lastname,age){//自定義對象構造器，然后創建實例
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
var person=new Person("Bill","Gates",56);
//定義對象構造器，可以使用“this”關鍵字構造、也可以使用原型prototype構造
（參考：http://www.jb51.net/article/20428.htm JavaScript 三種創建對象的方法）
3）使用直接量(literals 有直接量、字面量、常量等詞義)
var arr = [obj.a, 0, obj.a+1];
var obj = {name: 'John' + 'McCarthy'};
注：
準確的說不叫直接量（literals），而叫初始器（Initialiser），可以在里面使用表達式
初始器有對象和數組兩種，所以有“對象直接量”，“數組直接量”這樣的說法
初始器基于JSON，要符合JSON語法格式，
因此有人說JSON是JavaScript的原生格式,
在JavaScript中處理JSON數據不需要任何特殊的API或者工具包
但是初始器里面是可以有表達式的，就像例子里的一樣
（參考：http://www.cnblogs.com/snandy/p/3439790.html JavaScript中的直接量與初始器的區別）
原始值只包括字符串，數字，布爾值，null，正則表達式，不包括 Undefined 和 Initialiser
三、JavaScript對象、JSON對象、JSON字符串
javascript對象：javascript中，除開JavaScript原始值(字符串，數字，布爾值，null，正則表達式)的都是javascript對象
JSON對象：JSON對象這種叫法不太準確，可以理解為使用基于JSON的初始器定義的javascript對象
JSON字符串：符合JSON語法格式的字符串
javascript對象和JSON字符串相互轉換：
1：jQuery插件支持的轉換方式
$.parseJSON( jsonstr );$("xxx").serializeArray();
2：瀏覽器支持的轉換方式(Firefox，chrome，opera，safari，ie9，ie8)等瀏覽器
JSON.parse(jsonstr);JSON.stringify(jsonobj);
3：Javascript支持的轉換方式
eval('(' + jsonstr + ')');//不推薦
4：JSON官方的轉換方式
引入 json.js 或 json2.js,用法同第二種
（參考：http://www.cnblogs.com/luminji/p/3617160.html JS中對象與字符串的互相轉換)
JAVA對象和JSON字符串相互轉換：
可以用jackson、Gson和json-lib等
（參考：http://www.blogjava.net/bolo/archive/2014/04/16/412533.html 使用jackson對Java對象與JSON字符串相互轉換的一些總結）
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
慈心積善融學習，技術愿為有情學。善心速造多好事，前人栽樹后乘涼。我今于此寫經驗，愿見文者得啟發。
xml文件挺常用的，用程序自動生成的xml文件最好，引號和尖括號等標點符號肯定是全的。把事情交給擅長它的人去做。知人善任！
xml file - 正確的文件
<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德經</name> <author>老子</author> </book> <book> <name>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>
使用瀏覽器進行校驗
xml file - 錯誤的
<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德經</name> <author>老子</author> </book> <book> <na>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>
使用瀏覽器進行校驗
感想
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
移動跨平臺框架React Native經過4年的發展，其生態已經變得異常豐富，在使用React Native開發項目的過程中，為了提高開發效率，我們經常會借鑒一些使用使用率比較高的開源庫，根據大眾的需求，對這些使用較高的 React-Native UI 庫，我們做一個簡單的總結和歸類，方便大家更好地入門 React Native。
本文只是收集了一些常見的UI庫和功能庫，除了上面介紹的知名第三方庫之外，還有很多實現小功能的庫，這些庫可以大大的提高我們的開發效率，并且可以在此基礎上進行二次開發。并且歡迎大家關注我的《React Native移動開發實戰》，第二版修改版會再近期再版，歡迎持續關注。
NativeBase 是一個廣受歡迎的 UI 組件庫，為 React Native 提供了數十個跨平臺組件。在使用 NativeBase 時，你可以使用任意開箱即用的第三方原生庫，而這個項目本身也擁有一個豐富的生態系統，從有用的入門套件到可定制的主題模板。
React Native Elements是一個高度可定制的跨平臺 UI 工具包，完全用 Javascript 構建。該庫的作者聲稱“React Native Elements 的想法更多的是關于組件結構而不是設計，這意味著在使用某些元素時可以減少樣板代碼，但可以完全控制它們的設計”，這對于開發新手和經驗豐富的老手來說都很有吸引力。
Shoutem也是一個 React Native UI 工具包，由 3 個部分組成：UI 組件、主題和組件動畫。該庫為 iOS 和 Android 提供了一組跨平臺組件，所有組件都是可組合和可定制的。每個組件還提供了與其他組件一致的預定義樣式，這樣可以在無需手動定義復雜樣式的情況下構建復雜的組件。
項目地址：https://shoutem.github.io/ui/
UI Kitten這個庫提供了一個可定制和可重復使用的 react-native 組件工具包，該工具包將樣式定義移到特定位置，從而可以單獨重用組件或為組件設置樣式。通過傳遞不同的變量，可以很容易地“動態”改變主題樣式。
React Native Material UI是一組高度可定制的 UI 組件，實現了谷歌的 Material Design。請注意，這個庫使用了一個名為 uiTheme 的 JS 對象，這個對象在上下文間傳遞，以實現最大化的定制化能力。
React Native Material UI 項目地址:
React Native Material Kit是一套很有用的 UI 組件和主題，實現了谷歌的 Material Design。不過需要說明的是， React Native Material Kit在2017 年 12 月之后就停止維護了。
Nachos UI 是一個 React Native 組件庫，提供了 30 多個可定制的組件，這些組件也可以通過 react-native-web 在 Web 上運行。它通過了快照測試，支持格式化和 yarn，提供了熱火的設計和全局主題管理器。
Wix 工程公司正致力于開發這個進的 UI 工具集和組件庫，它還支持 react-native-animatable 和 react-native-blur。這個庫附帶了一組預定義的樣式預設（轉換為修飾符），包括 Color、Typography、Shadow、Border Radius 等。
React Native Paper是一個跨平臺的 UI 組件庫，它遵循 Material Design 指南，提供了全局主題支持和可選的 babel 插件，用以減少捆綁包大小。
Expo 示例應用程序：
React Native Vector Icons是一組 React Native 的可定制圖標，支持 NavBar/TabBar/ToolbarAndroid、圖像源和完整樣式。它非常有用，而且被數千個應用程序以及其他 UI 組件庫（如 react-native-paper）所使用。
Teaset是一個 React Native UI 庫，提供了 20 多個純 JS（ES6）組件，用于內容顯示和動作控制。雖然它的文檔不夠詳盡，但它簡潔的設計吸引了我的眼球。
antd-mobile是由螞蟻金融團隊推出的一個開源的react組件庫，這個組件庫擁有很多使用的組件。
react-native-button是github上一個開源的button組件，目前仍保持比較快的更新頻率，提供比較豐富的Button功能。
react-native-image-viewer是一個圖片大圖瀏覽的庫，點擊圖片可以放大縮小。
react-native-image-picker是實現多個圖像選擇、裁剪、壓縮等功能的第三方庫，可以使用該庫實現圖片、照相等操作。
react-native-picker是React native最常見的滾輪控件，可以實現單滾輪、雙滾輪和三滾輪效果。
react-native-scrollable-tab-view是一個帶有TabBar和可切換頁面的控件。，在Android中可以看成是ViewPager和TabLayout的結合。
react-native-app-intro是實現引導頁的庫，當然開發者也可以自己手動實現。
項目地址：https://github.com/fuyaode/react-native-app-intro
3D Touch是實現React native 3D Touch的庫，可以用此庫很方便的實現3D Touch。效果如下：
react-native-snap-carousel是可以實現復雜效果的輪播圖庫，實現的效果如下：
react-native-blur是專門用于實現毛玻璃效果的。
react-native-actionsheet是實現底部彈框的組件，可以在Android和iOS平臺上共用，當然也可以自己封裝實現。
react-native-popover是React Native開發中常見的彈出提示框操作，其效果如下圖所示：
圖表在移動開發中應用的場景可謂非常多，這里介紹一款使用的比較多的庫。
react-native-spinkit是一個很炫的加載動畫第三方庫，可以根據實際情況定制加載的動畫。
Facebook Design-iOS 10 iPhone GUI是iOS 10 公開版的 GUI 元素模板，包括 Sketch、Photoshop、Figma、XD 和 Craft。
第三方庫
UI套件
1， NativeBase
NativeBase 項目地址: https://github.com/GeekyAnts/NativeBase
入門學習地址: https://reactnativeseed.com/
2，React Native Elements
React Native Elements 項目地址:
https://github.com/react-native-training/react-native-elements
React Native Elements 示例項目：
https://react-native-training.github.io/react-native-elements/
3，Shoutem
4， UI Kitten
項目地址: https://github.com/akveo/react-native-ui-kitten
項目體驗地址：https://expo.io/@akveo/ui-kitten-explorer-app
5，React Native Material UI
https://github.com/xotahal/react-native-material-ui
包含庫組件及示例的清單：
https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md
6，React Native Material Kit
項目地址: https://github.com/xinthink/react-native-material-kit
7，Nachos UI
項目地址: https://github.com/nachos-ui/nachos-ui
8，React Native UI Library
項目地址: https://github.com/wix/react-native-ui-lib
9，React Native Paper
React Native Paper 項目地址:
https://github.com/callstack/react-native-paper
https://expo.io/@satya164/react-native-paper-example
10，React Native Vector Icons
項目地址: https://github.com/oblador/react-native-vector-icons
示例項目：https://oblador.github.io/react-native-vector-icons/
11，Teaset
項目地址：https://github.com/rilyu/teaset
其他庫
1，antd-mobile
項目地址：https://github.com/ant-design/ant-design-mobile
2，react-native-button
項目地址：https://github.com/ide/react-native-button
3，react-native-image-viewer
項目地址：https://github.com/ascoders/react-native-image-viewer
4，react-native-image-picker
項目地址：https://github.com/react-community/react-native-image-picker
5，react-native-picker
項目地址：https://github.com/beefe/react-native-picker
6，react-native-scrollable-tab-view
項目地址：https://github.com/happypancake/react-native-scrollable-tab-view
7，react-native-app-intro
8，3D Touch
項目地址：https://github.com/jordanbyron/react-native-quick-actions
9，react-native-snap-carousel
除此之外，還可以實現Galley效果等多種效果。
項目地址：https://github.com/archriss/react-native-snap-carousel
10，react-native-blur
項目地址：https://github.com/react-native-community/react-native-blur
11，react-native-actionsheet
項目地址：https://github.com/beefe/react-native-actionsheet
12，react-native-popover
13，react-native-charts-wrapper
項目地址：https://github.com/wuxudong/react-native-charts-wrapper
14，react-native-spinkit
https://github.com/maxs15/react-native-spinkit
15，Facebook Design-iOS 10 iPhone GUI
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在所有可用于創建web應用程序的語言中，JavaScript可能是最健壯的庫和框架選擇。事實上，有太多的東西，很難弄清楚該用哪一個，尤其是當你剛剛開始的時候。
JavaScript庫和框架之間的關鍵區別在于，庫由應用程序可以調用的函數組成，用于執行任務，而框架定義了開發人員如何設計應用程序。換句話說，框架調用應用程序代碼，而不是反過來。當然，開發人員仍然需要庫來使用JavaScript完成web上的基本任務。
JavaScript Libraries
1. D3.js
許多現代網站都是數據驅動的。例如，新聞站點必須不斷刷新它們的內容，因此不可能每隔幾秒鐘重新配置設置以支持這些更改。數據驅動文檔，或D3。庫的獨特之處在于它把數據放在首位。下面的截屏顯示了在D3中可以找到的許多數據演示中的一些。
單擊visual index中的一個條目，您將看到一個詳細頁面，在這個頁面中您可以看到數據表示的完整視圖(如下所示)，以及用于創建表示的底層代碼和數據：
該站點提供了完整的示例，旨在幫助您理解庫的功能。
這個庫的主要優點是它對內容的處理非常靈活。但另一方面是D3.js并沒有帶來太多的活力。例如，如果您是在一個電子商務網站工作，而不僅僅是提供信息，那么這個庫可能不是最好的選擇。除了極端的靈活性，D3.js的 relatively streamlined presentation幫助提高了速度。如果單單從圖表的功能來看，D3.js還是有點太龐大了。啊還不如去使用Chart.js短小精干的專門提供圖表功能的庫。
2. jQuery
大名鼎鼎的jQuery已經贏得了長期統治網頁的地位。許多網站仍然使用jQuery進行基本的文檔對象模型(DOM)操作，原因有三個：
jQuery非常容易學習。它提供的示例比大多數庫都多，所以您很有可能會找到一個示例來演示如何完成特定的任務。
jQuery非常快。因為它專注于出色地執行特定的任務，所以jQuery使快速執行這些任務成為可能。
jQuery擁有龐大的安裝基礎。它還擁有大量的社區支持和項目貢獻者。
我們可以預期這個庫肯定會長期存在。額外的開發時間也意味著文檔是非常完善的。如下所示，文檔將主題分解為容易理解的部分，然后您可以根據需要深入研究其他細節：
當然，沒有什么是完美的。例如，有時jQuery在多個瀏覽器上的工作方式并不完全相同。JQuery首先關注這些問題，您可以在站點上找到有關瀏覽器支持的信息。
最后，與其他庫不同，jQuery并不是一個完整的解決方案。您需要另一個產品，如jQuery UI(參見下一個條目)來構建一個完整的應用程序。重要的是要認識到，在使用jQuery時，您的站點將更加模塊化，并且依賴于更多的庫(雖然這并不一定是壞事)。
3. jQuery UI
jQuery UI只是jQuery的眾多插件之一，但它是您最?？吹降?，這也是我們在這里包含它的原因。在合并jQuery之后，使用jQuery UI向應用程序添加基本的圖形元素。jQuery UI庫提供了各種有趣的小部件，如手風琴、滑塊、工具提示和數據表，這些小部件使您可以配置應用程序以提供有用的服務。
您可以深入到特定的小部件或其他控件來查看它們是如何工作的。頁面通常包含頂部的控件，然后是使用說明和示例代碼。與jQuery一樣，您可以從一個簡單的示例開始，但可以根據需要深入了解添加的內容。
這個庫Library 與眾不同有幾個原因。最重要的是，JQuery UI幾乎適用于任何瀏覽器，因此用戶不太可能抱怨應用程序沒有按預期工作。jQuery UI還提供了大量的附加組件。例如，雖然jQuery UI缺乏時間選擇器，但您可以從trentrichardson.com/examples/timepicker等地方獲得執行該任務的附加程序。
jQuery庫組的一個問題是它們變得非常大。有時候，一個庫的特性太豐富了。JQuery庫的大小會使它們在較小的設備上加載速度變慢。可以使用替代的第三方庫，如Granim.js和Multiple.js的出現提供了jQuery特性的子集，有時還提供了一組有重點的附加功能特性，加載時間大大加快。
4. Parsley
表單驗證是一項重要的任務。因為現在的數據經常被機器分析，所以干凈的數據比以往任何時候都更重要。事后清理數據是費時的，而且從沒有像讓用戶首先提供正確的信息那樣準確。
與任何其他JavaScript庫相比，Parsley提供了更多的表單驗證技術。你可以選擇你需要的驗證級別，但它們可能會變得非常復雜：
甚至如下所示的簡單驗證也包含許多不同的驗證類型，以及執行任務所需的代碼。完成最常見的驗證是多么容易。(除非嘗試驗證復雜的數據，否則不需要進行繁重的編碼。)
5. QUnit
許多庫提供的測試功能有很多不足之處。即使您使用腳本，手動測試復雜的應用程序也會很麻煩，而且需要花費大量的時間——如果它能找到所有的錯誤的話。
QUnit是用于JavaScript的幾個單元測試庫之一。雖然有些人可能會認為它有點過時，但它是相對全面的，并且具有強大的社區支持和短的學習曲線。QUnit站點提供了豐富的入門信息，包括關于單元測試的完整教程。
6. React
通常被認為是一個庫，而React有時被稱為框架。在模型-視圖-控制器(MVC)方法的上下文中，React提供了視圖部分。它不假設您正在使用的基礎技術堆棧來建模或控制數據。所有的React興趣的就是在屏幕上顯示數據?？紤]到這一點，它不依賴于瀏覽器文檔對象模型(DOM)，而是使用一個快速顯示信息的輕虛擬DOM。React最棒的一點是它是聲明性的，這意味著你要告訴框架你想做什么，而不是怎么做。
您為使用MVC的速度和能力付出的代價是增加了一定程度的復雜性。即使是一個小的組件也需要相當多的代碼(如React網站上的例子所演示的)。當你和真正的大型項目一起工作時，你獲得的是靈活性和速度。
JavaScript Frameworks（框架）
1. Angular
Angular framewor框架使作為MVC的控制器部分擴展HTML成為可能?？刂破魇荄OM組件背后的行為。有了 Angular，就有可能以一種既自然又直接的方式創造新的行為。這些擴展最終看起來像是HTML的附加部分，而不是固定的東西。 Angular 網站明確了使用該產品的兩個基本原因：“速度和性能”和“難以置信的工具”。
然而，編碼可能會變得復雜，這個框架可能更適合大企業而不是小創業公司。即使是 Angular 站點上的簡單示例也依賴于快速創建復雜性的多個文件。值得注意的是， Angular framewor的版本也依賴于TypeScript，而不是純JavaScript，這增加了學習曲線，但提供了可擴展性。
幸運的是，該軟件附帶了大量教程，如本文所示，這將使有經驗的開發人員更容易快速地開始工作。
2. Ember.js
一個自稱為“有抱負的web開發人員的框架”的框架確實有些嚴肅。像微軟、Netflix和LinkedIn這樣的知名公司都在使用Ember.js。因為它使用模型-視圖-視圖-模型(MVVM)模式，并將最佳實踐作為框架的一部分進行合并。最重要的是，它的伸縮性非常好。有趣的是,Ember.js不僅可用于web開發，您也可以使用它來構建移動應用程序和桌面應用程序——它被用于構建Apple Music。
與許多其他框架不同，您可以使用完整的基于ember的工具套件來創建高度兼容的開發環境。Ember CLI(命令行接口)提供了對大量工具的訪問，您可以使用腳本自動化。例如，,Ember.js數據通過對象關系映射(ORM)提供面向web的數據訪問。與此同時，Ember Inspector是Firefox和Chrome瀏覽器的一個插件，它可以使調試更加容易。
盡管有它這么給力，Ember.js的快速入門教程只需要5分鐘就可以完成。當然，標準教程需要的時間要長得多，但是能產生更多受人尊敬的結果，如下所示：
這個框架的文檔包含您需要的所有主題，包括對象模型、模板、組件、控制器和模型的討論。還有一個博客和Ember.js社區可以提供額外的幫助。
3. Node.js
Node.js是一個異步的、事件驅動的JavaScript運行時，具有一些獨特的特性。首先，如果它沒有工作可做，它只是“去睡覺”。這聽起來并不是什么大問題，但是如果你在公共云上托管你的網站，“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來完成它的工作，它不像其他框架那樣傾向于死鎖。這個產品更像jQuery而不是jQueryUI，因為您不使用它來創建用戶界面。相反，您可以創建響應事件的代碼——客戶端生成事件，服務器響應這些事件。用戶界面是顯示任何結果的獨立元素。
因為Node.js是如此簡單和快速，社區支持是首屈一指的，你可以在最不可能的地方找到它。有900萬個實例運行在超過5萬個包上。換句話說,Node.jsjs構成了您使用的許多包的基礎。
Node.js,開發人員可以構建:
后端應用程序
博客
客戶管理系統
實時服務，如聊天應用和游戲
REST api
社交網絡應用程序
實用程序和工具
4. Vue.js
Vue是一個多功能的開源JavaScript框架，它是“漸進的”，這意味著與“單一框架”不同，Vue是從底層設計的，以漸進的方式采用。在庫和全功能框架之間擴展，Vue使用“基于組件的開發模型”，可以將Vue組件混合和匹配到項目中。
關鍵的Vue特性包括組件、模板、轉換和雙向數據綁定，但是它最顯著的特性可能是它的“反應性”系統?；旧希瑀eactivity指的是在Vue中自動更新一個JavaScript對象，并且不引人注意地更新Vue模板。
Vue是為任何具有HTML、CSS和JavaScript工作知識的人而構建的。
其他的選擇
別忘了還有更多的JavaScript庫、社區、集合和框架，通常都有特定的焦點區域。
例如，CodePen是一個免費的在線社區，用于測試和展示HTML、CSS和JavaScript的混合。可以把它看作是前端設計師和開發人員的社會環境、在線開發社區和具有統一界面的編輯器。每個代碼頁條目都被稱為鋼筆，您可以將它們作為集合的一部分來查看。有些收藏品很奇特，如anime.js(動畫) ，而其他的，比如有趣的js，會有一些你在其他地方看不到的有趣的小部件。它也直接與反應一起工作。
類似地，Jest是一個“零配置”的JavaScript測試解決方案，旨在使用React進行開箱即用的測試。
BIDEO.JS提供了一種顯示全屏背景視頻的方法，例如，如果您正在為旅行社構建一個站點，這將非常有用。
底線
現在應該很清楚了，問題不是找到一個JavaScript庫或框架來幫助您做一些有趣的事情——而是找到一個庫來幫助您完成您需要完成的任務。
此外，您還需要確保您所依賴的庫將在明天仍然存在。沒有人想要重新工作他們的應用程序，因為它使用的JavaScript庫不再可用。盡管現在大多數現代JavaScript庫和框架都非常可靠，但您仍然需要確保它們與用戶所依賴的所有設備和瀏覽器兼容。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
方式一
<!--1.1使用Vue.extend來創建全局的Vue組件--> var tem1 = Vue.extend({
template:'<h3>這是使用 Vue.extend 創建的組件</h3>' //指定組件要展示的HTML結構
}); <!--1.2使用Vue.component('組件名稱',創建出來的組件模板對象)--> Vue.component('myTem1',tem1);
/* <!--注意--> 使用 Vue.component() 定義全局組件的時候，
組件名稱使用 駝峰命名，則在引用組件的時候，需要把大寫改為小寫，并且用 '-'將單詞連接
組件名稱不適用駝峰命名，則直接拿名稱來使用即可
*/ <!--組合方式--> Vue.component('myTem1',Vue.extend({
template : '<h3>這是使用 Vue.extend 創建的組件</h3>'
})) <div id="app"> <!-- 如果要使用組件，直接把組件的名稱以 HTML 標簽的形式，引入到頁面中--> <my-tem1> </my-tem1> </div>
方式二
直接使用Vue.component()
Vue.component('mycom2',{
template : '<h3>這是使用 Vue.component 創建的組件</h3>' })
但是這樣寫會有一個問題：
<!--在h3標簽后緊接一個span標簽的話就會出問題了--> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span>
這個問題是在 組件template屬性指向的模板內容，必須有且只能有唯一的一個根元素
所以修改代碼如下：
Vue.component('mycom2',{
template :
'<div> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> </div>'
})
運行結果如下：
不過這種方式也有一個瑕疵，就是template 屬性的值是HTML標簽，而在軟件中，并沒有智能提示，容易出錯，若使用這種方式，需要仔細，避免出錯
方式三
<!--1.定義組件：--> Vue.component('mycom3',{
template : '#tem1'
}); <!--2.在被控制的 #app 外面使用 template 元素，定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>
運行結果如下：
這是Vue創建組件(全局)的3種方式，其實相差不多，希望對大家有所幫助
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.url:
要求為String類型的參數，（默認為當前頁地址）發送請求的地址。
2.type:
要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
3.timeout:
要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
4.async:
要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。
5.cache:
要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。
6.data:
要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType:
要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。
text：返回純文本字符串。
8.beforeSend：
要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){
this; //調用本次ajax請求時傳遞的options參數
}
9.complete：
要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調用本次ajax請求時傳遞的options參數
}
10.success：要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
(1)由服務器返回，并根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
}
11.error:
要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}
12.contentType：
要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
13.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
14.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
15.global：
要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。
16.ifModified：
要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
17.jsonp：
要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
18.username：
要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。
19.password：
要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。
20.processData：
要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
21.scriptCharset：
要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
案例代碼：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有內容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
22.順便說一下$.each()函數:
$.each()函數不同于JQuery對象的each()方法，它是一個全局函數，不操作JQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或內容。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Web項目前后端分離開發時，經常會遇到跨域請求和跨域攜帶Cookie的相關問題：
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
getResponse().setHeader("Access-Control-Allow-Origin","*");
//表明服務器支持的所有頭信息字段
getResponse().setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma,Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
/** 目前測試來看為了兼容所有請求方式，上面2個必須設 **/
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
getResponse().setHeader("Access-Control-Allow-Credentials", "true");
// 首部字段 Access-Control-Allow-Methods 表明服務器允許客戶端使用 POST, GET 和 OPTIONS 方法發起請求。
//該字段與 HTTP/1.1 Allow: response header 類似，但僅限于在需要訪問控制的場景中使用。
getResponse().setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//表明該響應的有效時間為 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須為同一請求再次發起預檢請求。
//請注意，瀏覽器自身維護了一個最大有效時間，如果該首部字段的值超過了最大有效時間，將不會生效。
getResponse().setHeader("Access-Control-Max-Age", "86400");
// IE8 引入XDomainRequest跨站數據獲取功能,也就是說為了兼容IE
getResponse().setHeader("XDomainRequestAllowed","1");
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
response.setHeader("Access-Control-Allow-Credentials", "true");
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//表明服務器支持的頭信息字段
response.setHeader("Access-Control-Allow-Headers","content-type");
前端根據實際情況修改發起請求的ajax，示例：
$.ajax({
type: "POST",
url: "實際的請求地址",
data: {參數：參數值},
dataType: "json",
crossDomain:true, //設置跨域為true xhrFields: {
withCredentials: true //默認情況下，標準的跨域請求是不會發送cookie的 },
success: function(data){ alert("請求成功");
}
});
另外還有代理、jsonp等方式不做介紹了
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.說下需求：點擊標題 跳轉 預覽的pdf 頁，下載功能 可選【最好有】。
2.實現結果 ：
3.代碼實現：
依賴pdf.js 【需要下載完整 控件】
下載官網：http://mozilla.github.io/pdf.js/
點擊 ‘Download ’ 到下載頁
git 克隆 或者下載。
下載后文件長這樣：
【重點在后面 項目如何部署組裝】
1.新建一個空項目 把文件放到項目根目錄下：
紅色圈里 是官網下載的 就改個文件名字，然后拖進項目里，完全不用動里面任何文件記住，有需要另說。
綠色是我寫的【dowwn.html 是測試文件;static 放pdf 文件】 下面貼代碼：
list.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
<ul>
-
<li dataSrc = 'KD-122LA火災探測報警器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火災探測報警器說明書ccc</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-212LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-216LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'Kd-122LA_KD-601系統遙控器使用說明.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系統遙控器使用說明</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-602LA_SOS一鍵救助使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一鍵救助使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-701LA_溢水探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-702LA紅外人體移動探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA紅外人體移動探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-703LA_門窗探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 門窗探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-805A_WiFi系統主機使用說明書_V1.00.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系統主機使用說明書_V1.00</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'WIFI智慧家庭安防系統操作說明書_v0.01.pdf'onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系統操作說明書_v0.01</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
-
-
</ul>
-
<script src="js/jquery.min.js"></script>
-
<script>
-
function fun(e){
-
// console.log(e);
-
var dataSrc = $(e).attr('dataSrc');
-
// console.log(dataSrc);
-
// sessionStorage.setItem('dataSrc',dataSrc);
-
// window.location.href='index.html'
-
var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
-
$.ajax({
-
url: urlSrc,
-
type: "get",
-
success: function(xhr, data){
-
if (navigator.userAgent.indexOf('Android') > -1) {
-
//判斷移動端是android 還是ios ，若是android 則要借助pdf插件
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
} else {
-
//ios直接打開pdf
-
//window.location.href = url;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
}
-
},
-
error: function(){
-
//window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
-
}
-
});
-
}
-
</script>
-
</body>
-
-
</html>
完畢！
注釋：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html? 直接跳轉到 萬能的pdf 組件里的html 頁，該有的 國際化和下載打印功能 人家都寫好了！
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
-
<a href="static/1.pdf">00001</a>
-
-
-
</body>
-
-
</html>
-
哈哈，直接a 標簽 href 跳轉 pdf文件；也是ok的哦！【蘋果手機：直接預覽；；；安卓:下載 鏈接 】
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下
Css代碼
查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：
1. 樣式表的元素選擇器選擇越，則其中的樣式優先級越高：
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優先級大于.current_block的優先級，及時.current_block是添加的，也不起作用。
2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優先級越高
注意，這里是樣式表文件中越靠后的優先級越高，而不是在元素class出現的順序。比如.class2 在樣式表中出現在.class1之后：
Css代碼
而某個元素指定class時采用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優先級更高，color的屬性為red，而非black。
3. 如果要讓某個樣式的優先級變高，可以使用!important來指定：
Css代碼
此時class將使用black，而非red。
對于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：
Css代碼
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
Css代碼
此時無需作任何其他改動即可生效?？梢姷诙N方案更簡單一些。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
獲取窗口屬性
為了解決兼容性的問題，我們來封裝一個函數：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
為了解決兼容性的問題，我們來封裝一個函數:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
查看元素的幾何尺寸
讓滾動條滾動
練習：
做一個小閱讀器，會自動翻頁。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加鎖，防止連續點start產生累加加速 start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
藍藍設計的小編 http://www.syprn.cn