萌妹撒
萌妹撒

js基础（6）

27、移动端响应式布局开发

响应式布局开发

1、什么是响应式布局开发？
把我们开发完成的产品，能够让其适配不同的设备屏幕：PC、PAD、PHONE
2、H5
现在的H5已经成为移动端开发（响应式布局）的代名词
目前我们开发一款app需要h5的介入，在native-app（内置app）中嵌入H5页面（web-app），我们这种模式称之为Hybrid混合App开发

1、其实就是个HTML页面， 需要基于浏览器运行（PC或者移动端浏览器再或者V8内核的工具也可以），如果想要操作手机内部的软件或者硬件，需要浏览器的支持；
2、相比于native-app来说性能不好
3、所有的请求访问都必须基于联网的状态，虽然h5中支持manifest离线缓存，但是这个技术不怎么好用；
native-app不需要联网，是因为所有的代码文件都在手机上，一些需要联网访问的，native-app都可以做离线缓存（如缓存视频）；H5页面部署到了自己的服务器上，源文件都在服务器上，用户想要看页面，必须从服务器上重新拉取才可以；
4、好处：更新比较及时：H5只需要把服务器上的文件更新，用户每次访问看到的都是最新版本的；
H5是否能操作手机内部的软件或者硬件，取决于浏览器是否支持，如果浏览器支持，H5页面则可以调用，反之则不可以；例如：H5中想要调取摄像头，
[图片上传失败...(image-ecaa5e-1541658084393)]

常见的项目类型

1、PC端和移动端公用一套项目（同一个地址），我们也要保持良好得展示性，如：猎豹浏览器、华为官网等简单得展示网站
2、PC端和移动端用的是不同的项目，如：京东、淘宝、淘宝等
PC端固定布局即可
移动端响应式开发
1、放在浏览器中运行
2、放在第三方平台中运行（微信）
3、放在自己公司的native-app中运行；

手机常用尺寸
iphone3-5宽度：320px
iphone4：320480
iphone5：320568
iphone6：375667
iphone6plus：414736

做H5页面开发之前，需要先从设计师手里索要UI设计图，设计图提供了专门做移动端项目的设计稿尺寸
640960
6401136
750*1334设备像素密度比

如何做响应式布局开发？

只要当前页面需要在移动端访问，必然要加下面的代码
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
不加VP,不管手机设备有多宽,我们HTML页面的宽度都是980(如果在320的手机上观看HTML页面,为了保证把页面呈现完全,需要HTML缩小大概三倍左右,所有内容都变小了),为了不让页面缩放,我们需要让HTML的宽度和手机的宽度保持一致
width=device-width：让HTNML的宽度和设备的宽度保持一致
没有加VP：全体缩小了，需要手动缩放着看

//=>JS中动态设置vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);

REM响应式布局

和px像素一样，它是一个CSS样式单位
PX：固定单位
REM：相对单位（相对于页面根元素HTML字体大小设定的单位）
真实项目中如何使用REM实现响应式布局
1、先给文档（html）设置一个font-size=100px；
2、然后严格按照设计稿中提供的尺寸进行样式编写（不管是宽高、还是MARGIN、还是字体）;
3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的fontSize的值
设计稿宽：640 时 fontSize=100px 。 盒子宽度 ：600px 我们则写6rem
手机宽：320 (320/640)100->只需要修改fontSize=50px就可以
手机宽：375 (375/640)100->修改fontSize=58.59375px就行了
根据当前屏幕的宽度和设计稿的宽度的比例，动态计算一下当前宽度下的fontSize的值应该是多少，fontSize改变，之前设定的所有rem单位的值会自动跟着放大或缩小；
公式：当前设备的宽度/设计稿宽度*100='当前手机下REM和PX的换算比例'

REM等比缩放响应式布局：目前在市场上，如果单独做移动端项目（项目只在移动端访问，PC端有单独的项目），我们选择响应式适配的最佳方案就是REM布局（当然细节处理可能会用到flex或者@media）

//如果当前屏幕的宽度已经大于设计稿的宽度，为了保证图片的良好展示，我们一般都不让其继续变大了，以设计稿的宽度为最后宽度，剩余的部分留空白显示；（如京东）
动态计算fontSize值的自执行函数（放在JS中即可）

~function(w){//w设计稿宽度
    var winW=document.documentElement.clientWidth//当前窗口宽
//如果当前屏幕的宽度已经大于设计稿的宽度，为了保证图片的良好展示，我们一般都不让其继续变大了，以设计稿的宽度为最后宽度，剩余的部分留空白显示；（如京东）
    if(winW>=w){
        document.documentElement.style.fontSize='100px';
        return;
    }
document.documentElement.style.fontSize=winW/w*100+"px";
}(传入的设计稿宽)；

28、移动端常用类库

Zepto

一个小型的，专门针对于移动端开发的JS类库，它的开发原理以及使用方式都非常接近于jq，所以很多人也把它称之为小型JQ
1、zepto不支持IE6-8,有一些方法连IE高版本都不支持，是专门为移动端准备的；
2、zepto只实现了部分JQ中常用的方法，有一些方法在zepto中无法使用，例如：JQ支持animate、hide、show、slideDown、slideUp……这些动画，但是zepto中只有animate，其他快捷动画不支持
zepto类库的体积比jQuery小很多
3、zepto中提供了移动端专用的事件操作方法，而jquery中没有；
tap(点击)
singleTap(单击)
doubleTap(双击)
longTap(长按)
swipe(滑动)
swipeUp(上滑)
swipeDown(下滑)
swipeLeft(左滑)
swipeRight(右滑)...
pinchIn/Out:放大缩小

