- 博客(47)
- 收藏
- 关注
RSS订阅原创 保安日记番外篇：JS中的 void 0
众所周知，Undefined是JS语言中的7大基本类型之一，表示未定义，它的值只有一个，就是undefined。任何变量在赋值前都是undefined。而在一些框架源码中，会出现一些这样的表达式：if (context === void 0) return func; function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } if (array == null) re
2021-01-08 16:40:30
273
1
原创 保安日记：React框架学习第五篇之redux
redux一个独立专门用于做状态管理的JS库作用: 集中式管理react应用中多个组件共享的状态基础概念参考阮一峰的文档传送门：教程一：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html教程二：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html教程三：http://ww
2020-11-15 16:40:59
185
原创 保安日记：React框架学习第四篇之react-router
1. 理解react-routerreact的一个插件库专门用来实现一个SPA应用基于react的项目基本都会用到此库react-router: 实现了路由的核心功能react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能2. 几个重要问题1). SPA应用单页Web应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面, 本身也不会向服务器发请求当点击链接时, 只会做
2020-11-15 16:39:12
253
原创 保安日记：Webpack（一）
Webpack官方文档：https://www.webpackjs.com/concepts/全局安装webpackcnpm install webpack webpack-cli -g打包初体验mkdir demo1cd demo1mkdir srcnpm init -y //-y会有一个默认的配置，可以快速生成一个package.jsoncnpm install webpack webpack-cli --save-dev //安装webpack的依赖//前期准备1、新建一个
2020-11-06 23:34:13
240
原创 保安日记：React框架学习第三篇之生命周期
生命周期生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期。在这生命周期中，我们有许多可以调用的事件，也俗称为钩子函数生命周期的3个状态：Mounting(挂载):将组件插入到DOM中Updating:将数据更新到DOM中Unmounting(卸载):将组件移除DOM中生命周期中的钩子函数（方法，事件）componentWillMount :组件将要渲染，AJAX，添加动画前的类componentDidMount:组件渲染完毕,添加动画componentWillRece
2020-11-06 15:53:10
126
原创 保安日记：React框架学习第二篇
Props父传递给子组件数据，单向流动，不能子传递给父。props的传值，可以是任意的类型。Props可以设置默认值HelloMessage.defaultProps = { name:”老陈”，msg：“helloworld” }**注意：**props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state,从而达到传递数据给父元素。父传子数据传递案例class ParentNode extends React.Component{ constructo
2020-11-05 19:10:35
179
原创 保安日记：React框架学习第一篇
初识reactReact 构建用户界面的JavaScript库，主要用于构建UI界面特点：1、声明式的设计2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。3、灵活，跟其他库灵活搭配使用。4、JSX，俗称JS里面写HTML，JavaScript语法的扩展。5、组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react6、单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据React Jsx语法JSX表达式1、由HTML元素构成2、中间如果
2020-11-04 14:19:30
158
原创 保安日记：JavaScript学习第二十二篇之ES6的内置对象扩展
ES6的内置对象扩展Array 的扩展方法扩展运算符(展开语法) …扩展运算符可以将数组或者对象转为用逗号分隔的参数序列<body> <div>1</div> <div>4</div> <div>3</div> <div>6</div> <div>2</div> <script type="text/javascript">// 扩展运算符可以
2020-11-01 18:55:13
134
原创 保安日记：JavaScript学习第二十一篇之ES6新增语法let、const....
ES6新增语法let----ES6中新增的用于声明变量的关键字let声明的变量只在所处于的块级作用域有效（防止内层变量覆盖外层变量）不存在变量提升，必须声明暂时性死区<script type="text/javascript">/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */ if (true) { let num = 100; var abc = 200; }
2020-11-01 15:45:31
107
原创 保安日记：JavaScript学习第二十篇之javascript正则表达式
正则表达式(Regular Expression)正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。创建正则表达式----正则表达式里面不需要加引号，不论数字型还是字符串型<script> // 1. 利用 RegExp对象来创建 正则表达式 var regexp =
2020-10-31 23:52:35
142
原创 保安日记：JavaScript学习第十九篇之闭包、递归
高阶函数高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出闭包(closure)----有权访问另一个函数作用域中变量的函数 <script> // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num function fn() { var num = 10; function fun() { console.log
2020-10-31 16:51:17
151
原创 保安日记：JavaScript学习第十八篇之Javascrip函数进阶
函数进阶定义方式1.自定义函数 function fn() {};2.函数表达式（匿名函数） var fun = function() {};3.利用 new Function(‘参数1’,‘参数2’,‘函数体’);----所有函数都是 Function 的实例(对象)var fun = new Function('a','b','console.log(a + b)');fun(1,2);调用方式1. 普通函数 function fn() {
2020-10-31 14:23:40
137
原创 保安日记：JavaScript学习第十七篇之ES5中的新增方法
ES5中的新增方法数组方法forEach 遍历数组 <script> var arr = [1, 2, 3]; arr.forEach(function (value, index, array) { console.log("每个数组元素" + value); console.log("每个数组元素的索引号" + index); console.log("数组本身" + array); }); &
2020-10-31 10:49:30
169
原创 保安日记：JavaScript学习第十六篇之Javascrip 面向对象--原型
原型对象给对象加方法，可以理解为css中的class–给元素加样式Array.prototype.sum = function () {// 可以给系统的类添加原型方法}通常都是用构造函数加属性，用原型加方法<script> //----构造函数 function CreatePerson(name, qq) { this.name = name; this.qq = qq; } //----原型 C
2020-10-30 21:46:08
127
原创 保安日记：JavaScript学习第十五篇之Javascrip 面向对象
Javascrip 面向对象面向过程编程POP(Process-oriented programming)面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。面向对象编程OOP(Object Oriented Programming)面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。ES6 中的类和对象对象是由属性和方法组成的∶属性∶事物的特征 (常用名词）方法∶事物的行为 (常用动词）类与对象的关系类—模子对象—成品var arr = new Array（1,
2020-10-29 19:59:27
179
原创 保安日记：番外篇之网络协议
网络协议网络层 IP（网络之间互连的协议）—lnternet Protocol相当于网络中的一个节点，类似于地址，我们称之为IP地址同一个网络中，IP地址具有唯一性IPv4网络使用32位地址，以点分十进制表示，如192.168.0.1127.0.0.1: 本机192.168 .* .* 家庭路由器10 .* .* .*:内部局域网其他:外部广域网lPv6地址的128位（16个字节)写成8个16位的无符号整数，每个整数用四个十六进制位表示，这些数之间用冒号(∶）分开例如︰3ffe:3
2020-10-29 13:16:09
140
原创 保安日记：番外篇之软件测试（二）
开发模型----瀑布模型：优点:开发阶段，各个阶段比较清晰;强调早期计划及需求调查，适合稳定需求的产品开发;以改良:每个阶段都可以融入小的迭代工作!开发模型----快速原型模型实现一个基本原型，让用户对原型进行评价，逐步调整，使其满足用户最终需求;.优点:适合不能确定需求的软件;缺点:不适合开发大型系统。测试模型一、 V模型测试模型二、 W模型测试模型三、 H模型...
2020-10-24 12:34:21
195
原创 保安日记：番外篇之软件测试（一）
软件测试基本介绍一、软件测试定义通过手工或者工具对 被测对象 进行测试操作，从而验证实际结与预期结果之间是否存在差异。二、软件测试的作用通过测试工作可以发现并修复软件当中存在的缺陷，从而提高用户对产品的使用信心。测试可以记录软件运行过程中产生的一些数据.从而为决策提供数据支持。测试可以降低同类型产品开发遇到问题的风险。三、测试原则:所谓的测试原则指的就是我们在执行测试工作时必须要遵守的一些规则。1．测试证明软件存在缺陷: 无论执行什么样的测试操作都保能证明当前软件是有缺陷的。2．不能
2020-10-23 15:13:33
459
原创 保安日记：JavaScript学习第十四篇之移动端特效触屏事件
触屏事件移动端浏览器兼容性较好，我们不需要考虑以前S的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件），Android和IOS都有。==touch对象代表一个触摸点。==触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔）对屏幕或者触控板操作。常见的触屏事件如下:触摸事件对象(TouchEvent )TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触
2020-10-21 22:37:31
253
1
原创 保安日记：JavaScript学习第十三篇之动画函数封装
动画函数封装动画实现原理：核心原理:通过定时器setInterval() 不断移动盒子位置实现步骤：获得盒子当前位置让盒子在当前位置加上一个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.left动画函数简单封装注意函数需要传递2个参数，动画对象、移动到的距离 // 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) {
2020-10-20 22:03:09
131
原创 保安日记：JavaScript学习第十二篇之PC端网页特效offset、client、scroll系列
PC端网页特效元素偏移量offset系列offset翻译过来就是偏移量获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意:返回的数值都不带单位常用属性<body> <div class="father"> <div class="son"></div> </div> <div class="w"></div> <script>
2020-10-20 20:12:30
145
原创 保安日记：JavaScript学习第十一篇之BOM
BOM什么是 BOMBOM ( Browser Object Model）)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。BOM的构成BOM比DOM更大window对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口。
2020-10-20 13:49:50
300
1
原创 保安日记：JavaScript学习第十篇之事件高级
事件高级注册事件传统注册方式 (利用on开头的事件)：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式（w3c标准推荐方式）：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行addEventListener()是一个方法，有兼容性问题，IE9之前可使用attachEvent()或传统注册方式代替addEventListener()eventTarget.addEventListener(type，listener[,
2020-10-19 14:28:59
427
原创 保安日记：JavaScript学习第九篇之DOM基础之节点操作
节点操作节点概述一般地，节点至少拥有nodeType（节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。在实际开发中，节点操作主要操作的是元素节点元素节点nodeType为 1属性节点nodeType为 2文本节点nodeType为 3(文本节点包含文字、空格、换行等）节点层级利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系1.父级节点node.parentNodeparentNode属性可返回某节点的父节点，注意是最近的一
2020-10-18 19:03:21
294
原创 保安日记：JavaScript学习第八篇之DOM基础案例练习
以下都是案例百度换肤案例（点击哪种图片更换此背景） <style> li { list-style: none; } li img { float: left; width: 100px; margin-left: 3px; margin-top: 5px; margin-bottom: 5px; } .box { mar
2020-10-17 23:42:11
233
1
原创 保安日记：JavaScript学习第七篇之DOM基础
API和WebAPIAPI是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。DOM文档对象模型(Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。DOM树DOM在开发中主要用来操作元素获取元素方法根据ID获取var elem
2020-10-17 23:41:27
287
1
原创 保安日记：JavaScript学习第六篇之对象、内置函数
JavaScript 函数作用域es6之前：全局作用域 - 全局变量 （如果在函数内部没有声明的变量 也是全局变量）局部作用域 -局部变量（函数的形参也是局部变量）function fn() { var num1 = 1; // 局部变量 函数内部使用 num2 = 2; //全局变量 全局可使用}es6新增块级作用域：{}，if{}、for{} 大括号里面的变量外部不能使用区别：全局变量全局使用，只有在浏览器关闭才会被销毁，比较占内存局部变量只有所在的代码被执行才会被
2020-10-16 16:04:47
190
原创 保安日记：JavaScript学习第五篇之数组、函数
JavaScript 数组创建数组 <script> var 数组名 = new Array(); var 数组名 = []; //[] 为数组字面量 </script>新增数组元素修改数组索引追加到新数组newArr[newArr.length] = arr[i]; <script> var arr = [2, 3, 6, 1, 7]; for (i = 0; i <= arr.l
2020-10-15 12:15:29
167
原创 保安日记：JavaScript学习第四篇之流程控制
JavaScript 流程控制三元表达式语法结构//条件表达式?表达式1 :表达式2var num = 10;var result = num > 5 ? '是的' : '不是的';//我们知道表达式是有返回值的//如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值switch： 针对变量设置一系列的特定值的选项，变量与case里的值要全等switch语句与 if else if语句区别：switch通常处理 比较确定值， if常用于判断范围sw
2020-10-14 16:48:21
181
原创 保安日记：JavaScript学习第三篇之运算符
JavaScript 运算符运算符( operator ）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。算数运算符：用于执行两个变量或值的算术运算 + - * / %console.log(0.1 + 0.2); // 0.30000000000004注意：浮点数 算术运算会有问题，因为本身小数已经很小 还要把小数转换成二进制再进行算术运算 后面有其他方法解决 因此也不能直接拿浮点数进行比较是否相等前置递增运算符(++i)先加 1，再返回值后置递增运算符(
2020-10-13 15:01:12
346
原创 保安日记：JavaScript学习第二篇之变量、数据类型
JavaScript基础JS变量变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改本质：变量是程序在内存中申请的一块用来存放数据的空间使用：声明变量 var name; （variable）赋值 name = nike;初始化：声明一个变量并赋值 <script> var name = 'nike' ; console.log(name); </script>变量的语法扩展1.更新变量一个变量被重新复赋
2020-10-12 22:31:04
175
原创 保安日记：JavaScript学习第一篇之初识JS
JavaScript篇初识 JavaScriptJavaScript是一种运行在客户端的脚本语言脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行JavaScript作用：表单动态校验（密码强度检测）( JS产生最初的目的)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)HTML/CSS/JavaScript关系标记语言HTML决定网页的结构和内容CSS决定
2020-10-12 11:56:09
149
原创 保安日记：前端学习第十四篇之移动端布局-响应式布局、Bootstrap
响应式开发响应式开发原理：通过使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时我们的响应式尺寸划分超小屏幕（手机，小于768px）∶设置宽度为100%小屏幕（平板，大于等于768px)∶设置宽度为750px中等屏幕（桌面显示器，大于等于99
2020-10-10 23:28:23
255
原创 保安日记：前端学习第十三篇之移动端布局rem布局
移动端布局rem适配布局流式布局和flex布局都不能控制页面字体随着页面变化而变化rem基础em单位em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。特点：em的值并不是固定的；em会继承父级元素的字体大小rem单位rem (root em)是一个相对单位，类似于em , em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。rem的优点就是可以通过修改HTML里面的文字大小来改变页面中元
2020-10-10 10:15:50
228
原创 保安日记：前端学习第十二篇之移动端布局-流式布局、flex布局
移动端常见布局方案：单独制作移动端页面（主流）1.流式布局（百分比布局）2.flex弹性布局（重点）3.less+rem+媒体查询布局4.混合布局响应式页面兼容PC移动端（其次）1.媒体查询2.boorstrap单独制作移动端页面（主流）：1、流式布局（百分比布局）：流式布局也称为非固定像素布局，通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。防止无限拉伸 内容显示不佳 设定一个最大最小宽度max-width 最大宽度min-wid
2020-10-08 23:39:57
455
原创 保安日记：前端学习第十一篇之移动端基础
前端学习第十一篇移动端基础移动端浏览器现状：目前主流移动端浏览器都是基于webkit修改过来的内核，因此兼容移动端主流浏览器，处理webkit内核浏览器就行了移动端调试方法：Chrome Devtools（谷歌浏览器）的模拟手机调试 F12搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问视口(viewport)：是浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口和理想视口布局视口 layout viewport一般移动
2020-10-08 11:25:53
244
原创 保安日记：前端学习第十篇之3D转换
前端学习第十篇3D转换三维坐标系： 即立体空间由三个轴构成x y zX轴：水平向右 右边正值，左边负值Y轴：垂直向下 下边正值，上边负值Z轴：垂直屏幕 向外正值，往里负值 （视觉上看越近就越大）3D移动 translate3d： transform: translateX(100px) translateY(100px) translateZ(100px); /*3d移动简写 transform：translate3d（x，y，z）*/ tr
2020-10-07 16:14:04
475
2
原创 保安日记：前端学习第九篇之CSS3动画
前端学习第九篇web服务器服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览;可以放置数据文件，让全世界下载。服务器根据在网络位置中的不同可以分为本地服务器和远程服务器本地服务器： 将自己电脑设置为本地服务器，这样同一个局域网内的用
2020-10-06 14:38:46
209
1
原创 保安日记：前端学习第八篇之HTML5
前端第八天HTML5新特性HTML5的新增特性主要是增加了一些新的标签、新的表单以及表单属性等。这些新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持新增语义化标签：< header >:头部标签< nav >:导航标签< article>:内容标签< section >:定义文档某个区域< aside >:侧边栏标签< footer >:尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标
2020-09-29 21:57:57
298
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人