去年以来，React的出现为前端框架设计和编程模式吹来了一阵春风。很多概念，无论是原本已有的、还是由React首先提出的，都因为React的流行而倍受关注，成为大家研究和学习的热点。本篇分享主要就聚焦于这些概念中出现频率较高的两个：virtual dom（虚拟DOM）和data immutability（数据不变性）。希望通过几段代码和同学们分享博主对于这两个概念的思考和理解。
文章分为四个部分，由大家最为熟悉的基于dom node的编程开始：
1. 基于模板和dom node的编程：回顾前端传统的编程模式，简单总结前端发展的趋势和潮流
2. 面向immutable data model的编程：浅析在virtual dom出现之前，为什么基于immutability的编程不具备大规模流行的条件
3. 引入virtual dom，优化渲染性能：介绍virtual dom以及一些常见的性能优化技巧，给出性能比较的测试方法和结论
4. virtual dom和redux的整合：示范如何与redux整合
1. 基于模板和dom node的编程
基于模板和dom node的编程是前端开发中最为传统和深入人心的开发方式。这种开发方式编码简单、模式灵活、学习曲线平滑，深受大家的喜爱。模版层渲染既可以在后端完成（如smarty、velocity、jade）也可以在前端完成（如mustache，handlebars），而dom操作一般则会借助于诸如jquery、yui之类封装良好的类库。本文为了方便同学们在纯前端环境中进行实验，将采用handlebars + jquery的技术选型。其中handlebars负责前端渲染，jquery负责事件监听和dom操作。从本节开始，将使用不同的方式实现一个支持添加、删除操作的列表，大致界面如下：
首先简要分析一下代码逻辑：
模板放在script标签中，type设置为text/template，用于稍后渲染；由于需要频繁添加、删除dom元素，因此选用事件代理（delegation），以避免频繁处理添加、删除监听器的逻辑。html代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> <style> .dbl-top-margin { margin-top: 20px; } .float-right { float: right; } </style> <script class="template" type="text/template"> <ul class="list-group dbl-top-margin"> {{#items}} <li class="list-group-item"> <span>{{name}}</span> <button data-index="{{@index}}" class="item-remove btn btn-danger btn-sm float-right">删除</button> </li> {{/items}} </ul> <div class="dbl-top-margin"> <input placeholder="添加新项目" type="text" class="form-control item-name" /> <button class="dbl-top-margin btn btn-primary col-xs-12 item-add">添加</button> </div> </script> </head> <body> <div class="container"></div> <script src="bundle.js"></script> </body> </html> |
javascript代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
var $ = require('jquery'); var Handlebars = require('handlebars'); var template = $('.template').text(); // 用一组div标签将template包裹起来 template = ['<div>', template, '</div>'].join(''); // 初次渲染模板时所用到的数据 var model = { items: [{ name: '项目1' }, { name: '项目2' }, { name: '项目3' }] }; // Handlebars.compile方法返回编译后的模块方法，调用这个模板方法并传入数据，即可得到渲染后的模板 var html = Handlebars.compile(template)(model); var $container = $('.container'); $container.html(html); var $ul = $container."crayon-5812f978c6b50630374025-25"> var $ul = $container.a immutability（数据不变性）。希望通过几段代码和同学们分享博主对于这两个概念的思考和理解。
文章分为四个部分，由大家最为熟悉的基于dom node的编程开始：
1. 基于模板和dom node的编程 基于模板和dom node的编程是前端开发中最为传统和深入人心的开发方式。这种开发方式编码简单、模式灵活、学习曲线平滑，深受大家的喜爱。模版层渲染既可以在后端完成（如smarty、velocity、jade）也可以在前端完成（如mustache，handlebars），而dom操作一般则会借助于诸如jquery、yui之类封装良好的类库。本文为了方便同学们在纯前端环境中进行实验，将采用handlebars + jquery的技术选型。其中handlebars负责前端渲染，jquery负责事件监听和dom操作。从本节开始，将使用不同的方式实现一个支持添加、删除操作的列表，大致界面如下：
首先简要分析一下代码逻辑：
javascript代码：
|
