前端的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