- 博客(39)
- 资源 (2)
- 收藏
- 关注
RSS订阅翻译 立即执行函数
3.6 立即执行函数Immediately-Invoked Function Expression (IIFE)参考自此篇文章现在我们定义了一个函数function foo(){}或者var foo = function(){}，函数名后加上一对小括号即可完成对该函数的调用，比如下面的代码：var foo = function() { /* code */}foo()接着我...
2018-11-12 19:55:07
644
1
原创 如何清除浮动
清除浮动的几种方式2.6 何为清除浮动？在非 IE 浏览器（如 Firefox）下，当容器的高度为 auto，且容器的内容中有浮动（float 为 left 或 right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的 CSS 处理，就叫 CSS 清除浮动。浮动的定义：...
2018-11-12 17:25:02
191
转载 BFC 是什么
BFC 是什么2.5 BFC 是什么？参考自前端精选文摘：BFC 神奇背后的原理2.5.1 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context 的概念。Box: CSS 布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不...
2018-11-12 17:22:24
222
原创 CSS选择器优先级
2.4 选择器优先级如何确定？2.4.1 比较同一级别的个数，数量多的优先级高important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承权值的大小跟选择器的类型和数量有关，样式的优先级跟样式的定义顺序有关这也就解释了为什么 11 个标签的定义会比不上 1 个类的定义，1 个类加 11 个
2018-11-11 15:19:13
229
原创 Normalize vs Reset
2. Normalize vs Reset2.3 css reset 和 normalize.css 有什么区别？2.3.1 创造 normalize.css 的几个目的保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分 HTML 元素提供修复浏览器自身的 bug 并保证各浏览器的一致性优化 CSS 可用性：用一些小技巧解释代码：用注释和详细的文档来2.3.2 N...
2018-11-11 15:00:57
181
转载 CSS实现水平居中
CSS实现水平居中2.2 如何居中？2.2.1 行内元素给其父元素设置 text-align:center,即可实现行内元素水平居中。2.2.2 块级元素该元素设置 margin:0 auto 即可。2.2.3 为了让包含 float:left 属性的子元素水平居中则可让父元素宽度设置为 fit-content,并且配合 margin, 作如下设置:.parent { widt...
2018-11-11 14:44:05
296
原创 盒模型
2. CSS盒模型2.1 说说盒模型2.1.1 标准模型和 IE 模型的区别W3C 标准盒模型：属性 width,height 只包含内容content，不包含 border 和 padding。IE 盒模型：属性 width,height 包含 border 和 padding，指的是content+padding+border。2.1.2 盒模型计算方式：box-sizing...
2018-11-11 14:20:59
124
原创 HTML-!DOCTYPE
1.4 HTML <!DOCTYPE> 声明注释：<!DOCTYPE> 标签没有结束标签。提示：<!DOCTYPE> 声明不区分大小写。1.4.1 标签定义及使用说明<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用...
2018-11-11 14:19:00
219
原创 viewport
1.2 viewport1.2 meta viewport 是做什么用的，怎么写？viewport 指 web 页面上用户的可见区域。1.2.1 viewport 常用属性：width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width 为设备的宽度（单位为缩放为 100% 时的 CS...
2018-11-11 14:15:55
750
原创 HTML 语义化
1. HTML 题1.1 如何理解 HTML 语义化的？让根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。1.1.1 为什么要语义化？为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；用户体验：例如 title、 alt 用于解释名词或解释图片信息、 la...
2018-11-11 14:12:49
183
转载 Linux-chmod指令
1. chmod介绍指令名称 : chmod使用权限 : 所有使用者使用方式 : chmod [-cfvR] [–help] [–version] mode file…说明 : Linux/Unix 的档案存取权限分为三级 : 档案拥有者、群组、其他。利用 chmod 可以藉以控制档案如何被他人所存取。2. 参数格式mode : 权限设定字串，格式如下 : [ugoa…][[±=...
2018-11-09 17:32:54
220
原创 SOLID 五大设计原则
SOLID 五大设计原则1. SRP 单一职责原则(The Single Responsibility Principle)一个程序只做好一件事如果功能过于复杂就开分开，每个部分保持独立2. OCP 开放封闭原则(The Open Closed Principle)对拓展开放，对修改封闭增加需求时，拓展新代码，而非修改已有代码软件设计的终极目标3. LSP 里氏置换原则(T...
2018-11-09 16:00:40
839
原创 23 种设计模式
23 种设计模式1. 创建型工厂模式（工厂方法模式、抽象工厂模式、建造者模式）单例模式原型模式2. 结构型适配器模式装饰器模式代理模式外观模式桥接模式组合模式享元模式3. 行为型策略模式模板方法模式观察者模式迭代器模式职责连模式命令模式备忘录模式状态模式访问者模式中介者模式解释器模式...
2018-11-09 12:51:54
165
原创 jQuery 版本购物车（融入设计模式）
jQuery 版本购物车（融入设计模式）1. 介绍1.1 功能显示购物列表、加入购物车、从购物车删除1.2 用到的设计模式工厂模式$('XXX')，创建商品单例模式购物车装饰器模式打点统计观察者模式网页事件、Promise状态模式添加/删除购物车模板方法模式init()，统一的方法渲染代理模式打折商品信息处理1...
2018-11-09 12:48:33
536
原创 设计模式（不常用的几类）
设计模式1. 创建型1. 原型模式概念clone 自己，生成一个对象应用（Object.create）//基于原型创建一个对象var prototype = { getName: function() { return this.first + ' ' + this.last }, say: function() { console.log('hel...
2018-11-08 17:04:51
324
原创 状态模式
状态模式1. 介绍一个对象有状态变化每次状态变化都会触发一个逻辑不能总是用 if…else 来控制2. UML 演示3. 代码演示class State { constructor(color) { this.color = color } handle(context) { console.log(`turn to ${this.color} l...
2018-11-05 22:11:11
171
原创 迭代器模式
迭代器模式1. 介绍顺序访问一个集合使用者无需知道集合的北部结构（封装）2. UML 演示3. 代码演示class Iterator { constructor(container) { this.list = container.list this.index = 0 } next() { if (this.hasNext()) { ...
2018-11-05 20:56:49
116
转载 详解浮动
详解浮动1. 浮动元素处于什么样的流？《CSS 权威指南》中说，浮动元素同时处于（常规）流内和流外如何理解？浮动元素不影响块级元素的布局（换句话说就是块级元素会当浮动元素不存在）浮动元素会影响行内元素的布局，从而间接影响块级元素的布局2. 浮动与定位不能一起用如果一起使用，浮动失效、定位生效但是浮动与相对定位可以一起使用3. 浮动元素的摆放方式尽量靠上尽量靠左...
2018-11-05 17:34:45
289
1
原创 观察者模式
观察者模式1. 介绍发布订阅一对一（多）2. UML 演示3. 代码演示//观察者class Observer { constructor(name, subject) { this.name = name this.subject = subject this.subject.attach(this) } update() { co...
2018-11-05 12:45:05
109
原创 外观模式
外观模式1. 介绍为子系统中的一组接口提供了一个高层接口,使用者使用这个高层接口2. UML 演示3. 代码演示function bindEvent(elem, type, selecetor, fn) { if (fn == null) { fn = selector selector = null } //...}//调用bindEvent(...
2018-11-04 11:23:21
135
原创 代理模式
代理模式1. 介绍使用者无权访问目标的对象中间加代理，通过代理做授权和控制2. UML 演示3. 代码演示class RealImg { constructor(fileName) { this.fileName = fileName this.loadFromDisk() } display() { console.log('display...
2018-11-04 11:05:11
163
原创 装饰器模式
装饰器模式1. 介绍为对象添加新功能不改变其原有的结构和功能2. UML 演示3. 代码演示class Circle { draw() { console.log('画圆形') }}class Decorator { constructor(circle) { this.circle = new Circle() } draw() { ...
2018-11-02 22:14:50
129
原创 适配器模式
适配器模式1. UML 演示2. 代码演示// class Client {// do() {// }// }class Adaptee { specificRequest() { return '公牛插头' }}class Target { constructor() { this.adaptee = new Adaptee() }...
2018-11-02 19:31:21
129
原创 单例模式
单例模式1. 特点系统中被唯一使用一个类只有一个实例单例模式需要用到 java 的特性（private）ES6 中没有（ts 除外）2. UML 演示3. 代码演示java 代码public class SingleObject{ //私有化构造函数，外部不能有 new，只能内部 new private SingleObject(){ } //唯一被 ...
2018-11-02 14:09:56
237
原创 工厂模式
工厂模式1. UML 描述2. 代码演示class Product { constructor(name) { this.name = name } init() { alert('init') } fn1() { alert('fn1') } fn2() { alert('fn2') }}class Creator ...
2018-11-02 12:33:48
278
1
翻译 Unix/Linux设计准则
Unix/Linux设计准则看似简单。事实上，它们简单到会容易使人们忽略其重要性。这就是它们颇具欺骗性的地方。其实，简单的外表下掩盖着一个事实：如果人们能够始终如一的贯彻它们，这些准则可是非常行之有效的。以下这份清单会让你对Unix哲学的准则有初步的认识。小即是美。相对于同类庞然大物，小巧的事物有着其无可比拟的巨大优势。其中一点就是它们能够以独特有效的方式结合其他小事务，而且这种...
2018-11-01 14:20:54
245
原创 数据协商
数据协商1. 客户端Accept声明数据类型Accept-Encoding声明编码方式Accept-Language声明返息的语言Usrer-Agent声明浏览器和系统信息2. 服务端Content-Type返回数据格式Content-Encoding返回编码方式Content-Language返回语言...
2018-10-30 20:04:53
268
原创 HTTP 协议(上)
HTTP 协议(上)1. 经典五层模型应用层-传输层-网络层-数据链路层-物理层1.1 后三层物理层主要作用是定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层为数据在结点之间传输创建逻辑链路1.2 传输层向用户提供可靠的端到端(End-to-End)服务传输层向高层屏蔽了下层数据通信的细节1.3 应用层为应用软件提供了很多服务构建与 TC...
2018-10-30 17:45:00
203
原创 页面优化与安全
页面加载题目从输入 url 到得到 html 的详细过程浏览器根据 DNS 服务器得到域名的 IP 地址向这个 IP 的机器发送 HTTP 请求服务器收到、处理并返回 HTTP 请求浏览器得到返回内容window.onload 和 DOMConentLoaded 的区别window.onload 在全部资源加载完后才会执行，包括图片、视频DOMConentLoa...
2018-10-28 15:11:37
1166
原创 模块化
模块化避免带来全局污染require.js 的使用//util.jsdefine(function() { var util = { getFormatDate: function(date, type) { if (type === 1) { return '1-1' } if (type === 2) { ...
2018-10-28 15:09:22
137
原创 JS-Web-API
JS-Web-API常说的 JS(浏览器执行的 JS)包含两部分JS 基础知识(ECMA262 标准)JS-Web-API(W3C 标准)W3C 标准中的关于 JS 的规定：DOM 操作BOM 操作事件绑定ajax 请求(包括 http 协议)储存页面弹框是 window.alert(123)，浏览器需要做什么？定义一个 window 全局变量，对象类型...
2018-10-28 15:06:11
196
原创 JS 常见题目
JS 常见题目获取 2017-06-10 格式的日期function formatDate(dt) { if (!dt) { dt = new Date() } var year = dt.getFullYear() var month = dt.getMonth() + 1 var date = dt.getDate() if (month < 10...
2018-10-28 14:55:39
3234
原创 异步和同步
异步和同步同步和异步的区别是什么？分别举一个同步和异步的例子同步会阻塞代码执行,而异步不会alert 是同步,setTimeout 是异步一个关于 setTimeout 的笔试题//1,3,5,2,4console.log(1)setTimeout(function() { console.log(2)}, 0)console.log(3)setTimeout(...
2018-10-28 14:51:58
366
原创 作用域和闭包
作用域和闭包对变量提升的理解变量定义函数声明(注意和函数表达式的区别)说明 this 几种不同的使用场景创建 10 个<a>标签，点击的时候弹出对应的序号var ifor (i = 0; i < 10; i++) { ;(function(i) { var a = document.createElement('a') a.inn...
2018-10-28 14:50:40
184
原创 原型链
原型链如何准确判断一个变量是数组类型var arr = [];arr instanceof Array; //truetypedof arr //object , typeof无法判断是否是数组写一个原型链继承的例子//动物function Animal() { this.eat = function() { console.log('animal eat')...
2018-10-28 14:44:00
129
原创 JS中的变量类型
变量JS 中使用 typeof 能得到哪些类型typeof undefined //undefinedtypeof 'abc' //stringtypeof 123 //numbertypeof true //boolean//以上四点可以看出,typeof只能区分值类型的详细类型typeof {} //objecttypeof [] //objecttypeof null ...
2018-10-28 14:04:34
268
原创 解决问题：0.1.13版本better-scroll升级后，轮播图无法正常循环
版本0.1.15正常，升级到版本1.13.2后出现以下问题:不能正常循环轮播第一张图没有相应的dot,第二张图对应第一个dot，出现错位手动轮播至第五张图片后，会出现一张黑色轮播图，无法轮播回第一张图片查找官方文档后解决了此问题，以下为修改后的代码： this.slider = new BScroll(this.$refs.slider, { scrol...
2018-10-19 19:14:48
511
原创 分支之间的切换、提交流程
分支之间的切换、提交流程git pullgit checkout newBranchgit add .git commit -m "add_sth"git pushgit checkout mastergit merge newBranchgit push
2018-10-18 21:21:06
425
原创 正则表达式常用规则
正则表达式学习1. 辅助工具及正则表达式常用规则辅助工具：https://regexper.com/\b表示word bounday比如：it is a dog. His dog is nice.使用\bis\b匹配为第一个句子里面的ishttp:\/\/.+\.jpg表示匹配http:此处为内容.jpg的内容\d{4}表示匹配四个数字[/-]表示/或者-^、$分别表示开头...
2018-10-16 21:39:42
163
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人