前端零碎知识点,前端踩坑记录

4 篇文章 0 订阅
  1. This指向问题。this对象指向调用函数的对象,全局环境中this指向window。call和apply函数中的this指向指定的对象,如果所指定的是undefined或是null,this将重新指向window。在箭头函数中,this等同于外层代码块的this。
  2. 取整时,建议使用Math.trunc( )来代替ParseInt( ),Math.trunc( )这个办法仅仅只是删除小数点后的数字。还可以使用 |0 例如:156.33 |0 //156 或是使用 ~~1234.33 //1234 。 如果我没有记错的话,后两种方法比第一种方法运行速度更快。
  3. arguments也是对象,而且是一种特殊的对象,它的属性是按照传入参数的序列来的。第一个参数属性名“ 0 ”,第二个参数名为 “ 1 ”以此类推。其主要作用为存储当前传入函数参数的个数,我们也称之为类数组对象。
  4. call( )用括号里的对象来集成括号外的函数属性,我们称之为“ 继承 ”。
  5. cannot set property “…” of undefined 出错原因为 在获取属性时出错,获取属性的方法不正确。
  6. cannot read property “…” of null 出错原因在于 捕获类型错误,需要检查元素是否被正确的获取到。
  7. addEventListener 中使用各种Js触发事件,触发事件不可以加括号!
  8. bind( )函数存在一个问题,即不可以兼容IE6、7、8。
  9. confirm( )弹窗包含确定与取消,分别返回“ true ”和 “ false”。window.open( )可以打开一个i新的窗口。
  10. tap事件在移动端中会比click事件更灵敏,但tap事件并不是浏览器BOM事件中的一种。是第三方库封装的。
  11. Js中没有块级作用域,只有函数作用域,但是支持块级作用域。let和const 相同之处在于都可以声明一个块级作用域。使用var声明,其作用域为该语句所在的函数内,且存在变量提升的问题。let声明,其作用域为该语句所在的代码块内,不存在变量提升的问题。const多用于声明一个常量,即为初始化默认值。设置过const之后就不可以改变可不可以赋值。这也正是const与let的不同之处。
  12. 二维数组的本质,数组中的元素还是数组。即子数组作为元素存在父级数组中。二维数组给我们带来了行与列的选择方式。var arr=[[0,1],["a","b"]]; alert(arr[1][0]) alert第一个中括号代表找到arr中索引为1的数组即[“a”,“b”],第二个中括号代表找到arr中索引为0的[0,1]。
  13. webpack是模块打包机,它做的事情是分析你的项目结构,找到Js模块以及其他的一些浏览器不能直接运行的拓展语言:例如C、sass等并打包为最合适的格式供浏览器使用。
  14. 同步:只能做一件事,其他必须等当前事件完成后才能继续。异步:提交数据后,可以做很多事情,不必等。JSON.parse( )解析json中的数据 output输出 JSON.stringify()将对象转换成json。
  15. window.open() 打开页面适用于PC端,移动端安卓可以兼容,但ios并不兼容。
  16. IOS的旋转机制与css3 rotate不同,如果是IOS则需要考虑兼容性问题。
  17. 通讯录抬头月份的展示:由于月份是放在统一Json中,需要在渲染的时候进行比对:
