Skip to main content

前端杂笔记

  1. <meta>元素，提供有关页面的元信息 <meta>标签永远位于head元素内部 元数据总是以名称/值的形式被成对传递的 如：<meta charset='utf-8' > 告知浏览器此页面是属于什么字符编码格式。 < meta http-equiv="charset" content="iso-8859-1" > 使用带有 http-equiv属性的<meta>标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

CSS、JS的放置位置与前端性能的关系？#

前备知识：浏览器的解析方式#

浏览器解析html页面首先浏览器先下载html，然后再内存中把html代码转化成Dom Tree，然后浏览器根据Dom Tree上的Node分析CSS和Images，当文档下载遇到JS时，JS独立下载。

Q:为什么将引用的外部JS放在下面，外部CSS放在上面？（浏览器会有自己的解析顺序） A1: JS是阻塞加载，会影响页面加载的速度，如果JS文件比较大，算法也比较复杂的话，影响更大。 CSS放在前端是页面渲染时，首先是根据DOM结构生成一个DOM树，然后加上CSS生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑，直到CSS加载完成。 A2: 一般来说CSS放在头部，JS放在底部来确保用户至少能早一点看到界面，让网站看起来至少反应快一点，不过如果CSS稍微有点多了，会让屏幕白屏时间更长，所以并不是说把CSS都放顶部是一个完美的方法，而且有些JS必须在页面加载前执行掉。 所以应该是，把必须的js和css放在顶部，把不那么重要的css和js放在底部。

如何在图片上设置多个跳转 今天完成了项目首页的搭建，在一张图片上设置多个跳转。查了很久资料，发现是用HTML中的map和area标签定位使用。主要用到了 shape coords href 这三个标签，shape来表明在图片上的什么形状，如矩形、圆形、多边形。coords来标出图片上的位置，以坐标的形式表示出来。href则表示跳转的链接。 图片和热点区域元素关联是使用图片的usemap属性，其值对应<map>的id或者name值。

<map name="Map" id = "CribMap">    <area shape="rect" coords="32,205,193,247"  href="./architecture.html">     <area shape="rect" coords="269,207,475,247" href="./aut.html"> <!--被测系统管理-->    <area shape="rect" coords="269,294,475,336" href="./aut.html" onclick="goHere('newfunpoint')"> <!--新建功能点-->    <area shape="rect" coords="269,378,475,421" href="./aut.html" onclick="goHere('architecture')"> <!--配置元素库-->    <area shape="rect" coords="269,463,475,505" href="./aut.html" onclick="goHere('architecture')"> <!--生成基础脚本-->    <area shape="rect" coords="570,204,686,246" href="./testplan-execute.html"> <!--批量执行-->    <area shape="rect" coords="561,294,696,336" href="./scene.html"> <!--场景管理-->    <area shape="rect" coords="545,379,713,420" href="./datatable.html"> <!--测试资源配置-->    <area shape="rect" coords="545,460,713,508" href="./caseManagement.html"> <!--新增用例-->                   <area shape="rect" coords="803,204,914,247" href="./execution.html">   <!--执行记录查询-->    <area shape="rect" coords="786,379,932,421" href="./testProject.html">   <!--新增测试项目--></map>

####PS

#main-content {    display: flex;    flex-flow: column;    min-height: 100vh;}#main-content .wrapper {    flex: 1;}#main-content .fixedwh {    width: 1100px;    height: 650px;}

在途中遇到了一点CSS的问题，最后一段代码是我加上的，强制图片的像素为宽1100像素，高650像素，实际上图片有自己的强制缩放比，图片的最后比例是1100x700多。

<section class="wrapper fixedwh" >

通过在代码里面给框柱图片上的那部分加上这个css的类，来限制图片的大小。因为mian-content.wrapper这个属性是一个模板，在每个页面都会被使用，所以这样加一个多的属性，来与一下。

可以通过PhotoShop来，先将图片的大小设置为css中限定的大小，然后找到croods的坐标。

vue中的Vac对象和sessionstorge可以在页面之间传递数据

关于作用域的问题 在Vue中，若声明在data里面的数据temp，如果想要在Vue的method里面对temp进行操作，就必须在方法内部写

var _this = this;_this.temp = 123;

这样才能调用data里面的数据

此外，如果想要在Vue体外写Javascript的function，在函数内部想引用的Vue内部的数据的话，先看声明的Vue对象名字是什么，然后进行引用，如

var app=new Vue({el:'#something'data:{
temp:‘’,
}})app.temp=1

在页面之间传递值-sessionStorage sessionStorage属性允许在浏览器中存储key/value对的数据，在页面进行跳转的时候可以将某些数据进行传递。

sessionStorage.setItem('name','liuruiqing');    //在a页面存储变量name的值为lrq//当跳转到另一页面时，可以对sessionStorage进行操作，读出name的值var temp = sessionStorage.getItem('name');

需要注意的地方是，如果要判断一个变量是否存在应这样判断:

var temp = session.getItem(name);if (temp==null){    ...} else{    ...}

应该判断该值是不是为null，而不是判断

if(temp=='')

因为如果数值并没有传递的话，该值是undefined，是null，而不是为''，具体的情况可以在浏览器进行调试。

button、input、a标签的区别 button、input和a标签都可以加上一定的样式后成为外观上没有很大差别的按钮，但是这三个标签应用的场景不尽相同。

  1. button,通过onclick来绑定javascript事件。
  2. &It input type="submit" value="提交" /> 将表单内用户设置或者选择的所有数据一并提交到后台。
  3. &It a class="btn" href='#' > 提交 &It/a> 通过添加链接访问到页面中的某一个位置或者另一个页面，不向后台提供数据