$('selector').tap(function(e){
    实现点击的时候要做什么事
    e：手指事件对象 this：当前操作的元素
})

4、zepto中的animate支持transform变形，jQuery中是不支持的

$('selector').stop().animate({
    top:100,
    rotate:'360deg'
},1000,'linear',function(){
})

Swiper

swiper其实是一个UI组件，目的就是解决移动
如果我们采用的滑动效果（effect）是3D的（coverflow），最好不要采用无缝衔接（loop：true），这块的处理是有bug的；
zepto中常用的属性：

initialSlide:设定初始化时slide的索引。
direction:可设置滑动的方向：水平(horizontal)或垂直(vertical)。
speed:滑动一次所需要的时间
autoplay:自动轮播的时间间隔，不设置不会自动轮播
loop:设置为true 则开启无缝滚动模式
autoplayDisableOnInteraction:用户操作swiper之后，是否禁止自动轮播。默认为true：停止。
effect:切换效果。"slide" 位移切换(默认)
                "fade"  淡入
                "cube"  方块
                "coverflow"3d流
                "flip"  3d翻转
onlyExternal:值为true时，slide无法拖动
pagination:是否有分页器（如果需要，则需要给个标签类名），
    演示pagination:

    pagination:'.swiper-pagination'
paginationType:分页器样式类型:'bullets'    圆点（默认）
                            'fraction'  分式 
                            'progress'  进度条
                            'custom'    自定义
paginationClickable:设置为true时，点击分页器的指示点分页器会控制Swiper切换
prevButton:'.swiper-button-prev'(上一张图片的按钮)
nextButton:'.swiper-button-next'(下一个图片的按钮)
lazyLoading:设为true开启图片延迟加载,要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
lazyLoadingInPrevNext:设为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。

29、SEO与SEM优化

SEO和SEM是两种常规的推广手段
SEO：互联网推广
SEM：百度竞价
搜索引擎：百度、谷歌、360、搜狗...

当我们在百度搜索框中输入一个关键词，下面会呈现出很多网站，有的靠前有的靠后。如果想要靠前，就需要SE0优化技巧

1、各大网站都有一个自己的爬虫，每天都会去各个网站中检索内容，把一些内容或者关键词收录到自己的搜索引擎库中

2、当用户在搜索框中输入一个关键词，搜索引擎会通过关键词到自己的词库中进行检索，把所有匹配到内容对应的网站给检索出来，并且呈现给用户（谁的关键词被检索的次数多或者其他原因，决定排名的前后）

通过 site:网站的域名 可以查看出当前网站被搜索引擎收录的内容，我们也可以下载一些专门做SEO优化的工具 爱站工具…

对于前端开发而言，哪些事情有助于SEO优化

1、给网站设置META标签以及设置title（设置的内容可以找专业的优化人员要）

   1、title不可以乱写，这个是一个优化技巧


  2、keywords这个META标签是用来设置网站关键词的

   3、description这个META标签是设置网站的描述

2、注意代码上的优化，合理使用HTML标签，以及注意代码的SEO优化技巧

1、标签语义化
2、一个页面中的H1标签只能使用一次
3、img标签都要设置alt属性，在这个属性中声明当前图片的信息（蜘蛛不能收录图片，但是可以用抓取到图片alt属性的值）
4、HTML的层级不要太深，太深的层级，蜘蛛可能不会抓取和收录
5、把需要推广的关键词尽可能的在页面中曝光（最好写在H2-6标签中）

3、尽量不要使用前后端分离

在前后端分离的项目中，页面中的数据绑定交给后台处理（由服务器渲染页面），如果交给前端处理（由客户端渲染页面），渲染出来的数据，搜索爬虫是抓取不到的（在网站源码中无法看见通过客户端渲染数据的代码）

所有通过JS字符串拼接（ES6模版字符串、模版引擎..）绑定的数据，在网站源代码中都看不见，也就是无法收录

常用的meta标签




    
    viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width
    
    Title

