多少白学react之SASS实战

天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮子的APP变革将有。作为行业内人士,我们非常应该去拥抱这个势头。其中Reactjs相信是开发webapp的超人,这段时光拿会由此改建官方实例alt-tutorial来学学Reactjs相关的知识。

一样、更新内容

上一篇《有些白学react之restful
api获取服务器数据实战》我们上学了怎样通过superagent的蝇头单模块提供的功效,调用远程Express服务器上通过restful
api提供的多寡,并且上了什么做一个简单易行的Express api服务器。

1.修改*Server类,以及承继关系。
2.增IRunDevice的IServerProvider接口继承。
3.修复增加COM设备驱动或导致的充分。
4.修复网络发送数据可能引发的那个。
5.两全协商驱动器。

今自家准备用我们的以身作则应用alt-tutorial加上css的支持,以便能重新好之呈现。以下是最后效果:

6.改动协议驱动接口。
7.改协议命令接口。
8.修复协议命令,抽象基类情况下之良BUG。

Locations_table_view.png

9.增协商接口GetPackageLength,数据交互更活。
10.修复一些BUG。
11.优化代码。

本篇开始之前,如果看官跟我同一对SASS没有怎么碰过的,敬请先去押下阮一峰的《SASS用法指南》,有个基本概念,我们更拓展实战。

style=”font-size: 18px;”>其次、GetPackageLength接口的以

1. SASS Loader 和 sourceMap特性

像咱层层的亚首《小白学react之webpack实战》中所描述,为了能被咱的webpack在包装的时段可是解析及jsx格式的文件,我们需要参加bable这个loader的支撑。同样,这里我们以吃webpack在卷入时会是分析及scss,我们为欲加上相应的loaders。

我们打开webpack.config.js,在loaders代码块里面在以下代码:

{
  test: /\.scss$/,
  loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}

此间style,css和sass这几独loader的职能还较直观,我们理解”?sourceMap”这个语法的意是开对应模块的sourceMap属性,那么这sourceMap又是干什么用底吧?

实质上这里最主要的目的就是是便利我们调试sass代码。因为sass代码最终还是要是编译成css的,而我们于调试之时节,我们又乐于当Chrome的开发者工具被可知一直看到咱们的sass代码来拓展调剂。我们如果了解,sass的代码在编译成css后,变化或者会见较大的。

照我们将说及的Home页面的scss代码:

.home {
    &__li {

        list-style: none;
        height: rem(60px);
        vertical-align: middle;
        float:left;
        padding-right: rem(60px);

        &:hover { background: #31b0d5;
        }

    }
}

每当编译之后就会化:

