前端的ejs，less，ant design初探
阿新 • • 發佈：2019-04-17
1.ejs
使用js配置json生成的程式碼動態的生成html頁面。
// 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樣式全部改變。
// 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元件，引用去開發