前端组件化

2014-10-14的一次分享,记录一下

##目录

  • 需求

  • 模块化开发

  • 组件化开发

  • 参考资料

##存在的问题

1、静态资源内嵌

即写在script和style内,重复写代码。不利于CSS、js静态化资源通过CDN分发。

2、代码复制

ctrl+c/ctrl+v,暂时解决问题,但是改动需要遍历所以代码,挨个修改

3、前后端高度耦合

缺少数据模拟,前端需等待后端数据接口(前后端分离的情况下)

举个例子:分页插件,有一天需要加一个现实数据条数的功能,结果需要每个地方都唉个去加 组件化后,则需要在模板上添加就可以实现全部用到的地方都使用,甚至可配置(即选择加或不加)

##需求

  • 不是从零开始,可复用

  • 模块化开发

  • 组件化开发,搭积木一样组装

  • 资源压缩,性能要好

  • 文件监听,自动刷新

  • ……

##开发体系

  • Seajs (支付宝团队)

  • fis-plus (百度前端)

  • Modjs (腾讯AlloyTeam )

  • Yeoman (谷歌)

  • Scrat ( UC 基于fis)

##模块化

  • seaJS

  • requireJS

RequireJS 和 SeaJS 则是模块加载器 核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行。

注:AngularAMD,ng使用requireJS

##为什么用seaJS

  • 命名冲突

  • 文件依赖,按需加载

  • 请求合并,解决需要引入一堆js

  • 前端性能优化(异步加载模块)

  • 提高可维护性

##命名冲突

util.js有一个function print()

你这个函数为啥叫print啊!正好我也刚写了个函数叫print啊!要不我改名叫print2

我引入了个开源的模块,里面也有个函数叫 print 啊!改人家的怕有问题,要不改你的吧!

##架构的变更

后端MVC=>前端MVC、MVP、MVVM

后端MVC

##什么是SPA

Web程序在往SPA(单页面程序,Single Page Application)的方向发展。

  • 前端交互逻辑增加,体验较好

  • 分离前后端关注点,后端负责数据接口

  • 高效,异步加载数据,服务器压力小,对于内容的改动不需要加载整个页面

用iframe的方式引入,但每个iframe要独立引入一些公共文件,服务器文件传输的压力较大,还要初始化自己的一套内存环境,比较浪费 iframe互相之间也不太方便通信

##组件化

组件化:界面的片段化和模板化

就写界面来说,声明式的代码编写效率远高于命令式

<Panel title="Test">
  <Button label="Click me"/>
</Panel>

Panel p = new Panel();
p.title = "Test";
Button b = new Button();
b.label = "Click me";
p.add(b);

##如何做组件化

AngularJS可以用ServiceDirective降低开发复杂性。适合用于分离代码,创建可测试组件,可重用组件。

Directive是一组独立的JavaScript、HTML。封装了一个特定的行为。

##第三方组件

UI-bootstrap

Angular-strap

##参考资料

web64