sea.js五分钟上手
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。本文给大家分享sea.js知识总结,感兴趣的朋友一起学习吧
http://reactjs.cn/
http://reactjs.cn/react/docs/getting-started-zh-CN.html
http://www.thecss.cn/
https://css.w3ctech.com/
组件和插件
w3c自定义组件里面第一个字母必须大写:
写好组件就进行调用:
1:arr.js
let arr = [
<h1>hello wrold!</h1>
];
let map = new Map();
// 返回模块的输出对象
//modue.exports = arr;
// es6 模块返回的对象
// 使用 import * as util 接收
export { arr , map};
2:list.js
import { createClass,Children } from "react";
let set = new Set();
set.add("java");
set.add("c#");
set.add("javascript");
set.add("react");
const List = createClass({
render:function(){
let [...list] = set;
return (
<ul>
{
list.map((item,i)=>{
// key 是 react 识别元素 的 id
// 每一个元素都有一个 key 值,
// 这里循环的元素 react 无法动态的给元素一个 id
// 所以我们需要手动给一个 id
return <li key={`li-${i}`}>
{ item }
</li>;
})
}
</ul>
);
}
});
const List2 = createClass({
render:function(){
return (
<ul>
{
Children.map(set,(item,i)=>{
// key 是 react 识别元素 的 id
// 每一个元素都有一个 key 值,
// 这里循环的元素 react 无法动态的给元素一个 id
// 所以我们需要手动给一个 id
return <li key={`li-${i}`}>
{ item }
</li>;
})
}
</ul>
);
}
});
export { List , List2};
//modules.exports = list
3:test.js
import React from "react";
import { render } from "react-dom";
//解构赋值 取出需要的模块
// * as util
// 将导入的模块下返回的所有数据以对象的形式 赋值给 util,
import * as Util from "./arr.js";
import { List,List2 } from "./list.js";
function test(){
return "hello react";
}
function onload(){
var style = {
"color" : "red",
"fontSize" : "24px"
};
//组件的使用,第一个字母必须大写,这是 w3c 规范
render(
<div style={ style }>
{
test()
}
<List/>
<hr/>
<List2/>
</div>,
document.getElementById("example")
);
}
if(window){
window.onload = onload;
}else{
setTimeout(onload,0);
}
编译器对代码的识别,引入模块的时候,不写后缀名
Props:
js是弱类型:
整型
传过去会可能变成字符串型的数据:
加斜杠的原因:
直接接收就行,不需要再写解构赋值了
es6中的bug
通过机制,找到真实的dom机制;
babel在转换es6 class的时候会丢失this对象:
我们使用bind强制转换这个函数的对象;转换为当前的.
sea.js五分钟上手的更多相关文章
- 五分钟上手Markdown
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.------百度百科 话不多说,开始发车!总共10个标签,五分钟足矣,毕竟基本没难度 ...
- MAthJax入门教程(五分钟上手)
最近在研究,在页面中显示一些数学公式.搞得我很头疼. 据说MathJax会统一这已领域.所以去学了学.网上教程特别多.繁杂. 说的清楚的特别少. 我是这么跑通的,: 1.在官网下载代码地址为:http ...
- 五分钟上手Git
团队开发中.遵循一个合理.清晰的Git使用流程.是非常重要的.否则,每一个人都提交一堆杂乱无章的commit,项目非常快就会变得难以协调和维护.以下是ThoughtBot 的Git使用规范流程.我从中 ...
- 五分钟搞定Go.js
五分钟搞定Go.js 1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...
- 30分钟学习sea.js使用指南
: seajs如何解决? ①引入sea.js的库 <script src="../sea/sea.js" ></script> ②如何变成模块? defin ...
- 五分钟学Java:如何才能学好Java Web里这么多的技术
原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...
- ECharts数据图表系统? 5分钟上手!
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- sea.js 入门
上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...
- Seajs是什么及sea.js 由来,特点以及优势
Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1 ...
随机推荐
- HDOJ 5414 CRB and String 模拟
CRB and String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) T ...
- vue1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- Android 关于编译ijkplayer下的so经验分享
前言:公司最近需要做直播方面的技术调研,所以需要去研究播放器相关的技术:刚好本人github上收藏了ijkplayer,之前一直没有研究过,现在刚好clone下来研究研究. 我先在Windows安装c ...
- 英语 用on还是/at/还是in
in prep. 1. [表示地点.场所.位置等]在…里面:在…内部:在…上:例句: in the room 在房间里 2. [表示时间]在…期间:在(一段时间)以内:过…之久:例句: in su ...
- java(数组及常用简单算法 )
数组 数组:数组是存储同一种数据类型数据的集合容器. 数组的定义格式: 数据类型[] 变量名 = new 数据类型[长度]; 数组的好处:对分配到数组对象中每一个数据都分配一个编号(索引值.角 ...
- POJ 2981 Strange Way to Express Integers 模线性方程组
http://poj.org/problem?id=2891 结果看了半天还是没懂那个模的含义...懂了我再补充... 其他的思路都在注释里 /********************* Templa ...
- Android SDK使用国内镜像站,解决下载速度慢无法更新?
1. 国内android开源镜像网站 下面是国内几个比較知名的开源网站.我用的是电子科技大学的镜像源,下载速度很快. mirrors.neusoft.edu.cn //东软信息学院 ubuntu.bu ...
- Mindjet MindManager 思维导图软件-使用思维导图跟踪调用流程,绘制软件框架
思维导图.据说是每一个产品经理必备的软件.假设你阅读大型源码.使用思维导图跟踪调用流程,绘制软件框架将会很方便. 特点:没什么好说的.用过的都说好. 软件截图: 下载:http://www.mindm ...
- smarty模板引擎(一)基础知识
一.基本概念 1.什么是mvc? mvc是一种开发模式,核心思想是:数据的输入.数据的处理.数据显示的强制分离. 2.什么是smarty? smarty是一个php的模板引擎.更明白的 ...