sheng00 的所有文章

JavaScript:工厂模式

JavaScript、

工厂模式定义：实例化对象，用工厂方法代替new操作。

function CarMaker () {
}
CarMaker.prototype.drive = function () {
  console.log("Vroom, I have " + this.doors + " doors");
}
CarMaker.factory = function (type) {
  var constr = type,
  newcar;
  if(typeof CarMaker[constr] !== "function"){
    throw{
      name:"Error",
      message: constr + " doesn't exist"
    };
  }
  if(typeof CarMaker[constr].prototype.drive !=="function"){
    CarMaker[constr].prototype = new CarMaker();
  }
  newcar = new CarMaker[constr]();
  return newcar;
}
CarMaker.Compact = function(){
  this.doors = 4;
}
CarMaker.Convertible = function(){
  this.doors = 2;
}
CarMaker.SUV = function(){
  this.doors = 3;
}
var corolla = CarMaker.factory('Compact');
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');
corolla.drive();
solstice.drive();
cherokee.drive();

内置的Object也表现了工厂的行为：

var o = new Object(),
    n = new Object(1),
    s = Object("s"),
    b = Object(true);
console.log(o.constructor);
console.log(n.constructor);
console.log(s.constructor);
console.log(b.constructor);

JavaScript变量类型检查

JavaScript、 
var str = 'str';
console.log(typeof str); // string
console.log(str.constructor); // String
function User(){}
var u = new User();
console.log(typeof u); // object
console.log(u.constructor); // User
Variable typeof Variable Variable.constructor
{an:"object"} object Object
["an","array"] object Array
function(){} function Function
"a string" string String
33 number Number
true boolean Boolean
new User() object User

JavaScript引用

JavaScript、

JavaScript的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。前提是，实际的对象决不是一个引用：字符串总是一个字符串，数组总是一个数组。然而，多个变量可以引用相同的对象。JavaScript就是以这种引用机制为基础。通过维护一系列的指向其他对象的引用，语言为你提供了更大的弹性。
当几个变量指向相同对象时，修改这个对象会在所有指向这个对象的变量上有什么反应呢？

var obj = new Object();
var objRef = obj;
obj.someProp = true;
console.log(objRef===obj); // true
var arr = new Array(1,2);
var arrRef = arr;
arr.push(3);
console.log(arr === arrRef); // true
var str = "test";
var strRef = str;
str += "ing";
console.log(str === strRef); // false
var num = 1;
var numRef = num;
num += 1;
console.log(num === numRef); // false
var boo = true;
var booRef = boo;
boo = !boo;
console.log(boo === booRef); // false

我们知道string, number, bool是JavaScript的基础类型，Object, Array是组合类型，组合类型的值是以对象的属性存储的，所以改变了一个变量的值，所有指向它的变量都会变。

自动转换为下拉列表的网站导航栏

前端

网站的导航栏是很重要的一部分，无论用户使用的是什么样的屏幕，你的导航栏都应该是可见且美观的。
如果用户的屏幕比较窄，就需要对导航栏进行处理，这里提供了一个依靠js来判断和切换导航栏为下拉列表的方法，供大家参考。
正常状态（用户屏幕宽度足够）
图像 1
下拉列表状态（导航栏宽度超过用户屏幕）
这个时候点击“Menu”，可以打开和关闭菜单。
图像 2
代码在下面的框里，点击下面的运行按钮可以看到页面。

提示：你可以先修改部分代码再运行。

JavaScript原型继承

JavaScript 

function A(){
  this.fa = function(){
    console.log("function in A");
  }
}
function B(){
  this.fb = function(){
    console.log("function in B");
  }
}
var a = new A();
a.fa();//function in A
var b = new B();
// b.fa(); //throw error;
b.fb(); //function in B
console.log(b instanceof A) //false
B.prototype = new A();
var b = new B();
b.fa(); //function in A
b.fb(); //function in B
console.log(b instanceof A)//true
console.log(b instanceof B)//true

14 rules for fast web pages

前端
  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put CSS at the top
  6. Move JS to the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Turn off ETags
  14. Make AJAX cacheable and small

跨终端响应式页面设计入门

前端

转自：跨终端响应式页面设计入门 – vajoy – 博客园.
跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：

这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活和好维护。如果你希望你的页面能适配包括PC端在内的任何设备，那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰：
⑴ IE8-不能识别HTML5的<hearder>、<article>、<footer>、<figure>等标签，可以通过 html5.js 来解决：

然后将下面代码写入你的base.css来格式化html5标签：

article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section
{ display: block; }

⑵ IE8-不支持CSS3 media queries，即不支持”@media only screen”语法，可以通过 css3-mediaqueries.js 来解决：

本文仅谈论移动端的页面适配方式，不考虑PC屏幕环境，不过原理均是相通的。本文也不讨论SPA/OPA的实现。
（一）百分比赋值
相信许多刚接触响应式页面设计的朋友，第一时间考虑到的就是将layout数值设为百分值形式，包括width、height、padding、margin等大小、偏移、方位的赋值。 例如：






test


    
 Hello

常规来说我们会用固定值或者自动值来设置容器的高度，一旦我们想要使用百分比来设置元素高度时，我们可能会这么写：






test


    
 Hello