[不管是PC还是移动端都经常使用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-06-29/457.html

[移动端常用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-02/480.html

30、浏览器访问优化

1、减少HTTP请求

每发送一次请求都要完成一次HTTP事务，会消耗时间，也可能会导致HTTP链接通道的堵塞，为了提高页面加载速度，我们要减少HTTP请求次数和请求资源的大小(请求内容越大，消耗时间越长)

  • 1）合并CSS、合并JS、CSS Sprites：将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，合并成的图片大小应该是图片本身的大小。通过background-position来控制需要显示的图片位置。如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

  • 2）合理设置HTTP缓存：原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

  1、Expires/Cache-Control Header是控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只是Cache-Control比Expires可以控制的多一些， 而且Cache-Control会重写Expires的规则。
2、Last-Modified/If-Modified-Since和ETag/If-None-Match是浏览器发送请求到服务器后判断文件是否 已经修改过，如果没有修改过就只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器。
  • 3）启用Gzip压缩
    Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。
  • 客户端可以通过HTTP请求头中的Accept-Encoding属性来标识对压缩的支持（Accept-Encoding：gzip,deflate），服务器看到请求中有这个头，就会使用客户端列出的一种方法来压缩响应。这样可以显著减少文件传输的大小。传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。一般Gzip的压缩率为85%左右；
  • 4）图片延迟加载与数据懒加载：这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片和数据而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片和数据。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片和数据请求就都节省了。
  • 5）使用字体图标代替页面中的位图，可以减少HTTP请求次数（类似雪碧图）
  • 6）配置ETags： Etag是服务器告诉浏览器缓存，缓存里的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上下载

2、使用浏览器缓存（使用loaclstorage）

  • 对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，将这些文件通过loaclstroge缓存在浏览器中，可以极好的改善性能。

3、使用CDN（内容发布网络）

  • CDN是一组分布在多个不同地理位置的web服务器，如果web服务器离服务器更近，则一个HTTP请求的响应时间将缩短。每个服务器都拥有所有网站的文件副本，用户访问网站时，就可以从离用户最近的服务器发送所需的文件给客户端。

4、将CSS放在顶部head中，JS放在body尾部

  • 由于CSS放在document底部时，在IE下，为了防止重画页面元素，会禁止HTML正常加载顺序，会等到CSS加载完之后再加载HTML，那么在这段期间用户只能看到空白页面。火狐浏览器不会禁止HTML正常加载，但是意味着css下载后，有些元素样式要重画，这样就会导致页面闪烁的问题；
  • 将脚本放在顶部或页面中，浏览器会对script标签内的内容进行解析，从而阻塞样式的渲染。除此之外，HTTP1.1规范建议浏览器从每个主机并行的下载两个组件，在高版本的IE和chrome、Firefox等浏览器则支持并行下载六个组件。但script会阻塞并行下载。因此我们应该将脚本放在底部

5、避免CSS表达式

  • CSS表达式具备求值计算能力，然而每次页面发生重绘时，CSS表达式会影响页面的加载时间。

6、减少cookie传输

  • 一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

7、Javascript代码优化

  • 1）DOM存在映射机制（浏览器默认构建的机制），操作DOM的时候获取DOM元素集合为一个类数组集合，在JS中，document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。 因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
  • 2）DOM操作还需要考虑浏览器的回流和重绘，当元素的样式发生改变(不修改元素位置的样式)，浏览器会把当前元素重新的进行渲染(DOM性能消耗低)。当元素的位置发生改变，浏览器会把整个页面的DOM结构进行重新计算，计算出所有元素的最新位置，然后再渲染(DOM性能消耗非常大)。这些都是需要消耗资源的；
  • 3）给DOM绑定事件的时候避免一个个绑定，而是采用性能更高的事件委托来实现；
  • 4）避免使用eval和Function函数，每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
  • 5)使用异步编程：同步编程可能会有阻塞作用，如AJAX请求，我们一般都要使用异步编程，最好事基于promise设计模式进行管理
  • 6）JS中尽量少使用闭包：闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能，还会导致内存泄露；

8、保持Js和CSS外部引用

  • 使用外部文件通常会加快页面速度，因为这样js,css文件可以被浏览器缓存。如果js,css采用内嵌式，每次请求页面的时候都会重新加载。这样虽然减少了http请求数量，但是增加了html的大小。从另一方面来说，如果js,css在外部文件中并且被浏览器缓存，那么后续请求不会增加html文档大小，也不会增加http请求数量(外部文件从浏览器缓存中取，不经过http请求了)。
    内联可以降低http请求，使用外部文件缓存也有好处。通常的处理是首页内联js,css，当也加载完成之后再动态下载外部文件，这样后续页面就可以从浏览器缓存中获取这些文件。

9、压缩以及剔除重复的CSS和JS

10、减少DNS查询

  • DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。

11、避免重定向

  • 重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。最常见的Redirect就是301和302两种。在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

12、使Ajax可缓存

  • 针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。

13、客户端与服务器端通信时尽量采用JSON格式数据进行传输

  • 优势：
  • 1）JSON数据能够清晰明了的展示出数据解构，而且也方便我们获取和操作
  • 2）相对于XML，JSON数据更加轻量级
  • 3）客户端和服务器端都支持JSON数据的处理，使用起来方便；
    并不是所有数据都可以用JSON，如：文件流的传输或者文档的传输，用JSON就不合适了；

14、CSS选择器优化

1）尽量减少标签选择器的使用
2）尽可能少使用ID选择器，多使用样式雷选择器（通用性强）
3）减少选择器前的前缀

31、前后端的通信方式以及HTTP

前后端需要用的技术

需要用到的技术栈
[前端]
HTML（5）+CSS（3）
JAVAscript

[后端]

java
Node
PHP
C#
C
[数据库]

mySQL
SQL Server
mongodb（和node结合紧密）

[自动化]
git、svn
weboack（基于NODE运行的）
服务器部署工具 iis、apache、nginx

前端和后端是如何通信的

前端：客户端
后端：服务器端
前后端通过HTTP协议进行通信；
所谓的全栈，其实是你可以实现客户端和服务器端程序的编写，而且还可以实现两端之间的通信

经典面试题

当我们在浏览器地址栏中输入一个URL地址，到最后看到页面，中间都经历了哪些事情？
主要分为三个阶段(请求request、响应response、渲染dom render)；

[Request请求阶段]

1、首先根据客户端输入的域名、到DNS服务器上进行反解析（通过域名找到对应服务器的外网IP）
2、通过找到的外网IP，找到对应的服务器
3、通过在地址栏中输入的端口号（没输入是因为不同协议有自己不同的默认端口号）找到服务器上发布的对应的项目；

[Response响应阶段]

4、服务器获取到请求资源文件的地址例如：/stu/index.html,把资源文件中的源代码找到
5、服务器端会把找到的源代码通过HTTP等传输协议返回给客户端（

[浏览器渲染阶段]

6、客户端接收到源代码后，会交给浏览器的内核进行渲染，最后由浏览器绘制出对应的页面

[图片上传失败...(image-5bb40-1541658084393)]

假设我们访问的是www.baidu.com这个地址，按下enter之后，我们可以看到百度首页面：
1）百度页面并没有在我们自己的客户端本地，我们是输入地址后，才请求过来的
2）输入不同域名可以看到不同的页面
3）有的网址是https，有的是http（有的是ftp）
4）需要客户端联网才能完成这些事情

什么是内网IP

内网（局域网：具备相同的DNS和默认网关，并且由相同的路由器下发的IP，限定在一定区域内访问的）
自测：自己开发测试
内测：上传到公司内网测试服务器上，交由公司测试进行BUG追踪
公测：产品正式部署到外网服务器上

什么是外网IP

外网是不管是不是在同一个网段，用户都可以通过外网IP访问到你的服务器（一般我们会在服务器上做处理，禁止直接通过IP访问）

如何把本地文件上传到服务器

通过FTP把自己本地的项目文件上传到服务器执行的目录中(filezilla：ftp上传文件工具)
DNS服务器 域名解析服务器
域名和服务器关联在一起，是通过DNS解析完成的，所谓DNS解析就是在DNS服务器上生成了一条解析记录，标注了子域名和对应的服务器的外网IP地址；

URL/URI/URN

URI：统一资源标识符
URL：统一资源路径地址
URN：统一资源名称
URI=URL+URN 统一资源标识符（统一资源信息）

一个完整的URL包含很多部分：
http://v.qq.com:80/index.html?name=zhufeng&age=7#bbs

传输协议

客户端传递给服务器端的内容和服务器端传递给客户端的内容都是通过HTTP传输协议进行传输的（可以把HTTP理解为快递小哥）
1、客户端不仅可以向服务器发送请求，而且还可以把一些内容传递给服务器
2、服务器端也可以把内容返回给客户端

客户端请求的内容和服务器端响应的内容总称为HTTP报文。这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（Request），服务器返回给客户端叫做响应（Respone），request+response两个阶段统称为HTTP事务（事务：一件完整的事情）

HTTP事务：
1、当客户端向服务器端发送请求，此时客户端和服务器端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的
2、当服务器端接收到请求信息，把内容返回给客户端后，传输通道会自动销毁关闭；

传输协议分类

http：超文本传输协议

  • 客户端和服务器端传输的内容除了文本以外，还可以传输图片、音视频等文件流[二进制编码、BASE64码]，以及传输XML格式的数据等），是目前市场上应用最广泛的传输协议；

https：http ssl

  • 它比http更加安全，因为数据内容的传输通道是经过ssl加密的（它需要在服务器端进行特殊的处理），所以涉及资金类的网站一般都是https协议的

ftp：资源文件传输协议

  • 一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（一般ftp传输的内容会比http这类协议传输的内容多）

HTTP报文

客户端请求的内容和服务器端响应的内容总称为HTTP报文
包括以下部分：
1、起始行

  • 请求起始行
  • 响应起始行

2、首部（头）

  • 请求头：内置请求头、自定义请求头
  • 响应头：内置响应头、自定义响应头
  • 通用头：请求和响应的都有

3、主体

  • 请求主体
  • 响应主体

请求xxx都是客户端设置的信息，服务器端获取这些信息；
响应xxx都是服务器端设置的信息，客户端获取这些信息；

在谷歌浏览器控制台NetWork中选项中，我们可以看见当前客户端和服务器端交互的全部信息；

客户端向服务器端传递数据的3种方式
1、URL问号传参
2、设置请求头
3、设置请求主体

服务器端返回给客户端数据的2种方式
1、设置响应头（例如服务器时间）
2、设置响应主体

域名

设置域名其实就给不好记忆的服务器外网IP设置了一个好记忆的名字
顶级域名（一级域名）：qq.com
二级域名：www.qq.com、v.qq.com、sports.qq.com ...
三级域名：kbs.sports.qq.com

端口号

在服务器上发布项目的时候，我们用端口号来区分不同的项目
一台服务器的端口号范围：0~65535
如果电脑上安装了很多程序，有一些端口号是被占用了
HTTP默认端口号：80
HTTPS默认端口号：443
FTP：默认端口号21
对于上述三个端口号是很重要的，如果被其他程序占用，我们则不能使用了；所以服务器上一般是禁止安装其他程序的；

请求资源文件的路径名称

在服务器中发布项目的时候，我们一般都会配置一些默认文档：用户及时不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是index/default...）;
我们通常为了做SEO优化，会把一些动态页面的地址进行伪URL重写（服务器处理），把动态的URL地址重写为静态的URL地址，利于爬虫抓取

问号传参

?name=zf&age=9
把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过问号传递；
[作用]
1、在AJAX请求中，我们可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据；
2、消除AJAX请求中GET方式的缓存：比如
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
两个url打开的页面一样，但是后面这个有问号，说明不调用缓存的内容，而认为是一个新地址，重新读取。
3、通过URL传参的方式，可以实现页面之间信息的通讯，例如：我们有两个页面A/B，A是列表页面，B是详情页，点击A中的某一条信息，进入到唯一的详情页B，可以通过URL传递不同得参数来获取不同的数据；

哈希值

URL末尾传递的井号什么，就是HASH值（哈希值）
作用：
1、页面中锚点定位
2、前端路由(SPA单页面开发)

32、AJAX基础知识

什么是AJAX？
async javascript and xml（异步的JS和XML）
客户端JS中的方法，用来向服务器端发送请求（还可以传递给服务器端数据），然后把服务器端返回的内容获取到（一般运行在客户端的浏览器中的）。

XML：可扩展的标记语言（一种数据格式）
利用自己扩展的有规则的标记来存储相关数据的

异步的JS

这里的异步不是说AJAX只能基于异步进行请求，这里的异步特指的是局部刷新

全局刷新和局部刷新

[全局刷新]
所谓的全局刷新就是页面中的每次数据更新，都会从服务器获取到最新的已经渲染好的源代码，然后拿到浏览器中进行展示；
[优势]
1）动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
2）从服务器获取的结果就已经是最后要呈现的结果了，不需要客户端做额外的事，所以页面加载速度快，（前提是服务器端处理的速度够快）如淘宝、京东的首屏数据一般都是由服务器端渲染

[弊端]
1）页面中的数据需要实时更新，即使是一张小图片更新，每次也都需要重新刷新一次。
2）都交给服务器端做数据渲染，服务器端的压力大，如果服务器处理不过来，页面呈现的速度更慢
3）全局刷新不利于开发（开发效率低）

[局部刷新]
前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的：客户端渲染要以下步骤：
1、向服务器端发送AJAX请求
2、把从服务器端获取的数据解析处理，拼接成为我们需要展示的HTML字符串
3、拿拼接好的字符串替换页面中某一部分需要更新的内容（局部刷新），页面整体不需要重新加载，局部渲染即可
[优势]
1、我们可以根据需求，任意修改页面中某一部分内容（如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证、需要实时刷新的需求都要基于AJAX实现）
2、有利于开发，提高开发效率

  • 1）前后端的完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正实现了前后端分离
  • 2）可以同时开发：项目开发开始，先制定前后端数据交互的接口文档（文档中包含了调取哪个接口或者哪些数据等协议规范），后台把接口写好，客户端按照接口调取即可，后台再去实现接口功能即可；

[弊端]
1、不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，不利于SEO收录，后期通过JS添加到页面中的内容，并不会写到源代码中
2、由于需要动态绑定数据后，再交给浏览器渲染。所以没有服务器渲染页面呈现速度快；

基于原生JS实现AJAX

Ajax四步:
let xhr=new XMLHttpRequest();
xhr.open("get","/data.txt",false);
xhr.onreadystatechange=function（）{
    if（xhr.readyState===4&&/^2\d{2}$/.test（xhr.status））{
        var val=xhr.responseText;
    }
}；
xhr.send（null）；

AJAX请求方式

AJAX第一步：let xhr=new XMLHttpRequest;

创建一个AJAX对象，IE6以下不支持;

AJAX第二步：xhr.open(method,url,async,username,userpass);解析

第二步代表发送前的基本信息配置（并没有发送请求）。open方法中的参数详解如下：
method：请求方式（以下方法都可以从服务器获取数据，也可以向服务器传递数据）

  GET：一般用于从服务器获取数据（也可以向服务器发送数据） 
POST：一般用于向服务器推送数据
PUT：用于给服务器上增加资源文件（上传图片）
DELETE：用于从服务器上删除资源文件
HEAD：用于只获取服务器的响应头信息

url：请求的URL地址（配置向哪一个服务器地址发送请求）
async：同步还是异步（true代表异步，false代表同步，默认为true）
用户名和密码：这两个参数一般不用，如果你请求的URL地址所在的服务器设定了访问权限，则需要我们提供可通行的用户名和密码，才可以（一般服务器都是可以允许匿名访问的）

总结：
GET与POST区别：
1、大小问题：GET请求传递给服务器的内容大小存在限制而POST理论上没有限制。存在限制的原因是浏览器对URL的长度存在限制。各浏览器都有自己的URL最大长度限制（谷歌：8KB，火狐：7KB，IE：2KB），超出的部分会被截取；而post请求一般都是基于设置请求主体来实现的，理论上post通过请求主体传递是没有大小限制的；
2、速度的问题：与 GET 请求相比， POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计， GET 请求的速度最多可达到 POST 请求的两倍
3、缓存的问题：GET请求会出现缓存（这个缓存不一定是304），会产生缓存是因为GET请求是通过URL问号传参来实现数据传递的（浏览器会根据每次请求时的URL地址与上次请求的地址是否相同，来判定是读取上次请求的缓存，还是再请求一次拿到最新数据）；POST是没有缓存的。如何解决GET请求出现缓存：在URL的末尾追加一个随机数；

$.ajax({
    url:''+Math.random()
})

4、安全问题:一般来说GET不安全，GET请求是通过URL传参把数据传递给服务器，用户名和密码将明文出现在URL上，而黑客可通过URL劫持获取到get请求问号传参传递的内容。数据不太安全而POST相对安全一些

AJAX第三步：xhr.onreadystatechange=function（）{};解析

此步骤作用：监听AJAX状态改变，获取响应信息(获取响应头信息、获取响应主体信息)

xhr.onreadystatechange=function（）{
    if（xhr.readyState===4&&/^2\d{2}$/.test（xhr.status））{
        var val=xhr.responseText;
    }
}；

xhr.readyState:AJAX状态码，代表当前AJAX处理的进度，可能的值如下：
0 ：UNSENT 当前的请求还没发送(未调用open方法)
1 ：OPENED URL地址已经打开（已调用open方法未调用send方法）
2 ：HEADERS_RECEIVED 当前AJAX的请求已经发送，并且已经接收到服务器端返回的响应头信息了（已经调用send方法，2的时候就已经可以拿到响应头信息了）
3 ：LOADING 已经接收到部分响应数据
4 ：DONE 响应主体的内容已经成功返回到客户端

xhr.status:HTTP网络状态码，描述了当前服务器返回信息的状态，可能的值如下：

200 或者^2\d{2} ： (200或以2开头的)都代表响应主体的内容已经返回成功

（以3开头的也算请求成功，只不过服务器端做了很多特殊的处理）
301 ：永久重定向/永久转移（一般用于域名迁移）
302 ：临时重定向/临时转移(一般用于服务器的负载均衡，当服务器访问量过大，就把当前的请求临时交给其他服务器处理)
304 ：本次获取的内容是读取缓存中的数据（把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力，也提高了页面加载速度）

（以4开头的一般都是失败，而且客户端的问题偏大）
400 ：客户端传递给服务器端的参数出现错误
401 ：无权限访问
404 ：要访问地址不存在

（以5开头的一般都是失败，而且服务器端的问题偏大）
500 ：未知的服务器错误
503 ： 服务器已经超负荷

xhr.responseText：接收到的响应主体中的内容；

AJAX第四步：xhr.send(null);解析

这一步才算发送请求：参数是请求主体中需要传递给服务器的内容
向服务器发送请求的任务，才算开始；

AJAX属性方法解析

属性

readyState：存储的是当前AJAX的状态码
response/responseText/responseXML：都是用来接收服务器返回的响应主体中的内容，只是格式不一样

  • responseText：是最常用的，接收到的结果是字符串格式的（一般服务器返回的数据都是JSON格式字符串）
  • responseXML偶尔会用到，如果服务器返回的是XML文档数据，需要用此属性接收

status：服务器返回的HTTP状态码
statusText：对返回状态码的描述
timeout：设置当前AJAX请求的超时时间，表示请求在等待响应多少毫秒之后就终止。在给timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout事件

方法

abort：强制中断AJAX请求
open：打开一个URL地址
send：发送AJAX请求（参数是请求主体中传递给服务器的内容）
getAllResponseHeaders：获取全部的响应头信息（结果为字符串文本）
getResponseHeader（key）：获取指定属性名的响应头信息
setRequestHeader（key，value）：设置请求头信息（可以是自定义的请求头）
overrideMimeType：重写数据的MIME类型

事件

onabort：AJAX被中断触发此事件
onreadyStateChange：AJAX状态发生改变触发此事件
ontimeout：请求超时后触发此事件

JS中常用的编码解码方法

正常的编码解码（非加密）
1、escape/unescape：主要就是把中文汉字进行编码和解码（一般只有JS语言支持：常用于前端页面通信时候的中文汉字编码）
2、encodeURI/decodeURI：基本上所有的编程语言都支持；
3、encodeURIComponent/ decodeURIComponent：使用对应的编码替换所有非字母数字字符。
encodeURI与encodeURIComponent[kəmˈpoʊnənt]的区别：

  • encodeURI() 编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换 。而 encodeURIComponent() 方法则会使用对应的编码替换所有非字母数字字符。

加密编码解码
1、可逆转加密（一般都是自己定规则）
2、不可逆转加密（基于MD5加密完成，为了安全一般都进行二次加密）

let str = 'http://www.baidu.com/?',
    obj = {
        name:'珠峰培训',
        age:9,
        url:'http://www.zhufengpeixun.cn/?lx=1'
    };
//=>把OBJ中的每一项属性名和属性值拼接到URL的末尾（问号传参方式）
for(let key in obj){
    str+=`${key}=${encodeURIComponent(obj[key])}&`;
    //=>不能使用encodeURI必须使用encodeURIComponent，原因是encodeURI不能编码特殊的字符
}
console.log(str.replace(/&$/g,''));

//=>后期获取URL问号参数的时候，我们把获取的值在依次的解码即可
String.prototype.myQueryUrlParameter=function myQueryUrlParameter(){
    let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g,
    obj={};
    this.replace(reg,(...arg)=>{
        let [,key,value]=arg;       
        obj[key]=decodeURIComponent(value);//=>此处获取的时候可以进行解码    
    });
    return obj;
}

AJAX中的同步异步

Ajax中的同步：当AJAX任务开始的时候，直到readyState为4的时候任务才结束，此时才可以处理其他的事情；
Ajax中的异步：当AJAX任务开始的时候，不需要等到readyState为4我依然可以继续做其他的任务，并且只有当其他的任务完成后，我们再看readyState是否等于4，到4再做相关操作；
倒计时抢购时间差如何处理，在异步ajax请求readyState=2的时候拿到服务器时间，减少时间差。

倒计时抢购

let getSeverTime=function () {
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            /*以2或3开头都算获取成功*/
            if(!/^(2|3)\d{2}$/.test(xhr.status))return;
            if(xhr.readyState===2){
                /*只在第一次的时候获取服务器的时间，下次直接在其基础上+1就行*/
                severTime=new Date(xhr.getResponseHeader("date")).getTime();
            }
        };
        /*尽可能的减少时间差*/
        /*只获取响应头信息即可，所以请求方式使用head即可，head请求中状态码没有3，因为不需要等待接收响应主体内容*/
        xhr.open('head','json/banner.txt',true);
        //只能使用异步，同步的时候无法在状态为2或3的时候做处理，而我们要获取响应头信息，在状态为2的时候就可以获取了，所以需要异步
        xhr.send(null);
    };

