如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、首先看下什么是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成为可能。控制器是DOM组件背后的行为。有了 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特性包括组件、模板、转换和双向数据绑定，但是它最显著的特性可能是它的“反应性”系统。基本上，reactivity指的是在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代码
此时无需作任何其他改动即可生效。可见第二种方案更简单一些。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
获取窗口属性
为了解决兼容性的问题，我们来封装一个函数：
<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.lanlanwork.com