npm安装Electron缓慢网络超时导致失败
1. npm源过慢的话，可以把源切到国内的淘宝的镜像上。
npm config set registry https://registry.npm.taobao.org
2. 到electron的国内镜像下载最新的安装包，主要看好自己系统对应的版本
https://npm.taobao.org/mirrors/electron
3. 将下载好的包放到当前用户的根目录下的.electron文件夹下，windows一般是C:\Users\YourUserName\.electron
4. 执行安装命令npm install electron-prebuilt -g
转载请注明原文出处《npm安装Electron缓慢网络超时导致失败》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
使用javascript解析四则运算表达式
在编写代码时我们有时候会碰到需要自己解析四则运算表达式的情况，本文简单的介绍使用JavaScript实现对简单四则运算表达式的解析。
1. 熟悉概念
中缀表示法（或中缀记法）是一个通用的算术或逻辑公式表示方法， 操作符是以中缀形式处于操作数的中间（例：3 + 4）。也就是我们最常用的算术表达式，中缀表达式对于人类来说比较容易理解，但是不易于计算机解析。
逆波兰表示法（Reverse Polish notation，RPN，或逆波兰记法），是一种是由波兰数学家扬·武卡谢维奇1920年引入的数学表达式方式，在逆波兰记法中，所有操作符置于操作数的后面，因此也被称为后缀表示法。逆波兰记法不需要括号来标识操作符的优先级。逆波兰表示法容易使用堆栈结构对表达式进行解析并计算，所以，这里我们解析四则元素表达式，是先从中缀表达式，转换为逆波兰表达式。然后再计算值。 继续阅读 »
转载请注明原文出处《使用javascript解析四则运算表达式》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
一个简单的倒计时功能，支持文本内容和class切换
帮朋友写了一个简单的倒计时功能，功能比较简单，支持文本内容和class的同时切换，你可以使用文字，也可以使用图片背景等效果
转载请注明原文出处《一个简单的倒计时功能，支持文本内容和class切换》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
富文本编辑器实现（二）
在上一篇文章中已经介绍了一些在实现一个富文本编辑器时需要用的一些必备知识点。如果不清楚还请参考上一篇文章。
本篇文章会重点介绍编辑器实现的具体过程。
首先来考虑的是编辑的界面。界面包含两个大部分：工具栏和内容编辑区。
内容编辑区比较简单，主要主要组成部分就是一个iframe，当然还要考虑一些样式和行为方面的问题，这部分比较简单。
比较复杂的就是工具栏了，在上一个编辑器设计的时候由于设计的样式问题，导致按钮样式没法有效的通用，所以在这一次设计时让按钮的样式保持统一化，既简化设计又简化实现。
目前按钮主要包含三种形式：一种是直接点击的按钮；一种是有下拉选项的按钮；一种是有弹出内容交换的按钮。所以这里使用了插件的形式来实现工具栏的按钮。
首先是实现了三种插件类和一个插件管理器，根据需要使用的按钮进行实例化并注册到插件管理器中。
先来看一下主体对象Editor，Editor对象主要包含以下属性：
//编辑器的DOM
self.dom = {};
//编辑器对用的textarea的引用
self.textarea = dk.$(textareaId);
//当前是否为设计模式
self.designMode = true;
//编辑配置，包含工具栏按钮等等
self.options = {
otoolbar: [
o['font_family', 'font_size'],
o['bold', 'italic', 'underline', 'del'],
o['font_color', 'bg_color'],
o['aleft', 'acenter', 'aright'],
o['link', 'unlink', 'image'],
o['source']
o]
};
下面看一下Editor对象的初始化函数：
self.init =function(){
o//初始化选项
oself.initOptions();
o//初始化界面
oself.initUI();
o//初始化iframe
oself.initIframe();
o//初始化事件
oself.initEvents();
o//同步内容
oself.syncContent();
};
选项初始化比较简单，下面说一下界面的初始化。界面的初始化就是根据编辑器的DOM结构生成相应的DOM树，唯一有所不同的地方就是工具栏中的按钮是根据Editor.options.toolbar的配置，从插件管理器中获取并插入到文档中的。下一篇文章中会对工具栏的插件机制进行介绍。
接下来是iframe的初始化。要将iframe的document的designMode设置为on碧昂打开文档并写入需要写入的样式等然后关闭。
self.initIframe =function(){
ovar iframe = self.dom.iframe;
ovar doc = iframe.currentDocument || iframe.contentWindow.document;
ovar win = iframe.contentWindow;
odoc.designMode = 'on';
odoc.contentEditable = true;
odoc.charset = "utf-8";
odoc.open();
odoc.write('<!DOCTYPE html><html><head><meta charset="utf-8" /><style>.view{padding:0;word-wrap:break-word;cursor:text;width:100%;height:100%;overflow:hidden;}.viewbody{margin:0;padding:0;width:100%;height:100%;overflow:auto;}p{margin:10px 0;}</style></head><body></body></html>')
odoc.write(self.textarea.value);
odoc.close();
oself.win = win;
oself.doc = doc;
}
再接下来就是事件的初始化，包括iframe的keypress的事件，点击事件，以及在IE中对选中内容的保存等等。
self.initEvents = function(){
o//add editor keyboard events
odk.addEvent(self.doc.body, 'keypress', function(e){
oif(e.which == 13){
oself.doc.execCommand('formatblock', false, '');
o}
o});
o//add editor click events
odk.addEvent(self.doc.body, 'click', function(e){
oself.setStatusBar();
o});
o
odk.addEvent(self.win, 'beforedeactivate', function(e){
o//console.log('before deactivate');
oself.rangeBackup = self.doc.selection.createRange().duplicate();
o//console.log(self.rangeBackup.text);
o});
odk.addEvent(self.win, 'activate', function(e){
o//console.log('activate');
oif(self.rangeBackup){
oself.rangeBackup.select();
o}
o});
}
最后一步就是同步编辑器内容，根据designMode的模式，对编辑器的内容进行同步。
这里简单的说了一下Editor对象的内容。下一篇文章中会对Editor对象的插件内容进行说明。
转载请注明原文出处《富文本编辑器实现（二）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
富文本编辑器实现（一）
这里简单的聊一下如何实现一个简单的富文本编辑器。见以前的文章动手做一个在线富文本编辑器。
1.富文本编辑器的基础
document对象有一个designMode属性，你可以使用这个属性来让当前的document进入可编辑模式。
当进入可编辑模式时，整个文档可以获取焦点并可以进行编辑，同样你也可以执行脚本来控制。
这一属性是IE首先支持的，在Mozilla1.3中也引入此属性来用于富文本编辑器的实现。这一点是我们用于实现富文本编辑器的基础，有了这个我们才能进行下一步的工作。
这里我们在页面中创建了一个iframe来作为编辑器的主体。
var iframe = document.createElement('iframe');
var idoc = iframe.currentDocument || iframe.contentWindow.document;
var iwin = iframe.contentWindow;
var idoc.designMode = 'on';
idoc.open();
idoc.write('');
idoc.close();
2.在编辑器中执行命令
在编辑器中要对选中的内容进行操作需要使用到execCommand方法。
document.execCommand(sCommand [, bUserInterface] [, vValue])
本方法能够对当前文档，当前选区或给定的范围执行一个命令。如果命令被成功执行则会返回ture。
示例：
//创建链接
document.execCommand('CreateLink');
//设置颜色
document.execCommand('ForeColor', 'false', '#f03');
这里列举几个常用的命令：
-
o
- BackColor – 设置或获取当前选中区域的背景颜色
- Bold – 切换当前选中区域是否加粗
- Copy – 将当前选中区域复制到粘贴板
- CreateBookmark – 创建一个书签锚点或获取当前选中区域或插入点的书签锚点的名称
- CreateLink – 在当前选中区域插入超链接，或显示一个对话框允许用户指定为当前选中区域插入的超链接的url
- Cut – 将当前选中区域复制到剪切板并删除
- Delete – 删除当前选中区域
- FontName – 设置或获取当前选中区域的字体
- FontSize – 设置或获取当前选中区域的字体大小
- ForeColor – 设置获取当前选中区域的前景（文本）颜色
- FormatBlock – 设置当前块格式化标签
- Indent – 增加选中文本的缩进
- InsertButton – 用按钮控件覆盖当前选中区
- InsertImage – 用图像覆盖当前选中区
- InsertOderedList – 切换当前选中区域是编号列表还是常规格式化块
- InsertParagraph – 用换行覆盖当前选中区
- InsertUnorderedList – 切换当前选中区域是符号列表还是常规格式化块。
- Italic – 切换当前选中区域斜体显示与否
- JustifyCenter – 将当前选中区所在格式化块居中
- JustifyFull – 将当前选中区所在格式化块全对齐
- JustifyLeft – 将当前选中区所在格式化块居左
- JustifyNone – 取消设置
- JustifyRight – 将当前选中区所在格式化块居右
- Paste – 将剪贴板中的内容覆盖当前选中区
- Redo – 重做
- RemoveFormat – 从当前选中区删除格式化标签
- StrikeThrough – 切换当前选中区删除线显示与否
- UnBookmark – 从当前选中区中删除全部标签
- Underline – 切换当前选中区下划线显示与否
- Undo – 撤销
- Unlink- 从当前选中区中删除全部超链接
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
3.选区（Selection）和范围（Range）
选区和范围也是非常重要的一个基础内容。
选区（Selection）代表当前激活的选中区域，即用户在页面上拖拽时选中的文本或其他元素。当然它不仅仅可以由用户操作生成，同样也可以有脚本控制生成。
IE中有两种范围（Range）分别是TextRange和controlRange集合。TextRange表示HTML元素中的文本。controlRange集合表示一组元素的集合。
FireFox和webkit中的Selection和Range与IE中的差别比较大。只有一个Range对象，代表了文档的一个片段，它可以包含给定文档节点和文本节点的一部分。当然这几个浏览器之间这几个对象的属性和方法之间差距还是很大的。所以这里需要对着几个对象进行一些封装，以便于使用以及代码的格式化整理。本部分内容在后面用到的时候还再进行讨论。
本篇文章主要讨论了实现一个富文本编辑器用到的基础知识，虽然不多，但是相对来说第三点内容还是比较复杂的。在下一篇文章中会开始讨论具体一点的实现过程。
转载请注明原文出处《富文本编辑器实现（一）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
jQuery插件实现-自定义Placeholder
HTML5中文本框的新属性placeholder是个非常好用的属性，但是IE系列直至IE9都不支持这一属性，这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件，但是都不是很通用，这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单，大家也可以根据自己的需要进行改进。平常写jQuery插件比较少，考虑到用jQuery的同学比较多，这里就用jQuery插件的形式编写了。
在这里简单的介绍一下实现思路。
-
o
- 表现与
html5原生的placeholder尽量类似 - 渐进增强对于支持
placeholder的浏览器不做处理
o
1.首先是几个工具方法：
-
o
supportProperty(nodeType, property)，获取浏览器是否支持某一控件的某一属性getPositionInDoc(target, parent)，获取对象在文档中的位置$c，一个快速创建Dom对象的方法
o
o
这几个工具方法都是一些比较常见通用的方法，如果你有自己的或者更合适的可以自行替换。
2.主体，CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息，包括其位置，应该显示的提示信息等等，另外它还包含创建提示信息以及定位等方法以及对象的相应事件。
事件主要是在initEvents函数中进行的处理，这里特别要注意的是对提示信息事件的处理，当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focus和blur事件。
$(self.hint).bind( 'click', function(e){
oself.input.focus();
});
$(self.input).bind( 'focus', function(e){
oself.hint.style.display = 'none';
});
$(self.input).bind( 'blur', function(e){
oif(this.value == ''){
oself.hint.style.display = 'inline';
o}
});
CustomPlacehodler对象的两个主要方法是createHintLabel(text, position)和position()。createHintLabel是用于创建提示信息的DOM对象并对其进行定位，并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。
3.插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测，如果原生支持placeholder则直接返回。
if(supportProperty('input', 'placeholder')){
oreturn;
}
接下来是根据选择的input对象，生成相应的CustomPlaceholder对象，保存在数组中，并获取每个对象的提示信息的DOM对象，添加到容器中，最后将容器附加到body对象中。
var customPlaceholders = [];
if(this.length > 0){
ovar box = $c('div', 'dk_placeholderfixed_box');
ofor(var i = 0, len = this.length; i < len; i++){
ovar input = this[i];
ocustomPlaceholders.push(new CustomPlaceholder(box, input, option));
o}
odocument.body.appendChild(box);
}
最后还有一件比较重要的事情，为window对象绑定resize事件，当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。
$(window).bind( 'resize', function(e){
ofor(var i = 0, len = customPlaceholders.length; i < len; i++){
ovar customPlaceholder = customPlaceholders[i];
ocustomPlaceholder.position();
o}
});
这个简单的小插件到这里就写完了。
抛砖引玉，欢迎不吝赐教。
转载请注明原文出处《jQuery插件实现-自定义Placeholder》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。