前端开发也蛮有意思的
关注
分享
扫一扫
通过最原始的HTML，CSS等基础学习认识前端。进阶到Bootstrap，Vue等框架的学习，理解DOM模型和浏览器渲染机制。最后能够养成前端思维，再进阶到底层，数据库，服务器等。
何迟
这个作者很懒，什么都没留下…
展开
-
Ajax的封装
要点：1、因为Ajax是异步请求，想要返回请求结果，必须要在异步操作完成之后，readyState = 4才能有结果，导致在内部返回值，不能返回到封装函数的外部只是返回出请求步骤内部而已，所以通过事件的委托完成，即获取到数据后，并执行传入的处理函数。2、因为主要的请求方式两种post和get他们的方式会有不同，所以对头文件是否声明和是否有query都要通过判断做出不同的操作。3、这个例...原创 2018-12-13 22:27:46 · 208 阅读 · 0 评论 -
在Ajax操作中使用模板字符串
要点：1、不管什么方式请求数据时，首先要确保服务端响应的数据格式要跟模板字符串使用的格式统一，一般都为JSON格式，在使用模板引擎的代码段中，不要写注释，因为可能会破坏模板引擎的解析规则。2、模板引擎在js中直接使用，需要引入官网的template-web.js文件，之后分三步： 一、将获取到的服务端的JSON格式的数据（如不是就转换格式），替换{{ $value.属性 }}...原创 2018-12-13 20:23:57 · 1123 阅读 · 1 评论 -
Ajax发送POST请求
要点： 1.基本步骤跟上一个的get方式请求，不过post请求，请求头是包含了有用的信息的，所以需要在请求头上指定Content-Type解析请求体格式，get方式请求体信息是放在query中的，不太安全。 2.在请求体中不要有空格，实际文字和模板字符串之间，不能因为js代码习惯，破坏了请求体规定的格式，造成错误。php代码：<?php ...原创 2018-12-12 15:01:02 · 1849 阅读 · 0 评论 -
Ajax发送GET请求
要点： 1.ajax主要体会异步思想，跟多线程的概念有些近似。原来的js执行是单线程的，也就是从上到下执行，不会等待，而ajax遇到是多线程的，不是按照代码从上到下顺序执行，是简单的代码先执行完，复杂的或者耗时长的最后执行完。所有在这个例子中，我们为list的多个li标签分别绑定事件需要在异步操作中执行，并且注意顺序。 2.ajax状态码信息共有5个，我们只关心...原创 2018-12-12 11:17:05 · 1229 阅读 · 0 评论 -
node实现基于文件管理的增删改实例
要点： 1、初步体会node基于模块化的编程思想，在node中，模块之间的互不影响，模块与模块之间只有通过module.exports（node为了减少开发人员代码，默认添加一句 var exports = module.export）才能实现数据的共享。 2、自定义模块时，尽量做到一个模块处理一个功能，同时写的鲁棒性越强，越好。 3、最重要的：在函数进...原创 2018-12-07 20:56:32 · 842 阅读 · 0 评论 -
用Express重写前面的记事本
要点：1.express在这个案例之中，将路径的监听方法封装好了，通过平行的代码，简洁，逻辑直观。注意四种主要的方法 .use()监听公开的动态资源，前一个参数监听url，后一个参数指定对应路由的文件夹。 .engine()是在express中使用模板引擎，前一个参数通过某一后缀名，指定可以使用模板引擎的文件类型 .get() .post()分别监听get和post两种方式的...原创 2018-12-05 21:31:27 · 260 阅读 · 0 评论 -
node实现记事留言本服务器案例
要点：1. 直接使用url判断路径时，判断的部分一定是最后一位，如127.0.0.1：3000浏览器默认在3000后添加一个'/'，下面判断的就是这个127.0.0.1：3000/yous就是判断的/yous，也就是url的路径，当后面有查询（?后面的），不可以直接判断url，需要使用url核心模块了。2.注意node中地址是网页的地址，通过服务端的处理将一些静态资源集中到public文件...原创 2018-12-02 16:51:25 · 310 阅读 · 0 评论 -
node中通过模板引擎模拟Apache访问目录结构的功能
要点：1.页面的渲染方式分为客户端渲染和服务器渲染两种方式，这个实例中实现的就是服务端的渲染。2.在fs核心模块中，fs.readFile()方法使用相对路径，是从启动服务器的目录下出发使用"./"是为了区别核心模块。3.通过node引入npm中添加的包，可以直接通过require（'包名'），来引入这个例子中的包名 template.rander(数据，{键值对})来完成模板...原创 2018-12-01 15:48:12 · 479 阅读 · 2 评论 -
通过node操作mongodb数据库，通过mongoose第三方模块简化操作。
要点：1.mongodb数据库是区别于myserver等使用sql语句操作的关系型数据库，它是非关系型的数据库，他更加灵活但是越灵活就越不能处理大型项目，就像js和java。2.基本的操作步骤如下： 一、通过cmd输入mongo回车启动数据库，默认操作的文件夹是执行启动语句所在磁盘的根目录下的 data/db文件夹，如果根目录下没有这个对应的文件夹，则会启动失败。 ...原创 2018-12-08 16:00:27 · 679 阅读 · 0 评论 -
递归案例，遍历DOM树
要点;1.这个例子的递归不是一个函数的递归而是两个函数组成一个整体完成递归，上面一个后函数获取子节点的伪数组，下面一个函数遍历打印节点。2.这个递归的中止条件是所有的子节点再没有别的节点了，要看懂递归先找到中止条件。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2018-11-20 09:31:25 · 1688 阅读 · 0 评论 -
js闭包例子—对不同对象实现点赞累加
要点：1.js中的闭包有两种，一种是函数模式闭包，此实例就是这个模式，并且一般这种模式会有返回处理函数，需要缓存的值，在返回处理函数才能实现缓存数据，而延长作用域链的作用一半定义的是匿名函数。2.大部分情况下函数模式闭包有返回值，如有返回值不能直接调用，需要接收函数。3.这里的点赞对象有四个，他们的内存空间不同，所以他们缓存的value值是对应的对象的value。代码：<...原创 2018-11-19 20:29:02 · 926 阅读 · 0 评论 -
将电影文件排序—函数作为参数和返回值，理解js提供的sort冒泡排序
要点：1.理解函数作为参数和作为返回值，就是将函数的处理结果直接使用了，而没有进行用第三个变量进行接收而已。2.js提供的sort冒泡排序算法是不稳定的，需要加一步比较两个对象的操作，同时想要进行降序排序只要将返回的值改变一下，即可改变升降排序，不需要重写。代码：<!DOCTYPE html><html lang="en"><head> ...原创 2018-11-19 16:49:22 · 348 阅读 · 0 评论 -
bind()方法复制函数或者方法，理解this不同作用域下的指代问题
要点：1.用法：函数名(方法名).call(对象，参数1，参数2)，来复制函数或者方法的名字。2.这个例子中，参数随机数，只在构造函数实例化的时候，创建rm实例对象时调用一次，定时器中调用的是函数的显示方法。3.理解bind方法前后this指代不同的原因，看注释。代码:<!DOCTYPE html><html lang="en"><head&...原创 2018-11-19 15:33:13 · 394 阅读 · 0 评论 -
js的拷贝继承的两种方式
要点：1.通过改变新实例对象的指针指向被继承的实例对象的地址，达到继承的效果2.通过遍历复制前一个对象的属性和方法达到拷贝的效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</t原创 2018-11-18 14:51:07 · 525 阅读 · 0 评论 -
js中组合方式实现继承实例
要点：1.js非高级语言，而是一本轻量级的脚本语言，本身没有继承的特性。但是，开发实践中，利用继承可以节省大量重复的对象的属性和方法的定义，所以基于原型，达到曲线继承。2. 若直接修改原型的指向，如果构造函数需要接收值他们的参数是一致的，那么初始化得到的对象属性值都相同，想要修改只能通过实例对象的原型来修改，比较麻烦。 若使用借用构造函数的方式来完成初始化，那么初始化的实例对象无...原创 2018-11-18 14:45:31 · 729 阅读 · 0 评论 -
node.js创建服务器，并解析不同数据
要点：1.通过引入核心模块，来进行文件的读取和服务器的创建，并调用相应模块的API，进行想要的操作。2.不同的文件类型进行不同的解析，主要通过Content-Type（多用途互联网邮件拓展）进行不同的定义，如html对应text/html，注意编码方式的声明，服务器默认是utf-8，但是浏览器编码方式是跟当前操作系统是一致的，win10中文操作系统是gbk编码方式，所以会造成乱码。3....原创 2018-11-29 22:18:56 · 190 阅读 · 0 评论 -
Apache24+PHP7 win10 64位 vs2014环境配置
Apache和PHP各种版本弄的头疼，先将运行成功的文件分享一下，同时记录一下环境的搭建1.两个免安装版本的下载，前面写了Apache的配置，这里写PHP配置，节省时间 。https://pan.baidu.com/s/1MMq1iazhlee4IC0CXf4TEg 提取码：p8v7 2.想要执行php文件，首先打开的网站的默认文档需要有php类型的文件，并且命名注意=，这里in...原创 2018-11-24 19:41:24 · 261 阅读 · 0 评论 -
Apache多个虚拟主机的配置
1.以后操作用到很多虚拟主机的操作，将独立的配置文件打开，并设置虚拟主机的配置 2.将host文件中的域名修改为回环地址127.0.0.1，注意将修改工具如sublime先用管理员权限进行打开，再修改文件不然无法保存。 3.完成一个虚拟主机配置4.配置第二个虚拟主机，同样将host的域名解析改为回环地址，打开域名后出现禁止访问，因为文件读取权限没有打开，而上面的...原创 2018-11-24 09:50:34 · 1221 阅读 · 0 评论 -
Apache环境配置
1.官网下载免安装版本，对应自己的vs版本 官网：点击链接 2.下载完成之后，将压缩文件下的目录安装到c盘下新建名为wamp文件夹下3.用管理员打开cmd窗口，输入这句话，将文件名字修改成功了，但是提示文件位置不对4.将Apache24下面的conf的这个文件的这个两个位置改为自己Apache24文件夹的位置5.再次输入，能打开但是有个提示，创建一个服务...原创 2018-11-23 15:38:43 · 3117 阅读 · 0 评论 -
css布局—直接自定义栅格系统，自己添加小型bootstrap样式
要点：1.这个实例中的布局，通过自定义的栅格系统，模仿bootstrap库，从而做到自己能有自己的库样式思路。2.像background这个属性，有许多的子属性，要是想要连写的话，如背景图片和平铺，只需写image即可，不需要也不能写成background-image。效果：代码：<!DOCTYPE html><html lang="en">&...原创 2018-11-16 17:03:40 · 1267 阅读 · 0 评论 -
CSS3案例黑马程序员—学成在线
要点：1.直接只用<header><nav>等CSS3新标签2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小3.过渡效果和动画效果的联合使用，不考虑兼容base.css*{ box-sizing: border-box; /*全部定义为内减式盒子模型*/}a{ text-decoration: none;}bod...原创 2018-10-31 15:17:53 · 9216 阅读 · 11 评论 -
3D动画案例
要点：1.视距越大，看到的效果越小，跟小孔成像同样的原理2.给父元素添加透视，会作用于子元素3.backface-visibility设置背向浏览器是否可见html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-10-31 08:40:38 · 503 阅读 · 0 评论 -
JS实现贪吃蛇—重点理解原型和自调用函数的沙箱
要点：1.通过为构造函数的原型对象添加属性或者方法，可以实现数据共享，节省内存空间，不需要每次重新定义。如果构造函数中的属性或者方法跟原型对象中冲突，以构造函数为准，因为原型对象就是建立在构造函数的基础之上的。注意浏览器中使用的实例对象中的原型__proto__(两个英文状态下的下划线)和构造函数中的原型prototype结构是一样的，但是前一种是通过构造函数的原型创建的，指向后一种，并且...原创 2018-11-17 21:30:25 · 439 阅读 · 0 评论 -
网页高清放大镜—理解大小图片的比例
要点：1.小图的遮挡层的位置确定，注意抵消margin的值，并且注意盒子模型的位置都是左上角点为原点，注意减去本身宽高的一半，才能将其居中对齐。2.注意遮挡层的取值范围，不能超过小图的图片范围。3.大图移动的距离 = 遮挡层移动的距离 * 大图和小图的最大移动距离的比例 ，方向跟遮挡层移动方向相反，所以添加一个 “-”号代码：<!DOCTYPE html>&...原创 2018-11-15 20:05:05 · 1037 阅读 · 0 评论 -
拖拽登陆框案例—client区域和offset系列
要点：1.鼠标点击拖动时，获取点击时候的位置，距离登陆框的上边框和左边框的距离（X和Y）2.鼠标移动的时候，将登陆框的位置设置为可视距离（clientLeft）- 减去上面获取的X或Y = 登陆框的位置3.鼠标弹起时，移除鼠标移动事件<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-11-14 20:33:03 · 329 阅读 · 0 评论 -
旋转木马案例—数组和动画的联合应用
要点：1.这个例子中的数组操作的四个方法，都是在进行运算之后，都有返回值，而这些返回值有所不同。执行删除相关的操作时，返回的是被删除的值，而追加到数组对象中，返回的是被操作后的整个数组。2.关键点是，在点击切换按钮后，原来图片数组对应的图片发生了改变，但是通过js获取到的多个li标签组成的伪数组的每个li的样式并没有改变，需要重新将样式改变一下。代码：<!DOCTYPE h...原创 2018-11-13 19:31:48 · 404 阅读 · 0 评论 -
图片跟着鼠标移动—理解page系列、client系列、scroll系列和window.event和window.e的兼容问题
要点：1.这个例子中，如果可以直接pageX或者pageY就可以直接写一步操作即可，因为IE8不支持，通过 pageX (页面的具体横坐标位置)= scrollLeft（卷曲的横坐标距离） + clientX（可视区域横轴距离）这样曲线兼容 。2.在JS高级里面，有window.event来获取函数对象，而在谷歌火狐直接可以通过传参返回，以后再详细说明。3.这个例子中，是通过对象内部调...原创 2018-11-13 19:16:54 · 317 阅读 · 0 评论 -
通过计算样式封装动画实例—多条动画结合，多个参数变化的动画
要点：1.原来想写animate()的多态形式的，写到一半想起来，js不需要在声明变量时就声明数据类型，无法完成多态的性质，可以通过曲线方法完成多态效果，以后再说。2.getComputerStyle计算样式属性，可以将setoff系列没能获取到的样式属性获取出来，getComputerStyle能返回所调用对象的所有样式键值对，形成一个样式对象3.这个例子中有原来可以改变一个参数，到...原创 2018-11-11 19:45:59 · 192 阅读 · 0 评论 -
筋斗云案例—理解动画和offsetLeft属性
要点：1.为通过循环遍历的方式，为同组的每一个对象定义相同的事件时，不要每次都通过临时创建一个匿名事件，来将对象绑定事件，而是通过调用命名函数的方式2.这个例子的lastPosition注意定义一个全局变量，offsetLeft的距离是所调用的对象，距离浏览器窗口的左边的距离，不是固定窗口代码：<!DOCTYPE html><html lang="en">...原创 2018-11-10 10:19:50 · 901 阅读 · 0 评论 -
电商的广告切换—三种切换效果，动画的使用。
要点：1.动画的封装，前面已经写了一个动画函数的封装，这是应用。这个例子中全部都是用一个封装的动画函数做成的，所以在第一张点击左边按钮时切换到最后一张，很突兀，同时如果切换的图片不是相邻的图片动画时间很长，这些都可以另外加动画解决。同时，从这个例子，对函数实际操作理解又深了一层。2.定时器的使用，定时器的定义方式有两种，清理方式最好跟定义的方式相同。一般来说，定时器清除之后，还会定义同名定...原创 2018-11-09 21:30:07 · 1024 阅读 · 0 评论 -
来回动画的封装—练习定时器和函数封装的思想
要点：1.定时器原本只打开一个，在不做任何处理的时候，如果在上一个定时器执行完成之前快速点击按钮。定时器的所执行的函数的速度，会不断的加快 ，自己臆测的原因是，多线程，同时打开多个定时器，不会等到上一个处理完成之后来处理下一个，而是类似于多线程的原理，共同的处理定时器绑定的处理函数。2.理解封装思想，这个函数，原来只是处理单一的功能，而封装之后，将需要的不同的对象接口暴露出来，功能模块代码...原创 2018-11-08 14:59:05 · 253 阅读 · 0 评论 -
搜索匹配显示实例—主要keyup事件和数组的理解
要点：1.兼容代码的使用，这里独立遇到的第一个兼容问题，并解决，有点开心。以前，自己写兼容代码，都是根据返回值跟 "undefined"比较，这里直接跟 "string"比较类型，速度更快，用这个方法。2.空数组的创建，可以作为容器，也就就是接下来放入div中的数据。最后调试出现的问题是，如果输入多个匹配的值时，删除最后一个，前面的还符合数组中的元素，又会添加到临时创建的div中，造成冗余。...原创 2018-11-06 09:35:54 · 341 阅读 · 0 评论 -
为同一个元素，添加相同名字的处理函数的不同绑定事件—通过switch语法
要点：1.switch语法跟break语法结合使用，才能达到效果，满足条件后，执行出路函数，然后跳出循环。2.这里的.type是返回的是事件的绑定类型，如click。区别与typeof 判断的是值的类型，如 "undefined"。代码：<!DOCTYPE html><html lang="en"><head> <meta char...原创 2018-11-06 09:25:23 · 358 阅读 · 0 评论 -
对同一个对象绑定多个响应事件并都执行，和此例子的兼容代码
要点：1.因为 onclick=" " 添加的元素响应事件，先添加的事件，会被后来添加的事件层叠掉，只能执行最后一个响应的事件所以要用到事件监听addElementLitener()来绑定多个处理函数，而因为兼容性的问题需要兼容代码。2.在IE8中，addElementLitener()这个函数不被兼容，而使用attachEvent()。但是，这个又不被谷歌，火狐兼容，所以需要写兼容...原创 2018-11-04 21:37:24 · 1206 阅读 · 0 评论 -
元素的创建三种方式案例—动态创建列表
要点：1.通过document.write()创建，如果是页面加载完成再执行这种方式创建元素对象，会将原来页面上的内容全部清除掉。如果在页面加载的过程中，则不会出现这种状况，但是也没有什么意义2.通过.innerHTML会重新赋值，如果原来节点有内容会被层叠掉，为了创建有文本内容元素时候用的多3.通过.createElement()创建元素，并返回元素对象，这样做可以实现布局元素，可以...原创 2018-11-04 16:46:30 · 457 阅读 · 0 评论 -
通过节点操作，实现隔行变色效果
要点：1.通过.childNodes获取的节点，有标签、文本（包括空文本）、和属性都要算在内。我们要的只是元素类型为标签，通过nodeType判断元素的类型，标签返回值是1，属性返回的是2，文本返回的是32.通过nodeName返回的节点名字，如果是标签节点，返回标签类型的大写名字如LI（<li>），如果是属性节点返回的是属性的小写，文本节点返回#text3.通过nodeV...原创 2018-11-04 13:31:33 · 893 阅读 · 0 评论 -
光标聚焦事件—搜索框实例
要点：1. .onfocus事件是光标聚集响应的事件 .onblur是焦点失去事件2. 注意光标聚焦时，将提示内容去掉，并将字体的前景色改为黑色，和用户输入颜色上作区分，在改回提示内容时，将前景色改为灰色html和内置的js代码：<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-11-02 20:58:47 · 3801 阅读 · 0 评论 -
通过自定义属性，排他的原理实现列表的表头和对应内容的切换
要点：1.自定义属性，可以用来存放类似于这个案例中索引的不是自带的属性能满足的，通过setAttribute（"自定义属性名"，值）来自定义一个属性，切记不可直接通过this.自定义属性来设定值 同时，获取和移除自定义属性，分别是getAttribute（）和removeAttribute（）来实现，removeAttribute（）可以将属性彻底删除掉，自带的属性也可以彻底删除，而不...原创 2018-11-02 20:48:40 · 244 阅读 · 0 评论 -
div控制显示与隐藏状态的两种方式
要点：1.本人原来用的是IDEA编译器，因为什么环境都配置好了，代码提示功能也好，界面也优美，可惜什么都好导致太庞大。本人在自习室敲代码，笔记本电池管不了一上午，后用sublime，真轻便哈哈。但是里面的插件的代码其实，应该是只收录了js的关键字，然后给的提示，并不会筛选。这里，因为前段时间写网页布局，用了很多浮动，有个overflo:hidden经常用，这里写了display:hidden，...原创 2018-11-02 10:05:49 · 9044 阅读 · 0 评论 -
JS排他功能—一个选中，其余的都变化
要点：1.input添加点击的响应事件，用的for循环，是在加载页面的时候执行的，而onclick事件后面的的for循环，是需要将点击之后，响应这个操作之后执行的。2.通过getElementByTagName()选择出来的标签元素，不管是一个还是多个都是存放在伪元素中的。所以可以通过遍历来获取准确的标签元素，而不可以使用 . 语法来改变对象的属性值（就算只有这一个对象）。html和内...原创 2018-11-01 20:52:40 · 3581 阅读 · 0 评论