//index,billmonth是传入的形参,mounth即为后端的月份字段
//这个方法应该放在Vue.js中的methods中,并在html中调用

			MonthScreen:function(index,billmonth){
                if(index==0){
                    return true;
                }else{
                    if(this.dataList[index-1].mounth!=billmonth){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
  1. 如果node环境升级了,出现基于老版的node创建的VueCLI运行不起来的现象。最简单高效的方法即是 删除 node_modules文件夹以及package-lock.json。重新 npm install 一下即可。
  2. 比较好用的VueUI框架 vant。vantUI跳转地址
  3. Vue.js 如果需要根据参数的不同来跳转不同的页面时,最好不在html中做判断(v-if 以及 else)。而是用methods中的函数来判断跳转地址,(将methods中的函数放在html中)或是使用计算属性。
  4. < a v-on:click.stop=“doThis”>< /a> .stop 修饰符可以阻止冒泡事件。
  5. HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
  6. 在画页面时,我们可以将一些数据通过虚拟数据的方式显示出来。这样即为后期添加数据接口打下基础,另一方面还可以测试页面的性能。
  7. $().each()这个方法,在dom处理上用的比较多,如果页面上有多个input标签为checkbox,就可以用改方法来处理多个checkbox,例如:
$("input[name='ch']").each(function(i){
  if ($(this).attr('checked') == true){
    //do something 
  }
})
  1. .map()函数用于处理当前jQuery对象匹配的所有元素,并将处理结果封装为新的数组。map(callback)为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中。
/* .map()方法遍历json数组中的某个key值并且以字符串的格式输出
   注意item["age"]这里需要添加引号""
*/
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},    {name:"d",age:14}];

var newArr = data.map(function(item,index) {
  var age = item["age"];
  return age;
}).toString();

//输出为 12,11,13,14 字符串格式
  1. 画一个中间带文字的空心圆
.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
}
.circle span {
  height: 20px;
  line-height: 20px;
  display: block;
  font-size: 12px;
  color: #000;
  text-align: center;
}
  1. map()可以用来遍历一个数组中的所有元素
var arr = [1, 2, 4, 5, 6];

var newArr = arr.map(function(item, index) {
 return item * 2;
});

console.log(newArr); //[2, 4, 8, 10, 12]

filter()可以可以取出数组中符合条件的元素 重新组成一个新的数组

var arr = [1, 2, 4, 5, 6];

var newArr = arr.filter(function(item, index) {
 return item > 3;
});
console.log(newArr); //[4, 5, 6]

forEach()

var arr = [1, 2, 4, 5, 6];

arr.forEach(function(item, index) {
 console.log(item); //1, 2, 4, 5, 6
});

reduce()让数组中的前项和后项做某种计算,并累计最终值

var arr = [1, 2, 4, 5, 6];

var result = arr.reduce(function(prev, next) {
 return prev+next;
});
console.log(result); 

every()检测数组中的每一项是否符合条件

var arr = [1, 2, 4, 5, 6];
var result = arr.every(function(item,index) {
 return item > 0;
});
console.log(result); //全部满足才为true

some()检测数组中是否有某些项符合条件

var arr = [1, 2, 4, 5, 6];

var result = arr.some(function() {
 return item > 1;
});
console.log(result); //只要满足一个条件即为true

Find() 检测数组中是否有某些项符合条件(Vue的写法)

	var time = this.cityList.find(item => {
      	 return item.name === this.city;
    });
	time.'需要修改的属性名' = '修改后的值';

apicloud 中禁止使用原生ajax,否则在全局加密、编译打包APP时将会出现请求失效的情况,建议使用api.ajax

VueCli打包之后会出现.map文件。之所以有.map文件是因为,项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。但是.map文件的体积庞大不利于网页的性能。通常我们会在vue.config.js文件中将其注销。 productionSourceMap:false

VueCli 还可以通过路由懒加载的方式提高网页的性能。懒加载的好处是,可以按需加载。把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。
例如:原先是这样引入的

import OrderList from './views/OrderList.vue'

routes: [{
	 path:'/',
      name: 'OrderList',
      component: OrderList,
      meta: {
        title:"订单列表"
      }
}]

使用路由懒加载可以这样写:

//import OrderList from './views/OrderList.vue'

routes: [{
	 path:'/',
      name: 'OrderList',
     component: resolve=>(require(["@/views/OrderList.vue"],resolve)),
      meta: {
        title:"订单列表"
      }
}]

