>

js框架中简单的View视图编写学习笔记

- 编辑:正版管家婆马报彩图 -

js框架中简单的View视图编写学习笔记

古板上用jQuery操作DOM,就疑似C语言中的goto语句,随着项目复杂度增大,会更为难以维护。
关于MVC(以及接二连三的MVP,MVVM),网络能源众多,就不实行。我们一向用代码来演习。

Backbone.js框架中归纳的View视图编写学习笔记,backbone框架

价值观上用jQuery操作DOM,就接近C语言中的goto语句,随着项目复杂度增大,会更加的难以维护。
有关MVC(以及后续的MVP,MVVM),网络能源众多,就不进行。我们直接用代码来练习。

index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

内部,x.js是用duo生成后的js。文件中援用的多少个js,都足以从百度静态能源库中下载到

1.js

var ListView = Backbone.View.extend({
 //el: $('.wrapper'),

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

var listView = new ListView({el: $('.wrapper')});

执行:

$duo 1.js

知识点表达

  • el:表示该View所代表的DOM成分,在render函数中,会同步到DOM操作中去。
  • initialze:调用new时,会触发的函数调用,类似构造函数。
  • render:触发DOM操作,浏览器会渲染
  • 末尾一句,表明在new时,可以传递参数

疑惑
一经写成 new ListView({el: '.wrapper'})也是足以的。
但思索到el本人的意思,照旧增进$更显明些。

  • $el和$()
  • $(this.el) 等价于 this.$el
  • $(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement
假设想修改el内容,包涵值和绑定事件,能够利用setElement。下边那一个例子中,setElement不仅把el的引用从button1改为button2,连click事件也共同修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true

事件管理和模板分析都以前者渲染必须的干活,backbone一般把这一个内容放到View里面统一管理。
2.js

var ListView = Backbone.View.extend({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
 }
});

var listView = new ListView();

执行:

$duo 2.js

知识点

  • this.counter:内部采纳的多寡,能够initialize中初步化
  • events:注脚格式,'event selector': 'func',那比以前$('.wrapper button#add').on('click', function(){...}); 的法子要清楚非常多了。

模板

在index.html中加入:

<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面,否则在执行时,可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

在View的宣示中期维修改:

events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

修改addItem:

addItem: function() {
 this.counter++;
 this.$('ul').append(this.template({counter: this.counter}));
}

同理,这里的模版能够轮换为其余第三方模板引擎。
比如:artTemplate

var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...
index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

你恐怕感兴趣的篇章:

  • 简单来说驾驭Backbone.js的Model模型以及View视图的源码
  • 讲授JavaScript的Backbone.js框架的MVC结构设计思想
  • 深深分析JavaScript框架Backbone.js中的事件机制
  • 轻量级javascript 框架Backbone使用指南
  • Backbone.js的局地施用本领
  • Backbone.js 0.9.2 源码注释粤语翻译版
  • Backbone.js的Hello World程序实例
  • Backbone.js中的集结详解
  • Javascript MVC框架Backbone.js详解
  • JavaScript的Backbone.js框架的片段选择提出整理

古板上用jQuery操作DOM,就恍如C语言中的goto语句,随着项目复杂度增大,会愈发...

其间,x.js是用duo生成后的js。文件中引用的多少个js,都能够从百度静态财富库中下载到

1.js

var ListView = Backbone.View.extend({
 //el: $('.wrapper'),

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

var listView = new ListView({el: $('.wrapper')});

执行:

$duo 1.js

知识点表达

  • el:表示该View所代表的DOM成分,在render函数中,会一同到DOM操作中去。
  • initialze:调用new时,会接触的函数调用,类似构造函数。
  • render:触发DOM操作,浏览器会渲染
  • 最终一句,表达在new时,能够传递参数

疑惑
若果写成 new ListView({el: '.wrapper'})也是足以的。
但思念到el自身的意义,如故拉长$更清楚些。

  • $el和$()
  • $(this.el) 等价于 this.$el
  • $(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement
假虚构修改el内容,富含值和绑定事件,能够选拔setElement。上边那么些事例中,setElement不独有把el的引用从button1改为button2,连click事件也一路修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true

事件管理和模板深入分析都以往者渲染必须的专门的工作,backbone一般把那个剧情放到View里面统一管理。
2.js

var ListView = Backbone.View.extend({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
 }
});

var listView = new ListView();

执行:

$duo 2.js

知识点

  • this.counter:内部使用的多寡,能够initialize中早先化
  • events:申明格式,'event selector': 'func',那比在此之前$('.wrapper button#add').on('click', function(){...}); 的艺术要清楚多数了。

模板

在index.html中加入:

<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面,否则在执行时,可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

在View的注解中修改:

events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

修改addItem:

addItem: function() {
 this.counter++;
 this.$('ul').append(this.template({counter: this.counter}));
}

同理,这里的模版可以替换为任何第三方模板引擎。
比如:artTemplate

var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...

你也许感兴趣的稿子:

  • Backbone中View之间传值的学习心得
  • 实例批注JavaScript的Backbone.js框架中的View视图
  • 大约理解Backbone.js的Model模型以及View视图的源码
  • Backbone View 之间通讯的三种方法

本文由网络计算发布,转载请注明来源:js框架中简单的View视图编写学习笔记