前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…

前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

一.组件化开发 1.1组件化概述页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. new Carousel(); 实例化后,页面中就有一个轮播图的布局结构,而且可以通过参数传递进去. 这个new里面封装了HTML.CSS.JS的业务逻辑.组件开发的规律就是所有按钮.小圆点.图片等等都是这个类(的实例的)属性,自己管理自己. 组件开发的好处就是在用的时候可以高度自定义,在new的时…

前端笔记之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链

一.对象(Object) 1.1 认识对象对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体,范围窄所以称为“狭” l 狭义对象就是用{}这种字面量的形式定义的对象,它是一组属性的无序集合 var obj = { name : "小明", age : 12, sex : "男", hobby : ["足球","刺绣",&…

前端笔记之JavaScript面向对象（二）内置构造函数&相关方法|属性|运算符&继承&面向对象

一.复习 1.1复习上下文函数的调用方式上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) setTimeout(fun,1000) window array[8]() array new fun() 秘密创建的新对象要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象函数的arguments是类数组对象,比如传入的第0项参数是函数,让它运行:…

前端笔记之JavaScript（三）关于条件判断语句、循环语句那点事

一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法能够书写所有的条件分支语句.也就是说,一会儿学switch case语句,switch case语句能干的,if else语句一定也能干. 标准的完整结构: if(){ }else if(){ }else if(){ }else{ } else只能有一个,并且一定要放在最后.表示所有的分支都不满足的…

javaScript - 面向对象 - ES5 和 ES6

javaScript - 面向对象 - ES5 和 ES6 ES5之前用构造函数构造函数的特点就是一个普通函数, 他的函数名要大写.: 带方法的写法: 原型的方式: prototype 为内置的原型方法 this参数问题: ES6 里的写法: Promise对象 $.ajax({ url:'/books/', type: 'get', success: function(res){ // 请求成功之后要做的事儿 // 我又要发ajax请求去请求数据 $.ajax({ url: '/a…

前端笔记之JavaScript（一）初识JavaScript

一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML : 负责搭建页面结构样式层 CSS : 负责页面的美观行为层 JavaScript : 负责页面的交互效果,提高用户体验如果用舞台来进行比喻: HTML 是演员:div,a CSS 是化妆师:负责给每个演员添加装饰效果 javascript是剧本:负责描述每个演员之间的交互 1.2 JavaScript诞生 JavaScript一种直译式脚本语言,是一种动态类型…

前端笔记之React（六）ES6的Set和Map&immutable和Ramda和lodash&redux-thunk

一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. let s = new Set(); s.add(1); s.add(2); s.add(3); s.add(3); s.add(3); s.add(4); s.add(5); console.log(s) 示例…

JavaScript 面向对象(三) —— 高级篇

JavaScript 面向对象(一) —— 基础篇 JavaScript 面向对象(二) —— 案例篇一.json方式的面向对象首先要知道,js中出现的东西都能够放到json中.关于json数据格式这里推荐一篇博客:JSON 数据格式先看下json创建的简单对象:相比基础篇中的构造函数.原型等的创建方式,json方式简单方便:但是缺点很明显,如果想创建多个对象,那么会产生大量重复代码,不可取. JSON方式适用于只创建一个对象的情况,代码简介又优雅. <!DOCTYPE html> &l…

3.前端笔记之JavaScript基础

作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyifeng.com/oop/basic.html http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html 一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释…

JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

前言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天我们来继续探讨剩余的内容吧. 我们都知道,面向对象的三大特征--封装.继承.多态. 封装无非就是属性和方法的私有化,所以我们JS中提供了私有属性和私有方法. 而JS中并没有多态,因此我们说JS是一门基于对象的语言,而非面向对象的语言. 那么,面向对象三大特征中,在JS中最重要的就是继承了. 一继承的…

前端笔记之JavaScript（二）关于运算符&初识条件判断语句

运算符数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐式转换:就是没有写parseInt().parseFloat()也能自动帮你转换类型 console.log(2 + "4"); console.log(26 - "2"); console.log(3 * "8"); console.log("…

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript能做非常多的事情:DOM开发.Ajax开发.Canvas开发.NodeJS开发.前端框架(React.Vue.Angular等等).HTML5开发.这些都需要语言核心的知识. DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作:年之后,前端要负…

前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别

一.Express框架 1.1基本使用创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是“批量”,1个jQuery对象中可以封装多个原生对象.Express的核心就是中间件,Express说大真心不大,主要是因为他做的事儿大,而不是这个框架的功能多. 中文官网(实际上也是英语的):http://www.expressjs.com.cn/ 基于 Node.js 平台,快速.开放.极简的…

前端笔记之JavaScript（十二）缓冲公式&检测设备&Data日期

一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px的位置,要求匀速: 大致计算如下: 毫秒编号(帧) 距离起点的增量目前绝对的位置 0 0 100 1 7 107 2 14 114 ... ... ... t t*c/d b+t*c/d 49 343 443 50 350 450 98 686 786 99 693 793 100 700 800…

前端笔记之JavaScript（七）深入函数&DOM那点事

一.函数补充 1.1 arguments类数组对象 arguments 是一个对应于传递给函数的参数的类数组对象. 在函数中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. 在其它编程语言中,比如java:如果一个函数被定义过两次,每次参数个数都不同.相当于定义了两个不同的函数,根据参数个数不同,会选择不同的函数执行.一个函数名定义了两个函数,称为“函数重载”(overloaded). 复习一下函数,定义函数时,参数要罗列在圆括号中,这些参数,叫“形参”: funct…

前端笔记之JavaScript（六）让人头疼的正则表达式

一.正则表达式 1.1正则概述和体验正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证.在JavaScript中,正则表达式也是对象,是一种引用类型. 案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错” var tel = prompt("请输入电话号码"); var reg = /^\d{3}-\d{8}$/; if(reg.test(tel)){ alert("对"); }else{ alert(&quo…

前端笔记之React（三）使用动态样式表&antd&React脚手架&props实战

一.使用动态样式表 1.1 LESS使用全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css 1.2 LESS和webpack结合希望在React项目中使用less,此时就需要webpack打包的时候顺便进行less翻译安装依赖: npm install --save-dev less-loader npm install --save-dev css-loader npm insta…

前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

一.Vue的生命周期生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着,你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义. 生命周期的钩子函数,就是vue实…

【前端学习】javascript面向对象编程(继承和复用)

前言继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象的继承和多态.根据javascript对象的特点,JS中的继承又可以分类为引用对象继承和实例对象继承. 引用对象继承,子引用类型继承父引用类型,然后通过子引用类型生成的实例对象,具有父引用类型的特性. 而实例对象继承,继承得到的对象都具有父实例对象的所有属性和方法,其实就是指对象的复制和克隆. 默认…

前端笔记之JavaScript（五）关于数组和字符串那点事

一.数组 1.1数组概念数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]”.习惯将数组赋值给一个变量. var arr = []; var arr = [1,2,3,4,5,6,7,888,999,666]; arr[5] = 88; //把数组下标为5的项改为88(设置数组中的某一项) console.log(arr); console.log(arr[0]); //1…

前端笔记之JavaScript（九）定时器&JSON&同步异步/回调函数&函数节流&call/apply

一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据,不需要parseInt(),直接可以参与运算. offsetLeft和offsetTop offsetWidth和offsetHeight clinetWidth和clinetHeight 1.1 offsetWidth和offsetHeight 全线兼容,是自己的属性,和别的盒子无关的. 一个盒…