xiaoda / codediary Goto Github PK

from 《Javascript语言精粹》

递归函数可以非常高效地操作树形结构，比如浏览器的文档对象模型（DOM）。每次递归调用时处理指定的树的一小段。

var wark_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
}

有时往.gitignore添加了想要忽略的文件，却没有生效。

解决方法：
git rm -r --cached .
git add .
git commit -m ".gitignore is now working"

stackoverflow链接

Angular后台使用jQuery File Upload的最简单配置，在ajax回调里无法修改$scope。
一通研究发现是缺少了_$scope.$apply_，在Angular上下文环境外想要修改$scope并触发Angular的model检查必须使用_$scope.apply_。from StackOverFlow

$.getJSON('/echo/json/', {}, function(data){
    $scope.$apply(function(){
        $scope.period = '2010 - 2011';
    });
}); 

Angular $watch $apply $digest的原理剖析见这里
PS: 该方案主要解决特殊情况如引入第三方插件时遇到的问题，不代表赞同在Angular中使用jQuery ajax方法。绝大部分数据请求应走Angular $http提供的方法。

最近接受了许多当前最新的开发理念、工具如grunt/bower等，并对自己的小项目进行了一番重构，具体如下：
1.使用bower管理外部css/js文件
2.css使用sass作为预处理器，充分利用sass的特性，制作一个通用帮助文件_helper.scss
3.js使用规范的新写法，去掉不必要的分号，制作一个通用帮助文件helper.js

重构工作虽费时费力，但可以提高健壮性、可读性、复用性等，长远看可以提高开发效率。现在正是多做尝试的好时机。

在使用Highcharts插件生成图表时，日期不知为何总显示为时间戳而不是人类能看懂的时间。直觉怀疑是变量类型问题，一查果然是=。= 这时就发现了Chrome Dev Tool的一个细节：使用console.log输出一个变量，如果这个变量的类型是String，那么输出的颜色是黑色；如果变量的类型是Number，那么输出的颜色是蓝色。这个细节能够帮助我们快速判断一个数字的变量类型是否正确。^_^

原文链接 from 彭琪谈编程

最近做微信登录前台用到，学习了。

Chrome已升级到38，开发者工具有不少新特性。
原文链接 from 伯乐在线

原文链接 from richardbao

iPhone6和iPhone6 plus的推出对前端最直接的影响就在分辨率，学习了。

from《Javascript语言精粹》

有一个好的方式去判断一个对象是否为数组：

var is_array = function (value) {
    return Object.prototype.toString.apply(value) === '[object Array]';
}

js匿名函数（又名立即执行函数，也有人称为闭包）有三种写法。

第一种是括号：
(function(){ ... })()
(function(){ ... }())

第二种是运算符：
!function(){ ... }()
+function(){ ... }()
-function(){ ... }()
~function(){ ... }()

第三种是关键字：（暂不讨论）
void function(){ ... }()
new function(){ ... }()
delete function(){ ... }()

“其实无论是括号，还是感叹号，让整个语句合法做的事情只有一件，就是让一个函数声明语句变成了一个表达式。”（引用function与感叹号，葵中剑@剑空）

不同写法有执行速度差异，但个人认为量级很小可以忽略。当前发现的运算符写法优于括号写法的是：当括号写法前缺少必需分号时js会报错，而运算符写法则不会。在js压缩工具方面，google closure只认可括号写法，会对运算符写法抛出warning或error；uglifyjs同时认可这两种写法，最后输出的压缩结果使用了运算符（!）写法。

“但是为什么这么多开发者钟情于感叹号？我觉得这只是一个习惯问题，它们之间的优劣完全可以忽略。一旦习惯了一种代码风格，那么这种约定会使得程序从混乱变得可读。如果习惯了感叹号，我不得不承认，它比括号有更好的可读性。我不用在阅读时留意括号的匹配，也不用在编写时粗心遗忘”（引用function与感叹号，葵中剑@剑空）

