编写高质量代码笔记

最近老大给我们买来一些技术方面的书籍，其实很少搬着一本书好好的完整的看完过，每每看电子档的，也是打游击式的看看这章，瞅瞅那章，在那5本书中挑了一本比较单薄的《编写高质量代码web前端开发修炼之道》，看完觉得不错，它从一个整体架构上来说明如何编写高质量代码，而细处也着重说明一些比较重要的技术点，给人一种从高处俯瞰web开发、很完整的感觉，在这感谢老大，谢谢他让我们不停的进步着。下面是我看书过程中的笔记。

第一章：从网站重构说起

没什么好说的，从一个糟糕的老网页实例说明需要将web的结构，样式和行为分离开来，既html文件，css文件，js文件。

总结：Html标签只负责承载内容，样式交给css，行为交给Javascript。做到“精简，重用，有序”。

【相对我以前做的项目，我经常会把一些click事件,mouseover事件直接写进html标签中，其实更好的做法应该是放到js中去，直接Document.getelementbyid("").onclick(){},或者用jquery的click事件关联】

第二章：团队合作

欲精一行，必先通十行

 “经常听到做前端开发的朋友抱怨要学的东西太多，东学一点，西学一点，什么都会，但是都不精，于是有人认为‘通十行不如精一行’，而在前端领域，这句确行不通，对于前端来说，你不通十行，就无法精一行。” 看到作者的这句话，我总算有点成就感。O(∩_∩)O~

这章主要说明前端需要了解的语言，html， css要精通、及其重要，js,及架构div+css，RIA富媒体应用，jquery,YUI,ps,AI设计等等

团队之间的开发要注意：

1：增加代码可读性----注释

2：重用性---公共组件和私有组件的维护

3：冗余和精简的矛盾---选择集中还是选择分散   （合理的前端架构中css和js都会提取公共组件，如何组织需要权衡，完美的解决方案不存在，只能在冗余和精简中尽量找到最佳平衡点）

4：前期的构思很重要。

5：制定规范

6：团队合作最大难度不是技术，而是人

第三章：高质量的Html

总算来了点实际的用得着的技术，呵呵

1）标签的语义：大家都懂的。

2）标签布局

table布局网页的缺点：1：代码量大，结构混乱。2：标签语义不明确，对搜索引擎不友好

css布局（div+css）：弱化了标签的布局能力，将布局完全放到样式中去控制，而标签重新恢复了原来语义的作用。http://yaya.qqq23.com 它与table布局相比具有代码量少，结构精简，语义清晰等优点。

总结：在布局的过程中，Html结构才是重点，css是用来修饰结构的，正确的做法是：先确定html,确定语义的标签，再来选用合适的css.

3）如何确定你的标签是否语义良好：

在做完一个页面后，去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

"css裸体日"这个日子的目的就是为了提醒大家选用合适的HTML标签的重要性。------------显然我是第一次听说哈。

4）标题和内容的实例

这个实例用的是Html中无语义的标签-----div分隔 和span范围 来架构的， 而正确的做法一般使用h2,p,a来架构

需要特别说明的是：当页面内标签无法满足设计需要时，才会适当添加div和span等无语义的标签来辅助实现。

5）表单和表格

表单

一般需要直接submit的内容需要放置在表单内，为了有清晰的语义，一般表单域要用fieldset标签包起来，并用legend标签说明表单的用途，若不想要它自带的默认样式，可将border:none;不想显示设置 display:none,以此来兼顾语义和设计两方面的需求。

每个input标签对应的说明文本都需要使用label标签，并通过为input设置id属性，在label中设置“for=someId”来将对应的label和input关联起来。

表格

虽然在css布局中table不推荐用来布局，但它在二维数据展示方面确实最好的选择。

一般用table，我常使用它的

