1．项目所遇到的问题集合
[if !supportLists]1. [endif]设置div的背景阴影
用：box-shadow: 0 0 3px rgb(181, 181, 181);
2。图片在IE里面有边框的问题
解决方案：设置其border为0
2.1.BOM和DOM的区别
BOM是浏览器对象模型其核心对象是window 操作浏览器顶部 输入网址的那部分
提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）
window.history.forward() //前一页
window.history.back(); //后一页
window.history.go(-1); //跳转至曾经访问过的某个页面，负值表示向后跳
window.resizeBy //把窗口大小增加或减小指定的宽度和高度
window.screenLeft/window.screenX //与屏幕左侧的距离
window.screenTop/window.screenY //与屏幕顶部的距离
DOM 文档对象模型 操作页面的内容 浏览器把获取到的HTML代码解析成1个DOM树
2.2重绘与回流:
当render
tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流
减少对render
tree的操作（合并多次多DOM和样式的修改），并减少对一些style信息的请求，尽量利用好浏览器的优化策略
解决方法：
1. 将多次改变样式属性的操作合并成一次操作。
2.将需要多次重排的元素，position属性设为absolute或fixed，用定位让它脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
3．定位详解:
1 固定定位fixed
2相对定位relative
3绝对定位absolute
4静态定位static
请注意以下几点:
[if !supportLists]1. [endif]默认情况下,固定定位元素和绝对定位元素的位置是相对于浏览器而言,而相对定位的位置是相对原始位置而言
[if !supportLists]2. [endif]Position:absolute会将元素转换为块元素
3.1 行内元素垂直居中可以用
display: table-cell;
vertical-align: middle;
6.解决 的问题
1．首先在外面设置一个div 然后设置边框。再在里面设置input：text 设其变为none
7．设置input：text获得焦点有蓝色框的问题
8．JQ： 获取当前div下面的字元素
$("li").each(function(){
$(this).mouseover(function(){
$(this).find(".test").animate("height","173px","slow");
});
用find 方法找li 下面的 .test子元素
**10 设置背景阴影效果
opacity: 0.6
2．Node JS 整合分析
1．首先就是架构要搭好:
1.导入“包node_modules”
2.建”public”文件夹,用于存放静态页面的内容
3.建”routes” 路由文件夹,里面写database, user 之类的路由
4.然后写app.js
导入包,写配置
然后这里写服务器验证
5.谈后就写路由了----routes
①导入database
导出去
6.登录
然后在html页面写ajax
7获取session
8注销 缓存
9.整个流程:
就是 从客户端取到数据,在request通过请求获取,然后在数据库查询匹配, 数据库执行成功,把” row”通过resp.json({msg:"成功"}); 传到客户端,客户端通过param参数获取
4．面试题分析
4。Doctype的作用：用来设置浏览器的解析模式
如果不声明:会按照混杂模式来解析
解析模式有3种：准标准模式（IE6，7），标准模式（IE8），混杂模式
5。Css 优先级怎么计算：权重值 （外链和内联是一样的）
Css权重值分为4个等级的定义如下：
[if !supportLists]1. [endif]第一等：代表内联样式，如: style=””，权值为1000。
[if !supportLists]2. [endif]第二等：代表ID选择器，如：#content，权值为100。
[if !supportLists]3. [endif]第三等：代表类，伪类和属性选择器，如.content，权值为10。
[if !supportLists]4. [endif]第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
10渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
11事件冒泡:
从下网上叫冒泡
从上网下叫捕获.
W3C支持-DOM事件流:先捕获再冒泡
用ele.addEventListener(‘click’,dosomething,true)→true为捕获,false为冒泡
IE只支持冒泡;ele.attachEvent("onclick", doSomething2)依次往上冒直到document为止
阻止事件冒泡:
IE：
window.event.cancelBubble = true;//
停止冒泡
window.event.returnValue = false;//
阻止事件的默认行为
Firefox：
event.preventDefault();//
取消事件的默认行为
event.stopPropagation(); //
阻止事件的传播
<!--阻止事件冒泡-->
<div @click="showA()">A
<div @click="showB()">B
<div @click="showC($event)">C</div>
<div @click.stop="showC($event)">C</div>
</div>
</div>
<!--取消事件的默认行为-->
<a href="http://www.baidu.com" @click="open($event)">click</a>
<a href="http://www.ba.com"@click.prevent="open($event)">clck</a>
<!--只执行一次-->
<button @click.once="once()">once</button>
怎么阻止冒泡:IE中叫
谷歌中:stopPropagation
加分题: .1优化
模块化:c-jsrequire-js(IMDCMD)
Inline-block: 行内块级: 记是行内元素又是块级元素
第二套题
[if !supportLists]1. [endif] 页面Js加载; 会先加载所有的函数,然后重上往下进行加载
[if !supportLists]1.5 [endif]Js的全局对象有哪些:
EvalisNan() parseFloat() ParseInt() String()
[if !supportLists]2. [endif]link 和@import的区别
<link>它是标签,还可以定义Rss等其他事物,@import就不能,只加载css
<link>在页面载入时同时加载,无兼容性问题.
@import低版本IE不支持,并且是页面网页加载完成后再加载.
[if !supportLists]3. [endif]IE6下解决双倍marggin 设置display:liline;
[if !supportLists]4. [endif]hasLayout :字面意思→拥有自己的布局, 使用布局概念来控制元素的尺寸和定位
[if !supportLists]5. [endif]8.清楚浮动: clear:both 或者BFC
用meta标签里面的 http:re**属性可以实现 不用js完成页面定时刷新
13
.什么是做好SEO?
搜索引擎优化,就是利用搜索引擎的规则,让网络爬虫更好的搜索到网站,提升排名
设置关键词,和网站导航优化设计,网站内连接的设计
[if !supportLists]1. [endif]举出5个兼容性问题
[if !supportLists]1. [endif]各个浏览器之前,不加样式控制的话,其margin和padding的差异是比较大的:设置margin:0 padding:0
[if !supportLists]2. [endif]低版本IE中,有双倍margin的问题
[if !supportLists]3. [endif]IE 6.7 中对图片有不兼容的问题,导入插件
[if !supportLists]4. [endif]在块级元素中,如果里面的内容超出这个块级元素,就会出现兼容性问题
[if !supportLists]5. [endif]子元素绑架父元素: 这只子元素的margin-top 父元素会因为margin-top一起移动
[if !supportLists]6. [endif]图片默认有间距
一般解决兼容性问题 用hack技术
[if !supportLists]2. [endif]CSS3的新特性
[if !supportLists]1. [endif]Text-decoration文本渲染效果
[if !supportLists]2. [endif]颜色透明度rgba
[if !supportLists]3. [endif]圆角:border-radius: 15px
[if !supportLists]4. [endif]设置颜色渐变
[if !supportLists]5. [endif]设置颜色文本的阴影
[if !supportLists]6. [endif]还有反射投影
[if !supportLists]3. [endif]html中清楚浮动有哪些方法
[if !supportLists]1. [endif]clear: both
[if !supportLists]2. [endif]设置 BFC环境overflow:hidden
[if !supportLists]3. [endif]使用空标签
5,英文的换行问题
一般情况下,一个单词不会分开成两行,如果要设置换行:就要设置word-break 属性来控制换行; 或者</br> 来强制换行
CSS中link 和@import的区别是？
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
6．数据库设计
/*1.创建数据库*/
CREATE DATABASE sofoDB CHARACTER SET utf8
USE sofoDB;
/*2.热门商品表*/
CREATE TABLE t_hot(
h_id INT PRIMARY KEY AUTO_INCREMENT,/*热门商品id*/
h_p_id INT
)
/*3.促销商品表*/
CREATE TABLE t_sell(
s_id INT PRIMARY KEYAUTO_INCREMENT,/*热门商品id*/
s_p_id INT /*关联商品表的外键*/
)
/*4.评论表*/
CREATE TABLE m_message(
m_id INT PRIMARY KEY AUTO_INCREMENT,/*评论id*/
m_content VARCHAR(200), /*评论内容*/
m_data DATETIME,
m_u_id INT, /*关联用户表的外键*/
m_p_id INT
);
/*5.购物车*/
CREATE TABLE t_shopcar(
s_id INT PRIMARY KEYAUTO_INCREMENT, /*购物车id*/
s_p_id INT , /*关联商品*/
s_u_id INT, /*关联用户表的外键*/
s_count
);
/*6.创建用户表：t_user*/
CREATE TABLE t_user(
u_id INT PRIMARY KEYAUTO_INCREMENT,
u_name VARCHAR(10) NOT NULL,
u_pwd VARCHAR(50) NOT NULL,
u_phone CHAR(11) UNIQUE,
u_email VARCHAR(50),
s_id INT NOT NULL, /*关联购物车*/
m_id INT NOT NULL /*关联评论表*/
/*CONSTRAINT FOREIGN KEY (s_id)REFERENCES t_sell(s_id),
CONSTRAINT FOREIGN KEY (m_id)REFERENCES t_message(m_id)*/
);
/*7.创建：商品类别表*/
CREATE TABLE t_type(
t_id INT PRIMARY KEYAUTO_INCREMENT,/*商品类别*/
t_name VARCHAR(50)
);
/*8.创建：商品表*/
CREATE TABLE t_product(
p_id INT PRIMARY KEYAUTO_INCREMENT,/*商品id*/
p_name VARCHAR(50), /*商品名称*/
p_price DOUBLE,
p_img_index VARCHAR(200), /*商品图片地址*/
p_img_detail VARCHAR(200), /*商品详情中的图片地址*/
p_t_id INT /*关联商品类别的外键*/
);
/* ***********添加数据********** */
/*1.添加商品类别*/
INSERT INTO t_type (t_id,t_name)
VALUES
(1,"fashion"),
(2,"choula"),
(3,"zhedie");
/*2.添加商品表*/
INSERT INTO t_product(p_id,p_name,p_price,p_img_index,p_t_id)
VALUES
(1,"可拆洗组合三人布艺小户型沙发",4579,"../img/index/sofo1.png",1),
(2,"简约日式休闲小户型",3879,"../img/index/sofo2.png",1),
(3,"日式棉麻布艺沙发组合",7899,"../img/index/sofo3.png",1),
(4,"现代北欧双人三人日式沙发",7089,"../img/index/sofo4.png",1),
(5,"创意高档小户型布艺沙发",5979,"../img/index/sofo5.png",1),
(6,"北欧简约现代高档皮布沙发",6879,"../img/index/sofo6.png",1),
(7,"非卖品",0,"../img/index/sofo16.png",1),
(8,"L型转角沙发储物抽拉沙发",6079,"../img/index/ind_03.png",2),
(9,"多功能储物茶法床抽拉沙发床",4089,"../img/index/ind_05.png",2),
(10,"推拉坐卧两用抽拉沙发",7089,"../img/index/ind_07.png",2),
(11,"新概念抽拉式皮质沙发",4879,"../img/index/ind_08.png",2),
(12,"组合地中海抽拉折叠功能沙发",5219,"../img/index/ind_13.png",2),
(13,"双人抽拉折叠可拆洗布艺沙发",3099,"../img/index/ind_14.png",2),
(14,"美式抽拉田园简约实用沙发",6009,"../img/index/ind_15.png",2),
(15,"多功能可折叠拆洗储物抽拉沙发",5879,"../img/index/ind_17.png",2),
(16,"功能布艺沙发床折叠沙发床",5579,"../img/index/ind_26.png",3),
(17,"易折叠双人小户型沙发床",4569,"../img/index/ind_27.png",3),
(18,"小户型布艺折叠沙发双人休闲",2889,"../img/index/ind_29.png",3),
(18,"书房可折叠拆洗布艺沙发床",5230,"../img/index/ind_30.png",3),
(20,"时尚办公室午休沙发床",4089,"../img/index/ind_35.png",3),
(21,"现代简约布艺沙发床可折叠沙发",5979,"../img/index/ind_36.png",3),
(22,"懒人简易折叠沙发床",3608,"../img/index/ind_37.png",3),
(23,"现代简约布艺沙发床可折叠沙发",5979,"../img/index/ind_38.png",3);
INSERT INTO t_product(p_name,p_price,p_img_index,p_t_id)
VALUES
("可拆洗组合三人布艺小户型沙发",4579,"../img/index/sofo1.png",1),
("简约日式休闲小户型",3879,"../img/index/sofo2.png",1),
("日式棉麻布艺沙发组合",7899,"../img/index/sofo3.png",1),
("现代北欧双人三人日式沙发",7089,"../img/index/sofo4.png",1),
("创意高档小户型布艺沙发",5979,"../img/index/sofo5.png",1),
("北欧简约现代高档皮布沙发",6879,"../img/index/sofo6.png",1),
("非卖品",0,"../img/index/sofo16.png",1),
("L型转角沙发储物抽拉沙发",6079,"../img/index/ind_03.png",2),
("多功能储物茶法床抽拉沙发床",4089,"../img/index/ind_05.png",2),
("推拉坐卧两用抽拉沙发",7089,"../img/index/ind_07.png",2),
("新概念抽拉式皮质沙发",4879,"../img/index/ind_08.png",2),
("组合地中海抽拉折叠功能沙发",5219,"../img/index/ind_13.png",2),
("双人抽拉折叠可拆洗布艺沙发",3099,"../img/index/ind_14.png",2),
("美式抽拉田园简约实用沙发",6009,"../img/index/ind_15.png",2),
("多功能可折叠拆洗储物抽拉沙发",5879,"../img/index/ind_17.png",2),
("功能布艺沙发床折叠沙发床",5579,"../img/index/ind_26.png",3),
("易折叠双人小户型沙发床",4569,"../img/index/ind_27.png",3),
("小户型布艺折叠沙发双人休闲",2889,"../img/index/ind_29.png",3),
("书房可折叠拆洗布艺沙发床",5230,"../img/index/ind_30.png",3),
("时尚办公室午休沙发床",4089,"../img/index/ind_35.png",3),
("现代简约布艺沙发床可折叠沙发",5979,"../img/index/ind_36.png",3),
("懒人简易折叠沙发床",3608,"../img/index/ind_37.png",3),
("现代简约布艺沙发床可折叠沙发",5979,"../img/index/ind_38.png",3);
SELECT * FROM t_product
1．工作中遇到的问题:
[if !supportLists]1. [endif]设置背景图片 自响应
[if !supportLists]2. [endif]字体随分辨率一起变化
1px=1rem/16 *对应的字体大小
7 移动端要加入的一系列meta
<!--禁止浏览器缩放-->
<!--清除浏览器缓存-->
<!--iPhone 手机上设置手机号码不被显示为拨号链接）-->
<!--IOS私有属性，可以添加到主屏幕-->
<!--屏幕顶部条的颜色-->
GreenLotusHotel
<!-- 重置样式-->
<!-- 主样式-->
<!-- 手机触摸-->
11特别要注意今天的这个 在js里面引号转义的问题
""+
[if !supportLists]1. [endif]用来标记文本 跟img的alt是一样的
WHO
[if !supportLists]2. [endif]写地址 语义化
<address>芦山大佬坝
3一段文章用article
<article>一段文章
[if !supportLists]3. [endif]aside 侧边栏 定义article以外的类容
[if !supportLists]4. [endif]定义文章粗体b
<b>粗体
[if !supportLists]5. [endif]指定文本方向 :如下出来是olleh
<bdodir="rtl">hellobdo>
6.<big >比常规字体大一号
<big>hellobig>
7 .center使文本进行水平居中
<center>我居中了</center>
8.设置字体
<em>Emphasized
text</em><br>斜体
<strong>Strong text</strong><br>加粗
Definitionterm
A piece of computercode
Sample output from a computerprogram
<kbd>Keyboardinput
Variable
9.embed定义一个容器,嵌入外部应用或者互动程序
<embed src="helloworld.swf"tppabs="http://w3schools.com/tags/helloworld.swf">
11.带有删除和插入(下划线)的文本
<p>My favorite color is <del>bluedel><ins>redins>!p>
12 .包含框
效果图:用legend标签
13meter标签 用来图形显示
14.新奇标签
Oninput=function() ----事件
16.<q> 这是加引号
Here comes a short quotation:This is a short quotation
17.<small>使字体变小
18.在字体中划一条线
not yet available!
19 下标和上标文本
20表单类型：
[if !supportLists]1. [endif]Email ，url,
[if !supportLists]2. [endif]Number 在text框的基础上可以规定上下限制，间隔
[if !supportLists]3. [endif]日期选择器：date,datetime,
4里面的属性：<input type="number" name="points" min="0"max="10"step="3" />multiple="multiple"是多选
pattern="[A-z]{3}"可以直接写正则表达式
required="required"验证在提交之前不能为空
[if !supportLists]1. [endif]关于HTML5的属性：
1.设置contenteditable属性可以 编辑文本
<p contenteditable="true" spellcheck="true">这个可以编辑
3.当文本溢出时设置它为省略号…
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
[if !supportLists]2. [endif]设置文章自动空两格
text-indent:2em;
[if !supportLists]3. [endif]安卓和前端的桥接技术:
Demo: 实际就是通过加载本地html文件(里面有js脚本),实现android本地方法和js中的交互
[if !supportLists]1. [endif]在安卓端 mainfest.xml中加入网络权限
[if !supportLists]2. [endif]然后加载本地的html文件, 放在assets目录下
[if !supportLists]a) [endif]定义好给安卓调用的funFromjs()方法
[if !supportLists]b) [endif]和安卓提供给js调用的对象接口fun1FromAndroid(String name)
[if !supportLists]3. [endif]<body>
[if !supportLists]4. [endif] <a>js中调用本地方法</a>
[if !supportLists]5. [endif] <script>
[if !supportLists]6. [endif]
[if !supportLists]7. [endif] function funFromjs(){
[if !supportLists]8. [endif] document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
[if !supportLists]9. [endif] }
[if !supportLists]10. [endif] var aTag = document.getElementsByTagName('a')[0];
[if !supportLists]11. [endif] aTag.addEventListener('click', function(){
[if !supportLists]12. [endif] //调用android本地方法
[if !supportLists]13. [endif] myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)！！"); 当点击的时候就调用安卓的fun1FromAndroid
[if !supportLists]14. [endif] return false;
[if !supportLists]15. [endif] }, false);
[if !supportLists]16. [endif] </script>
[if !supportLists]17. [endif] <p></p>
[if !supportLists]18. [endif] <div id="helloweb">
[if !supportLists]19. [endif]
[if !supportLists]20. [endif] </div>
[if !supportLists]21. [endif]</body>
[if !supportLists]4. [endif]iso和前端的桥接
<h1>UIWebView与iOS直接交互
<!--脚本开始的地方-->
//
functionconnectWebViewJavascriptBridge(callback){
if(window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady',function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
<!--激活方法-->
connectWebViewJavascriptBridge(function(bridge){
<!--创建一个按钮-->
var button =document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = '给iOS发送信息'
//
button.onclick =function(e) {
e.preventDefault()
<!--此处是你传参数的地方-->
var data = 'YouXianMing -Just so easy :)'
<!--使用bridge中的send发送数据-->
bridge.send(data,function(responseData) {
})
}
document.body.appendChild(document.createElement('br'))
})
<!--脚本结束的地方-->
</body>
[if !supportLists]5. [endif]判断机型是ios 还是安卓的
var browser={
versions:function(){
var u =navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident')> -1, //IE内核
presto: u.indexOf('Presto')> -1, //opera内核
webKit:
u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1&&u.indexOf('KHTML') == -1, //火狐内核
mobile:
!!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
ios:
!!u.match(/(i[^;]+\;(U;)? CPU.+Mac OS X)/), //ios终端
android: u.indexOf('Android')> -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone')> -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad')
> -1, //是否iPad
webApp: u.indexOf('Safari')
== -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage|| navigator.language).toLowerCase()
}
document.writeln("<BR/>语言版本:"+browser.language);
document.writeln("
<BR/>是否为移动终端: " + browser.versions.mobile);
document.writeln("
<BR/>ios终端: " + browser.versions.ios);
document.writeln("
<BR/>android终端: " + browser.versions.android);
document.writeln("
<BR/>是否为iPhone: " + browser.versions.iPhone);
document.writeln("
<BR/>是否iPad: " + browser.versions.iPad);
document.writeln(navigator.userAgent);
</script>
/////快点互动PC端
[if !supportLists]1. [endif]文字与图片垂直居中对齐方法
[if !supportLists]a) [endif]<p>我要坚强
[if !supportLists]b) [endif]只需要定义P*{vertical-align:middle}就可使图片同行垂直居中
[if !supportLists]2. [endif]Checkbox 的设置属性
//disabled='disabled' 这是禁用checkbox;checked='checked' 这是默认选择
[if !supportLists]3. [endif]字符串中间加一杠
text-decoration:line-through;
[if !supportLists]4. [endif]移动端字体设置
14px/1.6 'PingFang SC', '\5FAE\8F6F\96C5\9ED1','STHeitiSC-Light', 'Helvetica', 'Arial', sans-serif
腾讯课堂：
//
// _oo0oo_
// o8888888o
// 88" . "88
// (| -_- |)
// 0\ = /0
// ___/`---'\___
// .' \\| |// '.
// / \\||| : |||// \
// / _||||| -:- |||||- \
// | | \\\ - /// | |
// | \_| ''\---/'' |_/ |
// \ .-\__ '-' ___/-. /
// ___'. .' /--.--\ `. .'___
// ."" '< `.___\_<|>_/___.' >' "".
// | | : `- \`.;`\ _ /`;.`/ - ` : | |
// \ \ `_. \_ __\ /__ _/ .-` / /
// =====`-.____`.___ \_____/___.-`___.-'=====
// `=---='
//
//
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
// 佛祖保佑 永无BUG
//
//
//
[if !supportLists]1. [endif]设计模式
什么是模式：可靠/已验证/满足个人需求；/能实现大型解决方案
工厂模式:
[if !supportLists]a) [endif]重复产生N个实例
[if !supportLists]2. [endif]单例模式：
单例模式只有1个实例
[if !supportLists]3. [endif]观察者模式（订阅模式）
[if !supportLists]4. [endif]适配器模式：
[if !supportLists]2. [endif]VUE 走向高大上
Vue: 尤雨溪
Jquery 为驱动DOM
MVC;model(模型) view(视图) controller(控制器)
MVVM:
M: model 模型 当前视图中的可用的数据
V: view 视图 渲染的UI HTML
VM: 是model和view的联合体
使用:
表达式{{ }} //输出数据
指令 //扩展HTML标签
2018年3月面试总结
[if !supportLists]A. [endif]es6新特性
[if !supportLists]a) [endif]什么是模块化开发: 模块化就将文件按照功能分离,根据需求引入不同的文件
1. let 和const
Let:必须先定义再使用,相对var 跟严谨. Let是块级作用域,不存在变量提升
Var:它是函数体作用域
两者区别:js是浏览器变解析边执行,解析器会优化代码,var是函数体作用域,引擎扫描函数体会对var进行优化,进行变量提升.
2解构赋值
[if !supportLists]3. [endif]es6的扩展
[if !supportLists]a) [endif]
[if !supportLists]b) [endif]Rest参数:
[if !supportLists] i. [endif]
C 箭头函数
D数组合并
.
[if !supportLists]4. [endif]Set和Map用于存储数据]
[if !supportLists]1. [endif]Set 类似于数组,成员唯一(里面不能有重复的值) 我们可以用来去重
[if !supportLists]2. [endif] Map 类似于对象 键值对的集合
[if !supportLists]3. [endif]
[if !supportLists]4. [endif]
[if !supportLists]5. [endif]Promise 它比ajax更好地实现异步加载
[if !supportLists]a) [endif]它是一个对象,也是一个构造函数
B面向对象 原型闭包作用域
[if !supportLists]1. [endif]字面量
[if !supportLists]2. [endif]枚举遍历
[if !supportLists]3. [endif]原型
[if !supportLists]4. [endif]构造函数
[if !supportLists]5. [endif]闭包
[if !supportLists]6. [endif]递归
[if !supportLists]7. [endif]作用域this
D:搭项目:
Webpack是一个前端资源模块化加载器和打包工具,它能把各种资源作为模块来使用和处理,实际上,它是通过不同的loader将这些资源加载后打包的,然后输出打包文件.
简单的说,它是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出
它有一个核心配置文件,webpack.config.js 必须放在项目根目录下:
第1步: 需要安装相关模板 (工程依赖文件)
[if !supportLists]1. [endif]Npm init 生成pakage.json文件
第2步: 安装相关模板
cnpm install vue --save //装vue
$ cnpm install webpack-dev-server -–dev //装webpack-dev-server
cnpm i -D css-loaderfile-loader style-loader
cnpm i -D babel-loaderbabel-core babel-preset-env
babel-preset-env会根据配置的运行环境自动启用需要的babel插件
第3步: 配置webpack 导入webpack.config.js
第4步;编写main.js //main.js是入口文件 webpack编译会通过根目录文件打包到build.js
5) User.vue
6) 编写babelrc
7）index.html 引用build.js
此时webpack 将JS/vue打包到build.js
先执行Npm install 或者cnpminstall
8) 运行测试 npm run dev
[if !supportLists]2. [endif]脚手架cli
[if !supportLists]a) [endif] Vue-cli脚手架 创建项目
[if !supportLists] i. [endif]Vue-cli 是快速构建这个单页应用的脚手架 包含多种模板
[if !supportLists]3. [endif]VUE-cli脚手架 创建项目
[if !supportLists]4. [endif]Vue-cli是快速构建这个单页应用的脚手架
[if !supportLists]5. [endif]Vue-cli本身集成了多种项目模板：
[if !supportLists]6. [endif] Webpack 基于webpack，用的较多，包含eslint,
unit等
[if !supportLists]7. [endif] Webpack-simple 基于webpack， 更简洁，无eslint, unit
[if !supportLists]8. [endif]
[if !supportLists]9. [endif]示例，步骤：
[if !supportLists]10. [endif]1 安装vue-cli，配置vue命令环境
[if !supportLists]11. [endif]cnpm installvue-cli -g
[if !supportLists]12. [endif]查看脚手架vue –version, vue list
[if !supportLists]13. [endif]
[if !supportLists]14. [endif]2 初始化项目，生成项目模板
[if !supportLists]15. [endif]vue initwebpack-simple vue-cli-demoXiao // demoxiao就是文件名
[if !supportLists]16. [endif]cd vue-cli-demo
[if !supportLists]17. [endif]cnpm install
[if !supportLists]18. [endif]npm run dev //运行
[if !supportLists]19. [endif]npm run build //打包输出，上线
E:性能优化
[if !supportLists]1. [endif]seo 添加data里面的关键词,设置title
[if !supportLists]2. [endif]减少http请求,合并js,css 和图片
[if !supportLists]3. [endif]缓存ajax请求的结果,
[if !supportLists]4. [endif]用innerHTML代替DOM操作,减少DOM操作次数
[if !supportLists]5. [endif]用setTimeout来避免页面失去响应
[if !supportLists]6. [endif]用hash-table来优化查找
[if !supportLists]7. [endif]少用全局变量
[if !supportLists]8. [endif]缓存DOM节点查找的节点
[if !supportLists]9. [endif]避免在页面主题布局中使用table, 它的显示比div布局慢
F 兼容性问题:
Js的兼容性问题 主要就是event事件 , 网页可视区域的兼容,滚动条的兼容
[if !supportLists]1. [endif]event事件问题
[if !supportLists]a) [endif]document.onclick=function(ev){
var e=ev||window.event;
var mouseX=e.clientX
}
2/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /*
IE6、IE7 识别 */
+color:red; /*
IE6、IE7 识别 */
*+color:red; /*
IE6、IE7 识别 */
[color:red; /*
IE6、IE7 识别 */
color:red\9; /*
IE6、IE7、IE8、IE9 识别 */
color:red\0; /*
IE8、IE9 识别*/
color:red\9\0;
/* 仅IE9识别 */
color:red \0; /*仅IE9识别 */
color:red!important;
/* IE6 不识别!important 有危险*/
/* CSS选择符级Hack */
*html #demo {
color:red;} /* 仅IE6识别 */
*+html #demo {
color:red;} /* 仅IE7识别 */
body:nth-of-type(1)
#demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body
#demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo {
color:red\9; } : /* 仅IE9识别 */
/* IE条件注释Hack */
<!--[if IE
6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE
7]>此处内容只有IE7.0可见<![endif]-->
不用hack处理: 固定宽度要浮动，不加边框和补丁，里面套个DIV，定义样式起作用！
G异步和同步
同步: 因为js是单线程的,就是等上一个线程结束,才能执行下个线程.
比如: 我向您投递简历.要等您通知我,我才能过来面试
异步: 发起一个进程,系统会读取”任务队列”,这这时候系统可以处理其它线程
等处理之后会返回一个结果
比如: 我向您投递了简历.您这边在处理其它的事情,处理完之后,看到我发送的简历,然后反馈我,再通知我来面试
递归: 自己调自己阶乘
项目搭建: 6月18日
[if !supportLists]1. [endif]包管理器 (用什么都可以) --- 用来装依赖插件的如jquery bootstrap
[if !supportLists]a) [endif]npm
[if !supportLists]b) [endif]bower –都是针对前端的包管理器
这里说bower:
[if !supportLists]1. [endif]首先要初始化,生成bower.json文件 用来搭建工程
[if !supportLists]a) [endif]bowerinit
[if !supportLists] i. [endif](坑: 这里初始化要用管理员模式) –生成1 bower.json文件–装了哪些依赖可以在bower.json里面看
[if !supportLists]b) [endif]type null >.bowerrc
[if !supportLists] i. [endif] --生成.bowerrc文件
然后在这个.bowerrc文件里面写入 ,这个lib用来定义下载的目录
{
"directory":
"lib"
}
C bower install bootstrap#3.3.7 –-save-dev
用bower装这个bootstrap , 后面跟了 - - save-dev是写入 bower.json的目录里面, #3.3.7是选择版本
D bower install jquery –save-dev
装一个jquery
-------------------bower结束---------------------
6月19学习
[if !supportLists]1. [endif]bower它是包管理器,管理依赖插件,用来快速下载js的插件和版本
[if !supportLists]2. [endif]gulp它是自动化构建,管理css合并图片进行压缩
[if !supportLists]3. [endif]reguirejs 按需加载
开始装gulp:
[if !supportLists]1. [endif]npm installgulp -g
[if !supportLists]2. [endif]npm installgulp //装两次一次全局 一次本地
[if !supportLists]3. [endif]然后 看到这两个版本号
[if !supportLists]4. [endif]npm init 生成一个package.json gulp.js的依赖文件 (跟bower.json效果相同)
[if !supportLists]a) [endif]然后装gulp里面的依赖文件的目录 ,node_modules装的是依赖插件
[if !supportLists]5. [endif]然后手动配置(负责gulpfile.js过来) 再命令行输入gulp 看需要装什么
输入 gulp
[if !supportLists]a) [endif]一直 npm install gulp-webserver
–save-dev (如果没有—save package.json里面就没有对应的目录)
[if !supportLists]b) [endif]然后输入gulp就可以启动了
[if !supportLists]6. [endif]rm -rfnode_modules 删除node_modules (写哪个就删除哪个)
7.装入require.js: bower installrequirejs --save-dev
生成对应的css 需要先gulp sass
到了这里 作业: 在这里使用 bootstrap ,使用一下require js
6月20号
6月21
Cordova插件创建app及打包成apk
Apk androidPackage 安卓安装包
[if !supportLists]1. [endif]安装java的开发安装包(jdk) www.oracle.com(dizhi)
[if !supportLists]2. [endif]安装android开发安装包(Android SDK) http://tools.android-studio.org/
[if !supportLists]3. [endif]下载后安装 添加环境变量
[if !supportLists]4. [endif]Sdk平台
[if !supportLists]5. [endif]安装cordova
[if !supportLists]6. [endif]创建工程
[if !supportLists]7. [endif]添加android平台
[if !supportLists]8. [endif]打包-
2019学习
A Vue学习
路由: 就是把数据从一个地方传送到另一个地方的行为和动作
Moke数据
开moke数据的产生就是让前端脱离后台，自己模拟数据完成代码的调测。
在vue项目中，与static目录同级创建moke目录，moke目录中存放moke数据文件，文件已json格式为主，因为多数接口返回的也是json的格式数据。
下载
npm install mockjs --save-dev
1
使用
1、新建mock.js
import Mock from 'mockjs'
Mock.mock("/getTest",{
"name1|1-3": 'a',
"name2|2": 'b',
});
2、新建vue文件
mock一下
export default {
methods: {
getTest() {
this.$axios.get("/getTest").then(function(res) {
console.log(res.data);
});
}
}
};
3、main.js
import Mock from"./javascript/mock"
2019开始
面试:
[if !supportLists]1. [endif]webpack配置
[if !supportLists]2. [endif]vue兄弟间传参
[if !supportLists]3. [endif]promise
1服务器端渲染:
页面都是在后端将html 拼接好的，然后返回给前端完整的html 文件，浏览器拿到这个html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染
客户端渲染:
前后端分离就是客户端渲染:后端不提供完整的 html 页面，而是提供一些 api 使得前端可以获取 json 数据，然后前端拿到 json 数据之后再在前端进行 html 页面的拼接，然后展示在浏览器上，这就是所谓的客户端渲染
2谈谈vue框架
Model view viewModel 它是一种设计思想 model和viewModel的交互是双向的,不需要手动的控制DOM.只需关注业务逻辑,vue是以数据为驱动
3.2019.3.2面试准备
1.undefined 和 null 和NaN区别
[if !supportLists]2. [endif]get 和post的区别
[if !supportLists]a) [endif]GET一般用于获取/查询资源信息,POST一般用于更新资源信息。
[if !supportLists]b) [endif]Get是将请求参数跟在url后进行传递, (就是把数据放置在HTTP协议头中) 有大小限制
而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
[if !supportLists]c) [endif]
post便于隐长数据，但是效率低
get效率高，但是不安全
[if !supportLists]3. [endif]cookie和session的区别
session和cookie的作用是解决客户端与服务器端会话同步的问题
http请求是无状态的,即每次服务端接收请求，都是一个全新的请求，每次请求服务器端不能识别两次会话都是来自同一个浏览器，即服务端不知道客户端的历史请求记录
把服务器中产生的会话sessionID存储到客户端浏览器cookie中去。在客户端存在周期为浏览器关闭时，消失。这样便解决了客户端请求服务端会话同步的问题。
Cookie是保存在客户端的,生命周期是浏览器的一次回会话,并且不安全单个cookie保存的数据不能超过4K
Session是保存在服务器端的
、所以个人理解：将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
Localstroge的生命周期是永久的,不手动清除就会一直存在,sessionstroge的当前窗口或标签页
4. http协议 和https
HTTPS和HTTP的区别主要为以下四点：
1、安全协议配置费用，https协议需要到ca申请证书，一般免费证书很少，需要交费;
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议;
3、http和https使用的是完全不同的连接方式，用的端口不一样，前者是80，后者是443;
4、http的连接很简单，是无状态的;https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
简单来说，http协议+安全套=https协议
6http协议流程
http是超文本传输协议,首先进行DNS域名解析发起tcp的三次握手 服务器响应http请求 浏览器解析html代码并请求代码里面的资源 如js css 图片等 然后断开tcp协议 对页面进行渲染呈现给用户
5盒子模型
1.W3C盒子模型(标准盒模型) +doctype
盒子= content+padding+border+margin
Width是指内容区域的宽度和高度
[if !supportLists]2. [endif]IE盒子模型:
Width=content+padding+border
6清除浮动
1.触发BFC效果
二、 形成 BFC 的条件
1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值inline-blocks，table-cells，table-captions；
4、overflow 除了visible 以外的值（hidden，auto，scroll）
2.clear:both
3.设置伪类
/* 方法四:使用双伪元素清除浮动 */
.clearfix:before,.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*为了兼容IE*/
}
7什么是闭包;
闭包有三个特性：
1.闭包它是定义在函数内部的函数
2.函数内部可以读取外部的参数和变量, 让这些变量的值始终保持在内存中
3.参数和变量不会被垃圾回收机制回收
退出函数之前，将不使用的局部变量全部删除。
8. 原型链
对象之间的继承关系，在Js中是通过prototype对象指向父类对象，再找它的上级,直到指向Object对象为止，它就称为为原型链。
[if !supportLists]9. [endif]this指向
this 永远指向的是最后调用它的对象
3在构造函数中 this指向它的实例化对象
10怎么实现继承
[if !supportLists]1. [endif]用prototype直接继承
[if !supportLists]2. [endif]用call apply bind继承
var a= {
user:'hexiao',
fn:function(e,ee){
console.log(this.user);
console.log(e+ee)
}
}
var b= a.fn;
b.call(a,1,2); //直接传参 call和apply都是改变上下文中的this并立即执行这个函数
b.apply(a,[2,3]) //参数是数组的
var c= b.bind(a)//bind方法返回的是一个修改过后的函数,想什么时候调就什么时候调
console.log("----------")
c(5,9);
3.使用class 类来实现继承
11:跨域
为什么要跨域: 根据同源策略的限制,发起请求时必须要协议,端口,域名一致,
办法：
[if !supportLists]1. [endif]跨域jsonp
[if !supportLists]a) [endif]聊一下：只能get不能post
[if !supportLists]2. [endif]设置服务器代理
[if !supportLists]a) [endif]Nginx代理
[if !supportLists]b) [endif]设置服务代理：如node设置响应头：
[if !supportLists]1. [endif]代码如下：Access-Control-Allow-Origin,’*’
3.websock 即时通信
解决办法; 1.jsonp跨域
[if !supportLists]1. [endif]还可以通过window.name
[if !supportLists]2. [endif]H5 postMessage
3. 使用 Nginx 反向代理
4通过服务器代理,
[if !supportLists]4. [endif]Node.js 中间件 设置响应头Access-Control-Allow-Origin', '*'
window.postMessage的使用方法比较简单，只有两个参数，第一个参数是要传输的消息，第二个参数是接收消息的域，可以用“×”来表示所有的域。发送消息的代码如下：
以前用jsonp ,现在用h5de window.postMessage
12promise
在es6中的promise对象是一个构造函数,用来生成promise实例,promise优化了ajax的异步请求;它有三个状态peedingresolve reject
const promise = new Promise(function(resolve,reject){
resolve(1);
})
//接收一个函数作为参数 , (resolve
reject) 这两个参数由js引擎提供,不用自己部署
//resolve 的作用是promise对象的状态从未完成到成功,成功后,将异步操作的结果作为参数传递
//reject
//then() 方法 是resolve,reject状态的回调函数
//jquery defrred对象 就是jquery中promise的一个实现
串行: .then 作为回调reject
并行: .all () 如果有一个报错就会reject
Race() 哪个执行快就返回哪个,后面的会继续请求,只是会抛弃
13MVVM
M: model 模型 当前视图中的可用的数据
V: view 视图 渲染的UI HTML
VM: viewModel
Vue它是以数据为驱动,实现model和view之间的一个双向数据绑定
14vue传参
父传子用props
子传父用emit发射
兄弟组件, 让它们建立联系,找一个共同的节点中央事件总线bus事件车
或者就用vueX状态管理
15.vuex
Store仓库
它有4个状态属性
State
Getters
Actions
Mutations
通过dispatch触发antions管理mutations
或者commit提交 改变mutations的值
16排序算法
冒泡算法
第一个for遍历,第二个for , j++j
然后判断左右两边的数,如果左边比右边大,则替换,一直替换到最大的
插入排序跟冒泡相反取最小值
快速排序:
[if !supportLists]1. [endif]先从数组中取出一个数作为基准值arr.splice(Math.floor(arr.lenth/2),1)
[if !supportLists]2. [endif]然后分区,将比它小的放到左边,比它大的放到右边
[if !supportLists]3. [endif]再对左右分区进行重复第二步,直到各个区间只有一个数
17css3的新特性
圆角border-radius 阴影box-shadow 文字特效text-shadow 渐变gradient
2d-3D转换 媒体查询 rgba设置背景
18H5新特性
语义化标签 本地存储 离线存储 音频视频播放 地理定位
19websocket即时通信
Var ws = new WebSocket(“域名”)
它有4个事件两个方法
Ws.onopenws.onerror onmessage onclose关闭连接
Send() close()
20webpack 模块打包器 自动化构建
四大核心:
[if !supportLists]1. [endif]入口entry 收拾的入口
[if !supportLists]2. [endif]加载loader 开始收拾
[if !supportLists]3. [endif]插件plugins 对收拾的功能进行扩展
[if !supportLists]4. [endif]出口output 收拾后整理的位置
Webpack-dev-server是webpack提供的一个小型express服务器
作用:相当于对静态文件提供服务的
作用:
21性能优化
1. 4、web前端开发，如何提高页面性能优化？
内容方面：
1.减少 HTTP 请求(Make Fewer HTTP Requests)
2.减少 DOM 元素数量(Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存(Make Ajax Cacheable)
针对CSS：
1.把 CSS 放到代码页上端(Put Stylesheets at the Top)
2.从页面中剥离 JavaScript与CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式(Avoid CSS Expressions)
针对JavaScript ：
1. 脚本放到 HTML 代码页底部(Put Scripts at the Bottom)
2. 从页面中剥离JavaScript 与CSS (Make JavaScript and CSS External)
3. 精简 JavaScript 与CSS (Minify JavaScript and CSS)
4. 移除重复脚本(RemoveDuplicate Scripts)
面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
22行内元素有哪些:
行内元素: a b span img strong input label em button select
块级元素:div p ul li h1-h6 dl dt dd header nav
23简述一下src与href的区别:
Href:是指向网络资源所在位置 link a标签 用于超链接
Src:指向外部资源的位置当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到资源加载完毕,类似于将所指向资源嵌入当前标签内,
24css有哪些选择器:
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）
22解构
23promise
24传参 父调用子方法mininx
25生命周期
[if !supportLists]5. [endif]小程序总结
[if !supportLists]1. [endif]布局flex
Flex 关注一下属性：
[if !supportLists]· [endif]1.flex-direction ：row | column 决定主轴的方向(排列方向)
[if !supportLists]· [endif]2.flex-wrap : nowrap | wrap | wrap-reverse 排列方式(换不换行)
[if !supportLists]· [endif]3.justify-content :center | space-around | space-between| flex-start | flex-end
（定义了主轴的对其方式）
[if !supportLists]· [endif]4.align-items：center |baseline | stretch | flex-start | flex-end 定义交叉轴的对其方式()
baseline项目的第一行文字的基线对其 stretch未设置高度，默认占满
[if !supportLists]· [endif] 、、、、、、对项目中的order进行单独设置、、、、、、、、、、、、、、、、
[if !supportLists]· [endif]6. order ： 定义排列顺序，数值越小，排列越靠前。默认为0
[if !supportLists]· [endif]7. flex-grow： 设置单项目的比列,平均分配 默认0
8. flex-shrink：<number> /* default 1 */ 默认都为1 感觉是设置 自适应的
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
[if !supportLists]· [endif]9.flex-basis ：计算主轴多余空间 自适应
10 align-self ：auto | flex-start | flex-end | center | baseline | stretch
[if !supportLists]· [endif]允许单个项目排列方式不一样。
2.事件properties
