开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是前端页面区块管理框架——Magix。

随着前端领域的不断发展，现代的网站变得越来越庞大，页面变得越来越复杂。在这个情况下，Magix以将站点分离为一个个页面，将页面分离成一个个区块的思想，用区块连接的方式使用一个个相互独立的区块来构建页面，让无论多复杂的页面都能像拼拼图一样，实现化繁为简。

功能特性

• 简单易用：采用最原汁原味的语法，只要掌握html、css、javascript即可开箱即用
• 高效率：区块之间相互独立，意味着在任何地方都可复用定义好的区块，让工作事半功倍
• 面向未来：针对复杂庞大的项目时，Magix天然的微前端架构，经过简单配置，让独立的项目也如区块一般顺滑接入

magix适合什么项目

• Magix适合做单页应用(SPA)的项目，最初的设计目标也是做单页应用的
• Magix也可以做传统的展示型页面，当页面越复杂时，用Magix越值得
• 也可以只把页面上某一块应用Magix，不要求是整个页面
• Magix不支持多个实例，即同一个页面只能有一个Magix存在。即使如此，Magix仍然可以与别的框架混用。甚至页面上某几块想用Magix的功能也是可以的，Magix具有高自由度和可拓展性

安装

magix的使用目前依赖脚手架工具thx-cli，因此magix项目的开发、环境运行、打包编译等功能都需要在thx-cli的基础之上。

首先我们需要在全局先安装thx-cli

// npm
npm install -g thx-cli

// yarn
yarn global add thx-cli

thx-cli在安装完成后会注册thx作为全局命令，我们可以直接使用thx <command>[options]来进行使用

因此我们可以使用thx -v命令来验证是否安装成功，如果显示了版本号则表示安装成功

应用初始化

在安装完成thx-cli之后，我们就可以开始应用的初始化了。

我们可以使用thx init这个命令来进行应用的初始化。如果我们是第一次进行应用的初始化，thx-cli会提示安装magix相关的套件（thx-kit-magix），如下：

在安装好套件之后，选择我们初始化的模板

最后输入应用名称

应用的运行与打包构建

本地运行开发

thx-cli提供了dev命令用于应用的本地运行开发，在成功启动应用后会自动打开浏览器

打包构建

thx-cli同样也提供了build命令用来对应用进行打包构建，构建后的文件输出在build目录下

View基础

View的组成

和原生的前端开发一样，view通常也是由三个文件构成的：

• html文件：模版文件，结合数据渲染出页面
• css文件：样式文件，当前页面相关的样式
• javascript文件：必不可少的文件，承担所有逻辑的执行

在编译器的支持下，其中css文件可由less文件替代，同时也支持了typescript。并且针对不同的区块功能差异，html文件与css文件也并非是必须的，例如：在当前的view只是提供功能上的拓展时，与模版、样式上的需要时，便允许只有一个js文件

那么这三个文件是通过什么来进行连接的呢？答案是：@:占位符

接下来请看具体示例：

当一个view相关文件的结构为：

- index.ts
- index.html
- index.less

在index.ts文件中的代码如下：

import Magix from 'magix'

// 关联样式文件
magix.applyStyle('@:./index.less')

export default Magix.View.extend({
  tmpl:'@:./index.html' // 关联html文件
  assign(extra) {
  	this.set(extra)
	},
  async render() {
    await this.digest()
  }
})

可见，@:占位符的重要性，但它并非只有连接文件的功能，还有比如：引入css变量等功能。

View中数据渲染

我们在前面提到，html文件中会结合js文件中的数据来渲染页面，这又是怎么实现的呢？首先我们需要了解的是每个view都有一个数据对象。相信你在前面的代码中已经看到了这两个函数：this.set()、this.digest()。这两个函数便是对数据对象进行操作。

其中set函数的作用是设置view中的数据，当调用该函数时传入一个对象，该对象就会被混入到当前view的数据对象中。

而digest函数的功能为渲染视图，将模版转化为真正的dom。它也同时支持接收一个对象作为参数，表示设置数据并同时渲染视图。

this.set({username:123}).digest()
// 等同于
this.digest({username:123})

当html文件中的模版获取到动态的数据后，接下来只需要使用简单的模版语法就能将其渲染出来：<div>{{= username}}</div>。最终该节点的渲染结果为<div>123</div>

View之间的连接