git仓库通过ssh方式更新代码不需要输入代码，但http(s)方式需要，有没有办法记住密码呢？

解决方案 from stackoverflow

from《高性能Javascript》

在大多数情况下，你需要使用一个单一的方法来动态加载Javasciprt文件，下面的函数封装了标准及IE特有的实现方法：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if (script.readyState) { // IE
        script.onreadystatechange = function() {
            if(script.readyState == 'loaded' || script.readyState == 'complete'){
                script.onreadystatechange = null;
                callback();
            }
        }
    } else { // 其他浏览器
        script.onload = function() {
            callback();
        }
    }
    script.src = url;
    document.getElementByTagName('head')[0].appendChild(script);
}

不停地遇到问题，不停地Google，不停地发现好博客！
我把真正帮助我解决问题的好博客列在这里，常年更新^_^

PureWeber – 纯粹互联网
葵中剑@剑空
Viget
OurJS

CSS3实现的响应式字体：自适应视图窗口大小的新单位 from OurJS

手机浏览器响应式字体的新选择。

刚看了曝光Galaxy S6的新闻，这台下一代的三星手机的屏幕尺寸是5.2寸，分辨率为2560*1440。前端小工虽然可以记住大多数主流移动设备的分辨率、像素密度（更合适的称呼在哪里- -），但形形色色的机型和最新机型不是我们可以全部知道的。所以，为了能知道各种手机的准确参数，我有了一个主意......

就是做若干测试页面，只要在移动设备上访问页面就可以得到实测数据，除显示方面参数外还有对各种功能、API的支持。这是最最最最最准的了！至于设备从哪里搞嘛......呵呵......

Ready to work~

from《Javascript语言精粹》

当你创建一个新对象时，你可以选择某个对象作为它的原型。Javascript提供的实现机制杂乱而复杂，但其实可以被明显地简化。我们将给Object增加一个create方法。这个方法创建一个使用原对象作为其原型的新对象。

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    }
}
var another_stooge = Object.create(stooge);

网站开发中在本机或虚拟机访问localhost只需配好hosts即可，要在移动设备或别人电脑上访问localhost会很麻烦。一种方法是在本机配置dns服务器dnsmasq，但这货的配置比较麻烦。付师傅传授了一个简单好用的工具：ngrok

先下载ngrok，注册账号获得token，执行 ngrok -authtoken token -subdomain=xxx 80，本地配置nginx，就可以在外网通过http://xxx.ngrok.com 访问localhost了。实现原理是本地与服务器之间打开了一个通道，服务器接收到请求从本地获得数据后返回请求。

工作中，js代码由服务器使用google closure检查，本地也可以执行相同的命令:
java -jar compiler.jar --js index.js

几天前上传js代码报错，检查后发现是if false引起closure compiler抛出warning：
if(false){...}
（大概的）报错信息：warning: suspicious code / unreachable code ...

暂不讨论写法，我找到定制closure compiler warning / error的命令参数（参考），只需带上对应参数:

java -jar compiler.jar --js index.js --jscomp_off=uselessCode
忽略uselessCode类型问题

java -jar compiler.jar --js index.js --jscomp_warning=uselessCode
将uselessCode类型问题输出为warning

java -jar compiler.jar --js index.js --jscomp_error=uselessCode
将uselessCode类型问题输出为error

写代码写得再烦再累都不要不开心，不管发生什么事都不要不开心，永远都不要不开心^_^

Asynchronous Loading

Modules are a way of managing $injector configuration, and have nothing to do with loading of scripts into a VM. There are existing projects which deal with script loading, which may be used with Angular. Because modules do nothing at load time they can be loaded into the VM in any order and thus script loaders can take advantage of this property and parallelize the loading process.

from Angularjs Guide

$routeProvider Api