对于输入框，可以在input内加一个placeholder，来显示默认提示信息。

今天遇到一个bug，在写一个日历组件的时候，将代码从demo中扒过来之后，发现不能用。以后要先检查一下，看下console报的什么错误。然后看source里面的文件，都用了哪里的地方，然后一起扒过来。 在抄过来的时候，报了错误，$(...).datetimepicker is not a function，是因为我在html中先引用了这个函数，后引用了库函数，顺序反了，所以没有找到这个函数。顺序改好了就好了。

12.1日 昨天新增了一个日历的插件，在查询的时候，后端给的接口需要输入时间戳的格式的时间。现在的时间格式是2018-12-01,但是时间戳的格式是 1543593600000 ，首先解释一下时间戳的意思，是从1970年1月1日开始，到此时此刻所经过的秒数。在这里帖上把时间转换为时间戳的代码：

var startTime = '2018-12-1 21:57:00:000'var date = new Date(startTime.replace(/-/g,'/'));var time1 = date.getTime(); //这种会精确到毫秒var time2 = date.valueOf(); //同上，会精确到毫秒var Date.parse(date);       //只会精确到秒

第二行使用了正则表达式，两个/之间的是表达式，g是所有的意思，这行代码的意思是将所有的-都变为'/'

vue中的bind和model的比较

  1. select控件使用model时，不应该将model写到 option里面，应该写到select中，绑定selece的value值
  2. model是双向绑定。将html比作前面展示出来的东西，将js比作后面处理的动作。使用model之后，比如对于input控件，当用户进行输入，改变值之后，后面的js中的绑定的变量也会改变。同理js进行改变之后，前面的html页面也会进行修改。
  3. bind是单向绑定。前改后不改，后改了前改。js中变量的改变会引起HTML中值的变化，显示就改变。而前面发生改变的话，js的变量是不会发生改变的。

2018-12-10

廖雪峰网站中学到的js基础知识#

对于相等比较符，==和===，JavaScript在设计时，有两种运算符： 第一种是==,它会自动转换数据类型再比较，很多时候会得出很诡异的结果。。 第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再进行比较。 由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===进行比较。

NaN这个特殊的number与其他所有的值都不相等，包括他自己 NaN===NaN //false 唯一能判断NaN的方式是使用isNaN()函数： isNaN(NaN); //true

JavaScript是一门动态语言，变量本身类型不固定的语言称为动态语言，与之对应的是静态语言。静态语言在定义变量的时候就必须指定变量类型，如果赋值的时候类型不匹配，就会报错。 比如在C语言中:

int a = 123; //a是整形变量，类型用int声明a = 'LRQ';   //错误，不能把字符串变量赋值给整形变量

字符串是不可变的，如果对某个字符串的索引赋值，不会有错误，但也没有任何效果 要获取字符串某个指定位置的字符，可以使用类似Array的下标操作，索引号从0开始：

var str = 'lrqiswriting';a = str[0];   //a = 'l'b = str[3];   //b = 'i'str[2] = 'z'; //不会出错，但也不会有任何效果

如果要在Array数组的头部添加若干元素，可以使用unshift()方法，shift()方法则把Array数组的第一个元素删掉

var str=[1,2];str.unshift('A','B');   //此时str为['A','B',1,2]arr.shift();        //去掉头部元素，则str为['B',1,2]

空数组连续shift()不会报错，而是会返回undefined

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array

var arr = [1,2,3];var added = arr.cncat([4,5,6]);//此时added为[1,2,3,4,5,6]

concat()方法并没有修改当前的Array(),而是返回了一个新的Array

for...in...是for循环的一个变体，他可以把一个对象的所有属性依次循环出来

var object = {    name: 'lrq',    age: 22,    city: 'BeiJing'}for(key in object){    console.log(key);//'name','age','city'    console.log(object[key]);  //使用索引取出值}

2018-12-12#

arguments关键字#

JavaScript有一个免费赠送的关键字，arguments,在函数体内使用这个关键字可以得到当前函数的调用者传入的所有参数。arguments类似于一个Array而又不是一个Array. 实际上arguments这个参数一般用于判断传入参数的个数。

function foo(x){    console.log('x = ' + x);    for(var i=0;i<arguments.length;i++){        console.log('arg' + i + ' = ' + arguments[i]);    }}
`foo(10,20,30,40,50);`输入以上函数可以获得以下结果**x = 10arg0 = 10arg1 = 20arg2 = 30arg3 = 40arg4 = 50**

rest参数#

ES6引入了rest参数

function foo(a,b,...rest){    console.log('a = ' + a);    console.log('b = ' + b);    console.log(rest);}

输入函数foo(1,2,3,4,5,6,7,8,9); 输出如下: a = 1 b = 2 [3,4,5,6,7,8,9]

注意：rest参数只能写在最后面，前面用...来进行标识，传入的参数先绑定a和b，其余的再放入rest数组内。如果传入的参数连正常的都没有填满，rest参数会接收一个空数组。而不是undefined

JavaScript有一个在行末自动加分号的机制。

变量提升 JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部。

'use strict'
function foo(){    var x = 'hello'+y;    console.log(x);    var y = 'Lrq';}foo();

当运行以上函数时，返回的结果是helloundefined.如果没有定义y变量的话，则会显示referenceError. 实际上JavaScript引擎看到的代码如下：

function foo(){    var y;    var x = 'hello'+y;    console.log(x);    var y = 'Lrq';}

在给y赋值之前已经声明，但是还没有值。所以可以运行，只不过结果是undefined.但是如果连定义也没有的话，运行都会出错，会提示ReferenceError。