前端的ejs，less，ant design初探

时间 2019-11-18

原文原文链接

1.ejs
使用js配置json生成的代码动态的生成html页面。javascript

// cleaning.ejs
<h1><%=title %></h1>
 <ul>
 <% for (var i=0; i<supplies.length; i++) { %>
<li> <a href= 'supplies/<%=supplies[i] %>' >
<%= supplies[i] %></a>
 </li>
 <% } %>
 </ul>
//本身的网页
<html >
 < head>
 <script type="text/javascript" src = "/js/ejs.js"></script>
 <script type ="text/javascript" >
   function myfunction(){
var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'
var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));
//JSON.parse(data) 把JSON字符串解析为原生的javascript值。
 alert(html);
document.getElementById("div1").innerHTML=html;
 }
 </script >
 </ head >
 <body>
 <button  onclick = "myfunction()" >点击</button>
 < div id = "div1" ></div >
 </body >
 < html >

做者：Decade_xun
连接：https://www.jianshu.com/p/81ea81d291fd

2.less
css的灵活使用，可使用变量来抽取定义属性值，而后修改这个变量就能够把引用的css样式所有改变。css

// main.less
@width: 100%;
@height: 100px;
@color: red;

.container{
   width: @width;
   height: @height;
   background-color: @color;
   margin-bottom: 5px;
 }

做者：dkvirus
连接：https://www.jianshu.com/p/48018e5da7dd

3.Ant Design UI组件库，就和微信小程序的组件库一个套路，都是封装的一套UI组件，引用去开发新页面很方便。
4.JS-Promise
提供了同步异步的操做符，好比then，all，race等，方便对异步操做好比网络请求进行链式调用。和RxJava挺像的。html