闲记

最新推荐文章于 2022-02-12 16:22:30 发布

qq_32444825

最新推荐文章于 2022-02-12 16:22:30 发布

阅读量356

点赞数

分类专栏：杂项文章标签：闲记

本文链接：https://blog.csdn.net/qq_32444825/article/details/76677868

版权

杂项专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.##############
js中的join(),reverse()与 split()函数用法解析
<script>
/*
* 1：arrayObject.reverse()
* 注意：该方法会改变原来的数组，而不会创建新的数组。
* 2：arrayObject.join()
* 注意：join() 方法用于把数组中的所有元素放入一个字符串。
* 元素是通过指定的分隔符进行分隔的。
* 指定分隔符方法join("#");其中#可以是任意
* 3：stringObject.split(a,b)这是它的语法
* 方法：用于把一个字符串分割成字符串数组.
* a是必须的决定个从a这分割
* b不是必须的，可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
* 注意：返回的数组中不包括a本身；
* 提示和注释：
* 注释：如果把空字符串 ("") 用作 a，那么 stringObject 中的每个字符之间都会被分割。
* 注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。
*
*
*/
var str = "a,b,c,d,e,f,g";//声明一个字符串
str = str.split(',').reverse();//用split函数拆分成数组对象，再用reverse函数将数组倒序排列
alert(str.length+":"+typeof(str));
alert(typeof(str.join)+":"+str.join('#')+":"+str.join('#').length);
var s = str.reverse().join("#");
alert(typeof(s)+":"+s);
</script>
2.############ Vue-cli搭建完，各文件解释
a、脚手架vue-cli搭建完成后，会生成一些文件，总结学习一下这些文件是做什么用的：Vue-cli搭建完，各文件解释
1、一级目录：
build和config文件夹是wbepack配置的文件夹；
node_modules是在我npm install后存放一些依赖和插件的文件夹；
src是存放我们项目源码的文件，通常我们的vue组件就写在这里，其中main.js是页面的入口文件，初始化vue实例并使用需要的插件【插件router、resource等】，而App.vue看作是一个大组件，也就是整个页面的vue实例文件；
static是存放第三方静态资源的，比如css的reset.css等等。

2、二级目录：
.babelrc是Es6语法的一些转换配置，其中presets是预设，plugins是转换的插件，comments的值如果为false，表示转换后不生成注释；
.editorconfig是编辑器的配置，它配置了一些语言，缩进的风格大小，换行符风格等等；
.eslintignore是忽略语法检查的目录文件，一般是build/*.js、config/*.js这两个文件；
.eslintrc.js是eslint的配置文件，其中extends: 'standard'表示标准规则，如：要求===之类的；‘rule’表示配置具体的规则，我们改eslint就在这个下面进行修改，如：// 没有分号就报错 'semi': ['error', 'always']或者忽略某种检查，将值设为0即可；
index.html是入口文件，js和css会被动态的插入这个文件；
package.json定义了整个项目所需要的这种模块，以及项目的配置信息。

b、HTML  注释、CSS/JS //注释和 /*.....*/ 注释

3.##########################
1.双向绑定
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js'
}
})

2.渲染列表
<div id="app">
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
todos:[
{text:'学习vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
}
})

3.处理用户输入
<div id="app">
<p>{{message}}</p>
<input v-model='message'/>
<button type="button" v-on:click="reverseMessage">反转</button>
</div>
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})

4.记事本
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button type="button" v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
newTodo:'',
todos:[
{text:'学习Vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo='';
}
},
removeTodo:function(index){
this.todos.splice(index,1);
}
}
})

5. 插值
<div id="app">

<p>{{*message}}</p>

<p>{{{raw_html}}}</p>

<p id="item-{{id}}">html特性</p>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js',
raw_html:'<span>原始的html</span>',
id:'1'
}
})

6.绑定表达式
<div id="app">

<p>{{number+1}}</p>
<p>{{ok ? 'Yes' : 'No'}}</p>
<p>{{message.split('').reverse().join('')}}</p>

<p>{{name | capitalize}}</p>
</div>
new Vue({
el:'#app',
data:{
number:2,
ok:false,
message:'123456789',
name:'brucee lee'
}
})

7.指令
<div id="app">

<a v-bind:href="url" v-on:click="dosomething">指令带参数</a>