但在运行代码后，你会发现该高度样式并没有生效。解决这个问题的方法很简单，给外层元素”bady,html”添加一个 height:100% 的样式即可，具体原理可以查阅我的旧文章CSS百分比定义高度的冷知识?。
VIEWPORT介绍
这里先打断一下文章，简单介绍下“viewport”，做移动端页面开发的朋友必须了解viewport。
我们在使用移动端设备浏览网页时，移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的，通常来说这个虚拟的视图大小会比手机屏幕大，用户可以通过手势操作来平移、缩放这个视图。
为了方便理解，我们假设有这么一个页面：

① 如果没有viewport这种东西，在移动端浏览器上访问该页面可能是这样的：

② 有了viewport后是这样的：

viewport诞生的初衷是为了让移动端更人性化地浏览PC端页面，但它也带来了一些问题，从而催生了类似iscroll.js的工具。
想了解更多关于viewport的知识请点这里。
（二）禁用移动端设备的部分特性（非必要，按需使用）
⑴ 禁用viewport缩放功能
在页面头部加上如下语句来禁用viewport的缩放特性（响应式页面基本是按百分比来布局和适配的，用户缩放页面反而影响阅读效果）：

如上我们设置viewport初始化时便适配设备浏览器的宽度，且无法缩放，该meta标签具体参数如下：
width：viewport 的宽度，可以指定一个固定值，如650；或者可以是device-width，表示设备的宽度。
height：和 width 相对应，可指定高度。
initial-scale：页面初始缩放比例(0-1)
maximum-scale：允许用户缩放到的最大比例(0-1)
minimum-scale：允许用户缩放到的最小比例(0-1)
user-scalable：用户是否可以手动缩放（yes/no）
⑵ 禁用Webkit文本调节功能
无论是移动端还是PC端，webkit内核的浏览器会自动调节文字大小。例如Chrome不会显示小于12px的字号效果，即使你设置 font-size:10px，页面也将渲染为12px的大小。
另外移动设备在纵向模式和横向模式查阅页面时，文本的大小也会被浏览器调节：

禁用该功能的途径是使用-webkit-text-size-adjust 来设置（chrome28+已失效）：

body {
    -webkit-text-size-adjust: 100%;
}

（三）CSS3 media queries
CSS3 media queries（后简称为CMQ）算是响应式页面设计的一把瑞士军刀，可以把你的页面在不同分辨率的环境下雕琢成对应的、最好看的轮廓，掌握了CMQ也算是掌握了响应式页面设计的基础。
CMQ在样式文件中的使用很简单，其语法为

@media only screen and (max/min-width/height: 960px) {
  /* 样式定义 */
}

其中橙色高亮的?“only screen” 参数表示限定当访问环境（媒体类型）为彩色屏幕设备时才生效。

该参数可选值为?all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

除非该参数数值为all，否则可以在前面加个only限定类型。对于移动端和PC端，我们只需设为 “screen” 或 “only screen” 即可，建议使用后者，其语义更为严谨。

另一个高亮的参数 “max/min - width/height” 表示当屏幕的宽度/高度超过或者小于某个值时则生效，具体可以看下面的示例：

⑴ Max Width


@media only screen and (max-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

该代码段表示只有当屏幕宽度小于500px时才生效。

⑵ Min Width


@media only screen and (min-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

?该代码段表示只有当屏幕宽度大于500px时才生效。

⑶ Max/Min Height

同 max/min-width ，表示当屏幕高度小于/大于设定值时样式才生效。常规来说，我们使用 max/min-width 比较多，而很少使用 max/min-height 。

⑷ Multiple Media Queries

有时候我们需要定义样式是在某个分辨率区间（比如500px-900px）才生效，这时候我们可以叠加使用 max/min-width/height 。
方法很简单，加多一个“and”即可：

@media only screen  and (mix-width:500px) and (max-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

⑸ Device Width

我们上述的 max/min-width/height 均是针对可视区域分辨率的，如果希望针对设备的实际宽度来适配，我们可以利用 max-device-width 来实现：

@media only screen and (max-device-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

该代码段表示当设备屏幕宽度小于900px时，其内部定义的样式生效。打个比方，如果浏览器打开了一个小窗口（非全屏显示），该窗口的宽度对该段代码没有任何影响。
只要你的电脑屏幕宽度是大于900px的（你应该不会使用分辨率太低的PC屏幕吧？），上面这段代码就不会生效。

⑹ 标签化的CMQ

CMQ不仅仅可以写在样式文件中，也可以标签化，直接写在页面<head>标签内，其写法如下：

该代码表示在视图宽度小于800px时则引入small_screen.css这个外部样式文件。

另外你还可以利用orientation来判断设备的方向（垂直模式portrait/横向模式landscape）：


　

但常规我们并不推荐使用orientation，因为它无法告知你关于设备分辨率的任何信息，所以作为一个通用的规则，应该避免orientation而使用device-width代替。

（四）例子

我们来做一个小例子，让它能按下图要求，在三个分辨率区间做不同的适配布局：

先写原型框架：






Demo



    
top-banner

    

        
        

           
the main area

接着利用CMQ，依照三种分别率区间来定义样式：






Demo



    
top-banner

    

        
        

           
the main area

这里需要提醒的一点是，我们对于文本字体大小的定义建议使用 em 来赋值，毕竟不同终端不同浏览器会依据分辨率大小来设定文本的缺省大小，从而方便用户阅读，利用 em 来按比例调整字体大小能迎合终端浏览器的这个人性化特点。