今天的事今天做,分享麵筋,大家共同進步。面出了2身汗,加油。
有的部分忘了,想起啥寫啥,可能有點亂。
URI—Universal Resource Identifier通用資源標誌符
Web上可用的每種資源如HTML文件、每個影片、影片片段、程式片段等都是一個片段來URI來定位的
URI一般由三部組成
①訪問資源的命名機制
②存放資源的主機名
③資源本身的名稱,由路徑表示,著重強調於資源。
URL—Uniform Resource Location統一資源定位符
URL是Internet上用來描述資訊資源的字串,主要用在各種WWW客戶程式和伺服器程式上,特別是著名的Mosaic。
採用URL可以用一種統一的格式來描述各種資訊資源,包括檔案、伺服器的位址和目錄等。
URL一般由三部組成
①協定(或稱為服務方式)
②存有該資源的主機IP位址(有時也包括埠號)
③主機資源的具體位址。如目錄和文件名等
例子
URI = 作文
URL = 議論文、記敘文、詩歌…
那麼
1.寫的都不錯,不會說大家的「議論文」寫的不錯,雖然指的是一種東西。
2.客觀描述時,你會和同桌說:我今天寫的是“詩歌”,而不會囉嗦的說我今天用了詩歌的方式寫的作文。
同理
當你寫一篇技術文檔規範時,你會說某個參數要傳遞一個URI,而不必說某個參數要傳遞一個「URL格式的字串」。
Scheme:// 協定部分,以:作為結束,常見的協定包含HTTP、HTTPS等
//: 層級URLLLL.等
//: 層級URLLLLL項
2.遞歸
斐波那契數列,做過筆記的呀,就是不會遞歸,數據結構的不好,但是我迭代的方法沒問題啊1 1 2 3 5….
//递归的方法 function test(n){ if(n<2){ return 1; } return test(n-1)+test(n-2) } alert(test(9))
//迭代的方法 function test(n){ var num1 = 1; var num2 = 2; var num3 = 0; for(var i=0;i<n-2;i++){ num3 = num1 + num2; num1 = num2; num2 = num3; } } alert(test(9))
3.瀏覽器發送請求到頁面加載完成,發生了什麼
由這個問題才引出問題1 ,自己給自己挖坑
下面是引用的
現在的前後端分離, 後端伺服器的角色更像是一個API Server, 接收請求並且只是以資料的形式返回, 而怎麼渲染和表現資料, 都交給更前端的表現層來做, 實現前後端的解耦
說了標準盒模型和怪異盒模型,常識也不說了
6.了解或使用MV*框架
用過backbone、
6.了解或使用MV*框架用過backbone、 vue,說了angular和react。公司用的ant
(1)熱加載
问了webpack的基本配置,自己回答的:entery和output,感觉好浅薄。还是用的少,了解少的缘故吧
entry:{} //加载模块的入口点
output:{}//打包文件的路径和名称
module:{}//那些加载器来处理那些文件
resolve:{}//设置模块的一些细节
plugins:[]//系统插件和扩展插件
使用了 vue-router、vue-resource,了解vuex
由此引出问题10,11,12
平时做项目能正常跳转就可以了,没有想过路由怎么路由的,没答上来。。
SPA路由实现原理不知道面试官想得到的是不是类似这样的答案。
父子组件通信的机制,传递数据使用prop属性
动态Prop
用 v-bind
动态绑定 props 的值到组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件。
<p> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </p> <child :my-message="parentMsg"></child>
单向数据流
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
通常有两种改变 prop 的情况:
prop 作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;
prop 作为需要被转变的原始值传入。
JSONP : JSON with Padding
(1)script标签 src属性可以访问外部资源
(2)用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数,函数接受一个参数,函数中包含 实现逻辑(要做什么事)
通过script标签加载远程文件资源,当远程文件被加载进来时,执行当前定义好的函数,数据就是函数传入的参数
求职定位,到底想干啥?
每一点都非常深入。
标准盒模型和怪异盒模型不再重复
box-sizing属性:content-box:标准盒模型,border-box:怪异盒模型
行内元素同样具有盒模型
<!-- 行内元素可以设置border 设置宽高无效--> <span style="border:10px solid red;width:100px;height:100px">haha</span>
<!-- 行内元素设置padding、margin--> <p style="width:90px;height:100px;background:blue;"> <span style="background:yellow;padding:5px;margin:20px;">1782</span> <p> woship </p> </p>![Snip20170211_5](/Users/shenyuanyuan/Desktop/Snip20170211_5.png)
行内元素的padding-top、padding-bottom从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。
黄色内边距5px
左边黄色距离蓝色20px
上下虽然显示padding,但是padding并没有影响其他元素
默认值:static
属性有5个分别是:relative、absolute、fixed、inherit、static
父元素p :width:500px;height:200px;position: static|absoluta|relative|fixed。 position分别取值,子元素怎么定位?
子元素p:width:200px;height:200px;position:absolute
<!-- 父元素默认static--> <p style="background:red;width:500px;height:60px;"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;"> </p> </p> <br> <!-- 父元素默认relative--> <p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;"> </p> </p> <br/> <!-- 父元素默认fixed--> <p style="background:gray;width:500px;height:60px;position:fixed"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;"> </p> </p> <!-- 父元素默认absolute--> <p style="background:red;width:500px;height:60px;position:absolute"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;"> </p> </p>
发现:子元素绝对定位,按照除了属性为 static以外的第一个父元素定位。所以父元素设置为:absolute、relative、fixed,子元素定位表现一致;
如果子元素设置margin、border、padding呢?子元素左上角的点以margin、border、还是padding定位
<p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:fixed;left:0px;top:30px;"> </p> </p> <br/> <!-- 最原始--> <p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;"> </p> </p> <br/> <!-- 最原始:添加margin--> <p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;margin:10px;"> </p> </p> <br/> <!-- 最原始:添加padding--> <p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;padding:10px;"> </p> </p> <br/> <!-- 最原始:添加botder--> <p style="background:red;width:500px;height:60px;position:relative"> <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" > </p> <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;border:10px solid yellow;margin:5px;"> </p> </p>
RunJS上边分享的代码
清除遮挡
<p class="left"></p> <p class="right"> </p> .left { width: 100px; height: 100px; background: red; float: left; } .right { height: 200px; background: yellow; overflow:hidden;//属性清楚遮挡 }
关闭浮动
解决垂直双边距问题
<p style="background:gray;width:300px;height:300px;overflow:auto"> <p style="background:green;margin-top:10px;float:left;width:20px;height:20px"> </p> <p style="background:red;width:50px;height:50px;margin-top:40px;"></p> </p>
BFC的作用
http://www.php.cn/
<p class="container"> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> </p> .container { display: flex; flex-flow: row; width:300px; height:100px; background:gray; justify-content:space-around } .box { width: 20px; background:yellow; height:20px; }
flex参考1
flex参考2
在线例子:http://www.php.cn/
个人觉得讲的很好的js原型、原型链
原型链
function Foo(){ } var a = new Foo();//new的操作做了什么 var a = new Object() a.__proto__ = Foo.prototype Foo.call(a)
闭包:当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。
function a(){ var i=0; function b(){ alert(i); } return b; } var c = a(); c();
请求头字段和状态码
http状态码
数组去重
时间复杂度空间复杂度也不会啊。
除了技术,这个也问?感觉没啥优势,优势是移动端经验相对多一点