<a :href="url" @click="dosomething">指令缩写</a>
</div>
new Vue({
el:'#app',
data:{
url:'http://g.pptv.com'
},
methods:{
dosomething:function(){
alert(this.url);
}
}
})

8.计算属性
<div id="app">
<p>a={{a}},b={{b}}</p>
<p>{{fullName}}</p>
</div>
new Vue({
el:'#app',
data:{
a:1,
firstName:'Micro',
lastName:'Jodon'
},
computed:{
b:function(){
return this.a + 1;
},
/*fullName:function(){
return this.firstName + ' ' + this.lastName;
}*/
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName;
},
set:function(newValue){
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length-1];
}
}
}
})

9.class与css绑定
.static{
width: 200px;
margin: 20px auto;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
}
.class-a{
background-color: #f00;
}
.class-b{
color: #fff;
}
.class-c{
padding: 5px 0;
}
<div id="app">

<p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
<p class="static" v-bind:class="classObject">绑定class</p>

<p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
<p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>

<p class="static" v-bind:style="styleObject">绑定style</p>

<p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
</div>
new Vue({
el:'#app',
data:{
classA:'class-a',
classB:'class-b',
classC:'class-c',
isA:true,
isB:false,
isC:true,
classObject:{
'class-a':true,
'class-b':true
},
styleObject:{
color:'red',
fontSize:'13px',
backgroundColor:'#00f'
},
styleObjectA:{
color:'green',
fontSize:'16px'

},
styleObjectB:{
backgroundColor:'#f0f',
transform:'rotate(7deg)'
}
}
})
10.条件渲染
<div id="app">
<h1 v-if="Math.random() > 0.5">对不起！</h1>
<h1 v-else>没关系</h1>

<template v-if="ok">
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</template>

<h1 v-show="isShow">Hello!</h1>

<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});

// 注册
Vue.component('custom-component', MyComponent);
new Vue({
el:'#app',
data:{
ok:true,
isShow:false,
condition:true
},

})
11. 列表渲染
ul{
list-style: none;
width: 150px;
}
.divider{
height: 2px;
background-color: #00f;
}
span{
padding: 0 2px;
}
<div id="app">

<ul>
<template v-for="item in items" track-by="_uid">
<li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
<li class="divider"></li>
</template>
</ul>

<ul>
<li v-for="(key,val) in object">{{key}} : {{val}}</li>
</ul>