我们已经了解了一个view的组成与渲染了。那不同的view之间又是怎么建立起联系的呢？magix是怎么做到区块之间的灵活使用的呢？

现在我们举个例子：有两个view，分别为a和b，我们想要在a中展示b，也就是我们想要在a中引入b，该怎么做呢？

假设目录结构如下：

- a.ts
- a.html
- a.less
- b.ts
- b.html
- b.less

在这里我们就要介绍一个属性了mx-view，magix就是通过该属性来将不同的区块进行连接。具体比如在a中引入b，只需在a.html中这样写即可：<div mx-view="@:./b"></div>

或者你也可以使用magix自带的标签来实现：<mx-vframe src="@./b" />，经过编译器的编译后，也会被编译的与前者相同。同样的，组件库中的组件，在经过编译后，也会变为<div mx-view=" "></div>这种形式的节点。

示例

父子组件通信

动态挂载view

—END—

开源协议：MIT

开源地址：https://github.com/thx/magix

javaScript是一种解释型语言，它的执行是自上而下，但是各个浏览器对于至上而下的理解是有细微差别的，而代码的上下游也就是程序流又对于程序正确至关重要。

首先得了解有几种方法能把javaScript加入到页面中？ 常见下述的前2种，其实还有更多。

1.页面中直接引入外部js文件：<script src="my.js"></script>

2.页面中直接写入 js片段： <script>alert(1)</script>

3.在js中引入js文件（比较少用）： document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");

注意:这时候"..</script>"必须拆成"</scr"+"ipt>",否则浏览器可能会把父js片段关闭掉,出错;

4.同样在js中引用其他js片段，document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");

你可能觉得这个并没有必要，既然已经在script中了还套一层干嘛？呵呵，怎么说也是一种写法，而且它具有其特殊的行为，稍后我们讨论到。

5.使用Ajax中的xmlHttpRequest结合eval()来引入js，我最早在Dojo的代码见到，写的详细些：

var ajaxRequest = getXmlHttpRequest()//省去各个浏览器得到xmlHttpRequest的部门

ajaxRequest.open("GET","my.js",false);//使用xmlHttpRequest对象Get方法的同步调用

ajaxRequest.send(null);

sJsFragment = ajax.responseText;//得到字符串为js片段

eval(sJsFragment);//执行js片段

注意:这里要求my.js即后来的sJsFragment内容得是非常规范的js，且没有//开头的注释，怎样检查js是否规范呢？去http://jslint.com/

6.无所不能的Dom方法，非常好用：

var oScript = document.createElement("script");//创建一个Script元素

oScript.src = "my.js";//制定src属性

document.getElementsByTagName("head")[0].appendChild(oScript);

说明：my.js的内容会在oScript加入到文档中之后获得并执行。仔细看下这段容易发现这个调用是异步的，可以在文档载入之后通过事件触发，我用它变通了一下，作为了xmlHttpRequest的Get方法在跨域取数时的替代，获得了很完美的效果，以后有机会专门写篇文。

六种不少吧，可能还会有吧，而且这几种之间还可能相互嵌套，变化无常。

其中1、2、4、6种方式引入的javaScript的执行顺序是非常自然的，随着页面的载入以及后续的事件触发，它们遵守先来后到、而其内部自上而下。

eb开发是一个很依赖经验的领域，然而这对初学者很不友好。

知识一旦脱离了应用场景就会变得晦涩、空洞，且知识本身也满足“二八定律”，“抓大放小”是提高学习效率的关键。

下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法（全彩）》一书。本书主线清晰，讲解简洁，并提供在线效果演示效果，非常适合小白上手！

1 HTML是骨架

很难想象一个人在桌前对着一块砧板坐一夜，隔一会儿就噼里啪啦敲几下，一会儿哭一会儿笑，是一种什么景象。事实上，在猫眼中我们就是这样的。只不过我们面对的是一块会发光的“砧板”而已。但为什么这块“板子”如此吸引人？“上网”到底是在做什么？

获取信息。

重点在“信息”，一种看不见摸不着却真实存在的东西。无论“1 + 1 = 2”这段字符显示得多么粗糙，都不会影响它传递了完整的信息，以及这条信息的内在逻辑是正确的，不是吗？HTML就是用来盛放最核心的内容——信息。

所以，在CSS和JavaScript出现之前，HTML就出现了。这是必然的，因为如果连最核心的信息都无法有效传递，那围绕着它的一切装饰物和附属品都是毫无意义的。

