知识点

来源：互联网发布：淘宝生意参谋标准版编辑：程序博客网时间：2024/04/20 03:11

综合

1、 ./ 当前目录 ../ 父级目录 / 根目录

2、{{include './../common/adphead'}}：表示在一个页面中插入一个既定的框架页面。

3、 <img class="J-buy-bigpic" src="

{{specials[0].specialValues[0].specialValueFssuList[0].specialValueFssuBigImgs[0]}}"

alt="AI智能商城">表示插入一张图片？

4、HTML5中html head body标签是可以省略的，html5中省略写html标签head标签body标签是合法的

5、.do :多数为编程人员为了使网站极具个性化或者隐藏正确的网页而自发使用一些后缀名网页。.do是一个映射，它

可以是html文件、jsp文件或者其他文件的映射，可以是一个也可以是多个。

6、.scss/sass: sass是一种对css的一种提升，可以通过编译生成浏览器能识别的css文件。sass技术的文件的后缀名

有两种形式：.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。

7、clamp.js： $clamp(node,options);其中node是要操作的节点，options包括：clamp——行数，useNativeClamp

——是否使用-webkit-line-clamp属性，trucationChar——省略的符号（不限于省略号），

truncationHTML——省略的内容（不限于符号），animate——是否实现动画折叠。

8、gradlew.bat：gradle跟ant/maven1样，是1种依赖管理/自动化构建工具。但是跟ant/maven不1样，它并没有使

用xml语言，而是采取了 Groovy语言

gradlew和gradlew.bat：分别是linux下的shell脚本和windows下的批处理文件，它们的作用是根据

gradle- wrapper.properties文件中的distributionUrl下载对应的 gradle版本。这样就能够保证在

不同的环境下构建时都是使用的统1版本的gradle，即便该环境没有安装gradle也能够，由于gradle

wrapper会自动下载对应的gradle版本

9、webpackconfig.js：Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认

情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一

个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

entry：指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。当然如果你只有一个入口的话，也可以直接使用双引号"./entry.js"
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

CSS

1、margin padding border 图解区分：

2、height 和 line-height ：

line-height：行高设置文字间上下距离
height：高度就是定义一个层或某样东西的高度

line-height默认是baseline对其的，可以使用vertical-align:middle使其文字图片居中对齐。

3、background：url（） left center no-repeat 代表：图片在文字左侧居于行内中间不重复平铺显示。

4、当满足 font-size font-family line-height 时就可以缩写为 font size-num/line-height-num family

5、text-indent:25px 表示对象内段落首行开头文字缩进了25像素。

6、普通文档流定位、position定位、float定位

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签

默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是

不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流。例如使用display：

none,position:absoult或者fixed(其中relative并没有脱离文档流，它相对位置的定位标准就是该元素在文档流中的实际

位置) 以及我下面所说的float方式。

[html] view plain copy
<div class="position">  
    <div class="ps-relative" style="background-color: yellow;position: relative;top: 10px;left:10px;">123</div>  
    <div class="ps-static" style="background-color: bisque">123</div>  
</div>  

relative并没有脱离文档流

三、float如何定位？

float(浮动模型)是一种可视化格式模型，浮动的框可以float:left 或right，直到它的外边缘碰到包含框或者另一个浮动元

素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。下面就通过

实际的效果演示来了解float定位。

①普通文档流布局

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;">123  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque">123  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue">123  
    </div>  
</div>  

div元素按照普通的文档流来定位将会独占一行显示。

②第一个元素右浮动

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;float:right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue">3  
    </div>  
</div>  

从效果图可以看出，第一个快元素浮动到右侧以后，它的位置被第二个块顶上，自己脱离文档流，浮动到了父元素的

右侧

③浮动第二块元素

当第二个块也在进行右浮动的时候，会紧跟在第一块元素的后面，而不会遮住已经存在右浮动的元素。

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;float:right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;float:right;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue">3  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: red">4  
    </div>  
</div>  

④第一个块左浮动

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;float:left;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;">3  
    </div>  
</div>  

第二个块因为覆盖了原来第一个块的位置，它将被第一个块覆盖。

⑤当所有块都右浮动时

将所有块右浮动，并在其父元素同级加上一个不同背景的块状元素，此时，所有子块都按照次序以父元素的右侧边

