Cipuzp-优快云博客

翻译立即执行函数

3.6 立即执行函数 Immediately-Invoked Function Expression (IIFE) 参考自此篇文章现在我们定义了一个函数function foo(){}或者var foo = function(){}，函数名后加上一对小括号即可完成对该函数的调用，比如下面的代码： var foo = function() { /* code */ } foo() 接着我...

2018-11-12 19:55:07 767 1

原创如何清除浮动

清除浮动的几种方式 2.6 何为清除浮动？在非 IE 浏览器（如 Firefox）下，当容器的高度为 auto，且容器的内容中有浮动（float 为 left 或 right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的 CSS 处理，就叫 CSS 清除浮动。浮动的定义：...

2018-11-12 17:25:02 275

转载 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 333

原创 CSS选择器优先级

2.4 选择器优先级如何确定？ 2.4.1 比较同一级别的个数，数量多的优先级高 important &gt; 内联 &gt; ID &gt; 类 &gt; 标签 | 伪类 | 属性选择 &gt; 伪对象 &gt; 通配符 &gt; 继承权值的大小跟选择器的类型和数量有关，样式的优先级跟样式的定义顺序有关这也就解释了为什么 11 个标签的定义会比不上 1 个类的定义，1 个类加 11 个

2018-11-11 15:19:13 345

原创 Normalize vs Reset

2. Normalize vs Reset 2.3 css reset 和 normalize.css 有什么区别？ 2.3.1 创造 normalize.css 的几个目的保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分 HTML 元素提供修复浏览器自身的 bug 并保证各浏览器的一致性优化 CSS 可用性：用一些小技巧解释代码：用注释和详细的文档来 2.3.2 N...

2018-11-11 15:00:57 282

转载 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 423

原创盒模型

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 220

原创 HTML-!DOCTYPE

1.4 HTML <!DOCTYPE> 声明注释：<!DOCTYPE> 标签没有结束标签。提示：<!DOCTYPE> 声明不区分大小写。 1.4.1 标签定义及使用说明 <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。 <!DOCTYPE> 声明不是一个 HTML 标签；它是用...

2018-11-11 14:19:00 346

1.2 viewport 1.2 meta viewport 是做什么用的，怎么写？ viewport 指 web 页面上用户的可见区域。 1.2.1 viewport 常用属性： width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width 为设备的宽度（单位为缩放为 100% 时的 CS...

2018-11-11 14:15:55 932

原创 HTML 语义化

1. HTML 题 1.1 如何理解 HTML 语义化的？让根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 1.1.1 为什么要语义化？为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；用户体验：例如 title、 alt 用于解释名词或解释图片信息、 la...

2018-11-11 14:12:49 277

转载 Linux-chmod指令

