Tianxiang Han's Blog

Less简介

Wed, 02 Aug 2017 00:00:00 +0000

我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。

很幸运，网站开发社区已经解决了这个问题，现在我们拥有诸如 Less, Sass 和 Stylus 之类的预处理器，它们给我们提供了许多优于纯 CSS 的好处。

变量 - 它可以让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在未来某一天也有可能会实现）。

动态计算值 - CSS 中最近出了一个 cal()，但它只适合用于长度的计算。

Mixins - 可以让你重用或者组合样式，而且支持传递参数。

函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等。

使用预处理器的唯一缺点就是，你需要将代码转换为纯 CSS 代码，让它能够在浏览器中工作。

1 Getting Started

Less 是用 JavaScript 写的，所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ，这样在真正的运行环境下它就可以自动编译，但这个过程非常缓慢，所以不建议这么使用。推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件，但是在本篇文章中我们将使用 node.js。

如果你已经安装了 Node ，那么你应该知道什么是终端，接下来就打开一个终端。安装 less 用以下语句：

npm install -g less 安装完成后，你将可以在任何打开的窗口中使用 lessc 命令，这个命令允许你将 .less 文件编译成纯 CSS 文件，像下面这样：

lessc styles.less > styles.css 如果说，我们用 less 将所有的样式写在了 style.less 中，通过上述命令，我们就可以将代码转换为纯 CSS 代码。接下来你就可以将样式表引入到 HTML 中了，如果在编译过程中出现了错误，将会在终端的命令行中提示你。

2 变量

Less 的一个主要功能就是可以让你像在其它高级语言中一样声明变量，这样你就可以存储你经常使用的任何类型的值：颜色，尺寸，选择器，字体名称和 URL 等。less 的哲学是在可能的情况下重用CSS语法。

这里，我们声明了两个变量，一个是背景颜色，一个是文本颜色，它们都是十六进制的值。

Less 代码如下：

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

将其编译成 CSS 代码如下：

