JavaScript的数组排序

1. JavaScript的sort()方法

1
2
3
4
5
6
var array = [1,4,-8,-3,6,12,9,8];
function compare(val1,val2){
return val1-val2;
};
array.sort(compare);
document.write(array);

sort()方法按照升序排列数组项,会调用每个数组项的toString()转型方法,然后比较得到的字符串。

toString()方法是把布尔值(Boolean)或对象(Object)转换为字符串,并返回结果。

compare()函数方法是一个比较函数,作为sort()方法的参数。

Javascript toString()、toLocaleString()、valueOf()三个方法的区别

Array、Boolean、Date、Number等对象都具有toString()、toLocaleString()、valueOf()三个方法,那这三个方法有什么区别???

一、JS Array

1
2
3
4
5
6
7
8
9
//例子:
var array = new Array("ni","li","mi");
console.log(array.valueOf());
console.log(array.toString());
console.log(array.toLocaleString());
//结果:
Array[3]
ni,li,mi
ni,li,mi

valueOf:返回数组本身
toString():把数组转换为字符串,并返回结果,每一项以逗号分割。
toLocalString():把数组转换为本地数组,并返回结果。

JavaScript设计模式之单例模式

单例模式概念:保证一个类只有一个实例。

概念:单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

单例模式的作用和注意事项

模式作用:

1、模块间通信

2、系统中某个类的对象只能存在一个

3、保护自己的属性和方法

注意事项:

1、注意this的使用

2、闭包容易造成内存泄露,不需要的要赶快干掉

3、注意new的成本。(继承)

JavaScript设计模式之策略模式

策略模式:定义了一系列家族算法,并对每一种算法单独封装起来,让算法之间可以相互替换,独立于使用算法的客户。通俗的讲就是根据不同的参数可以定义不同的策略。

策略模式是JavaScript中比较经典的模式之一, 可以减少大量的if语句,可复用程度高

如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//清除字符空格
const trim = {
'A': function (str, type) {
return str.replace(/\s+/g, "");
},
'B': function (str, type) {
return str.replace(/(^\s*)|(\s*$)/g, "");
},
'C': function (str, type) {
return str.replace(/(^\s*)/g, "");
},
'D': function (str, type) {
return str.replace(/(\s*$)/g, "");
}
}

对于vuex的使用

vuex是什么?

官网的解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools,extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】

安装

1
npm install vuex --save

vue-cli开发中,ajax跨域请求方法

使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题。

在config/index.js中进行如下配置

【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】

1
2
3
4
5
6
7
8
9
  proxyTable: {
'/api': {
target: 'http://www.leheavengame.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

react父子组件通信

子组件调用父组件:

1)在父组件设置对应的属性和方法;
2)将父组件的属性,方法设置在子组件的标签属性上;
3)子组件中利用this.props来调用父组件的成员;

example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//父组件:
var parent=React.cleateClass({
getDefaultProps:function(){
alert("父组件方法")
},
render:function(){
return <children a="233" getDefaultProps={this.getDefaultProps}></children>
}
})
//子组件:
var children=react.createClass({
render:fucntion(){
return <div>
<p>从父组件取得的值:{this.props.a}</p>
<button onClick={this.props.getDefaultProps}>子组件按钮</button>
</div>
}
})

对于Webpack的简单理解

关于webpack:

webpack大而全,和静态资源相关的所有它都能干涉,当然,还能启动server;webpack主要以loaders和plugins处理各种静态资源;

loaders:

在React里会用到JSX、ES6、js,我统一将文件后缀使用.js,便于babel的配置:

npm install –save babel-loader

1
2
3
4
5
6
7
8
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
CSS、scss、iconfront字体文件:

npm install –save style-loader css-loader sass-loader url-loader file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
test:/\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},{
test: /\.(woff|woff2)/,
loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"
},{
test: /\.(ttf|eot|svg)/,
loader: "file?name=./[name].[ext]"
},{
test: /\.otf/,
loader: "file?name=./[name].[ext]&minetype=application/font-otf"
}

:D 一言句子获取中...