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

2015-03-18  来源:本站原创  分类:javascript技巧  人气:0 

这一阵事情有点多,没来的及更新神马东西。今天分享两个ppt吧。主要内容是关于一些编码的小技巧,另一个关于前端架构的一些些东西。

比较粗糙简略。感兴趣的同学可以看看。稍微贴下主要内容吧:
简略的前端架构心得&&基于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部分内容:
简略的前端架构心得&&基于editor为例子的编码小技巧
简略的前端架构心得&&基于editor为例子的编码小技巧


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

相关文章
  • 简略的前端架构心得&&基于editor为例子的编码小技巧 2015-03-18

    这一阵事情有点多,没来的及更新神马东西.今天分享两个ppt吧.主要内容是关于一些编码的小技巧,另一个关于前端架构的一些些东西. 比较粗糙简略.感兴趣的同学可以看看.稍微贴下主要内容吧: 这是第一份ppt主要的内容.具体东西我就不多贴了,对这几个方面感兴趣的同学可以下载来看看,既然是基于editor为例子的ppt,这里我也附上一个简单的利用execCommand命令做的简易的demo,editor的原理在demo里都能看出来.这里附上代码: <!doctype html> <html>

  • 我的前端架构养成记之整洁的工作流 2014-10-21

    [编者按]本文作者Matt Carella为我们讲解了如何构建一个良好的架构.除了选择正确的工具以外,在组织工作流中遵循清晰整洁的原则对于我们来说是非常重要的.或许有的人会觉得文中所说的是在DOS时代的标准的做法,不过本文对新入门的人来说或许会有帮助.如果您是一位资深的架构师,也欢迎您在评论中与我们一起分享您的心得与体会. 以下为译文: 建立一个好的前端架构是开始开发Web应用或网站的一个基本步骤.良好的实践和编码常规是必不可少的,但是结构呢?我们如何在可控的时间内构思一个好的架构?但最重要的事

  • 我理想中的前端架构师 2014-07-10

    前端开发正变得越来越复杂,随着软件和应用逐渐Web化,可以想见以后前端开发将会成为一个独立的部门,它将拥有现在软件开发部门所拥有的全套人员,如架构师.系统分析员.开发工程师和测试人员等等. 我blog上有一位朋友询问我如何定义"前端架构师"这样一个职位.虽然我没做过专职的前端开发,但一直都在参与相关的工作,甚至还曾经面试过"前端架构师"这个职位.因此结合我的个人经验,我理想中的前端架构师,应该是如下这个样子的: 职责: 提升网站的前端性能,保证前端应用具有跨浏览器和

  • 谈谈前端,架构,框架与库 2013-10-10

    无论是大公司还是小公司,创业公司还是成熟公司的前端开发都需要一个"架构师"的角色.理由很简单就是我在这些公司都呆过.但大家对"前端架构师"的理解,我怎么听都觉得太高深了,太玄了,像普通的前端工程师,产品经理,设计师一样它是一个很具体的工作,具体到每天应该做什么都可以列出来.另外它并不深,甚至说看起来简单. 前端架构师的工作: 1. 他需要制订一套跟上下游环节更高效配合的技术方案.具体说有改进模板(视图层)的开发方式,团队内部开发方式,维护和测试方式等. 2. 他要把

  • 大型互联网网站架构心得之一:分 2014-06-02

    我们知道,对于一个大型网站来说,可伸缩性是非常重要的,怎么样在纵向和横向有良好的可伸缩性,就需要在做架构设计的时候考虑到一个分的原则,我想在多个方面说一下怎么分: 首先是横向的分:1. 大的网站化解为多个小网站:当我们一个网站有多个功能的时候,可以考虑把这个网站拆分成几个小模块,每一个模块可以是一个网站,这样的话我们到时候就可以很灵活地去把这些网站部署到不同的服务器上. 2. 静态动态分离:静态文件和动态文件最好分离开成2个网站,我们知道静态网站和动态网站对服务器来说压力的侧重不同,前者可能重I

  • 大型互联网网站架构心得之二:并.换和其它 2014-07-02

    上文回顾:<大型互联网网站架构心得之一:分> 上次说的"分"是一个比较大的原则也是一个比较高层的原则,这次我想说一下其它两个原则:并与换. 并 为什么要分?是因为我们希望通过分来提高系统的承载能力,那并又是并什么呢?我想了一下有几个方面可以并: 1. 合并用户请求,最基本的就是合并CSS/图片/脚本,还可以合并页面.不过合并就可能产生流量的浪费,需要有一个平衡点. 2. 合并接口的粒度,如果做分布式应用的话,我们可能不会直接访问数据库而是调用应用层提供的接口,由于是网络调用

  • 基于Android ListView之加载使用技巧 2014-05-10

    本篇文章小编为大家介绍,基于Android ListView之加载使用技巧.需要的朋友参考下 程序员很多,遍地都是,高手也很多,但是懂设计的程序员并不多,我觉得我们不仅要成为一个coder还要成为一个designer. 我是一个比较注重ued的人,如果对一个app来说,程序是app的内涵那么设计就是要体现app的外在美观. 曾经看到一篇招聘用户体验设计师的信息问道 如果说,在我们身边,设计师具有表达思想的力量:工程师具有实现思想的力量. 那么请问用户体验设计师具有什么力量,有资格成为团队成员?

  • C++基于控制台实现的贪吃蛇小游戏 2014-05-27

    这篇文章主要介绍了C++基于控制台实现的贪吃蛇小游戏,实例分析了贪吃蛇游戏的原理与C++实现技巧,是非常经典的游戏算法,需要的朋友可以参考下 本文实例讲述了C++基于控制台实现的贪吃蛇小游戏.分享给大家供大家参考.具体实现方法如下: #include <windows.h> #include <time.h> #include <stdio.h> #define MAX 100 #define UP 1 #define DOWN 2 #define LEFT 3 #de

  • 基于AngularJS的企业软件前端架构 2014-10-28

    企业应用前端的特点 企业应用系统是一种很常见的软件系统,这类系统的特点是面向某个行业,功能较复杂,对界面的要求一般是整齐,不追求花哨.这类系统通常有C/S和B/S两个流派,其中的B/S方式因为部署和集成的便利,使用得较为普遍. 同样是在浏览器中做东西,写企业应用和网站的差别也很明显.企业应用的业务逻辑较重,前端有一定的厚重性,但是对效果并不追求很多,主要是各类控件的使用,表单的存取值等等. 企业应用产品的一些特点如下: 独占模式. 一般用户使用互联网产品,都是片段时间使用,比如购物或者阅读,做完

  • 架构设计:前后端分离之Web前端架构设计 2015-02-11

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通.协调以及管理成本相对较高,

  • 网站前端架构的的一些原理和终结 2013-08-18

    应该考虑到的几个原则: 高性能 可扩展 可维护 可扩展 MVC的分层,小内核,模块化 小内核 每个模块可以独立存在,每个模块可以并存而不互相依赖和影响(低耦合),模块可以复用,模块可以直接通信调用. PS:由于前端特性,考虑到加载文件的大小和数量,一般需要权衡是否使用第三方类库. 可维护 协同开发需要有统一的规范,以便于不同人方便沟通与交流,建立HTML,CSS,JS的code Style Guide. 保持HTML,CSS,JS的相互独立,可配置,保持配置文件或者变量与工程独立 使用自动化工具

  • java基于AspectJ(面向切面编程)编码示例分享 2014-06-07

    AspectJ是一种面向切面程序设计的基于Java的实现,下面对过示例学习他的使用方法,需要的朋友可以参考下 一.基本概念 AspectJ是一种面向切面程序设计的基于Java 的实现.它向 Java 中加入了连接点(Join Point)这个新概念,其实它也只是现存的一个 Java概念的名称而已.它向 Java 语言中加入少许新结构:切点(pointcut).通知(Advice).类型间声明(Inter-type declaration)和方面(Aspect).切点和通知动态地影响程序流程,类型

  • 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示) 2014-12-25

    新浪微博未登录首页有一个"大家正在说"的模块,动态滚动最新发布的微博. 从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动: 2 新微博将下面的微博先推下去,然后淡入进来: 3 鼠标经过内容暂停滚动: 4 容器底部渐变消失在背景色下. 上述4个需求之中,需求1-3为js技术实现,需求4为css技术实现,下面逐个需求来讲. 需求1和需求2:内容持续滚动的需求有些类似前一篇文章<小模块:公告滚动并暂停>中介绍的功能,在那篇

  • 最简单的基于FFMPEG的视频编码器(YUV编码为H.264) 2014-08-16

    本文介绍一个最简单的基于FFMPEG的视频编码器.该编码器实现了YUV420P的像素数据编码为H.264的压缩编码数据.编码器代码十分简单,但是每一行代码都很重要,适合好好研究一下.弄清楚了本代码也就基本弄清楚了FFMPEG的编码流程.目前我虽然已经调通了程序,但是还是有些地方没有完全搞明白,需要下一步继续探究然后补充内容. 本程序使用最新版的类库(编译时间为2014.5.6),开发平台为VC2010.所有的配置都已经做好,只需要运行就可以了. 下面直接上代码: /* *最简单的基于FFmpeg

  • 基于路由器诊断步骤和故障排除技巧 2014-02-07

    网络诊断是管好.用好网络,使网络发挥最大作用的重要技术工作.本文简述分层诊断技术,结合讨论路由器各种接口的诊断,综述互联网络连通性故障的排除. 网络故障诊断概述 网络故障诊断,从故障现象出发,以网络诊断工具为手段获取诊断信息,确定网络故障点,查找问题的根源,排除故障,恢复网络正常运行.网络故障通常有以下几种可能:物理层中物理设备相互连接失败或者硬件及线路本身的问题:数据链路层的网络设备的接口配置 问题:网络层网络协议配置或操作错误:传输层的设备性能或通信拥塞问题:上三层或网络应用程序错误.诊断网

  • 基于Facebook和Flash平台的应用架构解析 2013-11-25

    Flash平台可帮助你构建富用户体验的应用,而Facebook平台可帮助你构建富社会化体验的应用.将二者合而为一,你就可以构建高交互性.富于表现力,并融入了社会化功能的杀手级应用了. 本系列文章(共分三部分)将为你介绍基于Facebook和Flash平台的应用程序架构,解析你能在此平台上构建的各种应用类型,并说明这些应用如何与你的服务器.Facebook服务器通讯. 可构建的应用类型 你可构建三种Flash与Facebook平台集成的应用:基于Facebook的嵌入式应用.对外服务的Web应用和

  • Backbone之旅:前端MVC架构初体验(上) 2014-03-15

    最近一段时间来,才算是真正的开始深入学习JavaScript,收获颇丰.也首次领略了前端MVC架构的风采,现在前端MVC的类库和框架越来越多,在经过初步的评估之后,决定先学习备受推崇的Backbone. 以前自己做的一些Web应用,基本上都是按照非常传统的方式:1.服务器端渲染模板:2.利用jQuery的ajax进行异步数据交换.所以首次接触前端架构类的东西,难免有点无从下手.经过几天的奋战,以及参阅国外大牛们的各种Tutorial之后,终于拨开迷雾,缕了些头绪,自己也试着从传统的方式过渡(重构

  • 前端工程与性能优化(上):静态资源版本更新与缓存 2013-10-14

    每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在7年前提出的,对于web性能优化至今都有非常重要的指导意义. 然而,对于构建大型web应用的团队来说,要坚持贯彻这些优化原则并不是一件十分容易的事.因为优化原则中很多要求是与工程管理相违背的,比如&q

  • 支付宝前端基础类库 Arale 2012-11-22

    Arale 网站 : http://aralejs.org/ Arale 是支付宝的前端解决方案,基于 SeaJS 和 CMD 规范,是一个开放.简单.易用的前端基础类库. Arale 拥有 popup.validator.position 等丰富且优秀的组件模块:使用简单好用的包管理工具 SPM 帮助我们处理打包部署等繁琐工作:使用 liquidluck 写文档和 Demo.这是一套完善的前端解决方案. Arale 2.0 的整体内容包括四部分: Infrastructure(基础架构).包括

  • 百度技术沙龙第23期回顾:一站式的前端开发框架(含资料下载) 2013-10-02

    在2月18日由百度主办.InfoQ策划组织实施的第23期百度技术沙龙活动上,来自百度前端通用组技术负责人雷志兴(@berg).豌豆实验室前端架构师陈广琛(@CatChen)和赵望野(@赵望野)分别分享了各自在前端开发技术上取得的成果及经验,话题涉及"前端集成解决方案",以及"豌豆荚的Web界面"等.本文将对他们各自的分享做下简单的回顾,同时提供相关资料的下载. 主题一:前端集成解决方案(微盘下载讲稿) 来自百度的高级工程师,前端通用组技术负责人雷志兴第一个为大家分享