JavaScript
李不烦
这个作者很懒,什么都没留下…
展开
-
Session共享问题
Session问题原因分析出现这个问题的原因,从根本上来说是因为Http协议是⽆状态的协议。客户端和服务端在某次会话中产⽣的数据不会被保留下来,所以第⼆次请求服务端⽆法认识到你曾经来过, Http为什么要设计为⽆状态 协议?早期都是静态⻚⾯⽆所谓有⽆状态,后来有动态的内容更丰富,就需要有状态,出现了两种⽤于 保持Http状态的技术,那就是Cookie和Session。⽽出现上述不停让...原创 2020-04-11 22:08:46 · 129 阅读 · 0 评论 -
cookie、sessionStorage和localStorage的区别
一、 概念的理解webstorage本地存储1)webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage2)localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信3)sess...原创 2019-12-25 19:43:39 · 142 阅读 · 0 评论 -
粘连布局
粘连布局,又称为stick footer布局。在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。0,<!DOCTYPE html><html lang="en"><head> <...原创 2019-12-02 10:23:11 · 257 阅读 · 0 评论 -
react-router react路由
路由后端路由 path(路由分发) 针对不同的路由对应不同的回调函数处理(req, res, next) req;获取请求参数 res:返回请求数据 next: 调用后续的回调函数前端路由 * 路由是根据不同的url去请求不同的页面内容 * 前端路由就是把不同路由对应不同的内容或页面的任务交给前端...原创 2019-09-21 18:36:48 · 283 阅读 · 0 评论 -
React (五)create-react-app 脚手架
先讲一下现实生活中的脚手架是什么现实中的的脚手架是为了保证各施工过程顺利进行而搭设的工作平台,工人师傅可以借助脚手架作业。如下图:说完实际生活中的脚手架,再说项目中的脚手架就很容易懂了,react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的空项目的库* 包含了所有需要的配置* 指定好了所有的依赖* 可以直接安装/编译/运行一个简单效果react提供...原创 2019-09-17 11:08:05 · 138 阅读 · 0 评论 -
Read(四) 组件实例对象3大属性之: state属性
组件实例对象3大属性之: state属性1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)2). 初始化状态: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } }...原创 2019-09-09 23:39:49 · 271 阅读 · 0 评论 -
React(三) 属性 refs
组件实例对象的3大属性之二: refs属性1). 组件内的标签都可以定义ref属性来标识自己2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多) * <input ref='username' /> * this.refs.username //返回input对象...原创 2019-09-09 23:29:17 · 145 阅读 · 0 评论 -
React(二)组件实对象的3大属性之props 属性 组件的嵌套
props属性1. 每个组件对象都会有props(properties的简写)属性2. 组件标签的所有属性都保存在props中3. 内部读取某个属性值: this.props.propertyName4. 作用: 通过标签属性从组件外向组件内传递数据(只读)5. 对props中的属性值进行类型限制和必要性限制 Person.propTypes = { name: R...原创 2019-09-09 23:13:47 · 496 阅读 · 0 评论 -
ES6模块化
es6模块化说明:1、大家可以查看此网址进行学习http://es6.ruanyifeng.com/#docs/module2、es6所依赖模块需要编译打包处理,因为现在的浏览器不认识es6 ,Babel可以将es6转换成es5es6模块化语法:导出模块:1. 分多次导出模块的多个部分 export class Emp{ } export function fun()...原创 2019-08-31 17:49:15 · 144 阅读 · 0 评论 -
js模块化
一、什么是模块/模块化? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起,块(文件)的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信,这就是模块化。二、模块化的进化史1、全局模式全局函数模式: 将不同的功能封装成不同的全局函数。弊端:Global被污染了, 很容易引起命名冲突最早我们用全局模式写代码:...原创 2019-08-29 08:01:26 · 145 阅读 · 0 评论 -
Express、路由(Router) 、request、response
一、简介Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 Express 简单来说就是运行在Node 平台中的服务器模块,通过Express可以很容易的通过HTTP协议向用户返回静态或动态页面。 Express的特点: 精简、灵活、适合各种WEB应用程序二、安装expressnpm ...原创 2019-08-02 00:07:57 · 894 阅读 · 0 评论 -
零基础CSS(五)定位 position
定位position有三种,分别是相对定位、绝对定位、固定定位。相对定位:position:relative;绝对定位:position:absolute;固定定位:position:fixed;每一种定位,都暗藏玄机,所以我们分别讲解。position 属性规定元素的定位类型。一、相对定位1.1 认识相对定位相对定位,就是微调元素位置的。让元素相对自己原来的位...原创 2019-04-02 22:39:45 · 425 阅读 · 0 评论 -
零基础CSS(四)行高 字号、background-系列
一、行高和字号1.1 行高CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的。换句话来说,padding距离是边框与行之间的距离,而不是边框与文字之间的距离。文字,是在自己的行里面居中的。比如,现在文字字号14px,行高是24px。那么:为了严格保证字在行里面居中,我们有一个约定:行高、字号,一般都是偶数。这样,它们的差...原创 2019-03-31 23:04:02 · 333 阅读 · 0 评论 -
零基础CSS(三)display、visibility、overflow、float 浮动
一、元素的显示和隐藏CSS 中的display 和visibility 都可以设置一个元素在浏览器中的显示和隐藏display:隐藏某个元素时,不会占用任何空间。换句花来讲,不会影响布局; visibility:隐藏某个元素时,仍需占用与为隐藏之前一样的空间。换句话来讲,会影响布局display 属性属性值:none;元素属性值被设置为none时,该元素会被隐藏,并且被隐藏元素不...原创 2019-03-24 21:52:19 · 321 阅读 · 0 评论 -
零基础CSS(二)盒子模型
CSS盒子模型:网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型盒子模型,英文即box model。无论是div、span、还是...原创 2019-03-18 12:23:10 · 300 阅读 · 0 评论 -
零基础CSS教程(一)
CSS介绍1.什么是 CSSCSS全称为Cascading Style Sheets,译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。2.CSS的作用html是网页的骨架,而CSS就是对骨架内容的修饰; html负责结构,css负责样式,js负责行为CSS 是能够真正做到⽹页表现与内容分离的⼀一种样式设计语⾔言。相对于传...原创 2019-03-17 19:57:58 · 765 阅读 · 0 评论 -
Session
session(会话): - session的机制类似于我们用的银行卡 - 银行卡中并没有真正的钱,钱都是在银行的账户中保存, 而银行卡里只是保存了这个账户的账号,通过账号可以去操作指定的账户 - session是在服务器中为每一个浏览器都创建一个对象,这个对象用来保存浏览器在...原创 2019-08-05 23:52:45 · 167 阅读 · 0 评论 -
Cookie
在说cookie之前先说一下http, HTTP协议是一个无状态的协议,服务器无法区分出多次请求是否发送自同一客户端,而我们在现实的开发中,往往还需要识别出请求是否发送自同一个用户,这个需求可以用会话控制解决。 会话控制主要有两种方式:Cookie 和 Session; 会话:一次打开关闭浏览器的过程。(关闭浏览器是关闭所有页面,不是关闭请求的页面);Cookie...原创 2019-08-05 22:26:21 · 103 阅读 · 0 评论 -
EJS模板引擎
模板简单理解就是含有变量的网页, 模板都是由Node在服务器中进行渲染的,服务器会将模板中的变量进行替换,然后再发送给服务器, 这样的好处就是,网页不再是固定不变的,而是由服务器动态生成的。ejs模板引擎 1.下载安装ejs npm i ejs --save 2.设置模板引擎 app.set("属性名","属性值") app.set("view engi...原创 2019-08-04 10:54:03 · 155 阅读 · 0 评论 -
中间件
中间件Express提供的大部分功能是通过中间件函数完成的,这些中间件函数在Node.js收到请求的时点和发送响应的时点之间执行。(中间件一般都会创建在路由之前,中间件可以在请求到达路由前做一些准备工作,比如:解析Cookie ,解析请求体、解析静态资源 ) 中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(respons...原创 2019-08-04 10:21:14 · 133 阅读 · 0 评论 -
路由(二)
一 、多个路由映射相同的请求路径如果路由中,有多个路由映射相同的请求路径,那路由会怎么执行?可以为一个地址同时绑定多个路由,多个路由将会按照绑定的顺序依次执行, 但是注意:前一个路由有权决定后一个路由是否执行 在路由的回调函数中,处理req 和 res 还有一个第三个参数 next next是一个回调函数,如果在路由中调用next,则请求会自动跳转到下一个路由,若不调用不执行...原创 2019-08-04 09:29:37 · 118 阅读 · 0 评论 -
node(三)buffer 文件 读取 写入
一、Buffer- Buffer的结构和数组很像,操作的方法也和数组类似- 数组中不能存储二进制的文件,而buffer就是专门用来存储二进制数据- 使用buffer不需要引入模块,直接使用即可- 在buffer中存储的都是二进制数据,但是在显示时都是以16进制的二位数形式显示 buffer中每一个元素的范围是从00 - ff 0 - 255 00000000 - 1111...原创 2019-07-27 23:51:15 · 7007 阅读 · 0 评论 -
nodejs(二)
一、npmNPM(Node Package Manager)CommonJS包规范是理论,NPM是其中一种实践。 对于Node而言,NPM帮助其完成了第三方模块的发布、安装和依赖等。借助NPM,Node与第三方模块之间形成了很好的一个生态系统。借助npm我们可以很容易的使用哦别人开发好的模块,功能。相当于电脑中的软件管家。二、npm命令npm –v 查看版本npm 帮助说明...原创 2019-07-27 20:05:20 · 95 阅读 · 0 评论 -
node.js(一)
一、node.js简介简单的说 Node.js 就是运行在服务端的 JavaScript。 Node采用Google开发的V8引擎运行js代码,使用事件驱动、非阻塞和异步I/O模型等技术来提高性能,可优化应用程序的传输量和规模。 Node大部分基本模块都用JavaScript编写。在Node出现之前,JS通常作为客户端程序设计语言使用,以JS写出的程序常在用户的浏览器上运行。 Node主...原创 2019-07-28 10:15:41 · 123 阅读 · 0 评论 -
移动端(四) 适配 、rem适配 、viewport适配
前面我们已经可以用meta标签,做到布局视口等于理想视口了,为什么还要做适配,拿iPhone6(375*667)和iPhone6PLUS(414*736)举例,一个宽为200px的元素,在两部手机上显示的比例不一样,分别是 200/375和200/414,我们要做适配的目的,就是做到每个元素在不同的设备上显示的效果一样,做到等比。一、rem适配rem是一个单位,1rem=ht...原创 2019-07-13 17:05:03 · 292 阅读 · 0 评论 -
移动端(三)meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/###meta(苹果发明的,桌面浏览器不支持) ###viewport <meta name="viewport" content="" /> width [pixel_value | de...原创 2019-07-13 16:18:27 · 194 阅读 · 0 评论 -
移动端(二) 基础事件
一.移动端三个事件1.ontouchstart--手指触碰事件2.ontouchmove--手指移动事件3.ontouchend--手指离开事件可以分别对应PC端的 onmousedown、onmousemove、nomouseup三个事件二.事件派发事件派发有两种:dom0和dom2; 推荐dom2dom0://不推荐使用 --- 因为有些模拟器不支持box....原创 2019-07-12 00:43:29 · 479 阅读 · 0 评论 -
移动端页面(一)
今天写点关于移动端的东西,先写几个名词屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率:(iphone6 750*1334) 指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵...原创 2019-07-27 19:13:13 · 264 阅读 · 0 评论 -
zepto Ajax 废除一个ajax请求
如何废除一个ajax请求 ----abort()方法需求/场景:点击获取验证码的按钮,用户十秒时候可以再次获取,当十秒过后第一次请求没有返回,用户再次点击获取然后因为网速好或者其他原因,两次请求同时返回,该怎么解决disabled属性 设置表单项或者按钮不可再点击或者操作;但是只是针对click事件,而并没有针对touch事件作出处理。客户端请求:<!DOCTYPE h...原创 2019-08-17 21:35:08 · 347 阅读 · 0 评论 -
zepto 的form
1、serialize() 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content...原创 2019-08-17 20:33:27 · 235 阅读 · 0 评论 -
zepto 的touch 、event
一.touch1.on() 绑定事件处理程序;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum...原创 2019-08-17 20:13:26 · 272 阅读 · 0 评论 -
zepto 、zepto与jQuery的不同
1、什么是zepto.js概念:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。同时也是移动端开发框架,是jquery的轻量级代替品;2、zepto.js特点: 针对的是移动端 轻量级,压缩版本只有8KB 语法大部分同jquery一样,学习成...原创 2019-08-17 00:49:42 · 228 阅读 · 0 评论 -
jQuery
一、jQueryjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和...原创 2019-06-17 23:30:30 · 219 阅读 · 0 评论 -
JavaScript(二十三)BOM
1. BOM 是什么BOM 的全称为 Browser Object Model,被译为 浏览器对象模型。BOM 提供了独立于 HTML 页面内容,而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能。BOM 由一系列对象构成,这些对象可以简单理解为是由各个浏览器所提供的。例如 Window 对象等。值得注意的是:BOM 是 JavaScript 中唯一一个没...原创 2019-06-11 00:20:35 · 434 阅读 · 0 评论 -
JavaScript(二十一)事件2
1. 事件监听为 HTML 页面指定标签绑定指定事件,可以通过以下三种方式实现:HTML 标签的事件属性: 这种方式 HTML 代码和 JavaScript 逻辑不能很好地分离,所以不建议使用。 DOM 标准的事件: 这种方式只能为指定的一个标签绑定一个事件,并且只能具有一个事件处理函数。 事件监听器: 这种方式是目前最受欢迎的一种方式。**但 IE 8 及之前的版本不支持!**1....原创 2019-06-08 13:20:10 · 149 阅读 · 0 评论 -
javaScript(二十)CSS 操作
CSS 操作1. 操作行内样式HTML 页面标签的行内样式主要是通过 style 属性进行设置,所以 DOM 操作标签的行内样式也是通过 style 属性来完成的。1.1 设置行内样式想改变 HTML 页面标签的行内样式,我们可以通过以下方式实现:element.style.attrName = attrValue var btn1=docum...原创 2019-06-04 10:27:57 · 113 阅读 · 0 评论 -
javaScript(十九)Element
1. DOM 元素树还记得下面这张图吗?DOM 访问或操作 HTML 页面内容主要是依靠 DOM 节点树这个模型。DOM 有三个主要对象,除了 Document 和 Node 之外,还有一个就是 Element 对象。Element 对象描述了所有相同种类的元素所普遍具有的方法和属性,也是访问和操作 HTML 页面内容的主要途径之一。Element 对象和 Node 对象类似,同样提供了一...原创 2019-05-30 15:55:01 · 490 阅读 · 0 评论 -
JavaScript(十八)Node 对象
1. 遍历节点1.1 获取父节点通过 HTML 页面的指定标签查找其父节点(元素节点或文档节点),我们可以通过如下属性实现:var 指定标签的父节点=指定标签.parentNode;值得注意的是:parentNode: 表示获取指定节点的父节点。一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点。 parentEle...原创 2019-05-27 13:34:05 · 219 阅读 · 0 评论 -
JavaScript(十六)事件
第一种派发事件:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> <button id="btn1">葵花点穴手<...原创 2019-05-22 13:26:57 · 103 阅读 · 0 评论 -
JavaScript(十五)DOM
DOM是什么DOM 的全称为 Document Object Model,译为文档对象模型。DOM 规定了浏览器应该如何创建 HTML 页面,以及 JavaScript 如何访问和修改浏览器窗口中的 Web 页面的内容。1. W3C 对 DOM 的定义DOM 是一个独立于任何语言和平台的接口,允许任何语言或脚本动态地访问和更新 HTML 文档的内容、结构和样式。该 HTML 页面可以进...原创 2019-05-22 13:13:12 · 104 阅读 · 0 评论