jQuery中的AJAX

$.ajax({
        url:'xxx.txt',
        method:'get',
        /*dataType只是我们预设获取结果的类型，无法影响服务器传递给我们的类型，只能拿到服务器的数据后，jQuery再进行转化*/
        dataType:'json',
        /*是否清除缓存*/
        cache:true,
        /*同步还是异步 false代表同步*/
        async:true,
/*我们可以通过data属性把一些信息传递给服务器；get方式通过问号传参，post通过设置请求主体*/
/*data的值可以为：字符串、对象，如果是对象，JQ会把对象转化为xxx=xxx&xx=xx 这种字符串传递给服务器*/
        data:null,
        success:function (result) {
            /*请求成功后（xhr.readyState为2或3开头）才会触发此函数*/
        },
        complete:function () {
          /*不管请求是否成功都会触发此函数*/
        }
})

你可能感兴趣的:(js基础（6）)

  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动 李蕾1229
    为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
  • 2021-08-26 影幽
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 本周第二次约练 2cfbdfe28a51
    中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。
  • 今日联对0306 诗图佳得
    自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6
  • 怎么起诉借钱不还的人？怎样起诉欠款不还的人？ 影子爱学习
    怎么起诉借钱不还的人？怎样起诉欠款不还的人？如果遇到难以解决的法律问题，我们可以匹配专业律师。例如：婚姻家庭（离婚纠纷）、刑事辩护、合同纠纷、债权债务、房产（继承）纠纷、交通事故、劳动争议、人身损害、公司相关法律事务（法律顾问）等咨询推荐手机/微信:15633770876【全国案件皆可】借钱不还起诉对方需要哪些资料起诉欠钱不还的，一般需要的材料包括以下这些：借据、收据、欠条、付款凭证等证据，以及向
  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 121. 买卖股票的最佳时机 薄荷糖的味道_fb40
    给定一个数组，它的第i个元素是一支给定股票第i天的价格。如果你最多只允许完成一笔交易（即买入和卖出一支股票），设计一个算法来计算你所能获取的最大利润。注意你不能在买入股票前卖出股票。示例1:输入:[7,1,5,3,6,4]输出:5解释:在第2天（股票价格=1）的时候买入，在第5天（股票价格=6）的时候卖出，最大利润=6-1=5。注意利润不能是7-1=6,因为卖出价格需要大于买入价格。示例2:输入:
  • libyuv之linux编译 jaronho Linuxlinux运维服务器
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
  • 走向以教育叙事为载体的教育叙事研究 666小飞鱼
    今天我读了吴松超老师的《给教师的68条建写作建议》中的第23条《如何通过教育叙事走向研究》，吴老师在文中与我们分享了一个德育案例，这是一个反面的案例，意在告知我们在处理问题时，不能就考虑的点太窄，思考要全面。走向教育叙事研究，教师要有敏锐的“感知力”，这个感知力来自于背后专业知识的支撑，思维能力以及广阔的视野和见识等。所以对于同一件事处理方法不同，这个就是教师背后“敏锐力”的不同造成的，也就是说是
  • pyecharts——绘制柱形图折线图 2224070247 信息可视化pythonjava数据可视化
    一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南） 诚芯微科技 社交电子
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
  • 2020-12-16 长寿富贵
    9：56不知今天哪位亲来说说话呀？成萌：尽尽皆是道。道道皆相同。不解呀？成萌：郁郁不得志，混混过日子。哦……说谁的呀？成萌：说自己呀……还能说谁呢？那如何办呢？成萌：回头……如何回头？成萌：回见心源。如何回见心源？成萌：不追不随诸相迁，如如不动在心田。啊？成萌：慢慢守心吧。
  • Rust基础知识 GRKF15 rust开发语言后端
    1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的
  • 【无标题】达瓦达瓦 JhonKI 考研
    博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
  • 上图为是否色发 JhonKI 考研
    博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
  • 一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？ 王老师聊围棋
    今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的
  • mac电脑命令行获取电量 小米人er 我的博客macos命令行
    在macOS上，有几个命令行工具可以用来获取电量信息，最常用的是pmset命令。你可以通过以下方式来查看电池状态和电量信息：查看电池状态：pmset-gbatt这个命令会返回类似下面的输出：Nowdrawingfrom'BatteryPower'-InternalBattery-0(id=1234567)95%;discharging;4:02remainingpresent:true输出中包括电
  • 数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首 张三叨
    你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
  • 学习“论语”-第59天 春峰轩
    12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
  • 2019-08-16 希望在东方
    《春游荣华山》春游荣华山，乍暖还寒。青苔路，石阶险。山路弯上弯！为寻古寺往幽探。细雨已润江南岸，初春芳草现。老树新芽冒枝端，人间又过到新年。今游荣华山，树茂参天，古寺悠闲。细雨飘落发端！三眼井旁，投币许心愿，并祷一世安然。更喜大女明事端，应心安，放开颜。修竹静默，雨中吐心愿。待得春风浩吹时，春笋节节攀。图片发自App图片发自App图片发自App
  • 用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类） AdyZhang POJOeclipseHibernateMiddleGenIDE
    推荐:MiddlegenIDE插件,   是一个Eclipse   插件.     用它可以直接连接到数据库,   根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件!     今天开始试着使用
  • .9.png Cb123456 android
      “点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。 　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边
  • 算法的效率 天子之骄 算法效率复杂度最坏情况运行时间大O阶平均情况运行时间
    算法的效率 效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。   以下是我的学习笔记：   1.求值与霍纳法则，即为秦九韶公式。   2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。
  • java数据结构 何必如此 java数据结构
    Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类： 枚举（Enumeration） 位集合（BitSet） 向量（Vector） 栈（Stack） 字典（Dictionary） 哈希表（Hashtable） 属性（Properties） 以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect
  • MybatisHelloWorld 3213213333332132
    //测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat
  • Java|urlrewrite|URL重写|多个参数 7454103 javaxmlWeb工作
     个人工作经验！ 如有不当之处，敬请指点 1.0  web -info 目录下建立     urlrewrite.xml  文件 类似如下： <?xml version="1.0" encoding="UTF-8" ?>   <!DOCTYPE u
  • 达梦数据库+ibatis darkranger sqlmysqlibatisSQL Server
    --插入数据方面 如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert  数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam
  • XML 解析 四种方式 aijuans android
    XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object
  • spring中配置文件占位符的使用 avords
    1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o
  • 前端工程化-公共模块的依赖和常用的工作流 bee1314 webpack
    题记： 一个人的项目，还有工程化的问题嘛？   我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？ 你真的想这样嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。  
  • 上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？ bijian1013 项目管理沟通IT职业规划
    问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应         正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。   Eno-Bea回答，注重感受，不一定是别人的         虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作
  • TortoiseSVN，过滤文件 征客丶 SVN
    环境： TortoiseSVN 1.8 配置： 在文件夹空白处右键 选择  TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件： 多类型用英文空格分开 *name ： 过滤所有名称为 name 的文件或文件夹 *.name ： 过滤所有后缀为 name 的文件或文件夹 --------
  • 【Flume二】HDFS sink细说 bit1129 Flume
    1. Flume配置   a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan
  • The Eight Myths of Erlang Performance bookjovi erlang
    erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html   Myth: Funs are sl
  • java多线程网络传输文件(非同步)-2008-08-17 ljy325 java多线程socket
    利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。 使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系
  • 读《研磨设计模式》-代码笔记-模板方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;
  • 配置心得 chenyu19891124 配置
    时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。 作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。 做了一年的配置管理给自总结下： 1.改变 从一个以前对配置毫无
  • 对“带条件选择的并行汇聚路由问题”的再思考 comsci 算法工作软件测试嵌入式领域模型
    2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际
  • Oracle 10g 的clusterware 32位 下载地址 daizj oracle
    Oracle 10g 的clusterware 32位 下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l
  • 非常好的介绍：Linux定时执行工具cron dongwei_6688 linux
    Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。 新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr
  • Yii assets目录生成及修改 dcj3sjt126com yii
    assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php   assets配置方法 在m
  • mac工作软件推荐 dcj3sjt126com mac
    mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。 我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼
  • Memcached(三)、封装Memcached和Ehcache frank1234 memcachedehcachespring ioc
    本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?>
  • Remove Duplicates from Sorted List II hcx2013 remove
    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,
  • Spring4新特性——注解、脚本、任务、MVC等其他特性改进 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • MySQL安装文档 liyong0802 mysql
      工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。   安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。   Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二
  • 使用VS2010构建HotSpot工程 p2p2500 HotSpotOpenJDKVS2010
    1. 下载OpenJDK7的源码：      http://download.java.net/openjdk/jdk7      http://download.java.net/openjdk/      2. 环境配置     ▶
  • Oracle实用功能之分组后列合并 seandeng888 oracle分组实用功能合并
    1       实例解析 由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下： 表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs
  • Java定时任务注解方式实现 tuoni javaspringjvmxmljni
    Spring 注解的定时任务，有如下两种方式： 第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"  xmlns:xsi="http
  • 11大Java开源中文分词器的使用方法和分词效果对比 yangshangchuan word分词器ansj分词器Stanford分词器FudanNLP分词器HanLP分词器
    本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他