简略的前端架构心得&&基于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对dom的操作常用方法整理
Jun 25 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
解析coreseek for sphinx的使用
2013/06/21 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
python常见数制转换实例分析
2015/05/09 Python
Python变量和数据类型详解
2017/02/15 Python
Python自动生产表情包
2017/03/17 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python解析json代码实例解析
2019/11/25 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
财产公证书格式
2014/04/10 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
教师考察材料范文
2014/06/03 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
花田少年史观后感
2015/06/16 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
使用Python解决图表与画布的间距问题
2022/04/11 Python