runYus v1.0.00框架,测试版发布,欢迎各位技术大神参观指导

runYus 专栏收录该内容
1 篇文章 0 订阅

写在前面的废话:

  从入这一行开始,算算已经好多年了,真的应了那句古话,学不动了,也写不动了,可是作者水平依旧还是那么的菜,不过即使是块石头也有自己的追求,那么就把自己这么多年的感悟和累积总结一下吧,结果写着写着,就弄出这么一个玩意儿。

  说他是框架吧,似乎还有些粗糙,似乎更应该说是一堆函数的组合,以作者小学没毕业的水平,即写不出什么眼花缭乱的算法,也不会什么令人耳目一新的技术,一切都是最基础的,一切以实用为主,只专门针对象作者一样的小白群体,希望高高在上的大神级选手口下留情,当然了,善意的指教,作者还是欣然接受的。

  先浅谈一下对组件的理解,以笔者小学没毕业的水平来阐述,实在有些吃力,没办法中的办法,用一些白话文来解说吧。

  在作者来认为,web的世界里,万事万物皆是组件,大到整个页面、整个站点是组件,小到一个div、span、li标签也是组件,正所谓其大而无外,其小而无内。

  书上说,component叫组件,也有的人叫控件,还有的叫插件,笔者也搞不太清楚,毕竟咱只有小学文化。书上然后说,组件是由属性、方法、事件三方面构成的。

  在我来认为吧,一个组件的一生,应该与一个人的一生是相似的,从诞生,到成长,到消亡。

  一个组件刚刚诞生,除了一张脸,别的什么都没有,完全是一片空白。例如一个div标签,我们规定他的宽520,高250,背景颜色red等,然后就没有然后了,终其一生都是这个样子,一张脸活到死,佛说色即是空,不要被表象所迷惑。我管这种叫低能组件,在web设计中由css来控制外观,在yus框架中则由runYus渲染。

  接下来,组件除了美丽的外表,还要承载一些数据和内涵,这时候,各种方法和属性就来了,组件越复杂属性和方法就越多。笔者认为,一个框架,开发者做的越多,使用者做的就越少,应该是这样的吧。总之在yus框架的定义里,class中写入:swiper-520-180即代表生成一个宽520高180像素的轮播组件,setData函数控制组件数据,例如setData({"swiper名":3})即切换至第4帧。哦!为什么不是3而是4?因为0是1,卧去,这也太绕了,不解释了。

  在yus框架里,以一个省市区县三级联动选择器为例:在class中写入:picker-3即生成了三级联动选择器组件。但是,这时组件是空白的,我们需要使用setData({"pikcer名":array})将city数组数据写入组件,即完成这个picker组件的初始化。再然后,如果需要picker默认值为(黑龙江,哈尔滨,香坊区),只需再次setData({"pikcer名":array})即可完成赋值。

  需要注意,两次setData中的array数组不一样,第一次初始化的数组是城市列表数组,是由array+json组成的固定格式,之后会给出格式具体样本,第二次的赋值的array数组是["黑龙江","哈尔滨","香坊区"]。有人就说了,setData两次,是不是太繁琐了,那么,吃完饭还得要消化,不如直接打葡萄糖来得爽利,可是为什么没人打葡萄糖呢。所以,过程不能省略,一个是初始化,一个是赋值。可是setData两次确实繁琐了一些,于是这里需要用到setDom函数,例如setDom{"picker名":{"val":城市数组,"value":["黑龙江","哈尔滨","香坊区"]}},即可一次完成初始化及赋值,其中的val与value的意义和作用是一样的,至于为什么不能两个都用val,因为json中两个同名的key,最后一个会覆盖之前的,这也是上面为什么setData需要两次的原因。

  setDom参数是一个json两层嵌套的格式,除了能实现setData的功能外,还有拉取数据生成列表,操作dom例如appendto或remove,操作标签属性,运行函数等等功能,下文会详细介绍。

  最后,一个组件如果是一个人,总是要与别人互动交流的,总要产生一些行为,点开picker组件,可以实现鼠标拖动、或手指滑动切换省市区县,点击确认,这应该就是事件吧,总之,这一切都是组件开发者来考虑的,使用者只需要setData,setDom。

  上面,即是笔者对组件的理解,即表象、数据及行为。

  对了,说完了组件的诞生和成长,怎么没有消亡呢?其实和一个人的生死一样,活着不容易,死最简单,拉出去直接烧了就行,一行remove命令就可以结束一个组件的生命,不做过多的描述。

  反过来再说表象渲染runYus函数。其实这个都是在背后工作的,一般情况下不需要考虑他的存在。

  我们在div的class中写入us-w-50,即代表style="width:50px",是不是感觉很熟悉?前几天作者在网上随便看了看,都2021年了,才知道有一个叫TailwindCSS的框架,在国外已经火得一塌糊涂。从这一点上来说,作者实在太封闭了,只是一个闷头的独行者,从来不与外界接触的自闭狂。然后作者大略看了一下那个框架,感觉似乎与runYus还有许多不同之处,总之,各写各的,不管谁是先行者,都证明这种写法已经被一部分人认可了,这应该是一个好事。

  作者隐约记得,似乎很早以前,为了解决class命名的问题,比如一条高度1px的线,一条高度2px的线,或者更多的线条,怎么来命名呢,line1、line2、lineN?当时考虑可不可以在class中直接写书写呢,于是就产生了runYus的雏形,当时还很不成熟,可是却解决了很多麻烦。

  再说一句废话,以作者小说没毕业,以及野路子出身的水平,也就能写出这玩意儿了,好用你就用,不好用你就喷,反正我也听不着,凑活着吧。

  废话说完了,直接开始进入正题:

  框架的安装:

  框架依赖于jquery,在使用之前需要先引入jquery.js文件,框架不需要配置,只需要引用yus.js文件即可。

  框架很多功能都是依赖jquery来实现的,在这里对其表示一下感谢。至于直接用js开发框架的想法,暂时还在酝酿当中,希望有志一同的大能可以联系作者,联系方式在本文下方。

  第一章、页面渲染runYus:

  runYus只专注两部分数据的渲染,第一:px pt em等像素数据,使用us-指令方法开头;第二:#fff #000等颜色数据,使用uc-指令方法开头。

  1、us-指令(us-key-num-dom):专注于支持像素属性的渲染,支持的属性key列表对应如下:

    "w":"width",
    "h":"height",
    "t":"top",
    "r":"right",
    "b":"bottom",
    "l":"left",
    "p":"padding",
    "m":"margin",
    "pt":"padding-top",
    "pr":"padding-right",
    "pb":"padding-bottom",
    "pl":"padding-left",
    "mt":"margin-top",
    "mr":"margin-right",
    "mb":"margin-bottom",
    "ml":"margin-left",
    "bo":"border",
    "bt":"border-top-width",
    "br":"border-right-width",
    "bb":"border-bottom-width",
    "bl":"border-left-width",
    "ra":"border-radius",
    "bw":"border-width",
    "fs":"font-size",
    "lh":"line-height",
    "ls":"letter-spacing",
    "ti":"text-indent",
    "ws":"word-spacing",
    "ol":"outline",
    "ow":"outline-width",
    "oo":"outline-offset",
    "xw":"max-width",
    "nw":"min-width",
    "xh":"max-height",
    "nh":"min-height",
    "va":"vertical-align",


  例子:us-w-500即表示宽度为500px,不指定单位的情况下,默认使用px像素;us-w-100vw即表示宽度为整个屏幕,vw是单位;us-w-100pr,这个也表示宽度100%,其中pr就代表%,当然你也可以直接写成us-w-100%;us-mt-5代表上边距为5像素,us-mt-^5或us-mt-ms5代表上边距为负5像素,ms或^上尖号代表负数(-)
  一般情况下,us-指令控制的是当前节点,可有的时候也要考虑下面的感受,所以加入了子元素控制参数。例如:us-w-80-1代表第一层children子元素宽度80像素,同理us-w-80-3代表第三层子元素宽度80

  同时,us-指令也支持几种无单位css属性,如:us-z-8代表层的z-index值为8;us-fw-700代表字体为粗;us-opa-0.2代表透明度为0.2
    "z":"z-index",
    "fw":"font-weight",
    "opa":"opacity",

  2、uc-指令(uc-key-color-dom):专注于支持颜色属性的渲染,支持的属性key列表对应如下:

    "c":"color",
    "bg":"background",
    "bgi":"background-image",
    "bgc":"background-color",
    "bdc":"border-color",
    "btc":"border-top-color",
    "brc":"border-right-color",
    "bbc":"border-bottom-color",
    "blc":"border-left-color",

  例如:us-c-fff即代表字体颜色为白,其中不需要#号,与us-指令同理uc-bg-f00-1代表子级dom背景色为红色,其它不做过多的解释了.


  3、css指令扩展支持:例如想设置padding属性为:5px 8px 6px 8px,这样直接使用us-p-5px 8px 6px 8px是不可以的,需要把属性扩起来,即us-p-[5px 8px 6px 8px],同理设置一个背景颜色过渡样式,使用uc-bg-[linear-gradient(to bottom,rgba(56,121,217,0.6),rgba(13,109,190,1))]即可以实现。

  但是,yus不推荐这种使用方法,这样会使html代码看起来很臃肿,很复杂,但是如果你坚持这样用,那也没有问题。

  另外,需要注意的是,如上例中的[linear-gradient(to bottom,rgba(56,121,217,0.6),rgba(13,109,190,1))],其中to bottom因为中间有空格的原因,恰巧你又定义了一个bottom的class,那么这个class就会生效,为避免这种情况空格可以用下划线“_”代替,同理其中linear-gradient的短横线,也可以用竖线“|”代替。当然,你也可以不代替,如果没产生问题的话。

  4、rotate-指令(rotate-deg):这个很好理解了,就是旋转角度,rotate-45就代表元素顺时针旋转45度,同样的rotate也支持扩展,例如:rotate-[matrix(1.8,-0.5,1.2,0.5,0.2,-0.2)]


  5、shadow-指令(shadow-px1-px2-px3-color):这是生成阴影的指令,例如:shadow-3-3-3-666生成一个向右向下偏移3的灰色阴影,其中数值可以使用ms或^来代表负数,同样的,如果你感觉shadow指令不够用,也可以使用扩展[]支持,即shadow-[属性样式]


  6、filter-指令(filter-key-val):这个指令是对滤镜的支持,对应的属性key列表如下:

  blur、huerotate、saturate、brightness、contrast、grayscale、invert、opacity、sepia

  例如:filter-blur-20、filter-huerotate-80或filter-saturate-30,其中都是不需要带单位的,yus自动判断并附加单位,即filter-saturate-30与filter-saturate-0.3的效果是一样的,yus自动给没小数点的值附加%百分比

  7、nl-指令(nl-cls-obj):这个是给子级children添加class样式,或是给指定obj添加样式的,注明一下,在yus中是凡涉及到样式的大多情况下obj对应的是class名,而涉及到数据交互时,obj对应的名称是data-name标签,数据对应存在data("val")中,这点请记清,以后会用到,至于为什么不用class或是id,既然做自己的东西,总要与别人有区别的,不是吗?下面直接给例子。

    <ul class="nl-block nl-fl nl-bgred nl-white">
      <li>item 1</li>
      <li>item 1</li>
    </ul>

  上面的例子依次代表着,子级块为display:block; float:left; 背景颜色红,字体颜色white。

  至于其中的block、fl、bgred、white是事先定义好的内置class,yus预先定义并支持数种常用class,这些class在yus加载之前就已经存在了,不需要单独书写,对应列表如下:

      .b          { font-weight: bold; } \
      .arial      { font-family: \"Arial\"; } \
      .i          { font-style: italic; } \
      .vm         { vertical-align: middle; } \
      .fl         { float: left !important; } \
      .fr         { float: right !important; } \
      .al         { text-align: left !important; } \
      .ac         { text-align: center !important; } \
      .ar         { text-align: right !important; } \
      .del        { text-decoration: line-through; } \
      .box        { box-sizing: border-box; } \
      .poa        { position: absolute; } \
      .por        { position: relative; } \
      .pof        { position: fixed; } \
      .mac        { margin: 0 auto; } \
      .out        { overflow: hidden; } \
      .scroll     { overflow-y: auto; } \
      .hand       { cursor: pointer; } \
      .noevent    { pointer-events: none; } \
      .unpick     { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; } \
      .clear      { clear: both; } \
      .solid      { border-style: solid; } \
      .block      { display: block; } \
      .inline     { display: inline-block; } \
      .hidden     { display: none; } \
      .error      { color: #E30000 !important; border-color: #E30000 !important; border-style: solid; border-width: 1px !important; } \
      .red        { color: #E30000 !important; } \
      .orange     { color: #FF4500 !important; } \
      .yellow     { color: #D0D000 !important; } \
      .blue       { color: #1F72B6 !important; } \
      .green      { color: #0FB30F !important; } \
      .purple     { color: #662D7B !important; } \
      .cyan       { color: #94EBC0 !important; } \
      .gold       { color: #FFFF00 !important; } \
      .brown      { color: #A52A2A !important; } \
      .sky        { color: #87CEFA !important; } \
      .white      { color: #FFFFFF !important; } \
      .gray       { color: #808080 !important; } \
      .dark       { color: #515151 !important; } \
      .bgred      { background: #E30000 !important; } \
      .bgblue     { background: #1F72B6 !important; } \
      .bggreen    { background: #0FB30F !important; } \

  上面的class列表,都是比较简单并常用的,当然如果用户有自己的常用class组合,也可以写入自己的js文件中,并且append到style里。

  另外,上面nl-指令写得有些复杂,所以nl-指令也支持扩展,简化后的写法是这样的,即用[]将所有class框起来即可,同样这样的写法也存在一个问题,如上文提到的,因为block fl bgred white中间存在空格,所以这几个样式除了对子级dom产生影响,对ul本身也生效,如果想避免这种情况,用下划线代替空格<ul class="nl-[block_fl_bgred_white]">,这样就不会产生任何问题了。

    <ul class="nl-[block fl bgred white]">
      <li>item 1</li>
      <li>item 1</li>
    </ul>

  那么,有些童鞋会提出问题,nl-指令可以不可以包含us-、uc-、rotate-等指令呢?作者的回答是肯定的,上面的例子完全可以这样书写。

    <ul class="nl-[block_fl_bgred_white_ac_us-w-80_us-h-20_us-lh-20_us-fs-12]">
      <li>item 1</li>
      <li>item 1</li>
    </ul>

  然后一运行,你们会骂我,喂,这是骗人的好不好,完全没有生效。确实是这样子的,nl-指令的嵌套渲染确实有些弱,你至少要在子级dom中添加一条us-或uc-指令才能产生影响,例如下面这样。

    <ul class="nl-[block_fl_bgred_white_ac_us-w-80_us-h-30_us-lh-30_us-fs-12]">
      <li class="us-m-6">item 1</li>
      <li class="us-m-6">item 1</li>
    </ul>

  当然了,还有其它解决方案,用户只需在自己书写的js文件中runYus()即可实现渲染

    $(document).ready(function(event) {
      runYus();
    });

  nl-cls-obj中的obj是一个class名称,即nl-指令除了可以影响子级dom,还可以影响其它dom,例如下面的代码,就可以给所有含nav这个class名的元素添加样式:

  <div class="nl-[block_fl_bgred_white]-nav"></div>
  <span class="nav">item 1</span>
  <span class="nav">item 2</span>
  <span class="nav">item 3</span>

  并且不知道各位童鞋有没有注意到,上面的rotate-、shadow-、filter-三个指令是没有向下延伸属性参数的,那它们怎么去影响子级元素呢。

  作者说,写一个css去控制就完了呗,童鞋可能会说这也太弱智了吧,用yus就不能完全实现吗,于是group-指令就来了,对了先等一等,我还得先说下另外一个指令。

  8、rl-指令(rl-cls-obj):还用上面的例子说事,其中的item 2需要去掉红色背景,并且改变字体颜色为蓝色,那么rl-bgred就可以去除bgred这个样式了。

  <div class="nl-[block_fl_bgred_white]-nav"></div>
  <span class="nav">item 1</span>
  <span class="nav rl-bgred uc-c-00f">item 2</span>
  <span class="nav">item 3</span>


  9、group-指令(group-classname-createCss),及pull-指令(pull-classname):group可以生成一组样式集,pull指令提取group生成的样式,还是直接上例子吧。

    <span class="solid hand unpick us-ra-4 uc-bdc-999 us-bw-1 us-p-[5px 8px 6px 8px] uc-bg-[linear-gradient(to bottom,rgba(241,241,241,0.3),rgba(220,220,220,1))] group-button-1 hidden"></span>

    <span class="pull-button us-fs-18">pull指令提取button全部样式</span>
    <span class="button us-fs-18">调用group指令生成的css样式</span>

  上面的代码涉及到几个部分,第一、group-指令会将它之前的所有class生成一个css集合,而group之后的则不做处理,如忽略hidden。第二、group-button-1,最后面的参数1代表生成一条真实的css样式append在style里面,在页面存续期间,都可以直接调用这个css名。第三、group指令生成真实的css只对us、uc、rotate、shadow、filter、nl六个指令起作用,对上例中的solid hand unpick等不产生作用,这点需要记住,童鞋们也可以自己做对比。

  说句实话,作者的表达能力是有问题的,所以有没有文字功底不错的童鞋,来帮着一起写个说明文档啊,吼吼……,runYus样式渲染层面暂时结束,继续下一部分。

  第二章:组件

  1、select选择组件(select-cls)

  例子:

    //预先生成active、item样式
    <span class="uc-c-0000E3 uc-bdc-0000E3 group-active-1 hidden"></span>
    <span class="us-ml-10 us-p-5-1 us-pl-15-1 us-pr-15-1 us-bw-1-1 uc-c-999-1 uc-bdc-999-1 nl-solid nl-hand group-item-1 hidden"></span>

    <ul class="select-active pull-item" data-name="sex" data-sort="asc" data-multi="1">
      <li>男</li>
      <li>女</li>
      <li>鸟</li>
    </ul>

  给当前元素的子级dom添加class样式,子级dom需要被忽略的添加.skip,data-multi参数控制选择数量,0或1代表单选,2-n代表最大选取数量,点选后子级dom中,如果设置有data-val标签,取其值生成数组存入select-元素的data-val中,如果没有data-val则取其中的文本,记住data-name="sex"元素获取的数值是一个数组。

  之前的例子获取的是文本,如:男、女。再看看下面的例子,获取的是数值:0,1,2,3,4,至于其中的data-sort="desc"代表的是数组按倒序排列,asc是正序,不设置则按点选顺序排列

    <ul class="select-active pull-item" data-name="job" data-sort="desc" data-multi="3" id="thisjob">
      <li data-val="0">战士</li>
      <li data-val="1">法师</li>
      <li data-val="2">道士</li>
      <li data-val="3">刺客</li>
      <li data-val="4">精灵</li>
    </ul>


  至于怎么提取这个数组的值?使用ajax命令可全自动获取了,无需关注,毕竟这些组件存在的意义就是为了post提交数据到后台,至于ajax命令的使用,在后面介绍。

  当然了,如果您非要自己亲自看看,那么使用var obj = getDom("名称"),然后console.log(obj)就可以查看了。

  说明一下getDom中的名称,不需要特别记忆书写方式,你怎么写都可以,比如上面的两个例子,你只需要写getDom("sex")和getDom("job")就可以获取到元素的对象了,当然了,如果用getDom("thisjob")也是一样的,或者getDom("#thisjob"),抑或getDom("select-active")及getDom(".select-active")也可以,只不过因为sex以及job两个都存在select-active,所以获取的是两个dom元素对象,getDom的具体用法下文介绍。

  2、check选择器组件(check-dataName-width)

  dataName:拥有相同dataName命名的check组件归组,你可以预先放置一个<input data-name="work">用于接收所有同名dataName的数据。当然如果不放置也可以,yus会自动生成一个input并且隐藏起来。
  width:组件的大小,默认12,单位是px
  data-multi:   1单选,2或其它值多选,多选时toggle默认可切
  data-toggle:  切换val,0不可切换,1可以(默认)
  data-style:   形状,0(radio)圆圆,1(checkbox)方勾(默认),2(square)方方

  上面介绍的select组件,有包裹性的限制,只能影响到子级dom元素,同时其中的cls样式也需要提前设置好,而check组件就不需要了,你把check扔到任何可能存在的位置,都是可以的,只要他们拥有共同的dataName名称就行了,直接上例子:

    <span class="us-ml-10 us-mr-8 group-m10-1 hidden"></span>
    <div class="check-work-13 m10" data-multi="1" data-val="神"></div>神
    <div class="check-work-13 m10" data-multi="1" data-val="鬼"></div>鬼
    <div class="check-work-16 m10" data-multi="2" data-style="2" data-val="人"></div>人
    <div class="check-work-18 m10" data-multi="1" data-toggle="0" data-style="0" data-val="妖"></div>妖
    <input type="text" class="box vm us-w-100 us-h-30 us-ml-15" data-name="work" data-sort="desc" value="" />

  3、switch开关组件

  4、swiper轮播组件

  5、clock时钟组件

  6、count计数器组件

  7、picker联动选择器组件

  8、movable挂件组件

  第三章:命令

  1、drop下拉菜单命令

  2、setcls设置样式命令

  3、setval设置数据命令

  4、getval获取及赋值命令

  5、click、change、hover点击、数值变量、悬停命令

  6、disable组件静默命令

  7、setsum、setadd

  8、syn同步命令

  9、scroll滚动命令

  10、ajax数据提交命令

  第四章:函数

  1、getDom获取dom元素

  2、setFor从后台拉取数据并生成列表

  3、setData给组件设置数据

  4、setDom操控dom,几乎可以实现yus框架的一切功能

  5、ani动画函数,与jquery中的animate函数用法一致,在其基础上增加了颜色动画控制,旋转角度,动画每秒帧数质量等

  6、layer弹层函数

  7、load加载函数

  第五章:杂项

  1、unpick、catch、passive标签指令

  2、框架iframe操作

  3、data-show、data-demo、data-sort、data-json、.skip

  4、link数据联动

  5、指令组合生成一个select下拉框

  6、指令组合生成一个百分子滑动条

 

技术文档包含内容太多,一时之间也写不完,我把调试开发时写的东西传上来吧,里面乱七八糟的,不过基本上该有东西都有了,后续技术文档再慢慢写。

runYus框架资源下载地址:

https://download.csdn.net/download/weixin_46521444/18934038

作者威欣联系方式:

16423736

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值