Nodejs模块化前段UI制作 － component 看来很不错 by TJ
Nodejs模块化前端UI制作 —— component 看来很不错 by TJ
在现代Web开发中，组件化是一个非常流行的概念。它不仅提高了代码的可维护性，还使得复用变得更加容易。Component 是一个基于Node.js的工具，用于创建、分发和管理前端组件。通过使用 Component，我们可以更方便地实现模块化的前端开发。
什么是 Component？
Component 是一个开源项目，旨在简化前端组件的创建和管理过程。它允许开发者将HTML、CSS和JavaScript封装成独立的组件，并通过NPM（Node Package Manager）进行发布和安装。这使得组件可以在不同的项目之间共享和复用。
如何使用 Component？
首先，你需要安装 Component 工具。可以通过以下命令安装：
npm install -g component
接下来，我们来看一个简单的例子。假设我们要创建一个名为 my-component 的组件，该组件包含一个按钮，点击按钮时会弹出一个警告框。
- 创建一个新的目录：
mkdir my-component
cd my-component
- 初始化项目：
component init
这将生成一些必要的文件和目录结构。
- 编辑组件的HTML：
在 views/my-component.html 文件中添加以下内容：
<button id="myButton">点击我</button>
- 编辑组件的JavaScript：
在 public/js/my-component.js 文件中添加以下内容：
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了！');
});
- 编辑组件的样式：
在 public/stylesheets/my-component.css 文件中添加以下内容：
#myButton {
padding: 10px 20px;
font-size: 16px;
}
- 构建组件：
component build --standalone my-component
这将生成一个独立的文件，可以将其引入到你的HTML页面中。
- 使用组件：
在你的HTML页面中引入生成的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Component Example</title>
<link rel="stylesheet" href="build/component.css">
</head>
<body>
<div id="app"></div>
<script src="build/my-component.js"></script>
<script>
var MyComponent = require('my-component');
new MyComponent(document.getElementById('app'));
</script>
</body>
</html>
通过上述步骤，你就可以创建并使用一个简单的前端组件。Component 提供了丰富的功能，如依赖管理、测试支持等，使得前端开发更加高效和便捷。
一个简单的例子在这里：
http://tjholowaychuk.tumblr.com/post/37832588021/building-a-date-picker-component
我跟着做了一下，有点问题，找不到依赖的库。不过 github 上的代码好用。
昨天试了一个进展条的component
http://blog.kewah.com/2014/build-a-web-app-with-component/
也是出错。命令行的结果和blog里的不太一样。东西比较新，更新太快。
Component(1) is a front-end package manager created by TJ Holowaychuk. It embraces the philosophy of creating small and reusable modules. It is not restricted to JavaScript, indeed we are able to create components that also contain CSS, HTML, JSON, images, fonts, … Therefore we can create JavaScript libraries, UI component or reusable CSS utility classes. It allows us to organize applications around multiple components.
进展条例子中读template有问题，改成内置字符串可暂时解决出错问题：
//var template = require('./template.html');
var template =
'<div class="progressBar">' +
'<div class="progressBar-percent js-percentBar"></div>' +
'</div>';
“Nodejs模块化前端UI制作 - component 看来很不错 by TJ” 这个帖子提到的是一个叫做 Component 的工具，它可以帮助开发者更方便地创建和管理前端 UI 组件。Component 允许你通过 JavaScript 来定义 HTML 和 CSS，使得组件的复用性和可维护性大大提高。
示例代码
假设我们想创建一个简单的按钮组件，使用 Component 可以这样实现：
-
安装 Component:
npm install -g component -
创建一个新的组件目录：
mkdir my-component cd my-component -
初始化项目：
component init -
创建按钮组件： 在
my-component/components/button.js文件中添加以下代码：module.exports = Component.extend({ template: '<button class="btn"><%= this.label %></button>', style: ` .btn { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } `, initialize: function(options) { this.label = options.label || 'Default Button'; } }); -
使用组件： 在你的 HTML 文件中引入该组件，并使用它：
<!DOCTYPE html> <html> <head> <title>Button Example</title> <link rel="stylesheet" href="/components/my-component/build/component.css"> </head> <body> <script src="/components/my-component/build/component.js"></script> <script> var Button = require('my-component/button'); document.body.appendChild(new Button({ label: 'Click Me' }).el); </script> </body> </html>
通过这种方式，你可以轻松地创建、复用和管理复杂的前端组件。Component 提供了强大的功能，帮助开发者构建美观且易于维护的用户界面。
