自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端工程师学习记录

记录我学习前端知识的历程

  • 博客(38)
  • 收藏
  • 关注

原创 坚持周总结系列第十二周(2020.7.12)

TypeScript强类型弱类型类型安全强类型 弱类型强类型有类型上的约束,不允许任意的隐式类型转换优势:错误更早暴露代码智能、编码准备重构更加牢靠减少不必要的类型判断弱类型没有类型上的约束 允许任意的隐式类型转换类型检查静态类型 动态类型JS 类型系统JS没有编译环节,没有类型检测,只有在运行的时候,才会检测错误JS属于弱类型动态类型语言let obj={}console.log(obj.fn())// 在语法上可行,但是在

2020-07-12 21:18:22 185

原创 坚持周总结系列第十一周(ES6总结)

ES6总结摘要新的标准规范ECMAScript2015是js的一种新的标准规范,就是对js的写法上提出了新的语法要求和写法格式。ECMAScript和js的关系ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。javascript 是 netscape创 造的并交给了国际标准化组织 ECMA,之所以不叫做 JavaScript 由于商标的问题,java 是 sun 公司的商标,根据 授权协议只有 Netscape 公司可以合法使用 JavaScrip

2020-07-05 22:11:23 192

原创 坚持周总结系列第十周 (JavaScript模块一)

JavaScript模块一函数式编程什么是函数式编程函数式编程,FP是编程范式之一,我们常听说的编程范式还有面向过程编程、面向对象编程。面向对象编程的思维方式:把现实世界中的事物抽象成程序世界中的类和对象,通过封装、继承和多态来演示事物事件的联系函数式编程的思维方式:把下现实世界的事物和事物之间的联系抽象到程序世界(对运算过程进行抽象)程序的本质:根据输入通过某种运算获得相应的输出,程序开发过程中会涉及很多有输入和输出的函数x --> f(联系、映射)–> y,y = f(x)

2020-06-21 10:58:31 167

原创 坚持周总结系列第九周Vue源码学习(二)

Vue源码学习(二)深入响应式原理前端开发最重要的2个工作,一个是把数据渲染到页面,另一个是处理用户交互。响应式对象Object.definePropertyObject.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。Object.definProperty(obj,prop,descriptor)// obj是要在其上定义属性的对象// prop是要定义或者修改的属性的名称// descriptor是将被定义或者修改的属性描

2020-06-14 18:52:39 187

原创 坚持周总结系列第八周(2020.6.6)Vue源码学习(一)

Vue源码学习(一)数据驱动vue.js一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们的视图修改,不会直接操作DOM,而是通过修改数据。它相比我们传统的前端开发,如使用jQuery等前端库直接修改DOM,大大简化了代码量。特别是复杂交互的时候,只关心数据的修改会让代码逻辑变得非常清晰,因为DOM变成了数据映射,我们所有的逻辑都是对数据的修改,而不直接操作DOM,这样的代码也比较利于维护。new Vue发生了什么?new关键字会实例化一个对象,而Vue本质是一个用functi

2020-06-07 21:35:47 164

原创 坚持周总结系列第七周(2020.5.29) JS设计模式