.home__li {
  list-style: none;
  height: 1.5rem;
  vertical-align: middle;
  float: left;
  padding-right: 1.5rem; }
  .home__li:hover {
    background: #31b0d5; }

咱得以望双方肯定是有分别之了。那如果我们于相应的loader中从不开sourceMap的特性的口舌,我们在chrome的开发者工具被来看的用会见是者样子的:

chrom_no_sourceMap.png

可以看我们是没有艺术看我们的sass源码的。

假若我们用相应之loaders的sourceMap特性启动起来,那么我们当经过chrome的开发者工具进行调试之上将见面视的凡这样的:

chome_style_with_sourceMap.png

可以看于右侧边的style中我们不仅可以望编译后的css代码,在拖欠css代码的下手上较量,我们还可见到有我们的sass源码的链接,点击该链接进去:

chrome_source_home__li.png

咱们就可以看到我们的sass的源码了。所以说,sourceMap主要就是是为了有利于我们开展调剂用的。

    
这个接口主要的使状况是:当协议中发出要发送数据长度的吩咐,例如先向服务器发送数据包长度命令,得到返回确定后,再发送实际数据包信息。在连续发送大块数据的时候,例如文件内容、序列化后底始末等,内容来或包含协议的头和尾,会影响数据包的完整性。主要用来互动连续的可比充分数额块内容。

2. sass 落实像素到rem的更换

sass相对css,亮眼的功能之一即是永葆通过编程的点子操作css。

信任大家还清楚css3引入的rem的意图,它参照的凡页面根元素html的字体大小,所以1rem底大大小小就一律于页面根元素的分寸,2rem大大小就是页面根元素的2加倍大小。

经这种利用办法,我们好提升我们的运之而扩展性及可移植性。因为咱们全体应用使用的凡相对页面根元素的大大小小,所以不管运行浏览器怎么变换,平台怎么变换,代码都能非常好之打适应。

不过css3没有出来前,我们许多人口应当习惯了第一手下像从来拓展元素大小的装。那么我们而能容许大家持续应用像从设置大小,但是背后自动将诸如素转换成rem,那该是可怜好之工作,皆大欢喜了。

随我们得供一个叫做rem的sass方法,接收输入像从大小作为单位,然后自行将其变为相对html字体大小的rem返回。但是这个输入的像素大小应该相对于几加倍的html根页面字体元素的大小也?这里我们便待设定好一个参考值了。

以我们得以设定参考值为40px,那么调用方法rem(60px)的话,我们预料返回来的便是1.5rem。

脚我们看下实际代码的实现:

$relative-font-size: 40px !default;

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function rem($value) {
  $v: strip-unit($value);
  $relative: strip-unit($relative-font-size);
  @return $v/$relative + rem
}

这边的relative-font-size就是咱们地方说的参考值。注意这里的!default语法,意思是用40px看成之变量的默认值,用户可以当其余地方将该遮住,比如使以前方加上:

$relative-font-size: 60px;
$relative-font-size: 40px !default;
...

那么实际上该变量的价为移写成了60px,而非是默认值40px。

这边的strip-unit方法的意思是拿输入像从的单位”px”给错过丢。sass对这种单位运算的拍卖好智能,比如以输入为”$num
= 60px”为例,下面的“$num*0”的结果以会是0px,那么”0px +
1″,虽然后后没有px单位,但是结果碰头自动补上,变成“1px”。那么最终之”60px/1px”的结果虽是60,px这个单位就是见面错过丢了。

可能这里大家照面说,那咱们一直写成下面不就是截止了?

@function strip-unit($num) {
  @return $num / 1px;
}

假设我们只是支持去掉像素的单位来说,这样是ok的,但是要是我们只要支持去丢其它格式的单位,比如em转rem之类的,这样描绘就没有丁跟而扩展性可言了。

略知一二了strip-unit的作用,下面的rem的代码就颇好掌握了:

  • 第一以输入的像素(如60px)的单位为错过丢
  • 用相对字体大小的单位为脱掉
  • 以脱离掉单位之输入的像素大小除以相对字体像从大小,得到的结果加上rem,就是咱的输入像素转换成rem后的结果

这我们以scss就可以直接通过以下这种办法来以这措施:

height: rem(60px);

编译后的结果虽是

height: 1.5rem;

      1.接口参数

3. Home页面sass实战

  /// <summary>
        /// 获得应该接收的数据长度,如果当前接收的数据小于这个返回值,那么继续接收数据,直到大于等于这个返回长度。如果接收数据超时,则直接返回当前已经接收的数据。
        /// </summary>
        /// <param name="data">接收的数据</param>
        /// <param name="channel">IO通道,用于返回确认数据</param>
        /// <param name="readTimeout">返回读数据超时间隔时间</param>
        /// <returns></returns>
        public abstract int GetPackageLength(byte[] data, IChannel channel, ref int readTimeout);

3.1 Home页面组件代码基本改造

Home 页面的少只链接原来没有应用任何css样式的上是这样子的:

home_link_org.png

那么我们盼望以其改造成为

home_link_scss.png

本的代码是:

var Home = React.createClass({
  render() {
    return (
      <div>
          <nav>
            <Link to="/locations">名胜古迹</Link> |
            <Link to="/about">关于techgogogo</Link>
            {this.props.children}
          </nav>
      </div>
    )
  }
})

那以还好之采取我们的体,我们当link上层封装多一致叠列表项目li。

 <li><Link to="/locations" >名胜古迹</Link></li>
<li><Link to="/about" >关于techgogogo</Link></li>

此时的亮效果就算是:

home_link_bare_li.png

这儿要急需以li中进入scss样式的支持,只待以性质被投入”className=”xxx”就吓了。

<li className="xxx"><Link to="/locations" >名胜古迹</Link></li>
<li className="xxx"><Link to="/about" >关于techgogogo</Link></li>

当,此前我们需要在文件被引入scss文件,比如我们的Home页面的scss文件:

import  './Home.scss'

      2.接口使用

3.2 sass选择器嵌套和下令空间污染

sass支持选择器的嵌套。比如我们用在Home页面下面的li元素上用样式,我们得直接写成:

.li {
  ...//样式定义
}

这就是说以Home页面我们一直引用”className=”li””就能够利用达到该体。那么一旦我们Home页面的li除了有下及导航栏的价签之外,其它一些吗闹因此到li的语,那么我们的li样式就混了。

咱们以前一般的不二法门是透过改动css类的名来缓解这种冲突,比如可以用名字改成化home__tab__li:

.home__tab__li {
  ...//样式定义
}

其它在body中之所以到之li样式的类名就改化home__body__li:

.home__body__li {
  ...//样式定义
}

实则sass中生个再简约的法门来缓解此问题,那就算是近乎选择器支持嵌套,比如”.home_tab_li”其实我们好于顶层概念一个誉为home的命名空间,然后经过“&”来引用父元素来达到这目标:

.home {
    &__tab {
        &__li {
          ...
        }
    }
}

这么咱们就算好当页面代码中直接引用li的体制了”className=”home__tab__li”,如果当body中出另外li需要不同的体制的,我们为如出一辙可以由此这种命名空间隔离的主意来唯一定义对应元素,而不需操心命名空间污染带的劳动。

         (1)设置配置参数

3.3 Home页面scss代码实战

来了点这些基础后,我们的Home页面的scss代码的编排就老得心应手了。

俺们于src/components页面上添加一个Home.scss文件,编写代码如下:

@import '../libs/_rem.scss';

.home {
    &__tab {
        &__li {

            list-style: none;
            height: rem(60px);
            vertical-align: middle;
            float:left;
            padding-right: rem(60px);

            &:hover { background: #31b0d5;}

        }
    }
}

此处首先履引进来之_rem.scss就是我们眼前说之对rem方法的一个包装。

li样式的配备更多之是css的基础知识,我这边针对每一个设置描述一下:

  • list-style行: 将li列表前面的真诚圆圈符号为错过丢。
  • height行:
    设置列表的冲天,这个惊人要比默认字符大小大点,不然字体在列表中尽管见面显得不完,不入眼。记得我们前是以全局相对像素设置成40px的,所以这边的rem(60px)就是1.5rem,也不怕是li的万丈是数字大小的1.5倍增。
  • vertical-align行:设置字体垂直靠着展示
  • float行:
    设置li列表自动往左弯。也就是说应用了这li样式的列表都见面自动往左弯排列,而未会见像现在这样分成两实施显示。但是别之后记得要干净浮动,否则下面的空间吧会见随着一并生成上去。
  • padding-right行:
    每个列表右边的填充空间。其实就是以不深受个别个列表紧依在并,这里是于少数只列表中填充1.5独字符大小的半空中
  • hover行: 设置于鼠标移动及li标签上面时的背景颜色

接下来我们用针对Home页面代码也改下,加入对home__tab__li样式的援,以及清浮动:

import React from 'react'
import { Link } from 'react-router'
import  './Home.scss'

var Home = React.createClass({
  render() {
    return (
      <div >
          <nav >
            <li className="home__tab__li"><Link to="/locations" >名胜古迹</Link></li>
            <li className="home__tab__li"><Link to="/about" >关于techgogogo</Link></li>
              <div style={{clear:"both"}}></div>
            {this.props.children}
          </nav>
      </div>
    )
  }
})

module.exports = Home;

末了效果如下:

home_link_scss.png

 IServer server = new ServerFactory().CreateServer(new ServerConfig()
            {
                ServerName = "服务1",
                SocketMode = SocketMode.Tcp,
                ControlMode = ControlMode.Loop,
                CheckSameSocketSession = false,
                StartCheckPackageLength = true, //开启检测数据包长度
                NetReceiveBufferSize = 20,
            });

4. 报表显示Locations和Favorites

改造前,我们的Locations页面是这样子的:

Location_org.png

通过参加样式的支撑,我们最后以会拿页面改造成:

Locations_table_view.png

中所有套路及方为Home页面加入scss的支撑是一样的,只是具体有些css格式的底细之微调会稍微复杂一点而已。

这里自己就算非一项项的阐述了,大家可下载相应的代码进行参考。

          (2)接口代码

5. 源码

git clone
https://github.com/kzlathander/alt-tutorial-webpack.git
cd alt-tutorial-webpackgit
checkout 05
npm install
npm run dev

同时

正文由世界会珠海分舵编写,转载需授权,喜欢点个赞,吐槽要评论,进一步交流请关注自己世界会珠海分舵同自身之《微信小程序支付》主题。

《未完待续》

        public override int GetPackageLength(byte[] data, IChannel channel, ref int readTimeout)
        {
            if (data == null || data.Length <= 0)
                return 0;

            readTimeout = 2000;

            if (CheckData(data))
            {
                try
                {
                    int length = BitConverter.ToInt32(new byte[] {data[3], data[4], data[5], data[6]}, 0);

                    byte[] okBytes = System.Text.Encoding.ASCII.GetBytes("ok");
                    int num = channel.Write(okBytes);
                    if (num > 0)
                    {
                        Console.WriteLine("返回数据");
                    }
                    return length;
                }
                catch (Exception)
                {

                    return 0;
                }
            }
            else
            {
                Console.WriteLine("校验错误");
                return 0;
            }
        }

style=”font-size: 18px;”> 三、增加宿主程序(ServerSuperIO.Host)

static IServerFactory _serverFactory = null;
        static void Main(string[] args)
        {
            Console.ForegroundColor = ConsoleColor.Green;
            ConsoleUtil.SetConsoleCtrlHandler(new ConsoleUtil.ControlCtrlDelegate(HandlerRoutine), true);
            bool success = true;
            Console.WriteLine("正在初始化服务程序......");
            IObjectBuilder builder = new TypeCreator();
            _serverFactory = new ServerFactory();
            try
            {
                GlobalConfig gc = GlobalConfigTool.Load();
                foreach (ServerSuperIO.Config.Server serverCfg in gc.Servers)
                {
                    IServer server = _serverFactory.CreateServer(serverCfg.ServerConfig);
                    server.AddDeviceCompleted += server_AddDeviceCompleted;
                    server.DeleteDeviceCompleted += server_DeleteDeviceCompleted;
                    server.Start();
                    _serverFactory.AddServer(server);

                    foreach (Config.Device devCfg in serverCfg.Devices)
                    {
                        try
                        {
                            IRunDevice runDev = builder.BuildUp<IRunDevice>(devCfg.AssemblyFile, devCfg.Instance);

                            runDev.DeviceParameter.DeviceID = devCfg.DeviceID;
                            runDev.DeviceDynamic.DeviceID = devCfg.DeviceID;
                            runDev.CommunicateType = devCfg.CommunicateType;
                            runDev.Initialize(devCfg.DeviceID);

                            if (server.AddDevice(runDev) != devCfg.DeviceID)
                            {
                                Console.WriteLine("增加设备:" + devCfg.DeviceID + " 失败!");
                            }
                        }
                        catch (Exception ex)
                        {
                            Console.WriteLine(ex.Message);
                            continue;
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                success = false;
                Console.WriteLine(ex.Message);
            }

            if (success)
            {
                Console.WriteLine("初始化服务程序完成");
            }

            while ("exit" == Console.ReadLine())
            {
                _serverFactory.RemoveAllServer();
                break;
            }
        }

        private static bool HandlerRoutine(int ctrlType)
        {
            if (ctrlType == 0 || ctrlType == 2)
            {
                _serverFactory.RemoveAllServer();
            }
            return false;
        }
}

style=”font-size: 18px;”> 四、增加部署工具(ServerSuperIO.Tool)

1.充实服务,如下图:

葡京娱乐总站平台 1

 

2.长设备,如下图:

葡京娱乐总站平台 2

 

3.单击树型菜单,修改配置属性。

葡京娱乐总站平台 3

 

1.[连载]《C#通讯(串口和网)框架的统筹及实现》

2.[开源]C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍

2.采取SuperIO(SIO)和开源跨平台物联网框架ServerSuperIO(SSIO)构建系统的完全方案

3.C#工业物联网和集成系统解决方案的技巧路线(数据源、数据搜集、数据上传与接受、ActiveMQ、Mongodb、WebApi、手机App)

5.ServerSuperIO开源地址:https://github.com/wxzz/ServerSuperIO

物联网&集成技术(.NET) QQ群54256083