作者归档:wp

Markdown笔记

如果你是有一个佛(lan)系(duo)的心,但又很文(zhuang)艺(suan)的程序员,并且你对其他Markdown编辑器的使用效果感觉不是很好的话,就用Typora吧……

整理了一下学习笔记~先这二个吧~有空再写~

1.first day 2.The third day

 

 

明天新的一周又开启了,但也是这学期的最后一周

时间过得真快,转眼到了学期的最后一周,老师们都要忙着考试,学生们也都要忙着不挂……

最近重温了下前端最基本的内容,在各类语法中转换,前端要学的东西太多,有些不暇~

哈尔滨真的到了夏季,下周的温度也都攀升到了30+,但整个学期都没有获得情绪高涨的东西……

24977_top

React寒假研修班的一节课堂笔记

https://mobile.ant.design/docs/react/use-with-create-react-app-cn

在 create-react-app 中使用

create-react-app 是业界最优秀的 React 相关应用开发工具之一,本文档尝试以此工具来使用 antd-mobile 组件。

安装和初始化

在安装目录按shift+右键>选择在此处打开命令窗口

npm install -g create-react-app1 注意:工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。

create-react-app my-app  生成目录及相关文件2 3 4 cd my-app

进入创建的目录5 npm start

执行npm start6

浏览器自动弹出http://localhost:3000/的页面。

web前端的一节课堂笔记~

02 day_下午

 

Main.js

对象属性

对象属性

事件注册

/事件注册时,应使用jsx的驼峰写法。即从第二个单词和第一个字母大写的方式。 事件注册

事件注册

 

原生js当中的注册事件

Function hello(){

Return <p>hello world</p>

Const ele=<hello></hello>

组件的函数形式及渲染

17——

文件》首选项》用户代码片段》改写。——快速产生代码片段

用户代码片段

用户代码片段

快速产生代码片段

快速产生代码片段

JS在终端里测试:
console.log(n);

Var n=100;

Var str

Console.log(“str输出的结果为:”+str);

终端里

>node .\文件名.js

Js是一门弱类型语言,就是所有的变量的声明都用关键字 var, 对变量里面存储的数据类型要求不严格在,定义阶段变量存储任意类型的数据都可以,只有在编译的时候才会最终确定变量的类型是什么,

1.就是所有的变量声明都用关键字var

2.对变量里面存储的数据类型要求不严格

Console.log(num);

Var num=100;

Console.log(num);

Let  num=200;

Let  num=200;

Num=300;

Console.log(num);

Let声明的变量

Js中的字符串单引双引都可以。

If(30>20)

Let str=’hello tom’

Str=”h

}

Let声明的奕量不会有提升

Const

定义常量,不能重新赋新值,不能被修改

1.4箭头函数

 

 

2.1使用函数定义组件

Export default Foo

使用export导出组件供其它文件引用。

Import Foo from “./foo.js”

一定打开浏览器控制台,检测~

但function的文件也需要前面的import React 和ReactDOM

组件名和导出的名必须一致。

引入时可以利用其它名字引用。如,

Import FooApp form “./foo.js”

组件结构复杂可以单独拿出来设置

functionDemo(props){

import React from ‘react’

import ReactDOM from ‘react-dom’

// const name = “rose”

// const age = 30

// const course = “javascript”

 

// 定义了一个对象

var obj ={   // 这些数据应该是来源于后台的

name:”jack”,

age:22,

course:’css’

}

// 定义一个组件

 

function Demo(props){  // props是一个形参对象,可以获取当前组件上的所有的属性及值

console.log(props);

// return <p>大家好,我的名字是tom,今年20岁了,正在学习html</p>

return <p>大家好,我的名字是{props.name},今年{props.age}岁了,正在学习{props.course}</p>

}

 

// 将组件渲染到页面上

ReactDOM.render(

// <Demo name=”jack” age=”25″ course=”react.js” />,

// <Demo name={name} age={age} course={course} />,

<Demo name={obj.name} age={obj.age} course={obj.course} />,

document.getElementById(‘app’)

)

使用类的方式定义组件

import React from’react’//写完了这行代码之后,打包工具默认就会到当前项目文件

import ReactDOM from’react-dom’//与解析dom相关的模块

 

classHelloextendsReact.Component{//组件中的组件

constructor(){

super()//super类中的一些属性或是方法继承自父类

this.state={

msg:’hello’

}

}

render(){//ES6中新语法的定义函数的方式。

return <p>这是使用类的方式来定义组件===={this.state.msg}</p>

}

}

ReactDOM.render(

<Hello/>,

document.getElementById(‘app’)

)

使用类的方式定义组件

使用类的方式定义组件

使用类的方式定义组件

使用类的方式定义组件

9

 

 

 

 

 

VSCode设置中文语言显示

Vscode是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(us),如何将其显示语言修改成中文了?

1)打开vscode工具;

2)使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后;

3)修改locale.json文件下的属性“locale”为“zh-CN”;

4)重启vscode工具;

如果重启后vscode菜单等仍然是英文显示,在商店查看已安装的插件,把中文插件重新安装一遍(如下图),然后在重启工具。

vscode

vscode 改写为中文简体模式

在上图中商店中搜索Chinese(Simplied) Lang,安装即可。

ruby+rt标记的使用

<ruby>标签用于定义ruby注释(中文注音或字符)。与<rt>标签一同使用。

<rt>标签用于定义字符(中文注音或字符)的解释或发音。

 <rp>标签在ruby注释中使用,以定义不支持<ruby>标签的浏览器所显示的内容。

<ruby>

浏览器效果:

Snap11

details+summary文本标记的使用

<details>标签用于描述文档或文档某个部分的细节,Chrome浏览器和Firefox都支持<details>标签,可以与<summary>标签配合使用,<summary>标签用于定义这个描述文档的标题。

html

<p>CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
<details><summary>CSS即层叠样式表</summary>(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。</details>
CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。</p>

浏览器效果

<details><summary>标签的使用


标签的使用

Snap9

中国首届React开发者大会大咖们的演讲~

中国首届React开发者大会于2018年08月18日在广州举办。由w3ctech、前端圈主办。本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊React。

kejun

克军
前端布道者、阿里云CSFE前端团队负责人

演讲者:克军
如何把业务逻辑这个故事讲好 – 有限状态机与React开发

开发如同拍电影,组件、框架、工具如同演员和道具,工程师就是导演,其中指导拍摄的是什么呢,演员如何出场,如何演绎喜怒哀乐,场景如何切换等等。对,是剧本。开发中什么是剧本,是PRD还是设计稿,其实都不贴切。开发中的剧本就是一个产品的业务逻辑。如何清晰准确的表达,并成为代码的一部分,或许会成为新一代的开发模式。这就是状态机在前端开发中可以发挥的作用。

Vladimir Grinenko
Yandex JavaScript developer, more than 12 years experience.

vladimir

Vitaly Harisov
Yandex JavaScript developer, more than 12 years experience.

vitaly-yandex

Vitaly Harisov
Yandex JavaScript developer, more than 12 years experience.

演讲者:Vladimir Grinenko && Vitaly Harisov
React组件开发精髓

让我们来看一看如何使 React 组件开发更具有表达性。
你将学会如何不依靠 if 语句来修改组件的行为,就像我们在 CSS 里做的那样。
你将学习到如何:
创建灵活的且拥有不同配置(甚至是不同标签)的组件,它们可以被随机组合成不同的实例(instance)
做低成本的 AB-测试 和实验
将组件转换为跨环境/平台的可复用代码

演讲者:工业聚
Functional programing in React

主要讲解 React 里的函数式编程,包含高阶组件,Functional setState,Render props,以及 Algebraic effects 和 RxJS 在 React 里的应用。
待定
演讲者:蔡斯杰
一种数据契约驱动的 React + Redux 编程方式

React + Redux 的思想是数据驱动和函数式,分享一种在特定场景下,基于数据契约的抽象方式。包括如何制定契约,如何实现 Model,划分和定义组件,如何应对变化,最后达到系统的高复用和灵活性。
待定
演讲者:郭远飞
蚂蚁金融业务的React实践

将根据原技术栈遇到的问题和挑战,以及React优势分析和大家谈谈为什么从Zepto切换到React?
通过解决React资源加载问题、React静态资源离线、引入Preact降级、业务数据状态管理和antd-mobile等方面分享React在业务研发中的最佳实践
除此之外,还将给大家分享目前React在蚂蚁集团业务的现状,以及后续在React层面(如数据化、基于JSX的多渠道部署等)的规划
待定
演讲者:黄琼
从React渲染原理看性能优化

相信很多人都用过 React ,那么大家是否遇到过海量 DOM render 卡顿的问题?
React 16 对渲染机制做了大改动,很大的提升了交互体验,背后的原理又是什么?
实践出真知,本次分享深入挖掘 React 的渲染机制,同时结合实例来解决实践中遇到的性能问题,从而写出高性能的 React 应用。
待定
演讲者:题叶
Virtual DOM 方案几个有意思的探索

Virtual DOM 是 React 核心的功能。基于 Virtual DOM 还能设计一些有意思的方案,这个分享会介绍基于 Virtual DOM 的想法在服务端等场景的一些探索。项目的代码用了 ClojureScript,会有一些来自函数式编程的思考。