Invictus Blog

Don't be evil

CSS 1px

Retina屏幕1px边框问题

7种方法解决移动端Retina屏幕1px边框问题 在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！ 没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。 造成边框变粗的原因 其实这个原因很简单，因为...

Posted by Invictus Blog on July 14, 2017

webpack

webpack原理与实战

webpack原理与实战 webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。 webpack原理 在深入实战前先要知道webpack的运行原理 webpack核心概念 entry 一个可执行模块或...

Posted by on June 7, 2017

MVVM

javascript MVVM

什么是MVVM？ MVVM是一种程序架构设计。把它拆开来看应该是Model-View-ViewModel。 Model Model指的是数据层，是纯净的数据。对于前端来说，它往往是一个简单的对象。例如： { name: 'mirone', age: 20, friends: ['singleDogA', 'singleDogB'], details: { ty...

Posted by on June 2, 2017

前端性能优化的三个维度

javascript 深入学习

| 前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level 追求极致的前端性能体验，提升自己的level，come on ~ 一、静态资源优化 这个level，主要是减少静态资源的加载时间，主要包括html、css、js和图片文件，静态资源的加载时间是前端性能最大的瓶颈（...

Posted by on May 29, 2017

JavaScript深入之创建对象的多种方式以及优缺点

javascript 深入学习

写在前面 这篇文章讲解创建对象的各种方式，以及优缺点。 但是注意： 这篇文章更像是笔记，因为《JavaScript高级程序设计》写得真是太好了！ 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { ...

Posted by on May 29, 2017

JavaScript深入之类数组对象与arguments

javascript 深入学习

类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子： var array = ['name', 'age', 'sex']; var arrayLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3 } 即便如此，为什么叫做类数组对象呢？ 那让我们从读写、获取长度、...

Posted by on May 29, 2017

JavaScript深入之bind的模拟实现s

javascript 深入学习

bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出 bind 函数的两个特点： 返回一个函数 可以传入参数 返回函数的模拟实现 从第一个特点开始，我们举个例子： var foo =...

Posted by on May 29, 2017

JavaScript深入之new的模拟实现

javascript 深入学习

new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 也许有点难懂，我们在模拟 new 之前，先看看 new 实现了哪些功能。 举个例子： // Otaku 御宅族，简称宅 function Otaku (name, age) { this.name = name; this.age = age; th...

Posted by on May 29, 2017

JavaScript深入之call和apply的模拟实现

javascript 深入学习

call 一句话介绍 call： call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。 举个例子: var foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(foo); // 1 注意两点： call 改变了 thi...

Posted by on May 29, 2017

JavaScript深入之参数按值传递

javascript 深入学习

定义 在《JavaScript高级程序设计》第三版 4.1.3，讲到传递参数： ECMAScript中所有函数的参数都是按值传递的。 什么是按值传递呢？ 也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。 按值传递 举个简单的例子： var value = 1; function foo(v) { v = 2; console...

Posted by on May 29, 2017

FEATURED TAGS
前端开发 javascript 翻译 android android interview css others
ABOUT ME

编程就像变魔术，我渴望成为一个魔术师

FRIENDS