前端
Aelousdp
双非在读
展开
-
前端案例 - 导航条菜单的制作
每个网站都包含导航条菜单,在此做一些 HTML 和 CSS 基础回顾。本文主要跟随课程完成导航栏菜单的制作,课程来源 imooc导航条菜单的制作。推荐学习前端的朋友可以看看,简简单单一个小课程,对于刚有前端基础的人来说很友好,整体清晰易懂,逻辑通顺,后期稍微涉及一丢丢 JS,很不错。垂直菜单栏导航菜单用什么元素制作呢,通过之前学习的网页设计结构表现原则我们可以得知,导航目录条目性的语义 与 无序列表 非常接近,所以选用无序列表。垂直菜单栏的整体结构如下:HTML 代码:<body>原创 2020-07-23 10:44:19 · 1503 阅读 · 0 评论 -
前端设计原则 之 结构表现原则
前端三大基础,HTML+CSS+JavaScript:HTML 为结构,CSS 为表现,JavaScript 为行为。前端设计需要遵循结构、表现、行为分离原则,此处的分离说的不仅仅是将文件分开来放置!!!分离不单单是一种方法,更是一种思想,并不是网页设计最初就需要分离,而是随着技术满满发展,演变出更为复杂的需求,使得分离的原则必不可少。分离原则:首先将重点放在 HTML 结构和语义化上面,其次考虑 CSS,JS 等,以便于后期维护和分析。HTML 结构和语义化就相当于房子的结构,一个合理的结构.原创 2020-07-23 10:40:43 · 330 阅读 · 0 评论 -
canvas绘图学习 - 学写一个字
内容借鉴慕课网 学写一个字,老师@liuyubobobo讲的不错,值得学习。学一个技术,最重要的就是练。我自己还是个没啥想法的人,那就借鉴别人的想法,跟着老师学习,模仿大神。本练习目标是在 PC 和移动端完成一个手写板,以此来练习 canvas 的基础知识。绘制米字格首先要绘制米字格,第一步当然是在 html 中添加 canvas:<canvas id="canvas">您的浏览器不支持canvas</canvas>然后定义相应的样式。注意不推荐在 CSS 中定义原创 2020-07-21 09:25:42 · 1248 阅读 · 0 评论 -
JS设计模式学习 - 观察者模式
观察者模式(Observer)观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。又称为发布-订阅模式。观察者模式最主要的就是完美的将观察者与被观察的对象分离开来。由于面向对象的单一职责原则,使得系统中的每一个类将重点放在某一个功能上,而不是其他方面。观察者模式在模块之间划定了情绪的界限,提高了应用程序的可维护性和重用性。发布-订阅模式的作用发布-订阅模式可以广泛应用于异步编程之中,这是一种替代传递回调函数的方案。比如,我们可以订阅 ajax原创 2020-07-21 09:24:38 · 520 阅读 · 0 评论 -
JS设计模式学习 - 单一职责原则
单一职责原则(SRP)就一个类而言,应该仅有一个引起它变化的原因。单一职责原则的职责被定义为“引起变化的原因”。如果我们有两个动机去改写一个方法,那么这个方法就有了两个职责。每一个职责都是变化的一个轴线,如果一个方法承担了过多的职责,那么在需求的变迁过程中,需要改写这个方法的可能性就越大。特别是当两个职责耦合在一起的时候,一个职责发生变化可能会影响到其他职责的实现,造成意想不到的破坏。这种耦合性得到的是低内聚和脆弱的设计。因此 SRP 原则体现为:一个对象(方法)只做一件事情。设计模式中的 S原创 2020-07-21 09:23:53 · 444 阅读 · 0 评论 -
JS设计模式学习 - 适配器模式
适配器模式(Adapter)提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。适配器模式的作用是解决两个软件实体间的接口不兼容问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块原创 2020-07-21 09:23:07 · 471 阅读 · 0 评论 -
JS设计模式学习 - 迭代器模式
迭代器模式(Iterator)提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按照顺序访问其中的每个元素。目前,几乎所有流行的语言如 Java、Ruby 等都已经有了内置迭代器的实现,许多浏览器也支持 JavaScript 的 Array.prototype.forEach。jQuery 中的迭代器迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuer原创 2020-07-21 09:22:20 · 362 阅读 · 0 评论 -
JS设计模式学习 - 代理模式
代理模式(Proxy)为一个对象提供一个代用品或占位符,以便控制对它们的访问。代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景。比如,明星都有经纪人作为代理。代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象。替身对象对请求做出做出一些处理之后,再把请求转交给本体对象。小明追 MM小明追女孩 A,因为内向,所以找了他和 A 的共同好友 B,帮助小明完成送花的壮举。首先看看不实用代理的情况:原创 2020-07-20 13:02:17 · 360 阅读 · 1 评论 -
JS设计模式学习 - 策略模式
策略模式(Strategy)定义一系列的算法,把它们一个个封装起来,并且使他们可以互相替换。策略模式有着广泛的应用。我们用例子来说明:策略模式计算奖金公司年终奖根据员工的工资基数和绩效来发放,例如,绩效为 S 的年终奖有 4 倍工资,绩效为 A 的有三倍工资,B 为 2 倍工资。我们用代码来实现:最初代码实现// 编写calculateBonus函数计算,输入参数为工资以及绩效。var calculateBonus = function(performanceLevel, salary)原创 2020-07-20 13:01:09 · 439 阅读 · 0 评论 -
JS设计模式学习 - 单例模式
单例模式(Singleton)保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器重的 window 对象等。在 javaScript 开发中,单例模式的用途同样非常广泛。试想一下,当我们单击登陆按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。实现单例模式简单说:单例就是保证一个类只有一个实例,实现方法一般原创 2020-07-20 12:55:53 · 383 阅读 · 0 评论 -
JS设计模式学习 - this关键字
JavaScript的this在 JS 中,this 的调用完全取决于函数调用时的上下文,而不是像 Java 一样,this 在声明的时候确定。JS 中 this 的指向大概能分为 4 种情况,分别是:作为对象的方法调用作为普通函数的调用Function.prototype.call 或 Function.prototype.apply作为方法如果作为对象的方法调用,this 是指向该对象:let obj = { objName:'obj', objThis(){ ale原创 2020-07-20 12:54:55 · 291 阅读 · 0 评论 -
JS设计模式学习 - 面向对象的JS
更多精彩内容可以访问我的博客Aelous-BLog面向对象的JavaScriptJavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。正因为存在这些跟传统面向对象语言不一致的地方,我们在用设计模式编写代码的时候,要跟传统面向对象语言加以区别。所以在学习设计模式之前,我们需要对 JavaScript 在面向对象方面的认识。动态类型语言和鸭子类型动态类型语言编程语言按照数据类型大体原创 2020-07-20 12:53:52 · 267 阅读 · 0 评论 -
学习记录 - TypeScript入门
更多精彩内容可以访问我的博客Aelous-BLogTypeScript 入门内容介绍学习 TypeScript 的好处TypeScript 概念,语法和特性前置知识需要理解 ES5,ES6,JavaScript,TypeScript 的概念和关系ES:是 JavaScript 语言的规范,ES5,ES6 是这个规范的两种版本JS 和 TS 是两种客户端脚本语言,JS 是 ES5,TS 是 ES6 规范需要有一定 JS 开发经验程序控制,变量声明等TypeScrip原创 2020-07-20 12:50:59 · 313 阅读 · 0 评论 -
CSS绘制三角形原理及应用
在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:“这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢???”在此我个人的选择一般都是,用 CSS 实现,当然切图然后实现也是聪明人的办法,但是我觉得学好一个技术最关键的不是学习,而是使用。学了不用都是假把式。学了 CSS 有机会让你炫技,不用是大傻。最常见的一类小图标就是三角形,今天我来总结一下用 CSS 实现三角形的原理。网上相关资料较多,讲的也都很好,个人博客主要还是用于记录分享,毫无商业前景,不喜勿喷。原理CS原创 2020-07-19 15:53:11 · 2243 阅读 · 0 评论 -
详解CSS伪类与伪元素
伪类/伪元素定义做前端那必须的要接触到 CSS 的伪类和伪元素。常见的又:focus,:hover,:link,:visited 等等。在 CSS1 和 CSS2 中对伪类和伪选择器没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before,:after;而在 CSS3 中,对这两个概念做了较清晰的解释,二者区别更为明显,更容易理解。伪类定义CSS3 对与伪类的定义如下:The pseudo-class concept is intro原创 2020-07-19 15:48:30 · 1209 阅读 · 0 评论 -
原生JavaScript一步步实现焦点轮播图:基本布局->边界条件->绑定圆点->优化
轮播图是在大家学习 JavaScript 时常写的小项目,网络上相关的资源也很多。我在学习的过程中,将写轮播图的经历做一些简单的总结,希望大家在看后能有所收获,如果有不对的地方,请大家在留言区指出。前言轮播图是什么Q:轮播图是什么? A:简单解释:所谓的轮播图,就是几张图片轮流显示。我们先随便找个网站访问一下,例如 淘宝网 首页中间这一块。中间的滚动区域就是轮播图。哪些知识点通过轮播图,我们可以巩固(学到)什么知识点呢?DOM 操作 HTML事件运用定时器无限滚动技巧JavaS原创 2020-07-19 15:19:29 · 1014 阅读 · 1 评论