elem

2019-09-12 admin

elem是什么

什么是elem,An asset manager based on custom elements

elem使用教程帮助文档

Elem

An tiny and easy to use web framework based on making custom HTML elements.

Creating Custom Elements

An elem is just a folder who’s name is the tag name.

ui
  widget
    widget.js
    widget.html.jade
    widget.css.styl
    hello.txt
  window
    jquery.js

  • Files with extensions like widget.html.jade are caught by the pre-processor and become widget.html.

  • When a <widget> appears on the page elem/loader will pull down all of the files in the widget folder.

  • If there is a widget.html the element’s inner html will be replaced with it.

  • If there is a widget.css the css will be added to the document.

  • If there is a widget.js it will be treated like a node module. Here we can export a function that applies the behavior. This function is called for every instance of <widget> and passed an object containing all of the file contents of the folder.

widget.js:

module.exports = function widget() {
  $(this).find('.hello').text('hello');
}

Giving the function two arguments makes it async, delaying rendering and loading child elements:

module.exports = function widget(done) {
  var self = this;

  $.get('/content.txt', function(text) {
    $(self).text(text);
    done();
  });
}

Special Folders

  • */lib is recursively pre-loaded before the element is applied. Put anything you want to require() in here so it is available when the element implementation.

  • */components are parsed as installed components and can be required globally.

  • */window is recursively pre-loaded but executed without a module.exports.

    This is where you would put classic global libraries like jQuery.

    You could also component install component/jquery and require('jquery'). But jQuery was always designed to extend window. Using it as a module breaks plugins.

    Everything in window is run in top-down order of directory depth. So to make jQuery plugins run after jQuery, you can put them in a window/jquery-plugins/ folder.

Express/Connect Middleware

var express = require('express');
var elem = require('elem');
var server = express();
var app = elem(__dirname+'/app');

var production = process.env.NODE_ENV == 'production';

server.use('/app', ui.loader({production: production}));

// Remove this route and include
// <script src="/app/loader.js">
// in a template if you don't want to use the bootloader.
app.get('*', ui.boot('/app'));

app.listen(3000);

Package Management

Elem has has built-in supports for component.

$ npm install -g component
$ component install visionmedia/page.js

body.js

var page = require('page');

You can use libraries from bower or npm if you need to by symlinking:

bower install jquery
ln -s bower_components/jquery/dist/jquery.js frontend/window/

Client-side templating

widget
  widget.js
  template.js.jade

widget.js

var template = require('template');

module.exports = function(render) {
  var locals = {};
  render( template(locals) );
}

Client-side routing

component install page

body.html
hello.js

body.html

<hello></hello>

hello.html

<h1>Hi!</h1>
<img src="reallybigimage.jpg">

hello.js

var page = require('page');

module.exports = function(files, render) {
  // hello.html will not be injected
  // until the route is matched
  page('/hello', render);
}

Page Layouts

… can be deleted. Try making a dynamic <body> element instead.

- app
  - frontend
    - body
      - body.html.jade
      - body.css.styl
    - header
      - header.html.jade
      - header.css.styl
      - header.js
    - page
      - page.css.styl
      - page.js
    - window
      - jquery.js

Pre-processor

The pre-processor keys off of sequential file extensions. e.g. any template.html.jade will envoke the .html.jade pre-processor and result in a static template.html build that is exposed to the element.

The standard pre-processors elem supports are:

  • .html.jade
  • .css.styl
  • .css.less

To add additional pre-processors, or override the built-in ones:

frontend.prep('.html.md', function(str, done){
  marked(str, done);
});

Note that if you override a built-in pre-processor, it will only apply to your own elements. Not installed ones.

By supporting these standard pre-processors element authors are able to use their templating language of choice without incuring a setup penalty. Since they are just pre-processors so there is no overhead.

If you think there is a pre-processor that should be standard make a pull request. The only requirement is that it be a well-known standard format.

No Headaches

Elem is built with the premise that your development and debugging workflow can never be impeded by the build process. In development mode, it actually enhances your workflow making it clear what code is responsible for what is happening on the page.

Development Mode:

  1. All files are requested independently.
  2. File names and line numbers are preserved.
  3. CSS is linked to the page, not injected.
  4. The final DOM is annotated with HTML comments that indicate how and where the markup was generated.
  5. Files are rebuilt on request, and only when they have changed.

elem(1)

elem(1) is provided as a convenience for developing isolated elements. It is not meant to be a real web server.

$ npm install -g elem

Usage: elem [options] <file ...>

Commands:

  index [options]        build index

Options:

  -h, --help     output usage information
  -V, --version  output the version number

elem create widget
elem run widget

License

MIT

Build Status

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74939.html

文章标题:elem

相关文章
element ui table render-header自定义表头信息使用
公司最近有需求实现表格列标题添加说明的需求,效果如图: 即用户将鼠标放在表头问号图标时显示他的说明信息。 页面代码部分: &lt;el-table-column prop=&#x27;timeSlice&#x27; :render-he...
2018-08-08
用element-ui的走马灯carousel轻松实现自适应全屏banner图
写在前面:网站轮播图建议使用swiper组件,非常方便快捷。 接手一个项目,轮播图是用element-ui的carousel实现的,看起来效果还不错,只是固定宽高,并未做适配,于是将就代码做下修改,以适配各种显示器屏幕。 &lt;e...
2018-05-11
vue+element+echarts 响应式后台管理系统,了解一下?
寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统。 项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式等。 先来看看效果: pc端 移动...
2018-02-25
Element-UI单选框(el-radio-group)点击事情的问题
结合el-radio-group元素和子元素el-radio可以实现单选组: template部分: &lt;el-radio-group v-model=&quot;tabPosition&quot; v-for=&quot;item i...
2019-01-16
element-ui table表格动态行合并
前言 element-ui 1.0的时候没有表格合并的方法,这当时做表格合并的功能时候,非常头疼。2.0开始官方已经支持表格合并的方法,那怎么做到表格动态合并呢,还是直接看代码吧。 官方例子 通过给table传入span-method方法可...
2018-08-01
ElementUI 实现表格可编辑 Editable,增删改查编辑表格Grid
查看 Github 实现思路:使用 solt 处理编辑和显示切换已经自定义组件渲染,100%兼容 ElTable 所有参数。 Vue + ElementUI 扩展的可编辑表格组件,完全支持任意组件渲染。 实现功能: 支持单列编辑 支持...
2019-01-20
ElementUI Form resetFields
前言 在一次结合v-if/v-else与resetFields结合使用reset之后值不正常,看完源码提了issue,然后被告知答案原来就在vue文档里,打脸打脸,因此记录一次不看文档,并且出问题不第一时间找文档的教训。 结论 凡事先从文...
2018-06-08
vue2.0 + element UI 中 el-table 数据导出Excel
1、 安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github。 github.com/SheetJS/js-… github.com/eligre...
2018-04-28
vue-i18n和ElementUI国际化使用总结
项目中需要自定义切换中/英文,基于vue.js,结合vue-i18n,ElementUI,以下是使用方法。 ElementUI国际化链接: http://element-cn.eleme.io/#/… vue-i18n:https://gi...
2018-01-10
全新升级,基于vue-cli3.0 + Element UI 构建的 响应式后台管理系统
更新日志 [x] 更新vue-cli为3.0版本 这里有篇文章 [x] 增加广告管理 [x] 优化路由控制 [x] 优化一些配置文件 [x] 登录用户信息存储改为 cookie v3.0.0 踩过的坑 这次更新后 vuex 开启严格模...
2018-07-13
回到顶部