webpack打包路径问题

利用vue脚手架生成的代码去打包的时候,通常会发现,css路径丢失的问题。同时如果用了elementui的话,还可能出现字体丢失的情况,通常需要自己手动的将字体文件拷贝到指定的文件夹才能解决问题,但是这样的话,太影响效率。所以需要配置webpack去解决问题。

css路径丢失的解决方法

将config下面的index.js的build下的assetsPublicPath加一个./即可

1
2
3
4
5
6
7
8
9
10
11
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //添加./
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}

阅读全文

JavaScript:前端面试知识点目录整理

写在前面

金三银四,又到了一年一度的跳槽季,相信大家都在准备自己的面试笔记,我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习。详细内容会在之后一一对应地补充上去(有些在我的个人主页笔记中也有相关记录),这里暂且放一个我的面试知识点目录,大家有兴趣可以自己根据目录去扩展。欢迎在评论下方指点一二,看还有哪些没考虑到的,互相交流一哈…

阅读全文

JavaScript:十大排序的算法思路和代码实现

冒泡排序

通过相邻元素的比较和交换,使得每一趟循环都能找到未有序数组的最大值或最小值。

最好:O(n),只需要冒泡一次数组就有序了。
最坏:O(n²)
平均:O(n²)

阅读全文

页面性能优化办法有哪些

引子
互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上,加载时间每多1秒,你就会流失7%的用户。8秒并不是准确的8秒钟,只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能,提高页面加载速度呢?这是本文主要要探讨的问题,然而性能优化是个综合性问题,没有标准答案,想要面面俱到罗列出来,并非易事。本文只关注一些核心要点,以下是我总结性能优化常见的办法:

阅读全文

async-await入门

关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。

1、async-await和Promise的关系

async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。
基本语法如下:

1
2
3
4
5
6
7
8
async function basicDemo() {
let result = await Math.random();
console.log(result);
}

basicDemo();
// 0.6484863241051226
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

阅读全文

数组遍历方法详解

遍历的三大方法:
1、forEach,代替for循环的
2、filter,根据条件过滤数组
3、indexOf,数组循环过程中会和传入的参数比对,如果是比对成功,那么终止循环,返回对比成功的下标

1、数组内置方法Array.prototype.forEach

1
2
3
4
5
6
var a = [1,2,3];
a.forEach(function(value,key,arr){
console.log(value) // 结果依次为1,2,3
console.log(key) // 结尾依次为0,1,2
console.log(arr) // 三次结果都为[1,2,3],该参数貌似没什么用
})

阅读全文

Axios入门

axios是基于promise用于浏览器和node.js的http客户端。
axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。有以下特点:支持浏览器和node.js、支持promise、能拦截请求和响应、能转换请求和响应数据、能取消请求、自动转换JSON数据、浏览器端支持防止CSRF(跨站请求伪造)
promise是什么:是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。promise的作用:Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。promise的本质是什么:分离异步数据获取和业务

阅读全文

ES6第三课、number扩展

4.1 Number.isFinite(), Number.isNaN()

Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity
注意,如果参数类型不是数值,Number.isFinite一律返回false。

1
2
3
4
5
6
7
8
9
10
11
12
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false

阅读全文

ES6第四课、函数扩展

5.1、函数参数的默认值

5.1.1、基本用法

ES6 之前,不能直接为函数的参数指定默认值

1
2
3
4
5
6
7
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

阅读全文

原生js封装ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
var $ajax = function () {

//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout: null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}


// json转化为字符串
var _param = function (data) {
var str = '';
if (!data || _empty(data)) {
return str;
}
for (var key in data) {
str += key + '=' + data[key] + '&'
}
str = str.slice(0, -1);
return str;
}
//判断对象是否为空
var _empty = function (obj) {
for (var key in obj) {
return false;
}
return true;
}

var _extend = function (target, options) {
if (typeof target !== 'object' || typeof options !== 'object') {
return;
}
var copy, clone, name;
for (name in options) {
if (options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};

// 自定义text转化json格式
var parseJSON = function (text) {
if (typeof text !== 'string') {
return;
}
if (JSON && JSON.parse) {
return JSON.parse(text);
}
return (new Function('return ' + text))();
}

// jsonp处理函数
function _sendJsonpRequest(url, callbackName, succCallback) {

var script = document.createElement('script');

script.type = "text/javascript";
script.src = url;

document.body.appendChild(script);
// 如果用户自己定义了回调函数,就用自己定义的,否则,调用success函数
window[callbackName] = window[callbackName] || succCallback;

}


return function (options) {

// 没有传参或者没有url,抛出错误
if (!options || !options.url) {
throw ('参数错误!');
}

// 继承操作
options.type = options.type.toUpperCase();
_extend(options, _options);

/*jsonp部分,直接返回*/
if (options.dataType === 'jsonp') {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url : options.url +
'?' + options.jsonp + '=' + options.jsonpCallback;

_sendJsonpRequest(jsonpUrl, options.jsonpCallback, options.success);

return;
}

//XMLHttpRequest传参无影响
var xhr = new(window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');

// get搜索字符串
var search = '';

// 将data序列化
var param = _param(options.data)

if (options.type === 'GET') {
search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
if (!options.cache) {
search += '&radom=' + Math.random();
}

param = null;
}

xhr.open(options.type, options.url + search, options.async);

xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var text = xhr.responseText;
// json格式转换
if (options.dataType == 'json') {
text = parseJSON(text)
}

if (typeof options.success === 'function') {

options.success(text, xhr.status)
}

} else {

if (typeof options.fail === 'function') {
options.fail('获取失败', 500)
}

}
}
}

xhr.setRequestHeader('content-type', options.contentType);
// get请求时param时null
xhr.send(param);

// 如果设置了超时,就定义
if (typeof options.timeout === 'number') {
// ie9+
if (xhr.timeout) {
xhr.timeout = options.timeout;
} else {
setTimeout(function () {
xhr.abort();
}, options.timeout)
}
}
}

}()

var aaaa = null
$ajax({
url: 'http://172.16.4.190:8088/dataflow/services/siteManage/getSiteList.json',
type: 'get',
dataType: 'json',
timeout: 1000,
data: {
pageindex: "1",
pagesize: "10",
},
async: false,
success: function (data, status) {
aaaa = data.data;
},
fail: function (err, status) {
console.log(err)
}
})
console.log(aaaa)

阅读全文