这里实现一个todolist的增删改查排序样例，供其他开发人员参考。

结构

项目结构

除基础样式外，这里不使用原生css，基础样式：

html,body{
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
div,ul,li,button,input{
    margin: 0;
    padding: 0;
}

演示样式，正式开发请使用公共初始化样式(项目公共、团队遵守、reset css或者normalize css等)。

页面结构

&[......]
继续阅读

首先，

🧒🧒🧒🧒🧒🧒儿童节快乐！🧒🧒🧒🧒🧒🧒

最近vue的新命令工具更新到了正式版,为Vue CLI 3.x。虽然，使用Vue视图库的企业越来越少，但不影响个人开发使用。

Vue CLI是一个简单但功能强大的命令工具，用于开发搭建Vue.js前端项目。

它让开发这可以专注于编写应用程序，而不用花费大量时间再基础配置上。

Vue CLI 3借鉴了新版Angular，让Vue变得更好：

1.插[……]

继续阅读

Hello Indeex

这里将先构建一基于控制台的个简单Hello Indeex。在开始前，需要确保你本级上已经安装相关开发工具并可用，相关工具及技术可咨询专业人士或者通过搜索引擎获得。

1. 创建一个新的C++文件indeex.cpp，如下所示：

#include <indeex/clientlib.h>
#include <indeex/client.h>

[[indeex::genericjs]] void domOutput(const char* str)
{
        client::console.log(str);
}

void Main[......]
继续阅读

使用create-react-app官方脚手架

1) 安装create-react-app

npm i -g create-react-app

2) 创建项目

create-react-app react-demo

创建后cd到项目根目录。

此时的项目结构如下：

react-demo
    + node_modules
    + public
    |   -- favicon.ico
    |   -- index.html
    |   -- mainfast.json
    + src
    |   -- App.css
    |   -- App.js[......]
继续阅读

由于前端开发又大量用到了这些技术，这里把几年前基于ECMAScript 262-3标准的范型解释用最新的ECMASript 2018+标准再次诠释。

同其他强类型、预编译为二进制文件、面向对象的ECMAScript一样，范型也是较常用的一种编程方式。

语法

首先看新版ECMAScript 2018+的语法：

function indeex<T>(arg: T): T {
    console.log(arg);
    return arg;
}
let result = indeex<string>('hello generics');

这里，indee[......]

响应式布局

媒体查询通常用于响应式设计，以便根据屏幕大小显示不同设备的布局。这是因为在较小的屏幕上显示时，某些布局总是看起来像被拉伸过（甚至被挤下去）。

可以使用媒体查询将布局设置为宽屏幕（台式机，笔记本电脑等），中等尺寸屏幕（平板电脑，大型手机）以及小尺寸屏幕（手机等）。

对布局添加媒体查询，以便在较小的设备/屏幕上以不同的方式显示：

结构：

<!-- 1.1 -->
<header>header</header>
<div id="main">
  <article>article</article>
  &[......]
继续阅读

基础网页布局

在flexbox之前，如果不使用hack，这种布局很难实现。开发人员通常不得不添加额外的标记，增加负边距以及一些其他的属性来使所有内容正确排列，而不管内容的数量多少或者屏幕大小多少。

而Flexbox是创建常用网站布局的理想选择，例如三列:

结构：

<!-- 1.1 -->
<header>Header</header>
<div id="main">
  <article>Article</article>
  <nav>Nav</nav>
  <aside>As[......]
继续阅读

Flexbox 简介

Flexbox是一种布局模型，旨在帮助web开发者创建使用其他布局方式难以实现的高级网站布局。

Flexbox（也称为弹性盒模型）为web开发者提供了对元素在容器中的定位、对齐和大小的控制。可以指定元素如何垂直/水平对齐、更改顺序、更改所有元素的布局方向等等诸如此类的操作。

Flexbox布局

在Flexbox之前，由于当时布局模型的局限性，常见的网站布局通常很难实现时下的需求。当时的布局模型并没有真正迎合现代网络上常见的复杂网络应用。块级布局模型是专为文档布局而设计，内联/行模型布局专为文本设计，表格布局模型用于展现2D数据，定位布局用于明确地定位元素位置，[……]

继续阅读

Javascript是一门面向对象的强类型预编译的编程语言，是Ecmascript的一种现代常用实现。

这里我们编写一系列组件来熟悉现代版本的javascript。

一、短信发送类按钮

A. 结构目录

SendButton
 +-- src
 |    -- main.ts
 +-- index.html
 +-- app.scss
 +-- tsconfig.json

B. 页面布局

1) 在页面中手动加入容器，并配置id：

index.html

<div id="content"></div>

2) 设置css样式：
app.[……]

启动项目

安装Angular。

使用Angular CLI（命令行界面）工具来启动一个新的Angular项目。

先安装，然后使用它来启动新项目并跳到该文件夹中：

$ npm install -g @angular/cli
$ ng new ang-demo
$ cd ang-demo

开发项目

此时，文件夹只能运行一个Angular项目。我们有一些调整来确保应用程序使用Angular。

首先，与其他的
应用程序一样，必须创建一个main.js 文件，它可以让应用程序启动并运行一些默认设置。

在项目的根文件夹中，创建一个main.js：

const {app[......]
继续阅读