jiang7701037的博客

1、场景：一个网页如果包含了很多的图片，那么，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。通俗的说：你不看的图片我先不加载，也许你不看呢（哈哈），我何苦要做无效的事情呢 你想看时，我再加载（哈哈）2、原理：　 1）、先将img标签的src链接设为同一张图片(默认图片：可以是loading)，把图片的实际地址赋给一个自定义属性。这时候所有的图片只发送一次请求。　 2）、然后，当js监听到某张图片进入可视窗口时（说明你想看了），再将实际地址赋给src属性。src属性的值发生变化时，浏览

11、原型和原型链1）、原型：每个函数都会有一个属性prototype。这个属性就是原型属性。JavaScript在实现面向对象时，会经常使用原型。每个对象（实例）的有一个属性（ __ proto __）指向构造函数的prototype属性（prototype指向的内存区域）。prototype属性里保存着所有对象（实例）共享的属性和方法。2）、原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 __ proto __ 隐式原型上查找，即它的构造函数的

1、Promise的概念Promise是ES6提供的原生的类（构造函数）， 用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作）2、Promise的两个特点：1）、对象的状态不受外界影响。Promise 有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。2）、一旦状态改变，就不会再变状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Reje

悄悄告诉你，这都是真题！低调，低调，低调1）、只有一个方法的对象因为闭包允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。示例：//面向对象的类// class Person{// constructor(){// this.name = "陈琳"// }​// eat(){...

query string、formData和request payload的区别，你真的知道吗？请看query string、formData和request payload的区别，你真的知道吗？

Content-type详解，请看：HTTP请求响应过程中的Content-type你真的清楚吗

响应报文1、响应报文的详解上篇文字讲的“请求报文”，本篇主要解释响应报文包括的内容。响应报文的内容也包括三部分，分别是： 响应行， 响应头， 响应体。这三部分放的都是信息。是S端发给B端的信息，道理是一样的。响应：就是请求后的结果。栗子（接上篇文字的栗子）：“我今天去火车站接女朋友”，这句话核心表达的意思（经过缩句）：我接女朋友。响应行：会总体说响应的结果。如：接到了还是没有接到响应头：对结果的描述。如：几点接到了（有可能晚到噢），这次女朋友和上次有没有变化（如：头发是不

一、做了这么多的请求和响应，你知道你都干了些啥吗？请看请求和响应的深入了解系列012、请求报文详解二、请求报文1、请求报文的详解上篇文字讲的“请求报文和响应报文”，本篇主要解释请求报文包括的内容。请求报文的内容包括三部分，分别是： 请求行，请求头，空行，请求体。除了空行是分隔的作用，其它三部分放的都是信息。用汉语的语法解释请求头，请求体的关系。请求体是主体，是请求时传给后端的主体信息。请求头是附属信息。对比汉语。请求体就是宾语。请求头是修饰词（如：定语，状语...

