简略的前端架构心得&&基于editor为例子的编码小技巧


Posted in Javascript onNovember 25, 2010

比较粗糙简略。感兴趣的同学可以看看。稍微贴下主要内容吧:
简略的前端架构心得&&基于editor为例子的编码小技巧
这是第一份ppt主要的内容。具体东西我就不多贴了,对这几个方面感兴趣的同学可以下载来看看,既然是基于editor为例子的ppt,这里我也附上一个简单的利用execCommand命令做的简易的demo,editor的原理在demo里都能看出来。这里附上代码:
<!doctype html>

<html> 
<head> 
<style type="text/css"> 
.wp { 
width: 500px; 
} 
.bar { 
margin-bottom: 8px; 
} 
.con { 
border: 2px solid #ccc; 
} 
.block { 
overflow: hidden; 
height: 1%; 
} 
.controler { 
float: left; 
margin-right: 6px; 
border: 1px solid #999; 
height: 20px; 
width: 20px; 
text-align: center; 
font-size: 14px; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<script type="text/javascript"> 
var Class = { 
create : function () { 
return function () { 
this.init.apply(this, arguments); 
} 
} 
}, 
H$ = function(i) {return document.getElementById(i)}, 
$CE = function() { 
var div = document.createElement('div'); 
return function(html) { 
div.innerHTML = html; 
var el = div.childNodes[0]; 
div.removeChild(el); 
return el; 
} 
} (); 
var Editor = Class.create(); 
Editor.prototype = { 
init : function(id) { 
var c = []; 
c[0] = ['bold', 'B']; 
c[1] = ['italic', 'I']; 
this.t = H$(id); 
this.t.style['display'] = 'none'; 
this.i = $CE('<iframe frameBorder="0" width="500" height="200"></iframe>'); 
var wp = $CE('<div class="wp"></div>'), 
bar = $CE('<div class="bar block"></div>'), 
con = $CE('<div class="con"></div>'), 
self = this; 
for (var i=0; i<c.length; i++) { 
var btn = $CE('<a class="controler">'+c[i][1]+'</a>'); 
bar.appendChild(btn); 
btn.onclick = (function(i){ 
return function () { 
self.action(c[i][0]); 
} 
})(i); 
if (!+"\v1") {btn.unselectable = 'on'} // IE下一定要设置unselectable = 'on' 
} 
this.t.parentNode.insertBefore(wp, this.t); 
con.appendChild(this.t); 
con.appendChild(this.i); 
wp.appendChild(bar); 
wp.appendChild(con); 
this.e = this.i.contentWindow.document || this.i.contentDocument; 
this.e.designMode = 'on'; 
this.e.open(); 
this.e.close(); 
}, 
action : function (cmd, val) { 
this.e.execCommand(cmd, 0, val || null); 
} 
} 
</script> 
<textarea id="test"></textarea> 
<script type="text/javascript"> 
new Editor('test'); 
</script> 
</body> 
</html>

大家可以自行考到本地去演示,很简单的一个例子,提供一个思路而已。
下面提供第一个ppt的下载: 【点击这里下载《关于js的一些小技巧》】

【阿里中国站前端架构史--略谈】
以下为ppt部分内容:
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧

感兴趣的同学可以看看。
文件打包下载地址

Javascript 相关文章推荐
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 #Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 #Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 #Javascript
jQuery学习基础知识小结
Nov 25 #Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 #Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 #Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 #Javascript
You might like
如何用php获取文件名后缀
2013/06/09 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
javascript date格式化示例
2013/09/25 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python字典基本操作实例分析
2015/07/11 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python迭代器常见用法实例分析
2019/11/22 Python
css3 transform属性详解
2014/09/30 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
中文专业毕业生自荐书范文
2014/01/04 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
安全教育月活动总结
2014/05/05 职场文书
无毒社区工作方案
2014/05/23 职场文书
2014年信访工作总结
2014/11/17 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
mysql sql常用语句大全
2022/06/21 MySQL