<span v-for="n in 10">{{ n }}</span>
</div>
var vm=new Vue({
el:'#app',
data:{
parentMessage:'水果',
items:[
{ _uid:'001',message:'香蕉'},
{ _uid:'002',message:'橘子'}
],
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
//变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
vm.items.shift();//取出第一项
//非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item) {
return item.message.match(/子/);
})
12.方法与事件处理器
<div id="app">

<button type="button" v-on:click="say('Hello',$event)">提交</button>


<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat"></a>


<form v-on:submit.prevent></form>


<div v-on:click.capture="doThis">...</div>


<div v-on:click.self="doThat">...</div>


<input v-on:keyup.enter="submit">

</div>
var vm=new Vue({
el:'#app',
methods:{
say:function(msg,event){
alert(msg+","+event.target.tagName);
event.preventDefault();
}
}
});
13.表单控件绑定
<div id="app">

<span>这是您的评论：</span>
<p>{{message}}</p>
<textarea v-model="message" placeholder="请输入您的评论"></textarea>
<br>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>

<input type="checkbox" id="jack" value="马云" v-model="checkedNames">
<label for="jack">马云</label>
<input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
<label for="john">马化腾</label>
<input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
<label for="mike">李彦宏</label>
<br>
<span>选中的值: {{ checkedNames | json }}</span>
<br>

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的值: {{ picked }}</span>
<br>

<select v-model="selected">
<option selected>湖北</option>
<option>北京</option>
<option>上海</option>
</select>
<span>选中的值: {{ selected }}</span>
<br>

<select v-model="selecteds" multiple>
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<br>
<span>选中的值: {{ selecteds | json }}</span>
<br>




<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
<span>选中时的值：{{toggle}}</span>
<br>

<input type="radio" v-model="pick" v-bind:value="c">男
<input type="radio" v-model="pick" v-bind:value="d">女
<span>选中时的值：{{pick}}</span>


<input v-model="msg" lazy>

<input v-model="age" number>

<input v-model="msg" debounce="500">
</div>
var vm=new Vue({
el:'#app',
data: {
checkedNames: [],
options:[
{text:'南京',value:'南京'},
{text:'苏州',value:'苏州'},
{text:'无锡',value:'无锡'}
],
a:'选中',
b:'未选中',
c:'男',
d:'女'
}
});

作者：建人boy
链接：https://www.imooc.com/article/19153

4.#############################

webpack 入门
目录
1 安装 webpack
2 初始化项目
3 webpack 配置
4 自动刷新
5 第三方库
6 模块化
7 打包、构建
8 webpack 模板
我最近大量使用的是 jspm，但因为用它搭建的前端开发环境中，写测试代码非常困难，而项目又需要写测试，所以决定先试试 webpack。
安装 webpack
webpack 是一个 npm 包，所以我们通过 npm 命令来全局安装：
npm install webpack -g
安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。
初始化项目
grunt.js 一类工具可以借助 yeoman 来初始化项目，目前我并没有看到 webpack 有类似方法，所以当 node.js 项目来初始化。
npm init 创建一个 package.json 文件
npm install webpack --save-dev 在当前目录下安装局域的 webpack
完成以上两个步骤后，我们的项目下有一个 package.json 文件，一个 node_modules 文件夹，我们还需要一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
</body>
</html>
webpack 配置
我们的代码将组织在 JavaScript 模块中，项目会有一个入口（entry）文件，比如 main.js，我们需要通过 webpack 的配置文件指明它的位置。
在根目录新建一个 webpack.config.js 文件，添加如下内容：
module.exports = {
entry: './main.js'
};
因为我们在项目部署前需要打包合并 js 文件，所以还需要在 webpack.config.js 中配置一个 output：
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
output 定义我们打包出来的文件位置及名称。
完成以上后，试着在项目根目录下执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件：
webpack build
自动刷新
到现在为止，我们还没在浏览器中打开 index.html 文件，实际上，我们连 bundle.js 文件都还没加入 index.html 文件中。现在且先加入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
<script src="./bundle.js"></script> 
</body>
</html>
这是 webpack 异于其它工具的地方，它在 HTML 文件中直接引用了 build 后的 js 文件，而不是原始的 main.js 文件。这就会有几个问题：
Q: main.js 或它所引用的模块的变化如何实时编译到 bundle.js？
A: 非常简单，在根目录下执行 webpack --watch 就可以监控文件变化并实时编译了
Q: 上面只是实时编译了 js 文件，我们该如何把变化同步到浏览器页面上，实现实时刷新？
A: webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决上面一个问题。
?
安装 webpack-dev-server
执行 npm install webpack-dev-server -g 在全局环境中安装 webpack-dev-server
在项目根目录下执行命令：
$ webpack-dev-server
这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的项目文件了。
此时，我们可能会认为，
js 文件修改
webpack-dev-server 监控到变化
webpack 重新编译
实时更新浏览器中的页面
但不幸的是，我们「自以为是」了。http://localhost:8080 这个网站对 js 文件的变化无动于衷。
我们可以启用 webpack-dev-server 的 hot 模式，在代码中插入如下一行：
<script src="http://localhost:8080/webpack-dev-server.js"></script>
这样 http://localhost:8080/ 这个网址也可以根据 js 的变化相应地自动刷新了。
第三方库
webpack 并不是包管理器，所以如果我们要使用第三方库，则需要借助 npm 或其它工具。比如，在项目里安装 jQuery：
npm install jquery --save
模块化
webpack 自称 module bundler，在它的定义中，CSS、图片、文件等等，都可以通过相应的 loader 加载，变成 JavaScript模块，以下具体展开说明。
模块化 JavaScript
如果我想使用 ES6 的方式引入某个 es6 模块，比如：
import $ from 'whatever';
怎么办？浏览器并不提供原生支持，webpack 通过各种 loader 来解决这类问题。比如这 ES6 的语法，可以借助 babel-loader：
安装 babel-loader
npm install --save-dev babel-loader
配置 webpack.config.js
在 module.exports 值中添加 module：
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './main.js']
},
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
}
这样我们就可以在我们的 js 文件中使用 ES6 语法，babel-loader 会负责编译。
上面的方法，是在 webpack.config.js 文件中定义某一类型文件的加载器，我们也可以在代码中直接指定：
import $ from 'babel!whatever'
因为 babel-loader 允许我们使用 ES6 语法，于是我们的模块完全可以用 ES6 的 module 来组织代码： export 一个简单的模块：
// script/log.js 文件
export default (param) => {
console.log('你好啊', param);
}
然后在 main.js 中导入使用：
// main.js 文件
import log from "./script/log.js";
CSS 加载器
我们可以按传统方法使用 CSS，即在 HTML 文件中添加：
<link rel="stylesheet" href="style/app.css">
但 webpack 里，CSS 同样可以模块化，然后使用 import 导入。
因此我们不再使用 link 标签来引用 CSS，而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部，后者负责解读、加载 CSS 文件。
安装 CSS 相关的加载器
npm install style-loader css-loader --save-dev
配置 webpack.config.js 文件
{
// ...
module: {
loaders: [
{ test: /\.css$/, loaders: ['style', 'css'] }
]
}
}
在 main.js 文件中引入 css
import'./style/app.css';
重启 webpack-dev-server
模块化 CSS
上一步里，我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的，也就是说，我们只是换了种加载 CSS 的方式，在书写 CSS 的时候，还是需要注意使用命名规范，比如 BEM，否则全局环境 CSS 类的冲突等问题不会消失。
这里，webpack 做了一个模块化 CSS 的尝试，真正意思上的「模块化」，即 CSS 类不会泄露到全局环境中，而只会定义在 UI 模块内 – 比如 react.js 这类模块，或者 web components。类似的尝试还有 ember-component-css 与 jspm 的 plugin css。
autoprefixer
我们在书写 CSS 时，按规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。
安装 autoprefixer-loader
npm install autoprefixer-loader --save-dev
配置 webpack.config.js
loaders: [{
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
//...
}]
重启 webpack-dev-server
假如我们在 CSS 中写了 body { display: flex; } 规则，再查看 bundle.js 文件的话，我们能看到类似如下的代码：
body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}
图片
图片同样可是是模块，但使用的是 file loader 或者 url loader，后者会根据定义的大小范围来判断是否使用 data url。
import loadingIMG from 'file!../img/loading.gif'
React.render(<img src={loadingIMG} />, document.getElementById('app'));
打包、构建
项目结束后，代码要压缩、混淆、合并等，只需要在命令行执行：
webpack
即可，webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。
webpack 模板
上面说的是一步一步使用 webpack 搭建开发环境，当然，实际应用中，大可以借用一些模板，比如 react hot boilerplate 这样的库。