resolve - {Object.<string, function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property (see below). This can be particularly useful, when working with components as route templates.

from Angularjs Api

找点sublime插件耍耍^_^

一直坚持阅读最新、有用的信息，但随着信息源和量的不断增长，实在无法阅读所有信息了。渐渐觉得我们的大脑不应该用来记忆所有信息，而是对所有信息建立索引：需要某类信息的时候，返回这类信息能够通过何种方式被得到。

既然想成为一名设计师，那么我也该搜集素材充实自己的素材库了。传统的素材管理方式是低效的，素材保存在不同的文件夹中，使得素材只能以单个维度建立索引，实在是不方便。我希望将素材全部录入数据库，每种素材含有多个标签（意味着多个维度），搜索一个标签输出所有包含该标签的素材。

抓到实例一只^_^


当img标签没有定义width/height属性时，img标签的默认宽高为150px。

其实我还没读完，只是单纯地喜欢“读后感”这三个字。学生时期看完书最讨厌写读后感，现在却忍不住想写，人生真是奇妙。

JavaScript: The Good Parts是我在Safari上读的第三本书，前两本介绍的是移动web开发和最新的html5 / css3特性，有非常多的新东西可以看。而这本书只讲javascript...javascript谁不会写啊？但是这次，我错了...

JavaScript: The Good Parts对javascript进行了系统的、循序渐进的、深入的探索和尝试，比较了各种语法的可能性，将每一种写法的优点、缺点全部展开给你看，看得我真是...太满足了。在探索中不断提示如何更好利用javascript本身的优点，规避javascript语言的缺点。优雅、高效的写法技巧给了我很多想象的空间。as always，书里还是有些我无法理解的内容> < 可能是因为英文原版不好理解吧（安慰^ ^）

真心推荐！

最近的项目，仙侠道音乐站，由html5 audio实现，在不支持html5 audio或不支持m4a格式的浏览器中fall back到flash。这是一个兼容mobile / pad / pc的web app，和大多数音乐播放类网站一样包含大量js代码、没有使用controls属性，功能由js控制。

在后期细节优化阶段遇到棘手的问题：iOS7以上iOS设备中，iOS控制中心的媒体控制按钮（播放/暂停、上一首、下一首）无法正常使用。Google不到有用的答案，于是在苦逼思索和尝试之后发现：iOS控制中心的媒体按钮其实相当于controls属性提供的系统控制栏。由于audio没有使用controls属性、没有对控制栏进行优化，因此在iOS控制中心按下媒体按钮会带来意料不到的负面效果。
问题的解决分两个部分：

第一部分是播放/暂停按钮，通过html5提供的media events监测按钮事件（参考），将需要的逻辑进行绑定。

第二部分是上一首、下一首按钮，audio的系统控制栏并未提供此功能，html5自然也没有提供相应的media events。进一步探索后发现上一首按钮的实现逻辑是将播放时间更新为0，下一首按钮的实现逻辑是先暂停再将播放时间更新为最大。只要对这两个时间点绑定合适的逻辑就好。

iOS控制中心优化完成后，才是一个合格的iOS music app！

有趣的问题：js里，0.1+0.2等于多少？
结果：0.30000000000000004
类似的：
0.2+0.4=0.6000000000000001
0.1+0.7=0.7999999999999999
0.6+0.7=1.2999999999999998
js计算浮点数依赖的标准是IEEE754，这个标准可以适用不少场景，但却和我们大部分人的常识不符。
所以，如果只需要进行普通的浮点数计算，可以将浮点数放大成整数计算，因为整数的计算一定是精确的。
参考：百度百科，Stack Overflow

我还是开始写技术博客了，在这个牛逼的地方，GitHub。
我希望把工作中的技术内容和自己的技术探索记录在这里，可以是代码、介绍、心得、吐槽等等。方便日后翻翻和看看自己有没有进步^_^
最后，要坚持！

最近发生的一些小事引起了我的注意。

写js时很自然地用上了apply：（以前不曾用过）
var mobile_mask = String.prototype.replace.apply(mobile, [String.prototype.substr.apply(mobile, [3, 6]), '******']);

在sublime写代码切换到vim很自然地打出了yy 6p；（以前没使用过数字+p）

做页面的速度比以前快了，处理复杂的前端逻辑也没有以前头疼了。

looking forward to more progress~

1.bower √
2.grunt √
3.jquery源码
4.sea.js
5.qunit
6.coffeescript
7.webstrom
8.phpstorm
9.underscore.js
10.angular.js
11.angularui
12.fis

from《Javascript语言精粹》

我们可以使用函数和闭包来构造模块。模块是一个提供接口却隐藏状态与实现的函数或对象。通过使用函数产生模块，我们几乎可以完全摒弃全局变量的使用，从而缓解这个Javascript的最为糟糕的特性之一所带来的影响。

var mammal = function (spec) {
    var that = {};
    that.get_name = function () {
        return spec.name;
    }
}
var myMammal = mammal({name: 'Herb'});

$ git add . # add to index only files created / modified and not those deleted
$ git add -u # add to index only files deleted / modified and not those created
$ git add -A # do both operation at once, add to index all files

以上参数告诉git需要add的内容（参考）

今天从小伙伴那pull了php代码，打开网页报错：Cannot re-assign auto-global variable _FILES
报错位置是这个方法：
function _upload($_FILES){
/* logic */
}
也就是说php不可以（在方法里）重新分配保留变量如$_FILES等。小伙伴之所以没有发现这个问题是因为他的php版本为5.3，而我已经在用最新的5.4。为避免类似问题发生必须将php升级到5.4，保持开发 / 服务器环境软件版本的一致。

React和Angular1/2是当前最前沿的前端技术和生态圈，前端工程师们在学习、使用的同时也在不断发表各种各样的观点。现在我把它作为一个课题，用寒假时间深入学习、研究实践。所有心得记录在案，文章内容慢慢补全。

React

技术栈：JSX/JS
IE兼容性：IE9以上。不支持ES5方法的浏览器可以通过加载polyfills的方式使用React，但仍有风险。
特点：

• MVC架构的V层
• 单向数据流（更好的性能）
• 虚拟DOM（更好的性能）

Angular2

技术栈：Typescript/JS/Dart
IE兼容性：IE9以上。官方提供IE polyfills。
特点：

• MVC架构
• 双向数据绑定
• 提升移动端性能（与Angular1相比）
• 给DOM施展了什么魔法？

Angular1

技术栈：JS
IE兼容性：1.3以上版本支持IE9以上，1.2以下版本支持IE8。
特点：

• MVC架构
• 双向数据绑定

参考文章：

• React真的比AngularJS快吗？
• 我由Angular转向React，为什么？

Markdown是一种给文本加上样式的简单且优雅的方式。使用Markdown可以快速将文本转换成更美观、更易于阅读的样子。
Github项目的readme.md默认使用Markdown，issue功能也支持Markdown功能，在实际使用中非常便利，可以轻松地标记出代码部分和段落重点。

→ Github3分钟Markdown教程 ←

Chrome有许多支持Markdown格式的扩展，其中Markdown Reader支持中文编码，简单好用，赞一个！

挖个坑，慢慢填

1. 多文件上传
2. 断点续传
3. flash以外方式
4. 进度条的实现原理

新版移动官网在某安卓测试机上遇到一个问题：一张背景图的background-size设置了但并没有生效，原本1张图片的位置上出现了4张小图。

原来，是background-size: 100px 200px这句的写法没有被支持
改为：background-size: 100px就解决了这个问题（两句的意思是一样的）

测试机型号：GALAXY player 5.0
安卓版本：2.3.5

安卓默认浏览器对许多html5 / css3特性支持不佳，2.x版本的安卓浏览器更差。真心希望安卓可以采用Chrome作为默认浏览器，版本分裂问题也可以早日得到改善。

随着业务的发展，省市两级下拉列表已满足不了需求，需要再加一级县城变成省市县三级下拉列表。开发过程略坎坷，所以稍作记录留作纪念。

原始数据从百度地图获得，得到mid格式，有点蒙。尝试向百度地图的童鞋索要json格式（撒娇、卖萌等手段），答复：需求方自转。mid格式用Excel打开，选中需要的字段，在小伙伴建议下保存为csv格式，以逗号作为分隔符（方便程序处理）。使用Sublime Text打开乱码，搞不定Mac下Sublime Text对gbk的编码支持，在小伙伴的建议下直接将Excel保存为utf-8格式的csv格式，使用Sublime Text打开不乱码。（强烈鄙视下自己使用Windows / Office的能力）将原始数据按一定规律分类，本例中分为三类，分别为省级、市级、区县级数据。将数据赋予js变量，通过split / for in / if / match逐步处理数据，最后通过JSON.stringify得到“javascript对象表示法(json)字符串”。三次处理后，得到最终的json格式数据。

由于数据量较大，在处理数据时下意识地记录了时间戳，结果发现一次处理需耗时200毫秒左右，这大概是我写过的耗时最长的js程序了，也是第一次关注到一门编程语言的执行效率。如果在最里层的for in加上console，那么整个处理过程将耗时9秒左右，看来console的执行负担很大呀。

做一个程序默认/常用端口号查询工具

后记：开发中涉及到数据的处理，突然发现Underscore.js的强大之处，它可以解决开发中遇到的许多复杂的数据处理问题。有空一定要阅读Underscore的文档，然后阅读源码了解实现原理，把这些做完之后想想有什么可以自己做的^_^

from《Javascript语言精粹》

构造一个伪类来继承另一个伪类：

var Mammal = function (name) {
    this.name = name;
}
var Cat = function (name) {
    this.name = name;
}
Cat.prototype = new Mammal();
var myCat = new Cat('Henrietta');

Sublime Text有许多强大的快捷键，毕竟是没有全部掌握呢。学习了！

My Overused Sublime Text Keyboard Shortcuts from Viget

from 《Javascript语言精粹》

函数也是值，从而我们可以用有趣的方式去操作函数值。柯里化允许我们把函数值与传递给它的参数相结合，产生出一个新的函数。

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
}

