构建JavaScript框架指南：Turing.js实战

需积分: 14 8 浏览量更新于2024-07-23 收藏 660KB PDF 举报

本资源是一本深入指南，教你如何构建一个JavaScript框架，名为Turing，灵感来源于jQuery等实际项目。书中涵盖了现代JavaScript的核心概念，如浏览器能力检测、API设计的清洁性和可重用性、性能优化以及GitHub的使用。以下是详细的章节概览： 1. **介绍**：开篇提供框架构建的动机和预期目标，以及Turing框架的基本设计理念。 2. **框架风格与结构**：讨论了现代JavaScript框架的风格选择，强调模块化和插件系统的重要性，为后续章节的开发打下基础。 3. **辅助方法**：介绍了构建框架时常用的辅助函数和工具，这些函数有助于简化开发流程和提高代码的灵活性。 4. **初始化**：解释框架的初始化过程，包括设置默认选项、加载依赖和配置环境。 5. **模块与插件**：分析模块化架构和如何创建、管理插件，使框架能够轻松扩展和定制。 6. **面向对象JavaScript**：强调对象导向编程在框架中的应用，包括对象和类、原型类、继承机制以及类模型的设计和实现。 - **对象和类与原型类**：区分这两种设计方式，理解它们各自的优缺点。 - **原型继承**：讲解如何通过原型链实现继承。 - **原型 vs. 类**：比较这两种继承模式，突出原型的灵活性。 - **`extend` 和 `mixin`**：讨论函数式编程中的扩展技术。 - **`super`**：探讨子类如何访问父类的方法。 7. **函数式编程**：探索函数式编程在框架中的应用，涉及迭代器、性能优化和测试。 8. **选择器与选择器引擎**：详细介绍如何设计和实现一个高效且跨浏览器支持的选择器系统，包括解析策略、tokenizer、scanner和核心搜索算法。 9. **事件处理**：讲解事件系统的实现，包括`onReady`的处理和自定义事件模型的构建。本书不仅教你构建框架的技术细节，还涵盖了性能优化、API设计和测试等关键部分，让你掌握从零开始创建强大且实用的JavaScript框架所需的知识。整个过程通过实战案例和GitHub上的Turing.js项目来引导学习者深入理解。

cross-browser then cool!)

Conclusion

Now we’ve got a simple, readable OO class. This will allow us to structure other parts of Turing in a reusable

way. I hope the last two examples have demonstrated that JavaScript’s simplicity allows you to define your

own behaviour for things that feel like fundamental language features.

Building A JavaScript Framework

Object Oriented JavaScript 10

Functional Programming

The name functional programming is annoying because it reminds novices of procedural programming,

which people learn first then discard in favour of object oriented programming. Forget all that for a bit.

Functional programming is about:

Describing problems rather than focusing on the mechanics of their solution

•

Treating functions as first class citizens, and manipulating them like variables

•

Avoiding state and mutable data

•

There are functional programming languages like Erlang and Haskell. JavaScript isn’t strictly functional, but

neither are Ruby, Python, or Java. However, these languages use ideas from functional programming to

simplify common programming tasks.

Functional languages usually focus on lists, and treat functions as first class and have useful features like

closures. JavaScript is actually pretty good at functions and closures, and JavaScript arrays and objects are

similar to lists and property lists in lisp-like languages.

I once saw a talk by Tom Stuart called Thinking Functionally in Ruby. It has some animations that really

make functional programming paradigms easy to understand. If you’re still finding the concept nebulous try

watching his presentation.

Iterators

JavaScript frameworks use each a lot. Some frameworks define classes early on, but almost all define this

basic tool for iteration.

Ruby programmers use each all the time:

[1, 2, 3]. each { |number | puts number }

# 1

# 2

# 3

This sends a block to each, and each runs the block multiple times. Enumerable uses each to create lots of

other methods that are inspired by functional languages. Any collection-style object can mixin Enumerable to

get all those methods for free.

Equivalent JavaScript could look like this:

Array .prototype .each = function (callback ) {

for (var i = 0; i < this .length ; i++ ) {

callback (this [i]);

}

[1, 2, 3]. each (function (number ) {

print (number );

});

However, JavaScript actually has Array.forEach, Array.prototype.forEach, for (var i in

objectWithIterator) and even more ways to iterate. So why do frameworks bother defining their own

method? One of the reasons you see jQuery.each and each in Prototype is because browser support is

inconsistent.

Functional Programming 11

You can see the source for jQuery’s each in core.js.

Prototype’s implementation uses forEach if it exists:

(function () {

var arrayProto = Array .prototype ,

slice = arrayProto .slice ,

_each = arrayProto .forEach ; // use native browser JS 1.6 implementation if available

Underscore uses a similar approach:

// The cornerstone, an each implementation.

// Handles objects implementing forEach, arrays, and raw objects.

// Delegates to JavaScript 1.6's native forEach if available.

var each = _.forEach = function (obj , iterator , context ) {

try {

if (nativeForEach && obj .forEach === nativeForEach ) {

obj .forEach (iterator , context );

} else if (_.isNumber (obj .length )) {

for (var i = 0, l = obj .length ; i < l; i++ ) iterator .call (context , obj [i], i, obj );

} else {

for (var key in obj ) {

if (hasOwnProperty .call (obj , key )) iterator .call (context , obj [key ], key , obj );

}

} catch (e) {

if (e != breaker ) throw e;

}

return obj ;

};

This approach uses JavaScript’s available datatypes and features, rather than mixing an Enumerable-style

class into objects and Array.

Benchmarks

I’ve written some benchmarks to test each implementation. You can view them here: test.html, and

iteratortest.js.

Each will form a cornerstone of Turing’s functional programming features, so let’s create a benchmark to see

if the native function is really faster.

Rhino Node Firefox Safari Chrome Opera IE8 IE7 IE6

eachNative 1428ms 69ms 709ms 114ms 62ms 1116ms

eachNumerical 2129ms 55ms 904ms 74ms 58ms 1026ms 3674ms 10764ms 6840ms

eachForIn 4223ms 309ms 1446ms 388ms 356ms 2378ms 4844ms 21782ms 14224ms

The native method performs well, and generally close to the simple for loop. This probably explains why most

JavaScript library implementors use it when it’s there. And for ... in performs so terribly in Internet

Explorer that we need to be careful about using it.

API Design

An important consideration is the API design for functional features. The Prototype library modifies Object

and Array‘s prototypes. This makes the library easy to use, but makes it difficult to use concurrently with

other libraries: it isn’t safely namespacing.

Building A JavaScript Framework

Functional Programming 12

剩余80页未读，继续阅读

tongrencolin

粉丝: 1
资源: 10

构建JavaScript框架指南：Turing.js实战

java框架搭建

搭建JAVA WEB框架

搭建JavaScript开发环境

framework import

gin-vue-admin

uniapp &.active报错

springboot vue

vue3 fastapi

react native

vue3+fastapi

最新资源