简略的前端架构心得&&基于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对象方法
Jan 07 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
JS排序之选择排序详解
Apr 08 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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 debug 安装技巧
2011/04/30 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP在线书签系统分享
2016/01/04 PHP
php实现登陆模块功能示例
2016/10/20 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python实现list由于numpy array的转换
2018/04/04 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
技术股东合作协议书
2014/12/02 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android