5.#################################
windows安装yarn
下载地址：https://yarnpkg.com/latest.msi
npm 的方式：npm install -g yarn
关于安装，你可以去官网查看到更多资料 https://yarnpkg.com/en/docs/install
安装完成后，测试下自己的版本：yarn --version

开始使用，我们新建一个文件夹yarn测试下，输入命令: yarn init，一路enter下去就行
然后我们试着加一些依赖：yarn add gulp-less
如果加入具体版本可以后面写上@0.x.x 这样子
Po主试着装了三个gulp插件，这个时候package.json里面是这个样子的：
如果你要移除的话，可以使用yarn remove package_name 比如：yarn remove gulp-less
升级更新某个依赖可以使用这个:yarn upgrade [package]
6.###########################
Error: Cannot find module 'webpack-merge'
缺少webpack-merge包,首先查看是否安装了webpack-merge模块

npm ls --depth=0
如果没有重新安装

npm install
还是不行的话说明package.json里缺少webpack-merge的配置,直接安装

npm install webpack-merge --save-dev
7.########################
Node.js Error: Cannot find module express的解决办法

在执行完下面的全局安装
npm -p install express
复制代码

仍报Error: Cannot find module express错误。

解决办法：
在自己的工程目录下再次执行
npm install express
复制代码
8、###############
Error: Cannot find module 'webpack'
npm install webpack --save
9.####################

vuex的使用
开始：首先，dos或者直接进入所要建立项目的文件夹；使用命令：vue init airyland/vux2 projectPath（自命名名称），或者用命令：vue init webpack projectPath，后者（使用命令npm run dev时）会自动打开网页；
其次，用命令：cd projectPath
再次，npm install --registry=https://registry.npm.taobao.org 或者npm install // 安装依赖包
最后，npm run dev；// 启动服务；---会打开页面监听

