Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@alibsp/dinamic

Package Overview
Dependencies
Maintainers
2
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@alibsp/dinamic

dinamic for web

  • 4.1.81
  • unpublished
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
2
Weekly downloads
 
Created
Source

介绍

DinamicX 方案介绍

DinamicX 是基于模版的动态化技术,通过模版与页面代码的分离,使页面获得了布局、样式、事件、数据等几部分的动态输入的能力。

它主要包含如下几个特点:

  • 区块级:可做区块级介入,不影响整体页面,方便快速分部分接入;
  • 覆盖三端:同时覆盖 IOS, Android, H5,一套模版,三端共享;
  • 易于扩展:View,Parser支持自定义扩展,可以轻松实现丰富的高级模版能力;

DinamicX H5 SDK

H5 DinamicX SDK架构图

DinamicX H5 SDK 作为三端技术中的一部分,实现了Native支持的所有基础功能,包括事件处理、表达式解析、模版管理、页面渲染等;实现了从XML模版到 JSON tree中间态的模版预处理,以及在运行时由中间态到虚拟DOM的转化;SDK本身不承载UI渲染能力,虚拟DOM的产出和实际DOM的渲染交给依赖的渲染引擎完成;渲染引擎并不严格限定,理论 React-style UI库均可支持,目前测试过的包括React, Preact以及Rax,渲染引擎的转化可以通过构建时完成,无需任何代码改动;

  • 事件处理:支持 tap, longTap, swipe等 native事件
  • 表达式解析:从模版中解析出对应表达式语句,并转化为抽象语法树(AST),完成解析和运行时调用;2.0版本起,支持多层嵌套并内置多达20余个基础表达式,且支持业务个性化扩展
  • 模版管理:管理模版的下载和缓存,支持队列、自动Combo和错误处理,完成缓存并建立更新机制
  • 页面渲染:完成模版结构解析和数据注入,并且调用依赖的渲染引擎做虚拟DOM组装和实际DOM渲染
SDK 流程图

H5 DinamicX SDK流程图

使用方式

基础使用

import * as Dinamic from '@ali/dinamic';
import '@ali/dinamic-views';

const url = xx;
const data = xx;

const {Template, Fragment} = Dinamic;

Dinamic.render((
  <Fragment>
    <Template url={url} data={data}></Template>
    <Template url={url} data={data}></Template>
  </Fragment>
), document.querySelector('#app'));

详情 API 参见:https://yuque.antfin-inc.com/dinamicx/dfzn4i/hpfs05

代码贡献

请 Follow 如下规范去构建开发环境和提交代码

安装tnpm

npm install -g tnpm --registry=http://registry.npm.alibaba-inc.com

安装simplepack

tnpm install -g simplepack

安装def

  • 安装 DEF SDK:tnpm i -g @ali/def
  • 执行 def --version,正常返回版本信息,表示安装成功
  • 执行 def login 完成用户登录注册

本地开发

前面工具安装完成后, 克隆项目到本地目录,然后在项目根目录完成如下步骤:

安装依赖

tnpm install

启动调试服务器

def dev

开发规范

功能开发规范

所有主要功能开发,都需要自测后,调整或补充对应测试用例,并且执行 tnpm test pass 所有用例

代码格式规范

参考新人手册: http://handbook.labs.taobao.net/

分支规范

{Developer Name}/x.y.z

eg. jelly/0.0.1

版本号需按照当前master版本号,patch 位置(末尾位)加一来确定;

最终核心包发布版本号,会在PR合并主干之后,再确定

提交规范

参考并简化 Google AngularJS 代码贡献规范

格式示例
<!-- 简短格式 -->
<type>: <subject>

<!-- 完整格式 -->
<type>: <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
Type

具体形式如下:

  • fix: 修复BUG
  • feat: 增加新新特性
  • docs: 仅文档改动
  • perf: 性能优化
  • refactor: 代码逻辑重构
  • style: 仅代码格式变化
  • chore: 仅影响项目构建流程
  • test: 增加测试用例
Subject

改动内容的简明描述

  • 全中文或中英文混合均可
  • 长度需小于80字符
  • 结尾不需要标点

ChangeLog

  • 【3.1.28】更新 index.d.ts,解决 ts 环境报错问题

FAQs

Package last updated on 18 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc