你好,游客 登录 注册 发布搜索
背景:
阅读新闻

手把手教你写一个 Javascript 框架:项目结构

[日期:2016-11-21] 来源:众成翻译  作者: [字体: ]

过去几个月中,RisingStack 的 JavaScript 工程师 Bertalan Miklos 编写了新一代客户端框架 NX 。Bertalan 将通过 编写 JavaScript 框架 系列文章与我们分享他在编写框架过程中的收获:

  本章将展示 NX 的项目结构,并讲述如何解决可扩展性、依赖注入以及私有变量等方面的一些困难。

  本系列章节如下:

  项目结构(正是本文)

  执行调度(Execution timing)

  沙箱求值

  数据绑定简介

  ES6 Proxy 实现数据绑定

  自定义元素

  客户端路由

  项目结构

  没有放之四海而皆准的项目结构,但有一些基本准则。感兴趣的同学可以看下我们的 Node Hero 系列中的《 Node.js 项目结构教程 》这一章。

  NX 框架概览

  NX 的目标是成为一个开源社区驱动的易于扩展的项目。项目特点如下:

  包含现代客户端框架必须的所有特性;

  除 polyfill 外,没有任何外部依赖;

  代码总量 3000 行;

  没有代码多于 300 行的模块;

  单个特性模块依赖不超过 3 个。

  项目各模块依赖关系如下图所示:

  这种结构为典型框架开发难题提供了一种解决方案。

  扩展性

  依赖注入

  私有变量

  可扩展性实现

  社区驱动项目必须易于扩展。故项目的核心部分应当小巧,并拥有一个预定义的依赖处理系统。前者确保项目易于理解,后者则保证框架稳定。

  本节先聚焦于实现小巧的内核。

  现代框架应当拥有的主要特性就是创建自定义元素并将其应用于 DOM 的能力。NX 的核心只有一个 component 函数,它的工作正在于此这个函数允许用户配置、注册一个新类型的元素。

  component(config)

  .register('comp-name')

  注册的 comp-name 是空组件类型,可以按照预期在 DOM 中实例化。

  下一步是保证能使用新特性扩展组件。为保持简洁、可扩展,这些新特性不应该污染核心部分。这时候使用依赖注入就很方便了。

  利用中间件实现依赖注入(DI)

  如果你对依赖注入不太熟悉,建立先阅读这篇文章:《 Dependency Injection in Node.js 》。

  依赖注入是一种设计模式,在这种模式中,一个或多个依赖或服务被注入到或引用传递给一个独立对象。

  DI 解决了硬性依赖,却引入了新问题。使用者需要知道如何配置、注入依赖。大多客户端框架都将这些工作交给 DI 容器,帮助开发者完成。

  DI 容器指的是知道如何实例化、配置对象的对象。

  另外一种方式则是中间件 DI 模式,这在服务端得到广泛应用(如 Express、Koa 等)。其中的奥秘在于,所有可注入的依赖(中间件)拥有相同的接口,以相同方式注入。这种方法则无需 DI 容器。

  为保持简洁,我决定采用中间件模式。若你曾使用过 Express,以下代码自然不会陌生:

  component()

  .use(paint) // inject paint middleware

  .use(resize) // inject resize middleware

  .register('comp-name')

  function paint (elem, state, next) {

  // elem is the component instance, set it up or extend it here

  elem.style.color = 'red'

  // then call next to run the next middleware (resize)

  next()

  }

  function resize (elem, state, next) {

  elem.style.width = '100 px'

  next()

  }

  中间件在新的组件实例插入 DOM 时执行,通常会给实例扩展一些新特性。如若不同库扩展相同对象,则将导致名称冲突。暴露私有变量会加剧问题,并可能被其他人意外利用。

  公开 API 小巧玲珑,其余部分隐身不见,正是避免问题的优秀方案。

  处理私有变量

  JavaScript 中需要通过函数作用域来实现私有变量。需要使用跨作用域私有变量时,人们习惯使用 _ 前缀来标志,并将其公开暴露。这可以避免意外使用,但无法解决命名冲突。更好的办法是使用 ES6 的 Symbol 基本数据类型。

  Symbol 是一种唯一的、不可变的数据类型,可用作对象属性标识符。

  下面的代码展示了 symbol 的实际使用:

  const color = Symbol()

  // a middleware

  function colorize (elem, state, next) {

  elem[color] = 'red'

  next()

  }

  这样一来,通过 color symbol (以及元素 elem)就能获取 red 。 red 的私有程度,可由 color symbol 暴露的不同程度控制。合理数量的私有变量,通过中心存储读取,是一种优雅的解决方案。

  // symbols module

  exports.private = {

  color: Symbol('color from colorize')

  }

  exports.public = {}

  index.js 如下:

  // main module

  const symbols = require('./symbols')

  exports.symbols = symbols.public

  在项目内部,所有模块都可访问 symbol 存储对象,但私有部分不会对外暴露。公有部分则可用于对外部开发者暴露一些低层次特性。这就避免了意外使用,因为开发者需要明确引入需要使用的 symbol。此外,symbol 引用也不会像字符串一样产出冲突,是故不会产生命名冲突。

  以下几点概括了不同场景下的用法:

  1. 公有变量

  正常使用.

  function (elem, state, next) {

  elem.publicText = 'Hello World!'

  next()

  }

  2. 私有变量

  项目私有的跨作用域变量,应当在私有 symbol 对象中加入一个 symbol key。

  // symbols module

  exports.private = {

  text: Symbol('private text')

  }

  exports.public = {}

  并在需要的地方引入。

  const private = require('symbols').private

  function (elem, state, next) {

  elem[private.text] = 'Hello World!'

  next()

  }

  3. 半私有变量

  低层次 API 的变量,应当在公有 symbol 对象中加入一个 symbol key。

  // symbols module

  exports.private = {

  text: Symbol('private text')

  }

  exports.public = {

  text: Symbol('exposed text')

  }

  并在需要的地方引入。

  const exposed = require('symbols').public

  function (elem, state, next) {

  elem[exposed.text] = 'Hello World!'

  next()

  }

  写在最后

  如果对 NX 框架感兴趣,请访问 主页 。胆大的读者还可以在 Github 上查看 NX 源码 和 nx-observe 源码 。

 

收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻      
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款