使用路由懒加载后可以大大减小js、css文件的大小。还有就是,如果我们引入了第三方组件库,最好是通过按需引入的方式引入相关的组件,这样也是有利于网页的整体性能的。

axios的get请求在ie浏览器下数据会被缓存,所以需要再url后面加个随机参数,如时间戳。

在遍历数组时,尽量避免使用for in ,而是采用原生的for方法。在遍历对象时,而且对顺序要求不高,可以for in 。IE8下for in不能正常使用

jquery input事件IE8不起作用支持。IE9以上 IE8使用keyup/change事件

页面标签请务必引入下行代码,可实现让ie浏览器以最高版本的渲染引擎进行页面渲染。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

arry数组排序时,如果使用sort来对数组进行排序的话。需要注意sort是根据阿斯克码值(ASCLL)来进行排序的。如下所示,ASCLL值会取数字中的第一个数字来进行排序。控制台将会出现如下排序结果:

{1,33,43,44,45,56,7}

若想要正常排序,可以在sort中写一个回调函数。回调函数里接收两个值。x与y,这个x与y将会将数组中的值依次传递进来。

数组名.sort(function(x,y){
	return x-y  //此排序即为正序,反之则为倒序
})

HTTP通信示意图
在这里插入图片描述
在这里插入图片描述
微信小程序,安卓机分享标题不能换行的问题
这个问题在IOS上不会出现,只会在安卓机上复现。这个问题,暂时没有什么好解决的方法。需要等待官方修复。

微信小程序wx.request 请求失效时如何排查?(转自小程序官方文档)
在这里插入图片描述
微信小程序里如果提示某个页面未被注册,则首先在app.json界面的page中注册页面,检查路径拼写。然后再检查一下 app.js 里是否有写 APP{()} 或是 其他.js文件中 Page{()}, 注意P要大写

有关于import form的含义链接文章 import form

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗?
在这里插入图片描述
在这里插入图片描述
当用axios请求链接地址时,控制台报错 Unhandled promise rejection Network:Error 。且这个地址能ping通,那就说明是后端的服务没开所导致的。多半和前端没关系

当时用axios进行传参时,POST方式需要使用data方式传参。如果是get方式,就不能用data了,需要使用params的方式传参。get方式是没有data这个属性的。

base64 3.4.4插件在ie10上会有兼容性问题,如果要兼容ie10需要用2.5.2版本


10-32位数字或字母:----------/^[a-zA-Z0-9]{10,32}$/     
手机号:---------------------/^1[34578]\d{9}$/          
座机号:---------------------/^(0\d{2,3}-){0,1}\d{7,8}$/    
整数:-----------------------/^[0-9]+$/                 
只能数字,且不能超过2位小数:--/^[0-9]+([.][0-9]{1,2})?$/     
15或18位身份证号:------------/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/    
士官证号,例如:军字第2001988号:----/^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/  
3至21位户口本号:------------------/^[a-zA-Z0-9]{3,21}$/     
15或者17或者18或者20位字母、数字组成:---/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/  
邮箱:------------------------/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/    
2020/05/21格式日期:----------(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/

新电脑配置git。首先要安装git命令行。然后cd ~/.ssh 检查有没有配置过公钥
如果没有 输入 ssh-keygen.exe 回车三次,然后根据命令行目录找到配置好的公钥。如果使用sourceTree的话,需要在里面配置一下新建的公钥。

跑项目时,如果报错node-sass缺少python。则需要安装Python及环境变量配置。一定要安装python2.7的版本。环境变量安装可以参考:python环境变量安装
安装好之后,再npm i 一下,如果报错node-sass与本地版本不一致时,先卸载本地版npm uninstall node-sass 然后再安装npm install node-sass@4.1.4 (相对应的版本号)

如果sourceTree里提示,ssh认证失败。则需要在工具—选项—一般 中将ssh密钥选项修改为Openssh。因为一般sourceTree会默认为Putty/Plink。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值