Function.method('curry', function () {
    var slice = Array.prototype.slice,
        args = slice.apply(arguments),
        that = this;
    return function () {
        return that.apply(null, args.concat(slice.apply(arguments)));
    }
});

CSS计数器的趣味时光 from 伯乐在线

CSS正在变得更强大，动画、计数器等等已有替代简单JS逻辑的趋势。学习，as always.

强制不换行

div{
    white-space: nowrap;
}

自动换行

div{
    word-wrap: break-word; 
    word-break: normal; 
}

强制英文单词断行

div{
    word-break:break-all;
}

from iwms

毕业后不知不觉认识了许多小伙伴，折腾技术的小伙伴自然最喜欢开技术博客啦。阅读这些技术博客既增长知识水平，又能给自己添加正能量！博客list整理如下：

Magic工作开发笔记
ZachBergh的技术博客
彭琪谈编程
木匠手记
我的备忘录

最近换了工作，一切从头开始。

以前使用CakePHP框架，新团队使用团队内某大牛自己写的PHP框架（凶啊）。这是个较新的项目，代码量还不太多，第一周正好全部浏览一遍。在Model部分发现一张User表对应了一个Model_User.php和一个Item_User.php，里边的方法都是操作数据表，不理解，遂问。

得到的回答是：Model_User.php类似于MVC里地Model，而Item_User.php使用了ORM（Object Relational Mapping对象关系映射）的**，具体是由PHP的魔术方法实现的。使用ORM最大的优点是“不用去声明class User，可以直接继承ORM提供的工厂类”，而缺点主要在复杂操作的性能。因此要根据实际情况选择使用ORM。

参考链接：ORM到底是用还是不用？ from PureWeber – 纯粹互联网