这是一篇新手篇的typescript插件编写方式！！！！
源码完整地址：https://gitee.com/dissucc/typescriptLearn
1.环境安装
node下载
cnpm安装
在安装完node后，npm默认就安装了，因为某种原因，npm下载组件包的速度太慢了，所以需要安装cnpm
安装命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
推荐使用Vs Code开发
2.开发前的准备工作
a.新建一个文件夹，然后在vs code 中打开
ctrl+~唤起终端
输入
npm install -g typescript
然后建一个基本的环境
好了，大概就是这个结构，我们今天要实现的就是一个带额外提示的输入框
效果图如下
3.咱们开始吧！
首先，我们要写的是一个基于AMD规范的插件，所以页面代码先这个样子
<!DOCTYPE html> <html> <head> <title>TypeScript Greeter</title> <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script> </head> <body> <div class="box"></div> </body> <script> </script> </html>
先将requirejs引用到页面
添加2个帮助类到项目里
element.ts
import _ from './unit'; export default class mElement { tagName: string; props: any; children: any; key: any; count: number; constructor(tagName: string, props: any, children: any[]) { if (!(this instanceof mElement)) { if (!_.isArray(children) && children != null) { children = _.slice(arguments, 2).filter(_.truthy) } return new mElement(tagName, props, children) } if (_.isArray(props)) { children = props props = {} } this.tagName = tagName this.props = props || {} this.children = children || [] this.key = props ? props.key : void 666 var count = 0 _.each(this.children, function (child, i) { if (child instanceof mElement) { count += child.count } else { children[i] = '' + child } count++ }) this.count = count } render = function () { var el = document.createElement(this.tagName) var props = this.props for (var propName in props) { var propValue = props[propName] _.setAttr(el, propName, propValue) } _.each(this.children, function (child) { var childEl = (child instanceof mElement) ? child.render() : document.createTextNode(child) el.appendChild(childEl) }) return el } }
unit.ts
let _ = { type: function (obj) { return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '') }, isArray: function (list) { return this.type(list) === 'Array' }, slice: function (arrayLike, index) { return Array.prototype.slice.call(arrayLike, index) }, truthy: function (value) { return !!value }, isString: function (list) { return this.type(list) === 'String' }, each: function (array, fn) { for (var i = 0, len = array.length; i < len; i++) { fn(array[i], i) } }, toArray: function (listLike: any[]) { if (!listLike) { return [] } let list: any = [] for (var i = 0, len = listLike.length; i < len; i++) { list.push(listLike[i]) } return list }, setAttr: function (node, key, value) { switch (key) { case 'style': node.style.cssText = value break case 'value': var tagName = node.tagName || '' tagName = tagName.toLowerCase() if ( tagName === 'input' || tagName === 'textarea' ) { node.value = value } else { // if it is not a input or textarea, use `setAttribute` to set node.setAttribute(key, value) } break default: node.setAttribute(key, value) break } } } export default _;
看一下最终的项目结构
准备工作完成，开始编写
input.ts
///input export class Input <T extends InputOption>{ private thatOption: T; //构造函数 constructor(inputOption: T) { this.thatOption = inputOption; } //渲染方法 render(ele) { console.log(this.thatOption) } } ///配置项的接口 export interface InputOption { label?: string, placeholder?: string, extra?: string, value?: string }
先将配置项输出出来看看，有没有问题！
XxxUI.ts
import { Input } from './base/input'
let XxxUI = {
Input: (option) => {
return new Input(option);
}
}
export default XxxUI;
index.html ->script
<script> require(['XXXUI/XxxUI'], function (XxxUI) { var core = XxxUI.default; var input = core.Input({ label: '测试', placeholder: '测试', extra: '测试', value: '1' }); var box = document.querySelector(".box"); input.render(box); }) </script>
编译一下代码
tsc src/XXXUI/XxxUI.ts -m amd
然后直接打开页面看看是否有输出
成功啦！开始写东西，哈哈哈哈
插件最后生成的结构差不多是这个样子的
<div class='xui-input'> <label>测试</label> <input type="text"></input> <span>附加信息</span> </div>
先建一个文件，将创建DOM的操作封装一层，要不然每次都要实例化，很麻烦
core.ts
import mElement from './element'; let ele: object; export function create(tagName: string, props: any, children: any[]) { ele = new mElement(tagName, props, children); return ele; }
然后修改我们的
input.ts
import { create } from './core';
///input
export class Input<T extends InputOption>{
private thatOption: T;
//构造函数
constructor(inputOption: T) {
this.thatOption = inputOption;
}
//渲染方法
render(ele) {
console.log(this.thatOption)
const { label, placeholder, extra, value, click } = this.thatOption;
const dom: any = create('div', { class: 'xui-input' }, [
create('label', { type: 'text', onclick: click }, [label]),
create('input', { placeholder, value }, undefined),
create('span', undefined, [extra])
]);
ele.appendChild(dom.render());
}
}
///配置项的接口
export interface InputOption {
label?: string,
placeholder?: string,
extra?: string,
value?: string,
click: string
}
这里演示了一下如何简单的绑定事件！当然，你也可以换自己的写法
index.html
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Greeter</title>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
</head>
<body>
<div class="box">
</div>
</body>
<script>
function onclicktest() {
console.log(1);
}
require(['XXXUI/XxxUI'], function (XxxUI) {
var core = XxxUI.default;
var input = core.Input({
label: '测试',
placeholder: '测试',
extra: '测试',
value: '1',
click: 'onclicktest()'
});
var box = document.querySelector(".box");
input.render(box);
})
</script>
</html>
看看页面上的显示
嗯，搞定了，这篇文章就这样啦！
样式什么的，我就不写了，偷个懒偷个懒
是不是很简单？快去写个插件，封装好，给自己使用吧！！！！！！！！！！！！
源码地址：https://gitee.com/dissucc/typescriptLearn
请发表评论