p{ background-color: #ffffff; color: #1A237E; padding: 15px; }

ul{ background-color: #ffffff; }

li{ color: #1A237E; } 在上面的例子当中，背景颜色是白色，文本颜色是黑色。比方说，现在我们要切换二者的值，也就是黑色的背景和白色的文本，我们只需要修改两个变量的值就可以了，而不是手动的去修改每个值。

阅读更多有关 Less 变量的内容，请看这里。

3 Mixins

Less 允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。下面这个例子可以清楚地说明这一点。

#circle{ background-color: #4CAF50; border-radius: 100%; }

#small-circle{ width: 50px; height: 50px; #circle }

#big-circle{ width: 100px; height: 100px; #circle } 将其转换成 CSS 代码如下

#circle { background-color: #4CAF50; border-radius: 100%; } #small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; } #big-circle { width: 100px; height: 100px; background-color: #4CAF50; border-radius: 100%; } 如果你不想 mixin 也以一种规则的形式出现在 CSS 代码中，那么你可以在它的后面加上括号：

#circle(){ background-color: #4CAF50; border-radius: 100%; }

#small-circle{ width: 50px; height: 50px; #circle }

#big-circle{ width: 100px; height: 100px; #circle } 此时编译成 CSS :

#small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; } #big-circle { width: 100px; height: 100px; background-color: #4CAF50; border-radius: 100%; } Mixin 另一个比较酷的功能就是它支持传入参数，下面这个例子就为 circle 传入一个指定宽高的参数，默认是 25px。这将创建一个 25×25的小圆和一个 100×100 的大圆。

#circle(@size: 25px){ background-color: #4CAF50; border-radius: 100%;

width: @size;
height: @size; }

#small-circle{ #circle }

#big-circle{ #circle(100px) } 转换成 CSS :

#small-circle { background-color: #4CAF50; border-radius: 100%; width: 25px; height: 25px; } #big-circle { background-color: #4CAF50; border-radius: 100%; width: 100px; height: 100px; } 在官方文档了解更多关于 mixin 的知识。

4 嵌套

嵌套可用于以与页面的HTML结构相匹配的方式构造样式表，同时减少了冲突的机会。下面是一个无序列表的例子。

ul{ background-color: #03A9F4; padding: 10px; list-style: none;

li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
} } 编译成 CSS 代码：

ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { background-color: #fff; border-radius: 3px; margin: 10px 0; } 就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。

回到 CSS 中来，我们的 li 标签将有白色的文本，如果我们在 ul 标签中声明 @text-color 规则。

@text-color: #000000;

ul{ @text-color: #fff; background-color: #03A9F4; padding: 10px; list-style: none;

li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
} } 编译生成的 CSS 代码如下：

ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { color: #ffffff; border-radius: 3px; margin: 10px 0; } 在这里了解更多关于作用域的知识。

5 运算

你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div-width: 100px; @color: #03A9F4;

div{ height: 50px; display: inline-block; }

#left{ width: @div-width; background-color: @color - 100; }

#right{ width: @div-width * 2; background-color: @color; } 编译成 CSS 如下：

div { height: 50px; display: inline-block; } #left { width: 100px; background-color: #004590; } #right { width: 200px; background-color: #03a9f4; } 6 函数

Less 中也有函数，这让它看起来像一门编程语言了，不是吗？

让我们来看一下 fadeout，一个降低颜色透明度的函数。

@var: #004590;

div{ height: 50px; width: 50px; background-color: @var;

&:hover{ background-color: fadeout(@var, 50%) } } 编译成 CSS 如下所示：

div { height: 50px; width: 50px; background-color: #004590; } div:hover { background-color: rgba(0, 69, 144, 0.5); } 通过上述代码，当我们将鼠标悬浮在 div 上时，就可以获取半透明度的动画效果，这比之前自己手动设置要简单的多了。

怎么写一个react组件库

Tue, 01 Aug 2017 00:00:00 +0000

怎么写一个React组件库（一）

原文链接：https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c 引言

该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库。

这是该系列的第一部分。该部分将主要关注配置我们的模块和文件结构，但我们最后将会创建一个示例组件！ 🎉

如果你想要看第二部分，点击这里！

前提

我不需要你之前在 npm 发布过模块，但我们需要有以下一些前提：

安装了 Node & npm

基本掌握 Node & npm

安装了 Git

基本掌握使用 Git & Github

熟练使用 JavaScript & ES6

基本掌握 CSS

基本掌握 React

熟悉 styled-components 和 Babel 将很有帮助，但不是必须的。

开始

配置git和npm

首先我们创建一个文件夹。我将我的组件命名为component-lib。

$ mkdir component-lib 现在我们配置 Git 和 GitHub。

$ cd component-lib $ git init ⚠️注意：你需要先在 GitHub 上添加一个 repo。

git remote add origin git@github.com:alanbsmith/component-lib.git 棒！现在我们将开始配置 npm。如果你在 npm 上已经有一个账号，你只需要运行npm login.

如果没有账号，我们需要为你创建一个账号。我们需要配置作者的名字，email（公开的）和 url。

$ npm set init.author.name “Your Name” $ npm set init.author.email “you@example.com” $ npm set init.author.url “http://yourblog.com”

$ npm adduser 现在我们可以运行npm init 和配置我们的项目。大多数默认配置都可以直接使用，其中你需要特别关注version,description和entry point。同时记住你可以稍后对其进行全部更新。

$ npm init name: (component-lib) version: (1.0.0) 0.1.0 description: an example component library built with React! entry point: (index.js) build/index.js test command: git repository: keywords: license: (ISC) About to write to /Users/alanbsmith/personal-projects/trash/package.json:

{
  "name": "component-lib",
  "version": "0.1.0",
  "description": "an example component library built with React!",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alan Smith <[alan.smith@example.com](mailto:a.bax.smith@gmail.com)> ([https://github.com/alanbsmith](https://github.com/alanbsmith))",
  "license": "ISC"
}

Is this ok? (yes) 我通常使用0.1.0取代默认的1.0.0作为初始版本。同时我会添加模块的简略介绍。我们需要修改入口文件为build/index.js(稍后我们会具体解释)。请注意你的作者和GitHub信息会被自动添加。这将帮助你把npm文档和GIthub关联，使得你的用户对你的模块有更多的了解。

真棒！现在我们将添加文件和目录。

添加文件和目录

这一部分很乏味，所以我将简单介绍大部分点，关注其中一些重点。

$ mkdir lib $ touch .babelrc .eslintrc .gitignore .npmignore CODE_OF_CONDUCT.md README.md $ touch lib/index.js $ mkdir lib/components lib/elements lib/styles 很好，现在你已经已经构建了基本的文件架构。其中：

.babelrc包含编译阶段一些有用的转转码规则(presets)

.eslintrc包含linter配置

.gitignore和.npmignore分别用于忽略来自 git 和 npm 的文件

CODE_OF_CONDUCT.md对开源项目非常重要，怎么强调都不为过。但不要轻易的添加。如果你有添加 COC，你需要愿意执行它。

README.md也非常重要。这是我们和开源社区交流的主要方式。

/lib将是存放我们的组件和样式的地方。

关于测试？

我保证我们会进行测试，但在该部分不会进行测试配置。

添加我们初始的依赖

这部分同样很枯燥。我将说明最重要的部分然后跳过其他部分。我将使用$ npm install，但你也可以使用yarn。

🚨 后缀部分–save-dev十分重要！_ 🚨

我们不需要用户在使用安装我们组件的时候连带这些模块，这些库将只用于我们本地开发。

$ npm install babel-cli babel-core babel-eslint babel-preset-es2015 babel-preset-react eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch polished prop-types react react-dom styled-components –save-dev 然后等待…

哇！安装了好多。我们关注其中一些重点。如果你熟悉React，那么像react，react-dom，babel(以及presets)和prop-types这些对你来说相当熟悉。另外如果你熟悉eslint，这些插件也应该不陌生。

可能你对styled-components 和polished比较陌生。正如我们之前提到的，我们将使用styled-components来构建我们的库。你可以将 Polished当作一个提供很好的Sass功能的附加模块。这在技术上不是必须的，但我认为在这介绍它很酷。

很棒！现在我们有了如上的配置，接下来我们填写之前创建的文件。

⚠️快速注意事项：

下面我将使用术语“transpile”(此处我们翻译成“转码”)。这个单词是转换(transform)和编译(compile)的混搭。如果这对于你很陌生，你可以认为它和编译(compile)类似，不用过多关注细节。如果你想知道更详细的，你可以阅读这篇文章这里.

初始文件配置

.babelrc

{
  "presets": ["es2015", "react"]
}

.eslintrc

对于linters，我们有很多的选项。如果你想要是用自己的也是可以的；如果你不想，这里有很棒的一个。

{
  root: true,
  parser: 'babel-eslint',
  plugins: [/*'import', */'jsx-a11y', 'react'],

env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true
  },

parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      generators: true,
      experimentalObjectRestSpread: true
    }
  },

settings: {
    'import/ignore': [
      'node_modules',
      '\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)/article>,
    ],
    'import/extensions': ['.js'],
    'import/resolver': {
      node: {
        extensions: ['.js', '.json']
      }
    }
  },

rules: {
    // [http://eslint.org/docs/rules/](http://eslint.org/docs/rules/)
    'array-callback-return': 'warn',
    'camelcase': 'warn',
    'curly': 'warn',
    'default-case': ['warn', { commentPattern: '^no default/article> }],
    'dot-location': ['warn', 'property'],
    'eol-last': 'warn',
    'eqeqeq': ['warn', 'always'],
    'indent': ['warn', 2, { "SwitchCase": 1 }],
    'guard-for-in': 'warn',
    'keyword-spacing': 'warn',
    'new-parens': 'warn',
    'no-array-constructor': 'warn',
    'no-caller': 'warn',
    'no-cond-assign': ['warn', 'always'],
    'no-const-assign': 'warn',
    'no-control-regex': 'warn',
    'no-delete-var': 'warn',
    'no-dupe-args': 'warn',
    'no-dupe-class-members': 'warn',
    'no-dupe-keys': 'warn',
    'no-duplicate-case': 'warn',
    'no-empty-character-class': 'warn',
    'no-empty-pattern': 'warn',
    'no-eval': 'warn',
    'no-ex-assign': 'warn',
    'no-extend-native': 'warn',
    'no-extra-bind': 'warn',
    'no-extra-label': 'warn',
    'no-fallthrough': 'warn',
    'no-func-assign': 'warn',
    'no-global-assign': 'warn',
    'no-implied-eval': 'warn',
    'no-invalid-regexp': 'warn',
    'no-iterator': 'warn',
    'no-label-var': 'warn',
    'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
    'no-lone-blocks': 'warn',
    'no-loop-func': 'warn',
    'no-mixed-operators': ['warn', {
      groups: [
        ['&', '|', '^', '~', '<<', '>>', '>>>'],
        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
        ['&&', '||'],
        ['in', 'instanceof']
      ],
      allowSamePrecedence: false
    }],
    'no-multi-str': 'warn',
    'no-new-func': 'warn',
    'no-new-object': 'warn',
    'no-new-symbol': 'warn',
    'no-new-wrappers': 'warn',
    'no-obj-calls': 'warn',
    'no-octal': 'warn',
    'no-octal-escape': 'warn',
    'no-redeclare': 'warn',
    'no-regex-spaces': 'warn',
    'no-restricted-syntax': [
      'warn',
      'LabeledStatement',
      'WithStatement',
    ],
    'no-script-url': 'warn',
    'no-self-assign': 'warn',
    'no-self-compare': 'warn',
    'no-sequences': 'warn',
    'no-shadow-restricted-names': 'warn',
    'no-sparse-arrays': 'warn',
    'no-template-curly-in-string': 'warn',
    'no-this-before-super': 'warn',
    'no-throw-literal': 'warn',
    'no-undef': 'warn',
    'no-unexpected-multiline': 'warn',
    'no-unreachable': 'warn',
    'no-unsafe-negation': 'warn',
    'no-unused-expressions': 'warn',
    'no-unused-labels': 'warn',
    'no-unused-vars': ['warn', { vars: 'local', args: 'none' }],
    'no-use-before-define': ['warn', 'nofunc'],
    'no-useless-computed-key': 'warn',
    'no-useless-concat': 'warn',
    'no-useless-constructor': 'warn',
    'no-useless-escape': 'warn',
    'no-useless-rename': ['warn', {
      ignoreDestructuring: false,
      ignoreImport: false,
      ignoreExport: false,
    }],
    'no-with': 'warn',
    'no-whitespace-before-property': 'warn',
    'object-curly-spacing': ['warn', 'always'],
    'operator-assignment': ['warn', 'always'],
    radix: 'warn',
    'require-yield': 'warn',
    'rest-spread-spacing': ['warn', 'never'],
    'semi': 'warn',
    strict: ['warn', 'never'],
    'unicode-bom': ['warn', 'never'],
    'use-isnan': 'warn',
    'valid-typeof': 'warn',

'react/jsx-boolean-value': 'warn',
    'react/jsx-closing-bracket-location': 'warn',
    'react/jsx-curly-spacing': 'warn',
    'react/jsx-equals-spacing': ['warn', 'never'],
    'react/jsx-first-prop-new-line': ['warn', 'multiline'],
    'react/jsx-handler-names': 'warn',
    'react/jsx-indent': ['warn', 2],
    'react/jsx-indent-props': ['warn', 2],
    'react/jsx-key': 'warn',
    'react/jsx-max-props-per-line': 'warn',
    'react/jsx-no-bind': ['warn', {'allowArrowFunctions': true}],
    'react/jsx-no-comment-textnodes': 'warn',
    'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
    'react/jsx-no-undef': 'warn',
    'react/jsx-pascal-case': ['warn', {
      allowAllCaps: true,
      ignore: [],
    }],
    'react/jsx-sort-props': 'warn',
    'react/jsx-tag-spacing': 'warn',
    'react/jsx-uses-react': 'warn',
    'react/jsx-uses-vars': 'warn',
    'react/jsx-wrap-multilines': 'warn',
    'react/no-deprecated': 'warn',
    'react/no-did-mount-set-state': 'warn',
    'react/no-did-update-set-state': 'warn',
    'react/no-direct-mutation-state': 'warn',
    'react/no-is-mounted': 'warn',
    'react/no-unused-prop-types': 'warn',
    'react/prefer-es6-class': 'warn',
    'react/prefer-stateless-function': 'warn',
    'react/prop-types': 'warn',
    'react/react-in-jsx-scope': 'warn',
    'react/require-render-return': 'warn',
    'react/self-closing-comp': 'warn',
    'react/sort-comp': 'warn',
    'react/sort-prop-types': 'warn',
    'react/style-prop-object': 'warn',
    'react/void-dom-elements-no-children': 'warn',

// [https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules](https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules)
    'jsx-a11y/aria-role': 'warn',
    'jsx-a11y/img-has-alt': 'warn',
    'jsx-a11y/img-redundant-alt': 'warn',
    'jsx-a11y/no-access-key': 'warn'
  }
}

.gitignore

在这里我们将忽略build目录。Babel会将转码(transpile)后的代码放在该目录下，如果没什么必要的话我们不需要push up(或者pull down)该部分代码。

.DS_Store build node_modules *.log .npmignore

在这里我们将忽略lib目录。我们的用户将只和在build目录中的转码(transpile)后的代码接触，因此我们不需要(或者不想要)使得他们的node_modules由于不必要的代码而变得臃肿。

.babelrc lib CODE_OF_CONDUCT.md CODE_OF_CONDUCT.md

你可能已经有了一份心仪的COC。如果这样，那么自如地使用它。如果没有，这份 Contributor Covenant Code of Conduct 可以使用。

README.md

你可以随意地在 README 里添加内容。下面是一些建议的内容:

项目的标题

简略的介绍

如何在本地运行项目

运行 linter

运行测试套件

如何贡献

提交 PR 的步骤

如何提 issues

代码规范的链接

一份更新日志

很棒。现在所有都配置完成，我们可以添加内容到package.json。

添加初始化的 npm Scripts

在package.json里我们将添加如下命令到scripts部分：

“scripts”: { “build”: “babel lib -d build”, “lint”: “eslint lib/; exit 0”, “lint:watch”: “esw -w lib/”, “prepublish”: “npm run build” }, build将告诉Babel对lib目录下的内容如何进行转码然后导出到build目录。还记得我们先前如何设置入口build/index.js？那将是lib/index.js的转码(transpile)版本。

lint将对lib目录递归地运行linter去确保代码风格的正确。

lint:watch是一个用来在任何时候lib发生变化时更新linter。它将帮助我们即时发现错误。

prepublish是一个很棒的脚本。npm会在我们运行npm publish之前执行这个脚本。这将确保我们在build的资源是最新的版本。我们稍后会添加一个lint和测试脚本，这将确保我们不会向npm发布错误的代码。

很棒。现在我们已经完成基本的配置了，我们将添加我们的第一个组件！

添加我们的第一个组件

好的，你已经做到了很多。现在是时候做一些更意思的事了。我们将在lib/elements目录下创建一个名为Button.js的文件。

$ touch lib/elements/Button.js 接下来，在文件内部添加如下内容：

import styled from ‘styled-components’;

const Button =styled.buttonbackground: #1FB6FF; border: none; border-radius: 2px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 16px; line-height: 40px; font-weight: 200; margin: 8px 0; outline: none; padding: 0 12px; text-transform: uppercase; transition: all 300ms ease; &:hover { background: #009EEB; };

export default Button; 我们完成了这些之后，我们需要把它添加到lib/index.js以便我们的模块可以知道如何找到它。

import Button from ‘./elements/Button’;

module.exports = { Button, }; 收尾

耶✌️！我们的小按钮组件即将被发布。但在我们发布到npm之前，在本地测试环境测试我们的组件是很有必要的。在第二部分，这正将是我们讨论的部分！同时我们将讨论组件设计然后将其转化成styled-components使得其变得更加可定制。

⚠️注意：我们最好保存我们的项目然后commit。

$ git status $ git add -A $ git commit -m ‘Initial commit | adds basic setup’

Welcome to weex!

Mon, 01 Aug 2016 14:52:36 +0000

 A framework for building Mobile cross-platform UI

你可以在alibaba.github.io/weex/index.html找到的官方文档

首先安装’node.js’

然后npm install -g weex-toolkit

如何最快速上手：

weex 提供的 playground 就是你应该去的地方

一个最简单的 weex demo 长这个样子：

<template>
  <container>
    <text>Hello World</text>
  </container>
</template>

下面是计算器的demo

web端手机端均可运行

<template>
  <container style="background-color: #202020; padding-bottom:5;">
    <text class="result" id="result"></text>
    <container style="flex-direction: row">
      <text class="number" onclick="handler" id="1">1</text>
      <text class="number" onclick="handler" id="2">2</text>
      <text class="number" onclick="handler">3</text>
      <text class="operator" onclick="handler">+</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">4</text>
      <text class="number" onclick="handler">5</text>
      <text class="number" onclick="handler">6</text>
      <text class="operator" onclick="handler">-</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">7</text>
      <text class="number" onclick="handler">8</text>
      <text class="number" onclick="handler">9</text>
      <text class="operator" onclick="handler">*</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">0</text>
      <text class="number" onclick="handler">.</text>
      <text class="number" onclick="clear">AC</text>
      <text class="operator" onclick="calculate">=</text>
    </container>
  </container>
</template>

<style>
  .number {
    background-color: #D5D6D8;
    flex: 1;
    text-align: center;
    height: 100;
    padding: 30;
    margin: 5;
  }
  .operator {
    background-color: #F78D2A;
    flex: 1;
    text-align: center;
    height: 100;
    padding: 30;
    margin: 5;
  }
  .result {
    color: #ffffff;
    background-color: #202020;
    text-align: right;
    height: 100;
    padding: 30;
    margin: 5;
  }
</style>

<script>
  module.exports = {
    data: {
      result: ''
    },
    methods: {
      bindResult: function () {
        return this.result;
      },
      handler: function (e) {
        var value = e.target.attr["value"];
        this.result = this.result + value;
      },
      calculate: function(e) {
        var result = eval(this.result);
        this.result = this.result + " = " + result;
      },
      clear: function(e) {
        this.result = "";
      }
    }
  }
</script>

Check out the weex docs for more info on how to get the most out of weex.

Node process!

Mon, 25 Apr 2016 14:52:36 +0000

process是一个全局内置对象，可以在代码中的任何位置访问此对象，这个对象代表我们的node.js代码宿主的操作系统进程对象。

使用process对象可以截获进程的异常、退出等事件，也可以获取进程的当前目录、环境变量、内存占用等信息，还可以执行进程退出、工作目录切换等操作。

当我们想要查看应用程序当前目录时，可以使用cwd函数，使用语法如下：

process.cwd(); 如果需要改变应用程序目录，就要使用chdir函数了，它的用法如下： process.chdir(“目录”);

stdout的基本用法 stdout是标准输出流 console.log = function(d){ process.stdout.write(d+’\n’); } console.log就是封装了它。

stderr的基本用法 stderr是标准错误流，和stdout的作用差不多，不同的是它是用来打印错误信息的，我们可以通过它来捕获错误信息，基本使用方法如下： process.stderr.write(输入内容);

stdin的基本用法 stdin是进程的输入流,我们可以通过注册事件的方式来获取输入的内容，如下： process.stdin.on(‘readable’, function() { var chunk = process.stdin.read(); if (chunk !== null) { process.stdout.write(‘data: ‘ + chunk); } }); exit函数的基本用法如果你需要在程序内杀死进程，退出程序，可以使用exit函数，示例如下：

process.exit(code);

process.stdout.on(‘data’,function(data){ console.log(data); }); 在我们的输入输出的内容中有中文的时候，可能会乱码的问题，这是因为编码不同造成的，所以在这种情况下需要为流设置编码，如下示例：

process.stdin.setEncoding(编码);

process.stdout.setEncoding(编码);

process.stderr.setEncoding(编码);

nodejs!

Sun, 24 Apr 2016 14:52:36 +0000

nodejs 回调函数由于node是一个异步事件驱动的平台，所以在代码中我们经常需要使用回调函数。下面是回调函数应用的经典示例：

setTimeout(function(){

console.log('callback is called');

},2000);

我们传给setTimeout函数传入了一个匿名函数和一个调用时间2000(毫秒)，运行程序后等待2秒，可以看到输出了”callback is called”。

标准回调函数 node.js中回调函数格式是约定俗成的，它有两个参数，第一个参数为err，第二个参数为data，顾名思义，err是错误信息，data则是返回的数据，示例如下:

function(err,data){

}

获取模块为了支持快速开发，node平台上提供了大量的模块，封装了各自不同的功能，那么我们将如何调获取想要的模块呢，下来我们就来介绍。在node中，我们可以使用require函数，具体语法如下：

require("模块")；

var os = require("os"); 
var result = os.platform(); //查看操作系统平台           
os.release(); 查看操作系统版本           
os.type();  查看操作系统名称           
os.arch();  查看操作系统CPU架构 
console.log(result);