简略的前端架构心得&&基于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 表单进行客户端验证demo
Aug 24 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python利用正则表达式提取字符串
2016/12/08 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python中re模块知识点总结
2021/01/17 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
教育科学研究生自荐信
2013/10/09 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
初一新生军训方案
2014/05/22 职场文书
暂住证明怎么写
2015/06/19 职场文书