框为起点排列起来，但是他们把父元素同级的绿快遮住了。这是因为，浮动块的父元素按照普通文档流定位，而子

块脱离文档流，相对父元素浮动，且不会撑开父元素的块高，顾因为高度的原因把绿快遮住，这就需要使用下面的

一个属性clear

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;margin-bottom: 30px">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;float:right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;float:right;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;float:right;">3  
    </div>  
</div>  
<div style="height: 20px;width: 300px;background-color: green"></div>  

⑥clear清除浮动

[html] view plain copy
<div class="position" style="width:300px;  
            border:4px solid #f63;margin-bottom: 30px">  
    <div  style=" height:50px;  
            width:100px;background-color: yellow;float:right;">1  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: bisque;float:right;">2  
    </div>  
    <div  style=" height:50px;  
            width:100px;background-color: lightblue;float:right;">3  
    </div>  
    <div style="clear:both;height: 0;"></div>  
</div>  
<div style="height: 20px;width: 300px;background-color: green"></div>  

Clear属性是和float对着干的属性，float干的，clear都可以去“销毁”float干出的成果。下面是其可能使用到的属性值。

值

描述

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

7、对于兼容性，在*width 来表示IE6；若与父级元素相同或超，则需要进行处理，用margin-bottom：-来处理冲突。

8、有浮动的时候，它的父级得加清浮动

9、自适应rem布局：

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算转化关系 16px = 1rem。

docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。

10、关键帧动画：

CSS3的Animation有八个属性

animation-name ：动画名、animation-duration：时间、animation-delay：延时

animation-iteration-count：次数、animation-direction：方向

animation-play-state：控制、animation-fill-mode：状态、

animation-timing-function：关键帧变化。

animation-timing-function是控制时间的属性，steps函数配合精灵图使用，用来切换多个精灵

图的，形成帧动画

实例：

animation:bird-slow 400ms steps(3) infinite;

@keyframes bird-slow {

0% {background-position-x: -0px}

100% {background-position-x: -273px}

}通过定义一个类，类中定义的动画的一些关键数据，比如动画名，时间，次数，切换的位置

11、自适应雪碧图：

通过background-size 让精灵图实现自适应缩放。background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。

12、元素运动实现;

运动 = 关键帧动画 + 坐标变化;元素的坐标都是 position+translate的值的总和，利用transition函数进行运动。

13、3D变换：

要想实现3D的效果，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会

有3D效果；设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。

perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身；

14、镜头效果:

一、就是把页面给缩小方法，然后附带一些改变透明度的效果,变形（transform）的scale属性可以针对元素进行缩放;

-webkit-transform: scale(2);

二、继续引入css3的animation动画，通过animation与transform配合就能达到镜头的效果;

.effect-out{

animation: effectOut 8s ease-in-out forwards;

}

@keyframes effectOut{

0% { opacity:1; }

100% {transform: scale(20); opacity:0; }

}

三、最终通过给元素element.addClass("effect-out") 让元素产生镜头的切换效果

15、SVG矢量图

通过polygon的points绘制出多边形组成的坐标点，points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边，所以points至少要定义3组坐标才能创建一个三角图形。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style 直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。

例、

<linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">   <stop offset="0%" stop-color="#FCF0BC"></stop>   <stop offset="0%" stop-color="#FCF0BC"></stop></linearGradient>

JS:

1、异步编程：jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。？？？封装函数

var dtd = $.Deferred(); //创建

dtd.resolve(); //成功

dtd.then() //执行回调

2、观察者模式：

定义一个一对多的依赖关系，当一个对象的状态发生改变，所依赖它的对象将会得到这个改变的通知。在JS的实现级上，一般通过事件的方式模拟发布-订阅模式；

在js中一个对象可以不再显示的调用另外一个对象的接口了，或者不关心对象的内部运行状态，只对感兴趣的事件进行观察了；

创建：var observer = new Observer(); 实现观察： observer.subscribe("任务名"，处理函数)；

触发观察者：observer.publish("任务名")；取消订阅事件：observer.unsubscribe("任务名")；

3、场景音乐：

var audio = new Audio(url); //创建一个音频对象并传入地址

audio.loop = loop || false; //是否循环

audio.play(); //开始播放

连续播放：var audio1 =HTML5Audio(playURl)audio1.end(function() {

Html5Audio(cycleURL, true)

})

综合