除满足承载核心信息的需求外，HTML还解决了一个重要的问题——将信息结构化。

试想有这样一篇文章：

背影

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

评论

王花花 大概，天底下的父亲，老去的样子都有些共同的特质吧

李拴蛋 我们都不愿意承认他老了

刘备备 想吃橘子...

此时上面的信息基本没有结构，只能通过断行或缩进尽可能让内容更易读，编辑时的状态就是其最终的显示效果。

HTML就派上了用场，见下方的代码：

代码

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一头雾水没关系，后面我们会细说每一个部分。总之这段内容给人感觉反而更繁琐。但繁琐是代价，重要的是现在这段信息有结构了。这就意味着计算机可以通过结构的规律将其显示得更便于阅读（甚至是交互）。

以下是不加任何装饰性内容直接让浏览器呈现的结果：

效果

这是纯HTML在没有引入任何装饰时的显示效果。很明显，即便是这样也比纯文字状态易读了许多。但注意，HTML本身没有样式，字体大小和粗细有变化的原因是浏览器的默认样式起了作用，与HTML没有关系。而重点就在这里，这意味着我们可以基于这个结构设计自己的页面效果，见下方的示例。

代码

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。

</p>

</artcle>

<section id="comment-list">

<div class="title">评论</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父亲，老去的样子都有些共同的特质吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我们都不愿意承认他老了</span>

</div>

<div class="comment">

<strong class="username">刘备备</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

这里只是举了一个小示例。你可以轻而易举地让页面的风格千变万化，进而让用户体验有所差异（或差距）。“千变万化”因CSS灵活、强大，“轻而易举”因HTML简洁、有序。结构的力量！

CSS是皮肤

一个充满活力的生态是不满足于现状的。人们在适应了便利地浏览核心信息之后，就会想方设法改进浏览的体验。比如，让自己的博客以多栏显示，以便在视觉上区分不同板块；修改字体颜色，以便强调一些重要信息等。

起初的做法是——准备几种特殊的标签，专门用于样式的指定。涉及布局的地方，如果没有特殊标签就直接用表格布局。以下没有任何样式的状态（以下代码均不需要看懂）：

代码

<h1>标题</h1>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构下。

如果想让标题居中，则需要给其添加元素<center>，见下方的示例。

代码

<center>

<h1>标题</h1>

</center>

<p>

从前有座山，山里有个庙，庙里...

</p>

效果

此时的页面结构如下。

居中标题的目的确实达到了，但是有一个很大的问题：如果我改变主意了，不想让其居中了，那么我还得再去将<center>元素去掉。这对于简单的页面确实可行，但如果是复杂的页面，这种做法的工作量就是噩梦，因为每个地方都得修改，无论是对齐方式、颜色、背景色，还是大的布局都必须通过修改结构才能完成。这种做法的最大问题是可维护性太差，很多时候为了一种样式要修改很多不必要的结构，枯燥、重复、削足适履的工作太多，基本上写一次就再也不想改了。

这个问题亟待解决，而且解决方案还要兼容现有规则。现有规则是什么？HTML的语法及结构。不过既然HTML已经有结构了，为什么不好好利用呢？

以前面示例中的文章页面为例，如果我们想更改标题，是否可以先统一选中所有标题，然后说明想要什么样式规则呢？就像下面这样：

所有h1 元素听着

对齐方式 居中。

字体颜色 黑色。

如果想将所有段落字体放大，则像下面这样：

所有p 元素听着

字体大小 150%。

这种方式的确很高效！同时这个规则与HTML语法无关，相当于另一种语言。这样结构和样式就不会互相影响，结构是结构，样式是样式，两者隔离开了。如果想修改样式，则完全不需要劳HTML大驾，只需要修改样式文件即可，更便于管理和维护。这就是CSS，只不过其语法更简洁。

下面以修改标题对齐方式为例：

h1 { /* 所有h1 元素听着 */

text-align: center; /* 对齐方式 居中 */

}

通过批量选择和处理，极大地提高了开发效率，降低了维护成本，四两拨千斤。

（完）

图书推荐

《HTML 5与CSS 3核心技法（全彩）》

表严肃 著

本书能够为自学Web开发初学者建立一套HTML与CSS的核心知识框架，同时借助丰富的示例让初学者有一个愉悦、轻松的学习过程。

想从事前端开发的，可将本书作为学习的起点。正从事前端开发的，可将本书作为速查的手册。