这篇文章有点晦涩难懂，并且我做了很多的铺垫，就是希望，大家能够用这一篇文章彻底搞懂 useCallBack。所以，希望大家能够静下心来，仔细品，同时，把代码也执行一下。否则，根本看不懂，或者可以多看几遍。一、抛出问题以前写类组件时，经常会写以下（有隐含性能的）代码export default class Parent extends React.Component { tempfn(v){ } render = (...

24、为何vue采用异步渲染？1、vue采用异步队列渲染是为了提高性能，在异步队里会去掉重复的无效的渲染。当vue中的数据发生改变后，vue框架会把该数据引起的dom更新放入异步队列（ 缓冲在同一事件循环中发生的所有数据变更 ），进行排队。 如果同一个 watcher 被多次触发，只会被推入到队列中一次 。 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的 。2、如果不采用 异步渲染，而是在数据发生改变后，立即更新dom，如果有重复无效的渲染，那么，就会造成性能的浪费。

前言阅读本篇文章的要求：懂前端的HTML,CSS,Javascript，ajax；后端的php（或者其它编程语言也行）懂一点，数据库。这篇文章写了四个小时，希望大家怀着一颗感恩的心阅读，谢谢！感谢您的点赞，让我有继续写下去的兴趣和勇气，谢谢！一、前提申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和电信行业之间的桥梁，帮你做好了和电...

生活中：this的意思：“这个”的意思，是个代名词。代表谁呢？ 看场景。举例: 当我说“这个教室”时，到底是哪个教室，需要看我说这句话的场景。程序中：this也是代名词，它的场景就是函数。this是函数里的内置对象。一、this的四种情况：1）、当this所在函数是事件处理函数时。this表示事件源2）、当this所在函数是构造函数时，this是new出来的对象3）、当this所在函数时类的方法时，this是调用方法时的对象（写在方法调用前面的那个对象(主语...

一、解释ES6 = ES2015ES7= ES2016async和await是ES7出现关键字，目的是彻底解决回调地狱，比Promise彻底。即就是：把异步的回调变成了同步的写法。据说，async和await是回调地狱的终极解决方案。async：异步await：等待二、 async定义函数的格式语法:​ async function 函数名(...

ES6 的扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。将一个数组转为用逗号分隔的参数序列。如下：let arr=[12,23,34];function testf(){var arr2 = [...arr,56]; //表示把 arr的内容，转为用逗号分隔的var arr3 = arr.concat(...

ES6 作为多年来 JavaScript 的重大版本变革，受到 JavaScript 开发者们的普遍欢迎，也正是从 ES6 (ES2015) 开始，JavaScript 版本发布变为年更，即每年发布一个新版本，以年号标识版本随着async/await正式纳入ES7标准，据说是异步编程终级解决方案的 async/await。async 是“异步”的意思，而 awai...

一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 第三步，...

花了一个半小时写的，请怀着一颗感恩的心阅读，谢谢！ 我在说明一个事物和概念时，喜欢先上代码看到效果，然后再解释概念。 ES5新增的函数Object.defineProperty()，可以给JavaScript对象增加属性。啊……，那以前的json对象不是本来就可以吗。为何还得搞出个这么复杂的函数来做这个事情。一、代码部分（先上代码）：1、回顾一...

一、form表单的作用1、<form>表单标签使用在一个网页中数据提交标签，这就不用多说了2、form表单在提交时： 1）、先把form表单里的表单元素的name属性和value属性进行收集。 2）、按照enctype属性的设置，选择合适的编码方式，对数据进行编码，放在请求头里 3）、浏览器进行发送。二、enctype属性enc...

如果你对模块化已经了解，可以直接从第三点开始阅读。一、模块化的概念：在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型，对象，函数就是模块。就像一辆汽车是由很多的零部件组成，每个零部件就是一个小模块，而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块；或者说，一台计算机，由主板，cpu，内存，硬盘，显示器，键盘...

亲，不管三七二十一，把以下代码先复制到编辑器中，扩展名写成html，用浏览器先打开看看，这叫一睹为快！demo01alert("终于有人上当的了！");alert("今日愚人节呀，您不知吗？");alert("为什么，都不小心哦"); alert("没法啦！你都上了，只有陪我了");alert("哈哈！呵呵！嘻嘻！");alert("我都不想

啰嗦一句：任何语言都有规则，如：汉语要求有主谓宾，每句话结束后，要有句号，表示感叹用感叹号等等。计算机语言也不例外导航               1、区分大小写               2、每句话结束后要有分号               3、注释              内容一、区分大小写                 即

demo01//2,4,7,5,3,6,1/*第一轮：i=0;j(内层循环)循环 6次,内层循环做的工作：相邻两个数比较,大的在后,小的在前  j=0    1        2        3   4    5                               2     2        2        2   2  

选择法排序//循环的过程：//第一轮：i=0//在第一个数到最后一个数里找最小数，把最小数和第一个数进行交换//第二轮；i=1//在第二个数到最后一个数里找最小数，把最小数和第二个数进行交换//第三轮；i=2;//在第三个数到最后一个数里找最小数，把最小数和第三个数进行交换//…………………………function show

//一、各种坐标系（坐标原点）//1)、可视区域（浏览器窗口中可以看到（网页）的区域）左上角//2)、页面左上角//3)、某个HTML元素的左上角//1）、以可视区域左上角为坐标系原点//    event.clientX: 鼠标距离原点的x方向的坐标//    event.clientY: 鼠标距离原点的y方向的坐标      //2）、以

示意图：核心：速度=（目标位置-当前位置）/固定值代码： *{ margin:0; padding:0; list-style: none } img{ position:absolute; width:100px; height:100px; }

代码： *{ margin:0; padding:0; list-style: none } #box{ position:absolute; left:0px; top:0px; width:100px; height:100px; background-color:p

*{ margin:0; padding:0; list-style: none } #box{ position:absolute; left:0px; top:0px; width:100px; height:100px; background-color:pink; }

*{margin:0; padding:0;list-style: none;}#box{position:relative;width:400px;height:300px;}img{position:absolute;width:400px;height:300px;}ul{position:absolute;right:20

效果图：代码：无标题文档*{ margin:0px; padding:0px;}#box{ width:500px; height:600px; border:5px solid red; background-color:black; margin:50px auto; position:relative;}.blockRo

效果图：素材：代码： #map{ position:relative; left:50px; top:50px; width:500px; height:400px; background-image:url(images/bg.jpg);} ////需求：//1、首先要有地图（

示意图：代码： *{ margin:0; padding:0; list-style: none } #box{ position:absolute; left:0px; top:0px; width:100px; height:100px;

解释：       1、该轮播图的切换效果是淡入淡出       2、该轮播图还没有使用prototype属性，只是把对象所有的方法（函数）放到了构造函数里，后期讲到prototype时，再补上效果图：思路示意图：代码：1)、HTML代码 *{ margin:0; padding:0;

 bind:能够完成基本的绑定事件处理函数的功能，比起click(),mouseover()等的好处是，可以一次绑定多种事件类型 live:有事件委托，把事件处理函数委托给DOM根元素，效率比delegate低，所以很多新版jQuery去掉了live。 delegate:有事件委托，把事件处理函数委托给指定的父级元素，delegate比live的执行效率高 on:涵盖了以上所有的功能。 ...

解释一下：              bind:能够完成基本的绑定事件的功能，比起直接使用click(),blur()等函数，bind可以一次绑定多个类型的事件 *{ margin:0; padding:0; list-style: none; }

*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back

解释：       1、该轮播图的切换效果是淡入淡出       2、该轮播图使用了prototype属性，解决了上一版“http://blog.youkuaiyun.com/jiang7701037/article/details/78963256”javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题效果图：代码：HTML代码：

功能：      鼠标放在指定的HTML元素上时，就会出现对应的提示框，提示框可以设置宽度，高度，背景颜色，字体颜色，字体大小，是否有边框，提示信息，是否有圆角。效果图：HTML代码： Title *{ margin:0; padding:0; list-st

示意图：思路：//购物车的抛物线：//1、已知起点和终点//2、计算p的值//3、动态改变x的值，根据p来就算y的值。//4、把动态变换的点（x,y）赋给一张图片，//5、当图片到达终点时，隐藏即可代码： *{ margin:0; padding:0; list-style: none

代码： *{ margin:0; padding:0; list-style: none } #box{ position:absolute; left:0px; top:0px; width:100px; height:100px; background-color:p

解释：以下代码只能在IE中使用，因为，showModalDialog只有IE浏览器支持效果图：代码：1、employee.html Document 姓名 性别 年龄 操作 狗蛋男18 二愣子女19 window.onload