标签，在有需要的时候还可以用他的其他标签，表格标题用caption,表头用thead包围，主体部分tbody包围，尾部tfoot包围 总结：语义化标签应注意的一些问题 1：尽可能少地使用无语义标签div和span 2：语义不明显，既可用P也可用div的地方，建议尽量用p,因为有上下间距，可读性好。（还是视情况而定） 3：不要使用纯样式标签，如：b,font,u等 ，直接写进css设置。   第四章:高质量的css 1)怪异模式和标准模式 在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。 他们两者之间的差异比较典型的表现在IE对盒模型的解析：在标准模式中，网页元素的宽度=padding+border+width;而在怪异模式中，http://koukou.wan128.cn width本身就包括了padding和border。 在怪异模式中：设定width,然后margin:0 auto;是无法居中的。标准模式中可以正常工作。 于是我们尽量避免怪异模式，而选用标准模式，这样就出现了DTD(文档类型定义Document Type Definition)； DTD(文档类型定义Document Type Definition)：是一种保证html文档格式正确的有效方法，一个DTD文档包含元素的定义规则、元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。 DTD声明：如果漏写DTD声明，FF仍然会按照标准模式来解析，但在IE中（6.7.8）就会触发怪异模式，现在一般可以直接手动设置为标准模式。   2)如何组织css 笔者按照职能分为三大类：base、common、page 这三者不是并列结构，而是层叠结构。 1：base层：最底层，基本层，一般放置粒度最小的通用类--原子类，这一层会被所有页面引用，力求精简，通用，有高度可移植性。 　　推荐代码：.fl{float:left;} .fr{float:right} .mt15{margin-top:15;} .mb15{margin-bottom:15;} .w50{width:50px;}  .cb{clear:both;} .cr{clear:right;} 　　　　　　　.pr20{padding-right:20;} 　　从上面的代码可以看出来，base层结构粒度非常小，非常实用于组合类的结构。 base层可分为两大部分:css reset 和 通用原子类 css reset：就是重定义标签的样式，覆盖掉浏览器提供的默认样式；如*{margin:0;padding:0;}，因为浏览器默认的边距是最影响css布局的。最好不要使用*,而是罗列出要覆盖的标签元素：如：ol li ul h1 dl dt .... 将冲突降至最低。 从笔者的经验来看，base层的类虽然粒度小，但它非常有用,设置大量这样的类有利于减少page层的代码量，也为css的模块化提供了帮助。 2：common层：中间层，高度重用的模块，视为组件（类似于网站内一个一个的同样式的板块）。  模块化层面：将页面内的元素拆分成一小块一小块功能和样式相对独立的小模块。类比于 房子（网站），不同的门窗、门窗有不同的小元件（common），这一层最好由一个人负责统一管理。  common层是网站级的,不同的网站有不同的common层，而同一个网站只有一个common层。 3：page层：页面级的样式，最高层。对重用性没要求.(就好像房间里的画，不同房间会挂不同的画。)   3）如何划分css模块 一句话概括:封装、多用组合少用继承的原则。 将相似部分提取出来，再进一步拆分成更小的模块。 原则： 1:模块和模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块. 2:模块应在保证数量尽可能少的原则下,做到尽可能简单,以提供重用性.   4)css命名 1：使用英语 2：骆驼命名法（从第二个单词开始首字母大写，如dropMenu,subNavMenu） 3：划线命名法（- 或_ 如drop-menu ,sub_nav_menu） 使用骆驼命名法和划线命名法可以清楚的将单词区分开来，提高可读性。推荐这两种方式组合使用。一般骆驼命名法用于区别不同单词，划线用于表明从属关系。 4：子选择符：滥用子选择符容易留下冲突隐患，为了降低风险，不推荐轻易使用子选择符。 总结:base层和common层是公共的，一般由一个人负责，不会出现冲突，page层多人合作使用，容易冲突，在命名css时，如果模块多次反复出现，应该将它归为common层，不用考虑冲突问题，出现次数少，则归为page层。 5：page层多人合作很容易引起命名冲突，为解决这一问题，一般每个人会分配一个标识符，然后给命名加上该前缀的方法来解决。   5)多用组合，少用继承 继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性，子类继承父类，根据需求添加新的方法和属性，覆盖掉与父类有变化的方法和属性。 缺点:使用继承的话,任何一点小的变化也需要重新定义一个类,很容易引起类的爆炸式增长,产生一大堆有着细微不同的子类. 组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分,将容易变化的部分拆分出去,每一种可能的变化设计成一个个单独的类,类之间没有继承关系,遵循了面向对象设计的"单一职责"原则.这些容易变化的类的实例赋值给主体类作为一个属性,实现了类的组合. 用组合的方式,可大大减少类的数量. 注:margin是一个有点特殊的样式，相邻的margin-left;margin-right不会重合，但是相邻的margin-top;margin-bottom会产生重合，所以相邻的标签不要混合使用，统一使用margin-top或margin-bottom。   6)低权重原则 标签权重是 1；class权重是 10；id 权重是100 当有冲突时，会选择权重高的样式，权重一样时，就近原则，最后定义的为最近，css权重应该尽可能的低。   7）css sprite---将网站的多张背景图片合并到一张大图片上。 　　可以解决划过状态时背景图片出现瞬间空白的问题。 　 每次图片加载会发出http请求，一张图片需要一条http请求，http请求数越多，访问服务器的次数越多，那server压力就越大，css sprite亦可以减小服务器的压力 1：只能用于作为背景的图片background-image 2：不能用于对于横向和纵向都平铺的图片。至于原因，自己去测试就知道了。   8）haslayout----是IE浏览器一个专有的属性，用于css的解析引擎。有时候网页会在ff下面运行正常，但到IE下就不正常，往往是因为hasLayout没有触发的原因。 可以通过设置width,height,position:relative来触发，但一个更好的解决办法是zoom:1可以触发hasLayout   9)块级元素和行内元素(可通过修改display属性来切换块级和行内) 块级元素：可设置宽高，margin padding 正常使用，独占一行 行内元素：不能设置宽高，margin padding 在水平方向会产生边距效果，竖直方向不会产生边距效果，在同一行内。 display:inline-block 行内块级元素；可设置宽高，可设置margin;padding;却不独占一行  （IE6/7不支持，可通过触发haslayout来解决）   10）relative,absolute和float 1：只有设置了position属性时，left top right bottom z-index属性才会激活，否则设置了也无效。 2：position设置为relative或absolute都可以改变元素在文档流中的位置。网页虽然看起来是二维结构，也是有z轴的，默认所以元素都在z-index:0这一层----这就是文档流。 3：不设置position，那么网站的默认position：static . 4：position设置为relative或absolute都会让元素“浮”起来，也就是z-index>0时，它会改变正常情况下的文档流。      position:relative---会保留自己在z-index:0层的占位，属于占位上浮。      position:absolute---会完全脱离文档流，不保留占位，这样就通常会覆盖掉下面的元素。      他们的left,bottom,top.right四个值是相对于 自己最近设置了position的祖先元素，若都没有设置，则想对于body元素 5：float:左右浮动，它也能改变文档流，但是不会上浮，只会在z-index:0层改变正常的文档流排列，影响周围的元素。   11）水平居中的几种方式 1：文字、图片等行内元素的水平居中------text-align:center   这个属性能够解决在文字，图片，行内元素的水平居中。 2：确定宽度的块级元素水平居中-----margin:0 auto; 3：不确定宽度的会计元素水平居中 　　A:table 标签实现----table本身不是块级元素，不设定宽度的话，它的宽度由内部元素的宽度“撑起”，仅需设置margin:0 auto就可以居中（例：分页 ） 　　　缺点：增加了无语义标签，加深了标签的嵌套层数。 　　B:将要居中的标签转换为行内元素，然后在父标签设置text-align:center;  缺点：因为转换成了行内元素，可能会带来一些限制。       C:通过给父标签设置float,position:relative;left:50%,子标签设置position:relative;left:-50%;来实现 12）竖直居中 1：父标签不确定，子标签为文本，图片，块级元素的竖直居中------通过给父标签设置相同的上下边距来实现居中padding 2：父标签高度确定，单行文本竖直居中----------line-heiht来实现 3：父标签高度确定，多行文本，图片，块级元素竖直居中 　　A:vertical-align属性：当父元素为td或th是，改属性才会生效，后来查证，对inline-block等内联元素都有效。对于块级元素可设置display:table-cell来激活这个属性使之有效。 　　B:通过给父子两层元素分别设置top:50%，top:-50%来实现，也需要设置position：relative；position：absolute;   13)网格布局 一个页面经常会分为好几块，每次呈现给用户的最好先是主体内容，这样视觉效果会好些，感觉网速很快。 在设计的过程中，需要把主体内容的html标签要保证在其他内容之前加载，（就是将主体内容的html标签顺序靠前）   14）z-index 该属性在设置position后激发，z-index越大， 元素位置越靠上。也可设置为负数，这样，元素会在body之下。   转载于:https://my.oschina.net/u/1387270/blog/175443 你可能感兴趣的:(前端,javascript) Long类型前后端数据不一致 igotyback 前端 响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问 DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业 ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链 加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景 ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端 Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线 node.js学习 小猿L node.jsnode.js学习vim node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行 springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言 这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一 JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript 在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数 博客网站制作教程 2401_85194651 javamaven 首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言 在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记 最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl 补充元象二面 Redstone Monstrosity 前端面试 1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重 微信小程序开发注意事项 jun778895 微信小程序小程序 微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂 切换淘宝最新npm镜像源是 hai40587 npm前端node.js 切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库 字节二面 Redstone Monstrosity 前端面试 1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文 前端代码上传文件 余生逆风飞翔 前端javascript开发语言 点击上传文件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 uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app 第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。 高性能javascript--算法和流程控制 海淀萌狗 -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i 360前端星计划-动画可以这么玩 马小蜗 动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能 Vue + Express实现一个表单提交 九旬大爷的梦 最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript 我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh Nginx从入门到实践(三) 听你讲故事啊 动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构 Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin 前端知识点 ZhangTao_zata 前端javascriptcss 下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师 1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript 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 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享 数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava 最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试 边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言 前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi sql统计相同项个数并按名次显示 朱辉辉33 javaoracle 现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20 Android+Jquery Mobile学习系列-目录 白糖_ JQuery Mobile 最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。   从现在起，往后一段时间，我打算 如何给线程池命名 daysinsun 线程池         在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下：     public class Named IE 中"HTML Parsing Error:Unable to modify the parent container element before the 周凡杨 html解析errorreadyState   错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"     现象： 同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。 java上传 g21121 java 我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact SpringMVC配置学习 510888780 springmvc spring MVC配置详解 现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi spring mvc-jfreeChart 柱图(1) 布衣凌宇 jfreechart 第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 第二步：配置web.xml; web.xml代码如下 <servlet>     <servlet-name>jfreechart</servlet-nam 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3 PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P java 线程池使用 Runnable&Callable&Future antlove javathreadRunnablecallablefuture 1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool();   2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin XML语法元素结构的总结 百合不是茶 xml树结构 1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language 改变eclipse编码格式 bijian1013 eclipse编码格式 1.改变整个工作空间的编码格式         改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。         Eclipse->window->preferences->General->workspace- javascript中return的设计缺陷 bijian1013 JavaScriptAngularJS 代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l 【持久化框架MyBatis3八】Spring集成MyBatis3 bit1129 Mybatis3 pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置   <?xml version="1.0" encoding="UTF-8"?> & java web项目启动时自动加载自定义properties文件 bitray javaWeb监听器相对路径 创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des 用nginx区分文件大小做出不同响应 ronin47 昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布 java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大 bylijinnan java package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1 翟鸿燊老师语录 ccii 翟鸿燊 一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格     就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。     还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道 [光速与宇宙]进行光速飞行的一些问题 comsci 问题      在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家     仅仅是猜想。。。未经官方证实      1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉 oracle undo解析 cwqcwqmax9 oracle oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 Undo是干嘛用的？         &nb java中各种集合的详细介绍 dashuaifu java集合 一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n 卸载windows服务的方法 dcj3sjt126com windowsservice 卸载Windows服务的方法 在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他 Warning: The Copy Bundle Resources build phase contains this target's Info.plist dcj3sjt126com iosxcode     http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle 2014之C++学习笔记（一） Etwo C++EtwoEtwoiterator迭代器         已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型 js跨越获取数据问题记录 haifengwuch jsonpjsonAjax js的跨越问题，普通的ajax无法获取服务器返回的值。   第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca 蓝色jQuery导航条 ini JavaScripthtmljqueryWebhtml5 效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义< linux部署jdk,tomcat,mysql kerryg jdktomcatlinuxmysql 1、安装java环境jdk:     一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。    1.1）、卸载：      （rpm -qa :查询已经安装哪些软件包；        rmp -q 软件包：查询指定包是否已 DOMContentLoaded VS onload VS onreadystatechange mutongwu jqueryjs 1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra sql批量插入数据 qifeifei 批量插入 hi，   自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。    WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a log4j打印日志文件 如何实现相对路径到 项目工程下 thinkfreer Weblog4j应用服务器日志 最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 需求： 用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名 linux下mysql-5.6.23.tar.gz安装与配置 笑我痴狂 mysqllinuxunix 1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1 按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.