1. chmod介绍指令名称 : chmod 使用权限 : 所有使用者使用方式 : chmod [-cfvR] [–help] [–version] mode file… 说明 : Linux/Unix 的档案存取权限分为三级 : 档案拥有者、群组、其他。利用 chmod 可以藉以控制档案如何被他人所存取。 2. 参数格式 mode : 权限设定字串，格式如下 : [ugoa…][[±=...

2018-11-09 17:32:54 351

原创 SOLID 五大设计原则

SOLID 五大设计原则 1. SRP 单一职责原则(The Single Responsibility Principle) 一个程序只做好一件事如果功能过于复杂就开分开，每个部分保持独立 2. OCP 开放封闭原则(The Open Closed Principle) 对拓展开放，对修改封闭增加需求时，拓展新代码，而非修改已有代码软件设计的终极目标 3. LSP 里氏置换原则(T...

2018-11-09 16:00:40 1037

原创 23 种设计模式

23 种设计模式 1. 创建型工厂模式（工厂方法模式、抽象工厂模式、建造者模式）单例模式原型模式 2. 结构型适配器模式装饰器模式代理模式外观模式桥接模式组合模式享元模式 3. 行为型策略模式模板方法模式观察者模式迭代器模式职责连模式命令模式备忘录模式状态模式访问者模式中介者模式解释器模式 ...

2018-11-09 12:51:54 244

原创 jQuery 版本购物车（融入设计模式）

jQuery 版本购物车（融入设计模式） 1. 介绍 1.1 功能显示购物列表、加入购物车、从购物车删除 1.2 用到的设计模式工厂模式 $('XXX')，创建商品单例模式购物车装饰器模式打点统计观察者模式网页事件、Promise 状态模式添加/删除购物车模板方法模式 init()，统一的方法渲染代理模式打折商品信息处理 1...

2018-11-09 12:48:33 688

原创设计模式（不常用的几类）

设计模式 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 423

原创状态模式

状态模式 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 264

原创迭代器模式

迭代器模式 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 202

转载详解浮动

详解浮动 1. 浮动元素处于什么样的流？《CSS 权威指南》中说，浮动元素同时处于（常规）流内和流外如何理解？浮动元素不影响块级元素的布局（换句话说就是块级元素会当浮动元素不存在）浮动元素会影响行内元素的布局，从而间接影响块级元素的布局 2. 浮动与定位不能一起用如果一起使用，浮动失效、定位生效但是浮动与相对定位可以一起使用 3. 浮动元素的摆放方式尽量靠上尽量靠左...

2018-11-05 17:34:45 424 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 189

原创外观模式

外观模式 1. 介绍为子系统中的一组接口提供了一个高层接口,使用者使用这个高层接口 2. UML 演示 3. 代码演示 function bindEvent(elem, type, selecetor, fn) { if (fn == null) { fn = selector selector = null } //... } //调用 bindEvent(...

2018-11-04 11:23:21 230

原创代理模式

代理模式 1. 介绍使用者无权访问目标的对象中间加代理，通过代理做授权和控制 2. UML 演示 3. 代码演示 class RealImg { constructor(fileName) { this.fileName = fileName this.loadFromDisk() } display() { console.log('display...

2018-11-04 11:05:11 245

原创装饰器模式

装饰器模式 1. 介绍为对象添加新功能不改变其原有的结构和功能 2. UML 演示 3. 代码演示 class Circle { draw() { console.log('画圆形') } } class Decorator { constructor(circle) { this.circle = new Circle() } draw() { ...

2018-11-02 22:14:50 231

原创适配器模式

适配器模式 1. UML 演示 2. 代码演示 // class Client { // do() { // } // } class Adaptee { specificRequest() { return '公牛插头' } } class Target { constructor() { this.adaptee = new Adaptee() }...

2018-11-02 19:31:21 193

原创单例模式

单例模式 1. 特点系统中被唯一使用一个类只有一个实例单例模式需要用到 java 的特性（private） ES6 中没有（ts 除外） 2. UML 演示 3. 代码演示 java 代码 public class SingleObject{ //私有化构造函数，外部不能有 new，只能内部 new private SingleObject(){ } //唯一被 ...

2018-11-02 14:09:56 317

原创工厂模式

工厂模式 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 377 1

翻译 Unix/Linux设计准则

Unix/Linux设计准则看似简单。事实上，它们简单到会容易使人们忽略其重要性。这就是它们颇具欺骗性的地方。其实，简单的外表下掩盖着一个事实：如果人们能够始终如一的贯彻它们，这些准则可是非常行之有效的。以下这份清单会让你对Unix哲学的准则有初步的认识。小即是美。相对于同类庞然大物，小巧的事物有着其无可比拟的巨大优势。其中一点就是它们能够以独特有效的方式结合其他小事务，而且这种...

2018-11-01 14:20:54 375

原创数据协商

数据协商 1. 客户端 Accept 声明数据类型 Accept-Encoding 声明编码方式 Accept-Language 声明返息的语言 Usrer-Agent 声明浏览器和系统信息 2. 服务端 Content-Type 返回数据格式 Content-Encoding 返回编码方式 Content-Language 返回语言 ...

2018-10-30 20:04:53 362

原创 HTTP 协议(上)

HTTP 协议(上) 1. 经典五层模型应用层-传输层-网络层-数据链路层-物理层 1.1 后三层物理层主要作用是定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层为数据在结点之间传输创建逻辑链路 1.2 传输层向用户提供可靠的端到端(End-to-End)服务传输层向高层屏蔽了下层数据通信的细节 1.3 应用层为应用软件提供了很多服务构建与 TC...

2018-10-30 17:45:00 307

原创页面优化与安全

页面加载题目从输入 url 到得到 html 的详细过程浏览器根据 DNS 服务器得到域名的 IP 地址向这个 IP 的机器发送 HTTP 请求服务器收到、处理并返回 HTTP 请求浏览器得到返回内容 window.onload 和 DOMConentLoaded 的区别 window.onload 在全部资源加载完后才会执行，包括图片、视频 DOMConentLoa...

2018-10-28 15:11:37 1266

原创模块化

模块化避免带来全局污染 require.js 的使用 //util.js define(function() { var util = { getFormatDate: function(date, type) { if (type === 1) { return '1-1' } if (type === 2) { ...

2018-10-28 15:09:22 213

原创 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 309

原创 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 3353

原创异步和同步

异步和同步同步和异步的区别是什么？分别举一个同步和异步的例子同步会阻塞代码执行,而异步不会 alert 是同步,setTimeout 是异步一个关于 setTimeout 的笔试题 //1,3,5,2,4 console.log(1) setTimeout(function() { console.log(2) }, 0) console.log(3) setTimeout(...

2018-10-28 14:51:58 463

原创作用域和闭包

作用域和闭包对变量提升的理解变量定义函数声明(注意和函数表达式的区别) 说明 this 几种不同的使用场景创建 10 个<a>标签，点击的时候弹出对应的序号 var i for (i = 0; i < 10; i++) { ;(function(i) { var a = document.createElement('a') a.inn...

2018-10-28 14:50:40 262

原创原型链

原型链如何准确判断一个变量是数组类型 var arr = []; arr instanceof Array; //true typedof arr //object , typeof无法判断是否是数组写一个原型链继承的例子 //动物 function Animal() { this.eat = function() { console.log('animal eat')...

2018-10-28 14:44:00 213

原创 JS中的变量类型

变量 JS 中使用 typeof 能得到哪些类型 typeof undefined //undefined typeof 'abc' //string typeof 123 //number typeof true //boolean //以上四点可以看出,typeof只能区分值类型的详细类型 typeof {} //object typeof [] //object typeof null ...

2018-10-28 14:04:34 369

原创解决问题：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 593

原创分支之间的切换、提交流程

分支之间的切换、提交流程 git pull git checkout newBranch git add . git commit -m "add_sth" git push git checkout master git merge newBranch git push

2018-10-18 21:21:06 512

原创正则表达式常用规则

正则表达式学习 1. 辅助工具及正则表达式常用规则辅助工具：https://regexper.com/ \b表示word bounday 比如：it is a dog. His dog is nice. 使用\bis\b匹配为第一个句子里面的is http:\/\/.+\.jpg表示匹配http:此处为内容.jpg的内容 \d{4}表示匹配四个数字 [/-]表示/或者- ^、$分别表示开头...

2018-10-16 21:39:42 254

得到App产品分析报告

空空如也