源码完整地址:https://gitee.com/dissucc/typescriptLearn
node下载
下载地址:https://nodejs.org/en/
cnpm安装
在安装完node后,npm默认就安装了,因为某种原因,npm下载组件包的速度太慢了,所以需要安装cnpm
安装命令
- npm install -g cnpm --registry=https://registry.npm.taobao.org
推荐使用Vs Code开发
a.新建一个文件夹,然后在vs code 中打开
ctrl+~唤起终端
输入
- npm install - g typescript
然后建一个基本的环境
好了,大概就是这个结构,我们今天要实现的就是一个带额外提示的输入框
效果图如下
首先,我们要写的是一个基于AMD规范的插件,所以页面代码先这个样子
先将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
来源: http://www.cnblogs.com/Ambre/p/7940761.html