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/

图片.png

组件和插件

Image.png
Image.png

w3c自定义组件里面第一个字母必须大写:

Image.png

写好组件就进行调用:

Image.png
图片.png

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);
}

编译器对代码的识别,引入模块的时候,不写后缀名

Image.png

Props:

Image.png

js是弱类型:

整型

传过去会可能变成字符串型的数据:

加斜杠的原因:

Image.png

直接接收就行,不需要再写解构赋值了

es6中的bug

Image.png

通过机制,找到真实的dom机制;

babel在转换es6 class的时候会丢失this对象:

Image.png

我们使用bind强制转换这个函数的对象;转换为当前的.

sea.js五分钟上手的更多相关文章

  1. 五分钟上手Markdown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.------百度百科 话不多说,开始发车!总共10个标签,五分钟足矣,毕竟基本没难度 ...

  2. MAthJax入门教程(五分钟上手)

    最近在研究,在页面中显示一些数学公式.搞得我很头疼. 据说MathJax会统一这已领域.所以去学了学.网上教程特别多.繁杂. 说的清楚的特别少. 我是这么跑通的,: 1.在官网下载代码地址为:http ...

  3. 五分钟上手Git

    团队开发中.遵循一个合理.清晰的Git使用流程.是非常重要的.否则,每一个人都提交一堆杂乱无章的commit,项目非常快就会变得难以协调和维护.以下是ThoughtBot 的Git使用规范流程.我从中 ...

  4. 五分钟搞定Go.js

    五分钟搞定Go.js  1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...

  5. 30分钟学习sea.js使用指南

    : seajs如何解决? ①引入sea.js的库 <script src="../sea/sea.js" ></script> ②如何变成模块? defin ...

  6. 五分钟学Java:如何才能学好Java Web里这么多的技术

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...

  7. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  8. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  9. Seajs是什么及sea.js 由来,特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

随机推荐

  1. 洛谷 P3887 [GDOI2014]世界杯

    P3887 [GDOI2014]世界杯 题目描述 3014年世界杯足球赛就要开始了!作为卫冕冠军中国足球队的教练,手下每位球员都是猛将,如何摆出最强的11人阵容也是一件幸福的烦恼事啊. 众所周知,足球 ...

  2. 正确地在QML应用中使用fontsize

    我们知道我们有时须要显示text文本.可是,在QML应用中.我们应该怎样选择font的大小呢?在今天的这篇文章中,我们将展示在Ubuntu平台中的不同文字的大小.我们能够通过FontUtils来帮我们 ...

  3. 想学android进来看看吧~ ~

    我深知学校里面有非常多同学想学习新的知识,而苦于没有指导. 事实上我想说的是,非常多东西须要靠自己,须要借助度娘,谷歌的.当然有人指导是最好的了. 对于刚接触android是不是也想做出像以下的效果: ...

  4. php intval函数

    php intval函数 作用 intval — 获取变量的整数值 使用实例 <?php echo intval('-42'); // -42 ?> 相似函数 boolval() - 获取 ...

  5. 二分图简单概念&&HDU 2063

    二分图: 二分图又称作二部图,是图论中的一种特殊模型. 设G=(V,E)是一个无向图,如果顶点V可分割为两个互不相交的子集(A,B),并且图中的每条边(i,j)所关联的两个顶点i和j分别属于这两个不同 ...

  6. sync---强制将被改变的内容立刻写入磁盘

    sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的运行效率.sync命令则 ...

  7. new不抛出异常nothrow与new_handler

    可以看这里: http://blog.csdn.net/huyiyang2010/article/details/5984987 现在的new是会抛出异常的,bad::alloc 如果不想抛出异常两种 ...

  8. Elasticsearch中JAVA API的使用

    1.Elasticsearch中Java API的简介 Elasticsearch 的Java API 提供了非常便捷的方法来索引和查询数据等. 通过添加jar包,不需要编写HTTP层的代码就可以开始 ...

  9. BZOJ 1027 JSOI2007 合金 计算几何+Floyd

    题目大意:给定一些合金,选择最少的合金,使这些合金能够按比例合成要求的合金 首先这题的想法特别奇异 看这题干怎么会想到计算几何 并且计算几何又怎么会跟Floyd挂边 好强大 首先因为a+b+c=1 所 ...

  10. android 弹幕评论效果

    纯粹依照自己的想法仿照b站的弹幕写的一个demo,不知道正确的姿势怎么样的. demo下载地址 首先.一条弹幕就是一个textview public abstract class Danmu exte ...