
初级前端知识
文章平均质量分 75
初级前端知识
Sophie_U
勿忘初心,方得始终
展开
-
Canvas教程一:基本使用及样式创建
文章目录canvas 教程绘图1. 创建画布2. 绘制矩形3. 绘制路径4. 绘制圆弧5. 绘制直线添加样式及颜色颜色Color图形透明度globalAlpha线型LineStyle渐变Gradients阴影 Shadows注意事项及踩坑记录:canvas 教程绘图1. 创建画布getContext(): 获得渲染上下文及绘画var canvas = document.getElementById('canvas');if(canvas.getContext){// 浏览器支持canvas原创 2020-08-12 16:45:10 · 1210 阅读 · 0 评论 -
JavaScript高级程序设计:6.7.8章阅读札记
第六章 :对象6.1 对象的属性 对象的属性分为两类:数据属性、访问器属性A: 数据属性 configurable(能否通过delete删除属性从而重新定义属性) enumerable(是否可通过for…in枚举属性) writable(是否可修改,为false时,修改属性值将无效,严格模式修改下会报错) value(属性对应的值) B、访问器属性:(设置使用访问器原创 2017-08-23 10:07:00 · 381 阅读 · 0 评论 -
ES6学习14章:异步操作和Async函数
异步操作 在ES6,异步编程的方法有:回调函数、事件监听、发布/订阅、Promise对象。在ES7中,Async函数更是提出了异步编程的终极解决方案。基本概念异步:简单说,异步即一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回头执行第二段。这种不连续的执行就叫做异步。(相应的,连接执行就叫做同步)回调函数JavaScript语原创 2018-01-05 16:21:06 · 353 阅读 · 0 评论 -
ES6学习5章:正则&数值扩展
一、正则构造函数在ES5中,new RegExp(/xyz/,’i’) 会报错,因为不允许有第二个参数在ES6中,第二个参数代表修饰符var regEx = new RegExp(/xyz/i)var regEy= new RegExp(/xyz/,'i') // 等价var regEz = new RegExp(/xyz/ig,'i') // 会忽略之前的ig,而使用i修饰符1.1 字原创 2017-12-15 14:09:02 · 294 阅读 · 0 评论 -
ES6学习9章:Proxy和Reflect
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,即对编程语言进行编程,属于一种“元编程” Proxy可以理解为在目标对象之前架设一层“拦截”,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和必定。 Proxy:原意为代理,用在这里表示由它来”代理“某些操作,可以译为”代理器”。var obj = new Prox原创 2017-12-15 14:10:34 · 365 阅读 · 0 评论 -
ES6学习2章:let和const命令
一、let命令 用于声明变量,类似于var,但let命令所在的代码块内有效 特点: - 只在代码块内有效 - 不存在变量提升(必须先声明后使用,否则会报错) - 暂时性死区 - 不允许重复声明1、代码块内有效 用let声明的变量只在当前块{}中有效,在块级作用域外是拿不到的{ let a = 10;}console.log(a) // Re原创 2017-12-15 11:03:48 · 331 阅读 · 0 评论 -
ES6学习8章:Symbol
Symbol Symbol是一种新的原始数据类型,表示独一无二的值。它是JS语言的第七种数据类型。(前六种:undefined,null,boolean,String,Number,Object) Symbol是由Symbol函数生成。(对象的属性名现在可以有两种类型,一种是字符串「可重复」,一种是新境的Symbol类型,凡是属性名是Symbol类型的,就是独一无二的,可以保证不与其他属性原创 2017-12-15 14:10:09 · 236 阅读 · 0 评论 -
ES6学习4章:字符串的扩展
一 、新增API目前不常用的APIat() ——识别Unicode编号大于0XFFFF的字符,返回正确的字符normalize() 将字符串的不同表示方法统一为同样的形式startWith() 返回boolean , 参数字符串是否在源字符串头部endWith() 返回boolean ,参数字符串是否在源字符串尾部repeat(n) 返回新字符串,表示将原字符串重复n次,原创 2017-12-15 14:08:34 · 200 阅读 · 0 评论 -
ES6入门第1章:关于ES6
一、关于Ecmascript 关于ecmascript,2013年3月,ES6的草案封闭,不再接受新功能了。而新的功能将被加入到ES7当中。 任何人都可以向TC39提案,从提案到正式标准需要经过五个阶段 - Stage 0 (展示阶段) - Stage 1 (征求意见阶段) - Stage 2 (草案阶段——进入这个阶段后,就差不多等于肯定会包换在ES7中)原创 2017-11-16 22:02:41 · 389 阅读 · 0 评论 -
ES6学习15章:Class
Class基本语法 ES6引入了Class(类)的概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的Class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已)# ES5写法function Point(x,y){ this.x = x; this.y =原创 2018-01-05 16:21:50 · 267 阅读 · 0 评论 -
ES6学习13章:Promise对象
Promise的含义 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。语法上,Promise是一个对象,从它可以获取异步操作的消息。 Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。 特点: - 对象的状态不受外界影响。Promise对象有三种状态:Pending(进行中)、Resolved(已完成)原创 2017-12-18 16:11:23 · 351 阅读 · 0 评论 -
ES6学习3章:变量的解构赋值
写在最前变量解构的用途# 交换变量的值var x = 10, y = 1;[x, y] = [y, x]console.log(x,y) // 1,10# 从函数返回多个值function example(){ return [1,2,3]}var [a,b,c]=example();# 函数参数的定义function f({w,y,z}){...}f({x:3,y:4,z原创 2017-12-15 11:04:52 · 212 阅读 · 0 评论 -
JavaScript高级程序设计:11.12章-DOM扩展
一、DOM扩展 DOM扩展主要包含两方面:Selector API,HTML51.1 选择符API level 1 : - querySelector() :传入css选择器选中第一个匹配项 - querySelectorAll() :传入css选择器返回的有匹配项 level 2: - matchesSelector: 传入css选择符,如果调用元素与该选择符匹原创 2017-08-24 16:06:19 · 439 阅读 · 0 评论 -
ES6学习1章:关于ES6
一、关于Ecmascript 关于ecmascript,2013年3月,ES6的草案封闭,不再接受新功能了。而新的功能将被加入到ES7当中。 任何人都可以向TC39提案,从提案到正式标准需要经过五个阶段 - Stage 0 (展示阶段) - Stage 1 (征求意见阶段) - Stage 2 (草案阶段——进入这个阶段后,就差不多等于肯定会包换在ES7中)原创 2017-12-15 11:02:34 · 224 阅读 · 0 评论 -
JavaScript高级程序设计:第9.10章阅读笔记
第九章:客户端检测 由于各浏览器的实现有不一致性问题的存在,为了更好的兼容各版本浏览器,因此通过客户端检测后,使用特定于浏览器的技术增强解决方案。即:客户端面检测用于解决浏览器的兼容性问题 分类:能力检测,用户代理检测,怪癖检测9.1 能力检测 说明:能力检测不是识别特定的浏览器,而是识别浏览器的能力.即:通过检测浏览器支持的API来对应用该API 步骤: 1、先原创 2017-08-23 17:13:21 · 327 阅读 · 0 评论 -
ES6学习12章:Generator函数
Generator简介 语法上理解:Generator函数是一个状态机,封闭了多个内部状态。(提供了一种可以暂停执行的函数。通过yield语句来标记暂停) 执行Generator函数会返回一个遍历器对象,返回的遍历器对象可以依次遍历Generator函数内部的每一个状态 形式上,Generator函数是一个普通函数,但有两个特征。一:function关键字与函数名之间有一个星原创 2017-12-18 16:10:56 · 232 阅读 · 0 评论 -
ES6学习16章:编程风格
编程风格 如何将ES6新语法,运用到编码实践之中,与传统的JavaScript语法结合在一起,写出合理的,易于阅读和维护的代码?块级作用域1. let取代var ES6的声明变量的命令:let和const,其中let可以完全取代var,无副作用'use strict'if(true){ let x = 'hello'}for(let i=0原创 2018-01-10 11:02:48 · 242 阅读 · 0 评论 -
ES6学习6章:函数的扩展(箭头函数)
一、函数参数默认值function log(x,y='world'){ console.log(x,y)}log('hello','') //hello# 解构赋值调用function fecth(url,{methods='GET',body='',headers={}}){ console.log(methods)}fecth('http://example原创 2017-12-15 14:09:22 · 310 阅读 · 0 评论 -
JavaScript中的this关键字,面向对象编程
知识点:this关键字,借来的this,面向对象的写法,面向对象的写法中的三大特性:封装、继承、多态 一、 this关键字 this的定义:即当前活动的对象,谁调用就指向谁 1、 全局上的this 在全局环境中,this指的就是window; 1)、例: 直接在全局中打印: console.log(this); //window; 2、函数中的this 谁调用就指向谁;原创 2016-10-21 23:51:46 · 462 阅读 · 0 评论 -
Javascript数据结构与算法学习(二)——队列
文章目录什么是队列?队列的操作队列的实践—— 击鼓传花优先队列和辅助类什么是队列?队列(Queue)—— 一种先入先出(FIFO)的数据结构。队列只能在队尾插入元素(push),在队首删除元素(shift),这一点跟栈(LIFO)结构是不同的,可以看成“排队”队列的操作入列:enqueue出列:dequeue查看列头:front不否为空:isEmpty队列大小: size...原创 2020-01-02 15:18:55 · 235 阅读 · 0 评论 -
JS中的作用域以及函数
作用域 作用域指的是变量有效存在的某个区间或者范围内 所谓的变量有效存在:指的就是在这个区间内可以对变量进行读(获取它)写(修改它)的操作;变量的作用域 变量可以分为你局部变量和全局变量,全局变量 作用于全局环境上的变量,在浏览器中,全局环境指的就是window对象(全局环境是一最外围的执行环境,可以在代码任意位置访问到)1、例: var a=10; //定义一个全局变量原创 2016-10-20 13:13:18 · 595 阅读 · 0 评论 -
JS的一些知识点小结
JSON语法、编译原理、作用域、函数高级(递归,惰性载入,匿名函数,回调函数),闭包,this关键字一、JSON定义 1.1定义:JSON——JavaScriptObject Notation,JS的一种简单的数据格式,它比XML更轻便,因为JSON是JS的原生格式,所以在解析JSON时,不需要借助API或者工具包1.2、写法{“属性1”:“值1”,“属性2”:“值2原创 2016-10-20 18:53:02 · 427 阅读 · 0 评论 -
Javascript数据结构与算法学习(三)—— 链表
文章目录什么是链表链表的操作加强链表双向链表循环链表什么是链表看似火车~特点:链表里的每一项除了包含自己的信息外,还包含有下一项(next)的数据内容。链表存储有序的元素集合,但不同于数组,链表中的元素在内存中并不是连续放置的每个元素有一个存储元素本身的节点和一个指向下一个元素的引用组成。数据结构: {element:'元素内容', next:null} ,next指向下一项(实现需要...原创 2020-01-02 20:03:03 · 231 阅读 · 0 评论 -
Javascript数据结构与算法学习(四)——集合
文章目录什么是集合?集合操作方法集合间的操作并集交集差集ES6 内置新数据结构ES6实现交集、并集,差集Set 和 WeakSet的区别一道 ES6面试题什么是集合?回顾之前的数据结构:栈,队列,链表——它们都可以用JS数组来实现,而集合的实现更依赖于Object,相较于对象key:value的结构,集合的key与value其实是同一个,即{1:1,2:2,'a':'a'}这种。参考ES6的...原创 2020-01-02 22:53:32 · 226 阅读 · 1 评论 -
Javascript数据结构与算法学习(七)——图
文章目录图的分类图的表示方式1. 邻接矩阵2. 邻接表图遍历:广度优先和深度优先图的分类图可以分为两类:有向图,无向图。如下:有向图中两个节点之前通过有方向线(有的只能单向,有的是双向)的边连接而成, 无向图节点之前则没有这种关系图的表示方式1. 邻接矩阵将节点之前的关系通过矩阵的方式来描述,两个节点有联系,则矩阵中的交叉点置为1,没有联系则为0.缺点: 非常浪费计算机内存(...原创 2021-04-01 16:19:59 · 328 阅读 · 0 评论 -
Angular入门02- Module模块、Controller控制器
AngularJS中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。即:angular.module() 用来注册一个应用模块一、模块定义 AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。an原创 2017-01-23 17:05:14 · 2894 阅读 · 0 评论 -
Angular入门 03-$scope作用域、数据绑定
一、作用域 Scope1.1 什么是作用域 基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图。 AngularJS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说我们可以引用父级$scope中的属性。 1.2 作用域的作用 作用域有如下基本功能: 1、提供观察者$watc原创 2017-01-23 17:13:13 · 1124 阅读 · 0 评论 -
Angular入门 05: 路由系统
一、路由系统 路由:允许我们通过不同的 URL 访问不同的内容。简单理解:根据不同的url展示不同的页面。 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。1.1 ng-router路由模块准备: angular.js angular-router.js 1、加入实现路由的 js 文件:angular-r原创 2017-01-24 19:18:59 · 500 阅读 · 0 评论 -
angular源码解读:forEach方法遍历
angular中提供了forEach()方法用于遍历对象或数组function forEach(obj, iterator, context) { var key, length; if (obj) { if (isFunction(obj)) { for (key in obj) { // Need to check if hasOwnProperty原创 2017-01-24 20:59:38 · 750 阅读 · 0 评论 -
angular入门06 : 过滤器
过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器(自定义过滤)。比如:页面中需要把显示的字母转换为大写,或者是把日期变成良好的格式。一、内置过滤器 1、在html中用 "| "来调用过滤器, 传参用冒号 ": ",多个参数就多个: 并列 2、在JS中向controller的函数中传参 $filter , 使用时$fi原创 2017-01-26 21:01:31 · 574 阅读 · 0 评论 -
angular实现商品筛选功能(过滤器)
一、demo功能分析1、通过service()创建数据并遍历渲染到页面 2、根据输入框的输入值进行字段查询 3、点击各列实现排序功能。二、实现1.1 数据定义与渲染angular更偏向于是一个MVVM模式的框架,所以它的controller很薄,里面的业务逻辑也是少的,因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中。此次demo通过angula原创 2017-01-26 22:34:15 · 2344 阅读 · 0 评论 -
angular表单验证及 提交功能实现
本例通过Angular框架来实现简单的表单验证一、html结构 1、借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下: <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"> <h1 style="text-align: center">用户表单提交</h1> <原创 2017-02-01 00:25:20 · 4585 阅读 · 0 评论 -
angular源码解读:$apply方法
$apply=function(expr) { try { beginPhase('$apply'); try { return this.$eval(expr); } finally { clearPhase(); } } catch (e原创 2017-01-24 20:58:01 · 609 阅读 · 0 评论 -
angular实现购物车功能
一、页面搭建 1、html结构采用BootStrap3来快速创建一个购物车表单样式。 主要功能: A:列表数据所示 B:增加删除端口 C:清空购物车 D:商品数量的增减 E:动态计算商品价格以及总价 <!DOCTYPE html><html lang="en" ng-app="app"><head> <meta char原创 2017-01-24 20:53:16 · 1206 阅读 · 0 评论 -
Angular入门04: 指令
一、指令概述1.1 什么是指令?AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。1.2 指令特征 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-* 。二、 常用指令2.1 ng-app 应用注册 ng-app初始化angular应用,元素是 Angula原创 2017-01-24 16:22:43 · 699 阅读 · 0 评论 -
AngularJS入门:01-基础
一、Angular简介 AngularJS*是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。 Angular 简称 ng; 作用:扩展增强HTML功能(标签名,属性,等) AngularJS 通过新的属性(自定义)和{{表达式}}扩展了 HTML。 AngularJS 可以构建一个单页面应用程原创 2017-01-23 15:52:37 · 446 阅读 · 0 评论