您的位置：首页 > Web前端

clojure实战——搭建web前端开发框架(模拟web服务器、推送js修改)

2015-10-30 00:53 996 查看

直接动手搭建框架吧，闲话留着后面碎碎念~~

1. 框架概述

使用figwheel库，通过websocket将js推送给浏览器。修改ClojureScript之后，不用重新编译打包，就可立即推送到浏览器进行显示。

使用ClojureScript REPL模拟web服务器，不需将网页部署到ngnix等容器中，浏览器即可访问本地web服务。

使用environ库进行环境变量设置，可轻松切换开发/发布环境。

2. 搭建开发框架

（1）project.clj工程文件

(defproject web-test "0.1.0-SNAPSHOT"
:description "web前端框架"
;; 资源文件，
:source-paths ["src/clj" "src/cljs"]
:dependencies
[[org.clojure/clojure       "1.7.0]
[org.clojure/clojurescript "1.7.170"]

;; 构建测试用的服务端
;;为ring建立路由通道必备
[compojure                 "1.4.0"]
;;clojure实现web服务基础框架
[ring                      "1.4.0"]
;;ring中间件相关
[ring/ring-defaults        "0.1.5"]

;;构建clojure工程
[leiningen                 "2.5.3"]

;;异常报告for ring
[prone                     "0.8.0"]]
:plugins [   ;;将clojurescript编译为js的插件
[lein-cljsbuild "1.1.1"]
;;ring管理
[lein-ring "0.9.0"]
;;css/javascript压缩工具
[lein-asset-minifier "0.2.2"]
;;
[lein-figwheel "0.5.0-1"]]
:ring {:handler handler/app}
; leiningen如果低于这个版本就警告
:min-lein-version "2.5.3"
:clean-targets ^{:protect false} ["resources/public/js"]
:cljsbuild {:builds {:exchange {:source-paths ["src/cljs/exchange"]
:compiler {:output-to     "resources/public/js/web-test.js"
:output-dir    "resources/public/js/web-test"
:externs     ["resources/public/js/webtest.js"]
:optimizations :none
:pretty-print  true}}}}
:profiles {:dev {:repl-options {:init-ns handler
:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}
:dependencies [[ring-mock "0.1.5"]
[ring/ring-devel "1.3.2"]
[pjstadig/humane-test-output "0.6.0"]]
:plugins [[lein-figwheel "0.4.1"]]
:injections [(require 'pjstadig.humane-test-output)
(pjstadig.humane-test-output/activate!)]
:figwheel {:http-server-root "public"
:server-port 8001
;:css-dirs ["resources/public/css"]
:ring-handler handler/app}
:cljsbuild {:builds {:web-test {:source-paths ["env/dev/cljs/web-test"]
:compiler {:source-map true}}}}}

:prod {:cljsbuild {:builds {:exchange {:source-paths ["env/prod/cljs/exchange"]
:compiler{;;打正式包的时候，要用:optimizations :advanced 以压缩代码大小
:optimizations :advanced
;;false只打一行，压缩代码
:pretty-print false}}}}}})

各库在github上均有详细介绍，可自行查阅。

（2）详细代码

本部分主要讲解上述工程结构对应文件的内容：

/templates/index.html模板文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<title>test</title>
</head>
<body>
<div class="actMain" id="j_ActMain"></div>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>

/src/clj/handler.clj文件：

从上面的project.cljs工程文件的figwheel配置项：:ring-handler handler/app可知，执行figwheel后，将执行handler命名空间下的app代码，启动模拟的web服务。

(ns handler
(:require [compojure.core :refer [GET POST defroutes]]
[compojure.route :refer [not-found resources]]
[ring.middleware.defaults :refer [site-defaults wrap-defaults]]
[prone.middleware :refer [wrap-exceptions]]))
;; 定义ring的路由，render-file解析模板文件
(defroutes routes
(GET "/*" [] (render-file "templates/index.html" {:dev (env :dev?)}))
(resources "/")
(not-found "Not Found"))

(def app
(-> routes
ring.middleware.keyword-params/wrap-keyword-params
ring.middleware.params/wrap-params))

/src/cljs/exchange/core.cljs文件：

该文件是真正的核心cljs文件，即我们需要应用到浏览器的最终文件。

(ns exchange.core)

(defn ^:export init
"页面入口"
[]
(.alert js/window (.getElementById js/document "app")))
;页面加载时调用init
(init)

运行figwheel后，修改该文件的init函数，或其调用的函数，保存后会重新编译为js并立马推送到浏览器进行显示。

运行figwheel的命令

lein figwheel

因为在project.clj工程文件中，figwheel是配置在:profile {:dev}下面，所以运行起来时，会执行开发环境下的相关指令（靠配置决定）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： cljs websocket web前端开发框架

相关文章推荐

新的分享

章节导航