HTML

HTML5标签

媒体查询head部分写法

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML，二者有什么区别

区别：

所有的标记都必须要有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的XML标记都必须合理嵌套
所有的属性必须用引号""括起来
把所有<和&特殊符号用编码表示
给所有属性赋一个值
不要在注释内容中使“--”
图片必须有说明文字

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
新特性：
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签（header,nav,footer,aside,article,section）
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储
  - localStorage 长期存储数据，浏览器关闭后数据不丢失；
  - sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件，calendar、date、time、email、url、search
- 新的技术webworker, websocket, Geolocation
移除的元素
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
- 对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
- IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
- 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
```
   
```

iframe的优缺点？

</code>优点： <ul> <li>解决加载缓慢的第三方内容如图标和广告等的加载问题</li> <li>Security sandbox</li> <li>并行加载脚本</li> </ul> </li> <li> <code><iframe></code>的缺点： <ul> <li>iframe会阻塞主页面的Onload事件；</li> <li>即使内容为空，加载也需要时间</li> <li>没有语意</li> </ul> </li> </ol> <h3>如何实现浏览器内多个标签页之间的通信?</h3> <p>调用localstorge、cookies等本地存储方式</p> <h1>CSS</h1> <h3>css垂直居中方法</h3> <p>css居中完整指南</p> <h3>自适应布局</h3> <p>关于左右自适应的,不低于10种解决方案,还要看dom结构要求是并列还是嵌套,是否允许有父级元素,是否允许使用CSS3, 是否有背景色,是否要两列等高,等等<br> 而关于自适应高度的解决方案就略少一些,大致也是靠,CSS3的calc属性,内padding,绝对定位后拉伸,动态js计算等等解决方案,同样也是要看应用场景能用哪个</p> <h3>移动端自适应</h3> <ol> <li>rem方法</li> </ol> <pre><code class="js"><script> document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth/320 * 100 + 'px'; </script> </code></pre> <h3>Position属性</h3> <ol> <li>position有五个属性： static | relative | absolute | fixed | inherit <ul> <li>static 和 inherit : 没什么值得介绍的。</li> <li>relative : 相对于元素自身的定位。</li> <li>absolute ：相对于包含块的定位。</li> <li>fixed : 相对于窗口的定位。</li> </ul> </li> <li>包含块就是 top | right | bottom | left 参考的元素 <ul> <li>absolute的包含块指的是：最近的position属性值不为static的祖先元素</li> <li>relative的包含块指的是：元素自身</li> </ul> </li> <li>top | right | bottom | left值指的是“定位父元素”border内边到该元素margin外边的距离，“border内,margin外”。</li> <li>postion 与文档流 <ul> <li>postion : absolute | relative | fixed ：元素脱离文档流</li> <li>relative : 原本所占的空间仍然占据文档流</li> </ul> </li> <li>absolute和fixed�会将元素重置为区块元素，relative保持原来类型。</li> <li>absolute和fixed�不能在设置float，relative可以。</li> </ol> <h3>CSS盒模型</h3> <ol> <li>标准盒模型宽高只计算content</li> <li>IE盒模型宽高是border、padding和content的和</li> <li>如果在页面开头写了<code><!doctype...</code>所有浏览器都将使用标准盒模型,如果没有写,那么在IE下就将会使用IE盒模型解析盒子,即IE的怪异模式。</li> <li>CSS3 box-sizing <ul> <li>box-sizing: content-box|border-box|inherit;</li> <li>content-box: 标准盒模型</li> <li>border-box: IE盒模型</li> <li>inherit: 从父元素继承box-sizing的值</li> </ul> </li> </ol> <h3>隐藏元素的几种方法</h3> <ol> <li>display:none<br> 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，会导致浏览器的重排和重绘。<br> 不会触发其点击事件。</li> <li>visibility:hidden<br> 隐藏对应的元素，但是在文档布局中仍保留原来的空间。只会导致浏览器重绘而不会重排。不会触发点击事件。</li> <li>opacity:0<br> 元素隐藏后依旧占据着空间，元素只是隐身了，它依旧存在页面中。可以触发点击事件。</li> <li>设置height，width等盒模型属性为0<br> 不常用，但是可以用来制作页面效果，如jquery的slideUp。事件触发开padding、border大小。</li> <li>设置元素的position与left，top，bottom，right等，将元素移出至屏幕外</li> <li>设置元素的position与z-index，将z-index设置成尽量小的负数</li> </ol> <p><strong><em>能否相应事件看的是鼠标是否能接触到</em></strong></p> <p>对动画的影响：</p> <ol> <li>display:none：完全不受transition属性的影响，元素立即消失。</li> <li>visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果。</li> <li>opacity和height等属性能够进行正常的动画效果。</li> </ol> <h3>CSS中 link 和@import 的区别是？</h3> <ol> <li>link属于HTML标签，而@import是CSS提供的;</li> <li>页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;</li> <li>import只在IE5以上才能识别，而link是HTML标签，无兼容问题;</li> <li>link方式的样式的权重高于@import的权重.</li> </ol> <h3>position:absolute和float属性的异同</h3> <ol> <li>共同点：<br> 对内联元素设置<code>float</code>和<code>absolute</code>属性，可以让元素脱离文档流，并且可以设置其宽高。</li> <li>不同点：<br> float仍会占据位置，position会覆盖文档流中的其他元素。</li> </ol> <h3>CSS 选择符有哪些？</h3> <ol> <li>id选择器（ # myid）</li> <li>类选择器（.myclassname）</li> <li>标签选择器（div, h1, p）</li> <li>相邻选择器（h1 + p）</li> <li>子选择器（ul > li）</li> <li>后代选择器（li a）</li> <li>通配符选择器（ * ）</li> <li>属性选择器（a[rel = "external"]）</li> <li>伪类选择器（a: hover, li:nth-child）</li> </ol> <h3>CSS样式继承</h3> <ul> <li>可继承的样式： <ol> <li>font-size</li> <li>font-family</li> <li>color</li> <li>text-indent</li> </ol> </li> <li>不可继承的样式： <ol> <li>border</li> <li>padding</li> <li>margin</li> <li>width</li> <li>height</li> </ol> </li> </ul> <h3>CSS优先级</h3> <p>!important > 内联 > id > class > tag</p> <h3>CSS3新增伪类举例</h3> <ul> <li>p:first-of-type 选择属于其父元素的首个 <code><p></code> 元素的每个 <code><p></code> 元素。</li> <li>p:last-of-type 选择属于其父元素的最后 <code><p></code> 元素的每个 <code><p></code> 元素。</li> <li>p:only-of-type 选择属于其父元素唯一的 <code><p></code> 元素的每个 <code><p></code> 元素。</li> <li>p:only-child 选择属于其父元素的唯一子元素的每个 <code><p></code> 元素。</li> <li>p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <code><p></code> 元素。</li> <li>:enabled :disabled 控制表单控件的禁用状态。</li> <li>:checked 单选框或复选框被选中。</li> </ul> <h3>CSS3有哪些新特性</h3> <ul> <li>CSS3实现圆角（border-radius），阴影（box-shadow）</li> <li>对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）</li> <li>transform: <ul> <li>rotate(9deg) 旋转</li> <li>scale(0.85,0.90) 缩放</li> <li>translate(0px,-30px) 定位</li> <li>skew(-9deg,0deg) 倾斜</li> </ul> </li> <li>增加了更多的CSS选择器多背景 rgba</li> <li>在CSS3中唯一引入的伪元素是::selection.</li> <li>媒体查询，多栏布局</li> <li>border-image</li> </ul> <h3>对BFC规范的理解？</h3> <p>BFC，块级格式化上下文（Block Fromatting Context）。<br> 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells,<br> 和 table-captions），以及overflow值不为“visiable”的块级盒子，<br> 都会为他们的内容创建新的BFC（块级格式上下文）。<br> 一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。<br> 在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。<br> （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，<br> 以及与其他元素的关系和相互作用。）<br> 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：</p> <ol> <li>float的值不是none。</li> <li>position的值不是static或者relative。</li> <li>display的值是inline-block、table-cell、flex、table-caption或者inline-flex</li> <li>overflow的值不是visible</li> </ol> <p>BFC可以做什么呢？</p> <ol> <li>利用BFC避免外边距折叠</li> <li>BFC包含浮动</li> <li>使用BFC避免文字环绕</li> <li>在多列布局中使用BFC</li> </ol> <h3>margin折叠</h3> <ol> <li>两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。</li> <li>两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。</li> <li>两个外边距一正一负时，折叠结果是两者的相加的和。</li> </ol> <p>产生折叠的必备条件：margin必须是邻接的!</p> <h3>解释下浮动和它的工作原理？清除浮动的技巧</h3> <p>浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。</p> <ol> <li>使用空标签清除浮动。<br> 这种方法是在所有浮动标签后面添加一个空标签定义css <code>clear:both</code>. 弊端就是增加了无意义标签。</li> <li>使用overflow。<br> 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。</li> <li>使用after伪对象清除浮动。<br> 该方法只适用于非IE浏览器。具体写法可参照以下示例。 <pre><code class="css">.clear-fix:after{ content: "."; height: 0; visibility: hidden; clear: both; display: block; } </code></pre> </li> <li>浮动外部元素</li> </ol> <h3>浮动元素引起的问题和解决办法？</h3> <ol> <li>父元素的高度无法被撑开，影响与父元素同级的元素</li> <li>与浮动元素同级的非浮动元素（内联元素）会跟随其后</li> <li>若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构</li> </ol> <h1>JavaScript</h1> <h3>JavaScript中的七种原始类型</h3> <ol> <li>Undefined</li> <li>Null</li> <li>Boolean</li> <li>Number</li> <li>String</li> <li>Object</li> <li>Symbols(ES6)</li> </ol> <h3>创建函数的几种方式</h3> <ol> <li>声明函数</li> </ol> <pre><code class="js">function fn1(){} </code></pre> <ol start="2"> <li>创建匿名函数表达式</li> </ol> <pre><code class="js">var fn1=function (){} // 注意采用这种方法创建的函数为匿名函数,即没有函数name getFunctionName(fn1).length;//0 </code></pre> <ol start="3"> <li>创建具名函数表达式</li> </ol> <pre><code class="js">var fn1=function xxcanghai(){}; // 具名函数表达式的函数名只能在创建函数内部使用 </code></pre> <ol start="4"> <li>Function构造函数</li> </ol> <pre><code class="js">Function("console.log('test')") // 这种方法创建的是匿名函数 </code></pre> <ol start="5"> <li>自执行函数</li> </ol> <pre><code class="js">(function(){ alert(1); })(); (function fn1(){ alert(1); })(); </code></pre> <ol start="6"> <li>其他创建函数的方法<br> eval , setTimeout , setInterval 等非常用方法</li> </ol> <h3>函数作用域链</h3> <h4>测试1,对象内部的函数表达式:</h4> <pre><code class="js">var o={ fn:function (){ console.log(fn); } }; o.fn();// ERROR报错 </code></pre> <h4>测试2,非对象内部的函数表达式:</h4> <pre><code class="js">var fn = function() { console.log(fn); }; fn();// 正确 var fnn = function() { console.log(fnn); }; fnn();// 正确 </code></pre> <h3>兼容IE的获取函数name方法</h3> <pre><code class="js">/** * 获取指定函数的函数名称(用于兼容IE) * @param {Function} fun 任意函数 */ function getFunctionName(fun) { if (fun.name !== undefined) { return fun.name; } var ret = fun.toString(); ret = ret.substr('function '.length); ret = ret.substr(0, ret.indexOf('(')); return ret; } </code></pre> <h3>闭包的原理及应用</h3> <p>使用闭包主要是为了设计私有的方法和变量。<br> 闭包的优点是可以避免全局变量的污染,<br> 缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。<br> 闭包有三个特性:</p> <ol> <li>函数嵌套函数</li> <li>函数内部可以引用外部的参数和变量</li> <li>参数和变量不会被垃圾回收机制回收</li> </ol> <h4>题目一</h4> <pre><code class="js">function fun(n,o) { console.log(o); return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,? var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,? var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,? </code></pre> <p>问:三行a,b,c的输出分别是什么?<br> 答案:</p> <pre><code class="js">a: undefined,0,0,0 b: undefined,0,1,2 c: undefined,0,1,1 </code></pre> <h4>什么情况下会发生闭包,为什么需要闭包,什么场景下需要,闭包闭了谁,怎么释放被闭包的变量内存,闭包的优点是什么,缺点是什么等等。</h4> <h3>手写bind函数</h3> <p>首先会要求解释下这个函数的作用,以及在什么场景下需要用到它,最后手写一个Function.bind函数。只要掌握核心几点就没问题:</p> <ol> <li>Function.bind返回的也是一个函数,所以注定发生了闭包,</li> <li>在返回的这个函数中去调用一个其他的函数,这其实本质上就是函数钩子(HOOK)</li> </ol> <p>关于在JS里的函数钩子,我认为只需要维护以下三点即可:</p> <ol> <li>保持函数的this指向</li> <li>保持函数的所有参数都传递到目标函数</li> <li>保持函数的返回值<br> 有了以上这几点,这个函数就非常好写了,下面是MSDN上的标准Polyfill:</li> </ol> <pre><code class="js">if(!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if(typeof this !== "function") { // closest thing possible to the ECMAScript 5 // internal IsCallable function thrownewTypeError("Function.prototype.bind - what is trying to be bound is not callable"); } var aArgs = Array.prototype.slice.call(arguments,1), fToBind = this, fNOP = function(){},// 用于bind后的函数用于构造函数时 fBound = function() { return fToBind.apply(this instanceof fNOP ? this : oThis || this, aArgs.concat(Array.prototype.slice.call(arguments))); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }; } </code></pre> <h3>定义提升</h3> <ol> <li>题目一：</li> </ol> <pre><code class="js">(function(a){ console.log(a); var a = 10; function a(){}; }(100)); </code></pre> <ol start="2"> <li>题目二：</li> </ol> <pre><code class="js">function Foo() { getName = function() { alert (1); }; return this; } Foo.getName = function() { alert (2); }; Foo.prototype.getName = function() { alert (3); }; var getName = function () { alert(4); }; function getName() { alert (5); } </code></pre> <p>请写出以下输出结果:</p> <pre><code class="js">Foo.getName();2 getName();5 Foo().getName();5 getName(); new Foo.getName();2 new Foo().getName();3 new new Foo().getName();3 </code></pre> <p>答案：</p> <pre><code class="js">Foo.getName();//2 getName();//4 Foo().getName();//1 getName();//1 new Foo.getName();//2 new Foo().getName();//3 new new Foo().getName();//3 </code></pre> <p>第二问：变量提升。<br> 第三问：函数中没有使用<code>var</code>，因此修改了<code>window</code>对象。<br> 第五问：<code>.</code>的优先级高于<code>new</code>的优先级，因此相当于<code>new (Foo.getName)()</code>;<br> 第六问：括号优先级高于new，<code>(new Foo()).getName()</code>;<br> 第七问：<code>new ((new Foo()).getName)()</code>;</p> <h3>new过程：</h3> <ol> <li>创建一个空对象，其prototype是构造函数的prototype，将构造函数的this指向该对象</li> <li>运行构造函数中的内容</li> <li>返回相应值。</li> </ol> <h3>构造函数的返回值</h3> <ol> <li>没有返回值则按照其他语言一样返回实例化对象。</li> <li>若有返回值则检查其返回值是否为引用类型。如果是非引用类型,如基本类型 (string,number,boolean,null,undefined)则与无返回值相同,实际返回其实例化对象。</li> <li>若返回值是引用类型,则实际返回值为这个引用类型。</li> </ol> <h3>null和undefined的区别？</h3> <ul> <li> <code>null</code>是一个表示"无"的对象，转为数值时为0；<code>undefined</code>是一个表示"无"的原始值，转为数值时为NaN。</li> <li>当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。</li> <li>undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是： <ul> <li>变量被声明了，但没有赋值时，就等于undefined。</li> <li>调用函数时，应该提供的参数没有提供，该参数等于undefined。</li> <li>对象没有赋值的属性，该属性的值为undefined。</li> <li>函数没有返回值时，默认返回undefined。</li> </ul> </li> <li>null表示"没有对象"，即该处不应该有值。典型用法是： <ul> <li>作为函数的参数，表示该函数的参数不是对象。</li> <li>作为对象原型链的终点。</li> </ul> </li> </ul> <h3>this</h3> <h3>.call和.apply的区别</h3> <ul> <li>apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的<strong><em>数组</em></strong>。如果上下文是null，则使用全局对象代替。例如：</li> </ul> <pre><code class="js">function.apply(this,[1,2,3]) </code></pre> <ul> <li>call()的第一个参数是上下文，后续是实例传入的<strong><em>参数序列</em></strong>，例如：</li> </ul> <pre><code class="js">function.call(this,1,2,3); </code></pre> <h3>哪些操作会造成内存泄漏？</h3> <p>setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。<br> 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）</p> <h1>DOM操作</h1> <h3>手写事件模型</h3> <ol> <li><p>事件的三个阶段：捕获、目标、冒泡。（低版本IE不支持捕获阶段，IE<=8）</p></li> <li> <p>js中事件监听方法总共有三种：</p> <ul> <li>element.addEventListener(type, listener[, useCapture]); // IE6~8不支持</li> <li>element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持</li> <li>element[’on’ + type] = function(){} // 所有浏览器</li> </ul> </li> <li> <p>e的不同</p> <table> <thead> <tr> <th>�目标</th> <th>IE</th> <th>其他</th> </tr> </thead> <tbody> <tr> <td>�源</td> <td>srcElement</td> <td>target</td> </tr> <tr> <td>当前</td> <td>this</td> <td>currentTarget</td> </tr> </tbody> </table> </li> </ol> <h3>跨浏览器事件处理相关JS代码</h3> <pre><code class="js">var EventUtil = { // 事件处理程序,3个参数：要操作的元素，事件名称，事件处理程序函数 addHandler: function(element, type, handler) { if(element.addEventListener){ // DOM2级事件处理程序,false表示事件冒泡阶段调用事件处理程序 element.addEventListener(type, handler, false); }else if(element.attachEvent){ // IE事件处理程序，记得加“on” element.attachEvent("on" + type, handler); }else { element["on"+type] = handler; } }, removeHandler: function(element, type, handler) { if(element.removeEventListener){ element.removeEventListener(type, handler, false); }else if(element.detachEvent){ element.detachEvent("on"+ type, handler); }else{ element["on"+type] = null; } }, // 获得event对象 getEvent: function(event) { // 主要是为了IE中，当用DOM0级方法添加事件处理程序时， // event对象是作为windows对象的一个属性存在 return event ? event : window.event; }, // 获得事件的目标 getTarget: function(event) { return event.target || event.srcElement; }， // 取消事件的默认行为 preventDefault: function(event) { if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = fasle;// IE } } // 阻止事件冒泡,IE不支持事件捕获，所以只能取消事件冒泡 stopPropagation: function(event) { if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }; </code></pre> <h3>事件代理/委托</h3> <p>优点：</p> <ol> <li>可以大量节省内存占用,减少事件注册</li> <li>可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适</li> </ol> <pre><code class="js">// 事件委托 var list = document.getElementById("myLinks"); EventUtil.addHandler(list, "click", function (event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch(target.id){ case "1": document.title = "I change the document's title"; break; case "2": location.href = "http://www.wrox.com"; break; case "3": alert('xxx'); break; } }); </code></pre> <h3>实现事件模型</h3> <p>即写一个类或是一个模块,有两个函数,一个bind一个trigger,<br> 分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,<br> 然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数。<br> 大致实现思路就是创建一个类或是匿名函数,<br> 在bind和trigger函数外层作用域创建一个字典对象,用于存储注册的事件及响应函数列表,<br> bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,<br> 如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。<br> 不过还有很多细节,比如触发响应函数时的上下文应该是什么,触发响应函数的参数列表应该是什么,<br> 如果要求把调用trigger的参数列表都传到响应函数中还要考虑到吧arguments对象转化为纯数<br> 组才行等等。<br> 还有一些面试官会问到事件如何派发也就是事件广播(dispatchEvent)等等,这里不再展开。</p> <h3>JS原生AJAX实现</h3> <pre><code class="js">// XHR(XMLHttpRequest)1级方法 /* * 新建XHR对象的函数 * 如果只想支持IE7及更高版本,可以只用原生的XHR实现 * 即var xhr = new XMLHttpRequest(); */ function creatXHR() { if(typeof XMLHttpRequest != "undefined"){ //原生XHR对象 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ if(typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for(i=0, len=versions.length; i < len; i++){ ersions[i]; } } try{ new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; }catch(ex){ // 处理错误 } // MSXML库中的ActiveX对象 return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("No XHR object availabel.") } } function submitData() { var xhr = creatXHR();//新建XHR对象 xhr.onreadystatechange = function() { if(xhr.readystate == 4){ // 前一条件代表接收到全部相应数据,而且可以在客户端使用了览器中缓存的版本 // 后一条件表示请求的资源没有修改,可以直接使用浏 if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){ alert(xhr.responseText);//处理接收到的响应 }else{ alert("Request was unsuccessful: " + xhr.status);//请求不成功 } } } // get方法,名称和值都必须使用encodeURIComponent(),true代表异步发送请求 xhr.open("get", "example.txt?name1=value1&name2=value2", true); xhr.send(null); // post方法 xhr.open("post", "postexample.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//模仿表单提交 var form = document.getElementById("user-info"); xhr.send(serialize(form)); } // XMLHttpRequest 2级方法 var xhr = creatXHR(); xhr.onload = function() { if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){ alert(xhr.responseText); }else{ alert("Request was unsuccessful: " + xhr.status);//请求不成功 } }; xhr.open("get", "altevents.php", true); xnr.send(null); </code></pre> <h3>怎样添加、移除、移动、复制、创建和查找节点。</h3> <ol> <li>创建新节点 <ul> <li>createDocumentFragment() //创建一个DOM片段</li> <li>createElement() //创建一个具体的元素</li> <li>createTextNode() //创建一个文本节点</li> </ul> </li> <li>添加、移除、替换、插入 <ul> <li>appendChild()</li> <li>removeChild()</li> <li>replaceChild()</li> <li>insertBefore() //在已有的子节点前插入一个新的子节点</li> </ul> </li> <li>查找 <ul> <li>getElementsByTagName() //通过标签名称</li> <li>getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)</li> <li>getElementById() //通过元素Id，唯一性</li> <li>querySelector()</li> </ul> </li> </ol> <h3> <code>documen.write</code> 和 <code>innerHTML</code>的区别</h3> <ul> <li>document.write只能重绘整个页面</li> <li>innerHTML可以重绘页面的一部分</li> </ul> <h1>浏览器相关</h1> <h3>跨域</h3> <p>正统的跨全域的解决方法大致也就三种:</p> <ol> <li>JSONP</li> <li>Access Control</li> <li>服务器代理</li> </ol> <p>其他</p> <ul> <li>document.domain+iframe</li> <li>window.name</li> <li>window.postMessage</li> </ul> <p>JavaScript跨域总结与解决办法 <br> 跨域-知识 <br> 跨域资源共享的10种方式 <br> 详解js跨域问题</p> <h3>JSONP原理</h3> <p>只要你聊到跨域,就必须聊到JSONP,那么就必须要讲一下JSONP的实现原理,以及你在项目中那个需求使用了JSONP,这里简单讲就是HTML里面所有带src属性的标签都可以跨域,如iframe,img,script等。<br> 所以可以把需要跨域的请求改成用script脚本加载即可,服务器返回执行字符串,但是这个字符串是在window全局作用域下执行的,你需要把他返回到你的代码的作用域内,这里就需要临时创建一个全局的回调函数,并把到传到后台,最后再整合实际要请求的数组,返回给前端,让浏览器直接调用,用回调的形式回到你的原代码流程中。<br> 基本讲到这也就没什么要再讲的了。</p> <h3>将url的查询参数解析成字典对象</h3> <p>使用正则：</p> <pre><code class="js">function getQueryObject(url) { url = url == null ? window.location.href : url; var search = url.substring(url.lastIndexOf("?") + 1); var obj = {}; var reg = /([^?&=]+)=([^?&=]*)/g; search.replace(reg, function(rs,$1,$2){ var name = decodeURIComponent($1); var val = decodeURIComponent($2); val = String(val); obj[name]=val; return rs; }); return obj; } </code></pre> <h3>输出任意格式的时间字符串</h3> <pre><code class="js">function formatDate(date, fmt) { var o = { "Y+": date.getFullYear(), "M+": date.getMonth() + 1, // 月份 "d+": date.getDate(), // 日 "h+": date.getHours(), // 小时 "H+": date.getHours(), // 小时 "m+": date.getMinutes(), // 分 "s+": date.getSeconds(), // 秒 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度 "S": date.getMilliseconds() // 毫秒 }; for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1 || RegExp.$1.length === 4) ? (o[k]) : ("00" + o[k]).substr(-RegExp.$1.length)); } } return fmt; } time = formatDate(time, "YY-MM-dd hh:mm:ss"); </code></pre> <h3>函数节流</h3> <ol> <li>函数节流,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用</li> <li>原理：使用定时器，当触发一个事件时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行。</li> <li>实现一:</li> </ol> <pre><code class="js">function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); }, 100); } </code></pre> <ol start="4"> <li>实现二:</li> </ol> <pre><code class="js">var throttle = function(fn, delay){ var timer = null; return function(){ var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function(){ fn.apply(context, args); }, delay); }; }; </code></pre> <h3>Cookie的优点和弊端</h3> <ul> <li>优点 <ol> <li>通过良好的编程,控制保存在cookie中的session对象的大小。</li> <li>通过加密和安全传输技术(SSL),减少cookie被破解的可能性。</li> <li>只在cookie中存放不敏感数据,即使被盗也不会有重大损失。</li> <li>控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。</li> </ol> </li> <li>缺点 <ol> <li> <code>Cookie</code>数量和长度的限制。<br> 每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。</li> <li>安全性问题。<br> 如果cookie被人拦截了,那人就可以取得所有的session信息。<br> 即使加密也与事无补,因为拦截者并不需要知道cookie的意义,<br> 他只要原样转发cookie就可以达到目的了。</li> <li>有些状态不可能保存在客户端。<br> 例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。<br> 如果我们把这个计数器保存在客户端,那么它起不到任何作用。</li> </ol> </li> </ul> <h3>浏览器本地存储</h3> <p>在较高版本的浏览器中，js提供了sessionStorage和globalStorage。<br> 在HTML5中提供了localStorage来取代globalStorage。<br> html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。</p> <ol> <li>sessionStorage用于本地存储一个会话（session）中的数据，<br> 这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。<br> 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。</li> <li>localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。</li> </ol> <h3>web storage和cookie的区别</h3> <p>webstroage优点：</p> <ol> <li>Web Storage是为了更大容量存储设计的，Cookie的大小是受限的。</li> <li>每次请求一个新的页面Cookie都会被发送过去，无形中浪费了带宽。</li> <li>cookie需要指定作用域，不可以跨域调用。</li> <li>Web Storage拥有setItem,getItem,removeItem,clear等方法，cookie需要前端开发者自己封装setCookie，getCookie。</li> </ol> <p>cookie优点：</p> <ol> <li>cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，<br> 而Web Storage仅仅是为了在本地“存储”数据而生</li> </ol> <h3>cookie 和session 的区别</h3> <ol> <li>cookie数据存放在客户的浏览器上，session数据放在服务器上。</li> <li>cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。</li> <li>session会在一定时间内保存在服务器上。当访问增多，会比较占用服务器的性能。</li> <li>单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。</li> </ol> <h3>js延迟加载的方式有哪些？</h3> <ul> <li>defer和async</li> <li>动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）</li> <li>按需异步载入js</li> </ul> <h1>前端性能优化</h1> <p><strong><em>尽量挑会的说，看yahoo的文章</em></strong></p> <ol> <li>网络性能优化,加快访问速度,浏览器并行加载数量,怎样实现原生JS异步载入,CDN加速的原理,<br> 如何将不同静态资源发布到多个域名服务器上,发布后这些静态字段的url路径改怎么批量改写,<br> 用什么工具进行项目打包,css打包后的相对路径怎么转换为绝对路径,<br> 用什么工具进行项目模块依赖管理,怎么进行cookie优化等等,</li> </ol> <h3>你如何对网站的文件和资源进行优化？</h3> <ul> <li>文件合并</li> <li>文件最小化/文件压缩</li> <li>使用 CDN 托管</li> <li>缓存的使用（多个域名来提供缓存）</li> <li>其他</li> </ul> <h3>请说出三种减少页面加载时间的方法。</h3> <ol> <li>优化图片</li> <li>图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）</li> <li>优化CSS（压缩合并css，如margin-top,margin-left...)</li> <li>网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）</li> <li>标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。<br> 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）</li> <li>减少http请求（合并文件，合并图片）。</li> </ol> <h3>你都使用哪些工具来测试代码的性能？</h3> <p>Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo</p> <h3>什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？</h3> <p>FOUC - Flash Of Unstyled Content 文档样式闪烁</p> <pre><code class="html"><style type="text/css" media="all">@import "../fouc.css";</style> </code></pre> <p>引用CSS文件的@import是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。<br> 解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。</p> <h1>算法</h1> <h3>快速排序</h3> <h3>数组去重</h3> <h1>设计模式</h1> <p>观察者模式,职责链模式,工厂模式</p> <h1>计算机基础</h1> <h3>线程与进程的区别</h3> <ul> <li>一个程序至少有一个进程,一个进程至少有一个线程.</li> <li>线程的划分尺度小于进程，使得多线程程序的并发性高。</li> <li>另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。</li> <li>线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。</li> <li>从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。</li> </ul> <h1>其他</h1> <h3>XML和JSON的区别？</h3> <ol> <li>数据体积方面。<br> JSON相对于XML来讲，数据的体积小，传递的速度更快些。</li> <li>数据交互方面。<br> JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。</li> <li>数据描述方面。<br> JSON对数据的描述性比XML较差。</li> <li>传输速度方面。<br> JSON的速度要远远快于XML。</li> </ol> <h3>常见兼容性问题？</h3> <ul> <li>png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.</li> <li>浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。</li> <li>IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。</li> <li>浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） <pre><code class="css">#box{ float:left; width:10px; margin:0 0 0 100px;} </code></pre> 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——<em>display:inline;将其转化为行内属性。(</em>这个符号只有ie6会识别)</li> <li>Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 <code>-webkit-text-size-adjust: none;</code> 解决.</li> </ul> <h3>如何判断当前脚本运行在浏览器还是node环境中？</h3> <p>判断Global和window对象，如果不为window，当前脚本没有运行在浏览器中</p> <h3>什么叫优雅降级和渐进增强？</h3> <ul> <li>渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</li> <li>优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</li> </ul> <h1>正在学的新知识</h1> <h3>webpack</h3> <h3>react</h3> <h3>node.js</h3> </article> </div> </div> </div>  <div id="SOHUCS" sid="1181192115149918208"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端面试题总结)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835302949362954240.htm" title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a> <span class="text-muted">黑金IT</span> <a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a> <span class="text-muted">小于负无穷</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835291483406692352.htm" title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a> <span class="text-muted">qq_35430208</span> <a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a> <div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> <span class="text-muted">rabbit_it</span> <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> <span class="text-muted">chouchengyin2080</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> <span class="text-muted">qcidyu</span> <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/32.htm" title="对于规范和实现，你会混淆吗？" target="_blank">对于规范和实现，你会混淆吗？</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div> </li> <li><a href="/article/159.htm" title="android 网络" target="_blank">android 网络</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr</div> </li> <li><a href="/article/286.htm" title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>       1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div> </li> <li><a href="/article/413.htm" title="随机数的产生" target="_blank">随机数的产生</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a> <div>c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<</div> </li> <li><a href="/article/540.htm" title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。创建引用脚本。代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs</div> </li> <li><a href="/article/667.htm" title="银行各系统功能简介" target="_blank">银行各系统功能简介</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>银行各系统功能简介　业务系统核心业务系统业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等清分清算系统以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程国际结算系</div> </li> <li><a href="/article/794.htm" title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a> <div>    最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p</div> </li> <li><a href="/article/921.htm" title="php 数组" target="_blank">php 数组</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a> <div>1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,</div> </li> <li><a href="/article/1048.htm" title="安装python2.7" target="_blank">安装python2.7</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2</div> </li> <li><a href="/article/1175.htm" title="java异常的处理探讨" target="_blank">java异常的处理探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a> <div>//java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常   </div> </li> <li><a href="/article/1302.htm" title="getElementsByName实例" target="_blank">getElementsByName实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x</div> </li> <li><a href="/article/1429.htm" title="探索JUnit4扩展：Runner" target="_blank">探索JUnit4扩展：Runner</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div>        参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20</div> </li> <li><a href="/article/1556.htm" title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2</div> </li> <li><a href="/article/1683.htm" title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div> </li> <li><a href="/article/1810.htm" title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a> <span class="text-muted">ronin47</span> <div>nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div> </li> <li><a href="/article/1937.htm" title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>方法一：常用方法   关闭XML验证工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。方法二：（个人推荐）添加内容如下 <?xml version=</div> </li> <li><a href="/article/2064.htm" title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline { </div> </li> <li><a href="/article/2191.htm" title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码数据库名 > 文件备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div> </li> <li><a href="/article/2318.htm" title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a> <div>    之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n</div> </li> <li><a href="/article/2445.htm" title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a> <div>在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g</div> </li> <li><a href="/article/2572.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>  判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得</div> </li> <li><a href="/article/2699.htm" title="Android学习之路" target="_blank">Android学习之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a> <div>转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。下面说说我学习Android的感受，我学Android首先是看MARS的视</div> </li> <li><a href="/article/2826.htm" title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式 </div> </li> <li><a href="/article/2953.htm" title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{ </div> </li> <li><a href="/article/3080.htm" title="自动补全" target="_blank">自动补全</a> <span class="text-muted">huyana_town</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div> </li> <li><a href="/article/3207.htm" title="jquery在线预览PDF文件，打开PDF文件" target="_blank">jquery在线预览PDF文件，打开PDF文件</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div> </li> <li><a href="/article/3334.htm" title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a> <span class="text-muted">lovelease</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a> <div>  使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div> </li> <li><a href="/article/3461.htm" title="利用按位取反（~）从复合枚举值里清除枚举值" target="_blank">利用按位取反（~）从复合枚举值里清除枚举值</a> <span class="text-muted">草料场</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果，如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果， </div> </li> <li><a href="/article/3588.htm" title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu</div> </li> <li><a href="/article/3715.htm" title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a> <span class="text-muted">wangzhezichuan</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>/** * <p>方法描述:sql语句查询返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

前端面试题总结

HTML

HTML5标签

媒体查询head部分写法

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

你知道多少种Doctype文档类型？

HTML与XHTML，二者有什么区别

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

iframe的优缺点？