###########################
1、parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}' //所给字符串
结果：

JSON.parse(str) 得json对象Object如下：

age: "23"
name: "huangxiaojian"
__proto__: Object

2、stringify()用于从一个对象解析出字符串，如
var a = {a:1,b:2} //所给对象

结果：

执行：JSON.stringify(a) 得到：

"{"a":1,"b":2}"
3、json的解析方法共有两种：eval_r() 和 JSON.parse()。用eval解析一个json字符串而造成原先的value的值改变。
4、JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 javascript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对js操作JSON的要领做下总结。
在JSON中，有两种结构：对象和数组。
1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间运用 “,”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如：
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用 “,”（逗号）分隔。
例如：
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要运用上面的str1，必须运用下面的要领先转化为JSON对象：
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后，就可以这样读取：
Alert(obj.name);
Alert(obj.sex);
特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。
二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
例如：
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
留心：
上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。
############
表单提交中get和post方式的区别有5点
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5.get安全性非常低，post安全性较高。

HTTP请求：get与post方法的区别
HTTP 定义了与服务器交互的不同方法，最基本的方法是 get 和 post。事实上 get 适用于多数请求，而保留 post仅用于更新站点。根据 HTTP 规范，get 用于信息获取，而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，get 请求一般不应产生副作用。幂等的意味着对同一 URL的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。从根本上讲，其目标是当用户打开一个链接时，她可以确信从自身的角度来看没有改变资源。比如，新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻，该操作仍然被认为是安全的和幂等的，因为它总是返回当前的新闻。反之亦然。post请求就不那么轻松了。post 表示可能改变服务器上的资源的请求。仍然以新闻站点为例，读者对文章的注解应该通过 post请求实现，因为在注解提交之后站点已经不同了（比方说文章下面出现一条注解）；
在FORM提交的时候，如果不指定Method，则默认为get请求，Form中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送，但空格转换为“+“号，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISOLatin-1）值。get请求请提交的数据放置在HTTP请求协议头中，而post提交的数据则放在实体数据中；
get方式提交的数据最多只能有1024字节，而post则没有此限制。
在表单里使用”post”和”get”有什么区别
在Form里面，可以使用post也可以使用get。它们都是method的合法取值。但是，post和get方法在使用上至少有两点不同：
1、get方法通过URL请求来传递用户的输入。post方法通过另外的形式。
2、get方式的提交你需要用Request.QueryString来取得变量的值，而post方式提交时，你必须通过Request.Form来访问提交的内容。
仔细研究下面的代码。你可以运行之来感受一下：
代码
〈!–两个Form只有Method属性不同–〉
〈FORM ACTION=“getpost.asp” METHOD=“get”?
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=get”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈FORM ACTION=“getpost.asp” METHOD=“post”〉
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=post”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈BR〉
〈% If Request.QueryString(“Text”) 〈〉 ““ Then %〉
通过get方法传递来的字符串是： “〈B〉〈%= Request.QueryString(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
〈% If Request.Form(“Text”) 〈〉 ““ Then %〉
通过post方法传递来的字符串是： “〈B〉〈%= Request.Form(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
说明
把上面的代码保存为getpost.asp，然后运行，首先测试post方法，这时候，浏览器的url并没有什么变化，返回的结果是：
通过post方法传递来的字符串是： "Hello World"
然后测试用get方法提交，请注意，浏览器的url变成了：
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果是：
通过get方法传递来的字符串是： "Hello World"
最后再通过post方法提交，浏览器的url还是：
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果变成：
通过get方法传递来的字符串是： "Hello World"
通过post方法传递来的字符串是： "Hello World"
提示
通过get方法提交数据，可能会带来安全性的问题。比如一个登陆页面。当通过get方法提交数据时，用户名和密码将出现在URL上。如果：
１、登陆页面可以被浏览器缓存；
２、其他人可以访问客户的这台机器。
那么，别人即可以从浏览器的历史记录中，读取到此客户的账号和密码。所以，在某些情况下，get方法会带来严重的安全性问题。
建议
http://www.devdao.com/
在Form中，建议使用post方法。
get与post的区别2
get：是以实体的方式得到由请求URI所指定资源的信息，如果请求URI只是一个数据产生过程，那么最终要在响应实体中返回的是处理过程的结果所指向的资源，而不是处理过程的描述。
post：用来向目的服务器发出请求，要求它接受被附在请求后的实体，并把它当作请求队列中请求URI所指定资源的附加新子项，post被设计成用统一的方法实现下列功能：
1：对现有资源的解释
2：向电子公告栏、新闻组、邮件列表或类似讨论组发信息。
3：提交数据块
4：通过附加操作来扩展数据库
从上面描述可以看出，get是向服务器发索取数据的一种请求；而post是向服务器提交数据的一种请求，要提交的数据位于信息头后面的实体中。
很理论化，但是很标准，method=“get”并不是从服务器上获取数据，get和post 只是发送机制不同，并不是一个取一个发！
get方法会在IE地址栏里显示表示你提交时候所带的值；post方法不会
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
4、get安全性非常低，post安全性较高。
5、〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的，也就是说，action页面后边带的参数列表会被忽视；而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
另外，get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。
post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。
post 地址栏不会出现一大串?bjnghfgreygt这样的东西
如果是get，就会出现了
1、get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接，置于 action 属性所指程序的 url后，如http://www.mdm.com/test.asp?name=asd&passWord=sad，数据都会直接显示在 url 上，就像用户点击一个链接一样；post 方法通过 HTTP post 机制，将表单内各字段名称与其内容放置在 HTML表头(header)内一起传送给服务器端交由 action属性能所指的程序处理，该程序会通过标准输入(stdin)方式，将表单的数据读出并加以处理
2、 get 方式需要使用 Request.QueryString 来取得变量的值；而 post 方式通过 Request.Form 来访问提交的内容
3、 get 方式传输的数据量非常小，一般限制在 2 KB 左右，但是执行效率却比 post 方法好；而 post方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用 Request.Form() 可接收的最大数据有限制，IIS 4 中为 80 KB 字节，IIS 5 中为 100 KB 字节
建议：除非你肯定你提交的数据可以一次性提交，否则请尽量用 post 方法
4、 get 方式提交数据，会带来安全问题，比如一个登陆页面，通过 get 方式提交数据时，用户名和密码将出现在 URL上，如果页面可以被缓存或者其他人可以访问客户这台机器，就可以从历史记录获得该用户的帐号和密码，所以表单提交建议使用 post 方法；post方法提交的表单页面常见的问题是，该页面如果刷新的时候，会弹出一个对话框
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
4、get安全性非常低，post安全性较高。
5、〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的，也就是说，action页面后边带的参数列表会被忽视；而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
################
java toString()用法：原文查看：http://blog.csdn.net/liumx2007/article/details/2817567
1．toString（）方法
Object类具有一个toString()方法，你创建的每个类都会继承该方法。它返回对象的一个String表示，并且对于调试非常有帮助。然而对于默认的toString()方法往往不能满足需求，需要覆盖这个方法。
toString（）方法将对象转换为字符串。看以下代码：************
2．在容器类中使用toString()
编写一个工具类，用于在控制台输出Iterator。
***************
3．一个实现toString()的通用的Bean
在作一个项目时发现,许多bean需要实现toString()方法,就实现一个通用的bean,然后通过其他继承即可。
###########################
react-router的 <Link/>中的属性：http://blog.csdn.net/itpinpai/article/details/53908854
使用Link标签
// 字符串定位描述符 String location descriptor.
<Link to="/hello">
Hello
</Link>

// 对象定位描述符 Object location descriptor.
<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
Hello
</Link>

// 函数返回定位描述符Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
Hello
</Link>
属性描述

activeClassName

当被点击时，的className接受一个它的值（activeClassName），默认情况下它是不激活；

activeStyle

当被点击时，activeStyle中的值会添加到转换后的<a/>中，样式是style="color:red;"

onClick(e)

自定义单击事件处理程序。

e.preventDefault()：阻止默认事件
e.stopPropagation()：阻止事件冒泡
onlyActiveOnIndex

如果onlyActiveOnIndex的值是true,中的路径完全匹配时才会连接指定路由

其它

也可以在上定义 title、id、className属性；
#####################

qq_32444825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
闲记

1.##############js中的join(),reverse()与 split()函数用法解析 /* * 1：arrayObject.reverse() * 注意：该方法会改变原来的数组，而不会创建新的数组。 * 2：arrayObject.join() * 注意：join() 方法用于把数
复制链接

扫一扫