发表于   |   分类于   |  

前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其他页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。

什么是跨域？

如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript 允许这种同源页面的数据互相通信。

阅读全文 »

发表于   |   分类于   |  

移动端领域，常常会去判断终端类型，然后去执行相应的动作。
通过 Javascript 去判断客户端是否是iOS或Android：

//以下代码片段是通过 Javascript 去判断客户端是否是iOS或Android：
var u = navigator.userAgent,
    isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // Android 终端
    isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // iOS 终端（第 1 种方法）
    isiOSx = u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1; //iOS 终端（第 2 种方法）
//以下代码是检查是否是移动端（Mobile）、iPad、iPhone、WeChat、QQ
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //Opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //Safari、Chrome...
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//FireFox
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS 终端
            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Android 终端
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//调用方法：
if(browser.versions.trident){ alert("is IE"); }//判断是否IE内核
if(browser.versions.webKit){ alert("is webKit"); }//判断是否webKit内核
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }//判断是否移动端
//检测浏览器语言:
currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){  //判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

发表于   |   分类于   |  

一道JS题目的解析

var A = (function() {
	function Person(name) {
		this.name = name;
	}
	var m = function() {
		return "Hello " + this.name;
	};
	Person.prototype.getGreeting = m;
	return Person;
})();
// After this line, what would you write to call into the above code and have it return “Hello Edgar”?
// Answer:
var edgar = new A('Edgar');
edgar.getGreeting();// Hello Edgar

变量A 被赋值成一个自执行函数，最终return出Person这个构造函数，因此A被指引到构造函数Person。
构造函数Person有一个属性name，name由构造函数的参数name传入，另外它还有函数指向变量m，然后m赋给了Person的原型属性getGreeting。
因此要打印出『Hello Edgar』，需要用参数传入Edgar，再调用原型链上的getGreeting方法。

发表于   |   分类于   |  

优化的意义

现阶段PC的性能绝大多数情况是过剩的，但移动端性能就参差不齐了，因此对移动端 H5 页面进行精细的性能优化是极其重要的。
移动端的WEB页面本身渲染性能差于Native的APP，尽管产品的功能，不关注性能优化，将极大的影响WEB页面的体验。

用户感知

当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许有一部分用户会退出重新进入，但更多的用户会直接放弃使用。

阅读全文 »

发表于   |   分类于   |  

我是喜欢胶片的复古风格，现在翻以前的照片果然是很稚嫩，回忆成长的历程还是蛮心酸的，特别是在自己不熟悉的领域，没有接受专业训练的人，没有家庭的熏陶，那只能大量的阅览别人拍的照片，培养对色彩的敏锐度，学习别人的照片是如何构思，尝试对自己拍摄的照片调色润饰和刻意的安排，当然这里的意思绝不是美图秀秀一键美容，这里的重点在于培养自己对色彩的认识，色彩的搭配，色调的控制，对照片内容的安排和构图，虽然好的照片在拍摄底片那一刻基本上就成型了，但是后期的加强才能让照片更趋近于完美，正如适当的化妆打扮自己，能增强自信心，加上内在的底气，气质自然而然爆棚，而我认为的拍照片，也是这个道理。

阅读全文 »

发表于   |   分类于 ，   |  

Math.random() 返回0（含）到1（不含）之间的伪随机数.

注意到是0到1之间的数据，另外它并不是真的随机数，很少会去关注她是伪随机，然而，这次面试官就问了。
伪随机，也就是在若干次随机后，还可能重复出现这个数，也就是说不是真的随机数咯。
那么问题来了，到底什么是「真随机」？计算机能不能产生「真正的真随机」？

回忆大学里学过的概率论，真正的随机数其实是物理现象产生的，如抛硬币，量子力学效应等。
而计算机产生随机的方法（人为的思维）主要有 :
①.线性同余;
②.平方取中;
③.M-sequence;
④.梅森旋转。
这些算法产生的都是伪随机数。

阅读全文 »

发表于   |   分类于   |  

因为发现最新版的 Node 有点坑，已开启服务电脑就可以煎鸡蛋了，后来重新装了一下，回到稳定版本，然后就出现了一大堆的Error，折腾了好久大多数错误都解决了，但覆盖安装 Node 还是会出现 DTrace 错误，如下:

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

Hexo官方的有这个错误的解决办法，执行$ npm install hexo --no-optional，但是这个并没有用！
后来找到一段脚本，先将 Node 删除干净，在进行重新安装即可。
通过bash 新建一个uninstall_node.sh文件，然后复制下面一段代码，并保存在该文件中：

#!/bin/bash
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*
阅读全文 »

发表于   |   分类于   |  

众知360浏览器在国内市场占比份额是比较大的，为了让WEB页面更好的呈现，让360等国内双核浏览器默认使用Chromium内核（极速模式），需要做一些处理。
在网页头部添加以下Meta控制来标签：

<!--360浏览器-->
<meta name="renderer" content="webkit">
<!--其它双核浏览器-->
<meta name="force-rendering" content="webkit">
<!--如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

  • 注意：标签的顺序是不可以变的，否则360浏览器不会成功切换到极速的内核。

第三个标签里的 X-UA-Compatible 是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(如IE6)，以此来解决部分兼容问题。

发表于   |   分类于   |  

ECMAScript 2015 即 ECMAScript 6 ，是ECMAScript标准发布的最新版本，于2015年6月批准通过。
ES2015是对语言的一次重大更新，是自从2009年ES5标准化后的第一次重大更新。
主要的JavaScript引擎正在逐步实现这些特性，点击这里查看浏览器的兼容情况。

新的对象属性和方法

在ES6标准中新增了许多新的对象属性和方法，可以看看尼古拉斯的新书《JavaScript面向对象精要》，当然可以去搜索引擎查询一个对象属性的办法，但是那样效率也是太低了。
摘自《DOM启蒙》的方法，用如下方式在Chrome浏览器控制台打印获取Object的所有属性：

Object.getOwnPropertyNames(Object).sort().forEach(function (val) {
      console.log(val)
});
阅读全文 »

发表于   |   分类于   |  

随着 JavaScript 原生 API 的完善，一些简单的操作完全可以用原生解决，手机端的一些简单页面，不要要复杂的类库，从而避免使用 jQuery 等类库来完成，减少代码量，提高页面加载速度。

选择DOM

// jQuery
var ele =$(".ele");
// JavaScript API
var ele = querySelectAll('.ele');
// JavaScript function
var _qs = function(ele){
	return querySelectAll('ele');
}
var ele = _qs('.ele');
阅读全文 »