JS设计模式单例模式单例模式:保证一个类仅有一个实例,并提供访问他的全局访问点。var getSingle=function(fn){ var result return function(){ return result || (result = fn.apply(this,arguments)) }}策略模式策略模式:定义一系列的算法,把它们一个个封装起来,并且使他们可以互相替换。var strategies={ 'S':function(

2020-05-30 07:39:59 140

原创 坚持周总结系列第六周(2020.5.24)

React全家桶Redux创建storeimport { createStore } from 'redux'const counterReducer = (state = 0, action) => { switch (action.type) { case 'add': return state + 1 case 'minus': return state - 1 default: return state }}

2020-05-24 21:51:38 119

原创 坚持周总结系列第五周(react)

ReactReact项目起步项目创建安装官方脚手架:npm install -g create-react-app创建项目:create-react-app react-study启动项目:npm start查看项目配置:npm run eject会弹出项目真面目,项目会多出两个目录configenv.js处理.env环境变量配置文件paths.js提供各种路径webpack.config.js webpack配置文件webpackDevserver.config.

2020-05-17 20:53:14 211

原创 坚持周总结系列第四周(文件上传)

坚持周总结系列第四周(2020.5.5)文件上传文件类型判断通过文件二进制流来判断文件类型,防止篡改文件后缀,影响判断blobToString(blob){ return new Promise(resolve=>{ const reader = new FileReader() reader.onload = function(){ ...

2020-05-05 10:46:21 172

原创 坚持周总结系列第三周(Vue)

坚持周总结系列第三周(2020.4.30)VueVue组件化常用技术组件传值、通信父组件给子组件传值属性props// childprops:{msg:String}// partent<Child msg='hello world'></Child>refs引用// parent<Child ref='child'></...

2020-05-05 10:45:08 194

原创 坚持周总结系列第二周(JavaScript重学)

坚持周总结系列第一周(2020.4.18)JavaScript重学JavaScript类型JavaScript语言规定了7中语言类型:UndefinedNullBooleanStringNumberSymbolObjectUndefined、NullUndefined 类型表示未定义,它的类型只有一个值,就是 undefined。任何变量在赋值前是 Undefined...

2020-04-25 15:27:52 374

原创 坚持周总结系列第一周(webpack学习)

坚持周总结系列第一周(2020.4.18)webpack学习整体认识webpack是一个Javascript静态模块打包器,使用webpack打包时,它会递归的构建一个依赖关系图,其中包含程序需要的每个模块,然后将所有这些模块打包成一个或者多个bundle。入口配置入口就是整个程序的入口文件所在路径,有两种配置形式。单文件入口{ entry:'./src/index.js'...

2020-04-18 09:20:10 193

原创 JS学习第二十天总结

1.通过style方式获取的样式只能拿到行内样式;拿到的是字符串数据类型,带px;简单的封装(使用[]可以传变量);存在问题:只能拿到行内样式,但是我们一般是不使用行内样式的。function getAttr(attr){ console.log(box.style[attr]);}getAttr("left");2.currentStyle当前样式/window.g...

2019-04-15 22:25:23 192

原创 JS学习第十九天总结

1.offsetoffsetWidth、offsetHeight:100;obj.style.height、obj.style.width:“100px”;只能拿到行内样式。offsetLeft、offsetTop;找离自己最近的带有定位的父元素,如果没有就找body。offsetParent;找离自己最近的带有定位的父元素可读属性、可读写属性2.event:事件对象存在兼容问...

2019-04-12 21:05:02 122

原创 JS学习第十八天总结

1.使用sort方法进行数组排序<script type="text/javascript"> var arr=[1,2,3,2,1,4,55,2,111,42,2]; var newArr=arr.sort(function(a,b){ return a-b;//升序排列,需要降序排列,返回b-a就行了 }); newArr.forEach(function(v,i){...

2019-04-11 22:04:56 168

原创 JS学习第十六天总结

1.昨天复习onmousedown:鼠标点下onmouseup:鼠标抬起2.JsonJavaScript Object Notation JS对象表示法它不是一门语言,只是JS语言的一个应用,前后台数据交互使用。对象表示法:k:v (key,value),键值对对象形式:{};var jsonPerson={name:“janes”,age:23,height:198...

2019-04-09 21:47:39 149

原创 JS学习第十五天总结

1.复习匀速运动案例匀速:num++,步长一致缓动公式leader=leader+(target-leader)/10;缓动动画,先快后慢要配合定时器使用offset第一组:offsetWidth、offsetHeight 包含内容区、内边距、边框的累计尺寸。第二组:offsetLeft、offsetTop 找离他最近的、带有定位的父元素,不包含边框。第三个...

2019-04-08 22:53:01 151

原创 JS学习第三周总结

1.日期对象内置对象,JS中有很多内置对象 Math Array Date Vuevar date=new Date();// 调用的是系统时间,如果运行程序的电脑时间改了,获取到的时间也会跟着变getTime,获得到的毫秒数1秒等于1000毫秒从1970年至今的毫秒数2038年问题getFullYear,获取年份 当前年份getMonth,获取月份 0-11月getDa...

2019-04-07 19:51:55 302

原创 JS学习第十四天总结

1.复习回顾让一个盒子向右运动相对定位:相对于元素自身所在位置。缓动公式:leader=leader+(target-leader)/10;无缝滚动图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &lt...

2019-04-07 19:23:31 173

原创 JS学习第十二天总结

1.昨天内容回顾内置对象日期对象 Date();必须通过new才能使用get.time(); 获取的是从1970年1月1日开始到现在的毫秒数年月日时分秒、星期的获取案例练习:简单的日历 年月日星期的获取数字时钟 时分秒的获取倒计时 距离未来某个时间还有多少天多少小时多少分钟多少秒钟表案例 用到了定时器 CSS3中的旋转 度数计算定时器setInterval(...

2019-04-02 21:24:55 136

原创 JS学习第十一天总结

1.日期对象内置对象,JS中有很多内置对象 Math Array Date Vuevar date=new Date();// 调用的是系统时间,如果运行程序的电脑时间改了,获取到的时间也会跟着变getTime,获得到的毫秒数1秒等于1000毫秒从1970年至今的毫秒数2038年问题getFullYear,获取年份 当前年份getMonth,获取月份 0-11月getDa...

2019-04-01 21:28:19 118

原创 JS学习第二周总结

1.上周内容回顾多个script标签,一个报错,另一个还是会继续执行。多个window.onload入口函数,后面的会覆盖前面的,最终只会执行一个。函数:可以重复使用的代码块的封装。函数三种创建方式:函数声明式、函数表达式、Function——构造函数。变量声明提升:JS执行前会预解析,将变量声明提升到最前面。2.函数参数注意点一:function fun(a,b,c){...

2019-03-30 09:30:18 351

原创 JS学习第十天总结

1.复习回顾DOM文档对象模型(Document Object Model)节点,整个文档都是节点。元素、属性、文本、注释都是节点。节点关系,父节点parentNode;子节点first/lastChild(IE6、7、8专用)、firstElementChild、lastElementChild;next/previousSibling(IE6、7、8专用)、nextElementSib...

2019-03-29 18:50:43 126

原创 JS学习第九天总结

1.昨天内容复习排它思想上来先干掉所有元素的样式,然后在给自己添加样式自定义属性换行会增加宽度数组方法pushpopunshiftshiftjoin();把数组转成字符串splice();涵盖了slice功能,记这个就行了字符串转数组,split(‘字符串中符号’),符号必须统一;2.昨天作业讲解基础版:<!DOCTYPE html>...

2019-03-28 21:37:43 185

原创 JS学习第七天总结

1.昨天内容复习焦点事件得到焦点onfocus失去焦点onblurthis关键字,指的是事件的调用者value,获取表单的内容className,添加类名innerHTML,修改元素内容focus(),自动获得焦点的方法select(),表单选择内容2.for循环复习回顾3.获得元素的方式通过Id获取元素,document.getElementById();...

2019-03-26 22:10:51 166

原创 Js自学day6

1.JS组成部分核心ECMAScript,由ECMA-262定义,提供核心语言功能。文档对象模型DOM,提供访问和操作网页内容的方法和接口。浏览器对象模型BOM,提供和浏览器交互的方法和接口。2.ECMAScript组成部分语法类型语句关键字保留字操作符对象3.文档对象模型文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于...

2019-03-25 20:11:17 111

原创 JS学习第六天总结

1.多js标签问题多个script标签,一个报错,另一个还是会继续执行。多个window.onload入口函数,后面的会覆盖前面的,最终只会执行一个。2.复习回顾函数:可以重复使用的代码块的封装。函数三种创建方式:函数声明式、函数表达式、Function——构造函数。变量声明提升:JS执行前会预解析,将变量声明提升到最前面。3.函数参数注意点一:function fu...

2019-03-25 20:10:19 140

原创 JS自学day5

1.函数的声明和调用JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。代码如下:复制代码 代码如下://“定义式”函数定义 function Fn1(){ alert("Hello World!"); } //“赋值式”函数定义 var Fn2 = function(){ alert(...

2019-03-22 22:14:08 115

原创 JS自学day4

1.使用Date()方法来返回今天的日期和时间document.write(Date());// 返回 Fri Mar 22 2019 11:51:04 GMT+0800 (中国标准时间)2.使用getTime()计算从1970年到今天有多少事件var d=new Date();document.write("从1970/01/01至今已有"+d.getTime()+"毫秒。");/...

2019-03-22 22:13:36 105

原创 JS学习第一周总结

前段三层HTML 结构层CSS 样式层JavaScript 行为层1.JS能做什么?嵌入动态文本于HTML页面。对浏览器事件作出反应。读写HTML元素在数据被提交到服务器之前验证数据。检测访客的浏览器信息。基于Node.js技术进行服务器端编程。2.JS简介JavaScript是一种直译式脚本语言,是一种动态型、弱类型、基于原型的语言。基本特点:是一种解释性脚...

2019-03-22 22:11:29 563

原创 JS学习第五天总结

1.函数到底是什么?可以重复调用的代码块。可以单独写在JS文件中,需要时最是调用。2.函数的创建方式函数声明式function fun(){ console.log("helloWorld");}fun();fun函数名,代表整个函数fun()代表函数的调用函数表达式var func=function(){ console.log("helloW...

2019-03-22 22:10:49 150

原创 JS学习第四天总结

1.函数复习函数是JS的一等功公民(皇室成员)函数的基本语法 function 函数名(参数1,参数2){代码块}第一步 声明函数第二部调用函数 可以多次调用函数的返回值 return关键字return后面不要写代码了,是不会执行的加了return就有返回值,就可以接收并使用这个返回值2.JS的作用完成网页中一些常见的动效(轮播图、tab栏)和用户进行交互...

2019-03-22 22:10:07 183

原创 JS自学day3

1.创建新的HTML元素如果需要向HTML DOM添加新元素,必须先创建该元素(元素节点),然后向一个已存在的元素追加该元素。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body&...

2019-03-20 20:08:53 174

原创 JS学习第三天总结

1.复习昨天内容布尔类型Boolean 取值就两种 true false不像Number包括很多种(数字、Ifinity,NaN等都是Number类型)关系运算符< > <= >= == === != !==console.log(2<3<5);// 返回trueconsole.log(2<3<1);// 返回false...

2019-03-20 20:07:53 210

原创 JS自学day2

1.正则表达式RegExp对象用于规定在文本中检索的内容。定义RegExp通过new关键字来定义RegExp对象。var part1=new RegExp("e");定义了名为part1的RegExp对象,其模式是"e"。当使用该RegExp对象在一个字符串中检索时,寻找的是字符"e"。RegExp对象的方法test()方法检索字符串中的指定值,返回值是true或者fals...

2019-03-19 21:10:49 182

原创 JS学习第二天总结

1.昨天作业总结一定要牢记,使用prompt()接收到的数据是字符串型的,要做算术运算,要先使用parseInt()转换成数值型,才能进行操作。2.新的数据类型-布尔Boolean昨天已经说了两种基本数据类型:Number(数值类型) 控制台显示蓝色 NaN是数值类型String(字符串类型) 控制台显示黑色今天再说一种:Boolean(布尔),他只有两个值true(真)fals...

2019-03-19 21:09:51 469

原创 JS自学day1

1. script元素在使用script嵌入JavaScript代码时,记住不要在代码中的任何地方出现"/script"字符串,负责会引发错误。例如下面的代码,执行时就会出现错误。<script> function sayScript(){ alert("</script>"); }</script>如果需要引入外部JS文件,那么src属...

2019-03-18 22:05:54 327

原创 JS第一天学习总结

前段三层HTML 结构层CSS 样式层JavaScript 行为层学习网站:廖雪峰官方网站1.JS能做什么?嵌入动态文本于HTML页面。对浏览器事件作出反应。读写HTML元素在数据被提交到服务器之前验证数据。检测访客的浏览器信息。基于Node.js技术进行服务器端编程。2.JS简介JavaScript是一种直译式脚本语言,是一种动态型、弱类型、基于原型的语言。基...

2019-03-18 20:36:01 352

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除