【web前端框架】轻量化，模块化、MVVM web前端框架——view

以上对前端服务端环境和语言的单纯性要求太过复杂，所以我编写了一个轻量化、较为灵活、模块的MVVM前端框架——view。起始最初的想法是摆脱MVC进入MVVM，彻底摆脱PHP模板渲染做一个单纯的view，让项目做到“模块化+健壮可维护”。

-

项目Github开源地址：https://github.com/fyonecon/view

-

view配置教程：

单页应用功能生命周期

index.html——pages.js——index.js——获取url路由——渲染模块html——引入公共css和js——渲染foot等公共html模块——引入本页html模块css和js——执行页面入口函数start_this_page()

新建一个单页应用

新建并访问模块：

1）新建模块：pages/名字/名字.htm（格式.htm、.html都可以），pages/名字/名字.css，pages/名字/名字.js；

2）注册模块：config/pages.js，配置变量pages的参数即可，可以参照404页面模块的用法，注意路径和文件引入即可；

3）页面公共html模块部分渲染，需要将/pages/common/foot/foot/foot.js；

4）作为一款意在做前后端分离的框架，一款编译发生在客户端的框架，一款灵活并且页面模块化的应用，请保持自己自由自在的自信状态；

5）访问新建模块：“index.html#route=名字”，成功访问即可。

执行模块页面js

1）在pages/名字/名字.js中的start_this_page()为页面起始函数，本模块的其他操作应由此函数开始执行。

配置页面公共html模块比如foot模块

1）在文件夹pages/common/中新建文件“名字/名字.html”和“名字/名字.js ”；

2）在pages.js中将注册“名字/名字.js ”到页面公共资源变量page_public_file下即可；

3）具体“名字/名字.js ”内容可参考foot的写法。

部署view应用

1）将view应用放在服务器环境，比如apache、nginx、node、甚至对象存储里面；

2）直接部署，不需要再次编译。

注意事项：

1）本应用需要一个简单的服务器环境，直接从本地进入是不能运行的；

2）本应用不需要重新编译，即改即用；

3）浏览器最低需要支持ES6语法；

4）js、css等文件默认缓存100s。

---------------------------------------------------------------------

前端模块化MVVM框架-view

v2.2.0

1. 在使用过程中，发现view的所依赖的公共参数变量名称容易与pages里面的参数重名，虽然不影响项目运行，但是还是觉得很膈应。所以，这一次将config参数、pages.js参数利用Object将它们封装起来，减少函数或参数起名的难度；

2. 使用过程中，强调了pages入口函数的重要性，即在框架安全检测完，框架解析完，才能做页面模块的数据初始化；

3. 这一次巧妙融合了微信域名防封机制，利用后端语言PHP做最先的safe_check工具。剥离safe_check机制，已经将足够重复的js功能打包。同时，可以将view应用在微信公众号网页授权，而不依赖后端语言。总而言之，强调了前后端分离，强调了web的模块化应用。

v2.1.0

1. 依赖于ES6+jQ（+Api），其中jQ主要负责处理ajax请求；

2. 单页面，模块化，静态化；

3. 思维来源于php的模板渲染，同时为了摆脱代码中夹杂php代码；

4. 一些安全设置来自于语言自带的特性（比如：模块页面上添加的js不能运行，但是css可以。）；

5. 众所周知，基于api的页面无法更好的支持SEO。

项目实际应用展示：代码完全托管与CND的应用的访问地址

整个web端项目完全托管于CDN容器里面，速度贼快。 http://cdn.meishid.cn/view-play/index.html

view框架应用的一个例子

view框架的应用demo。BBC，VOA等在线广播收听——利用view的框架和设置实际应用一个web应用。 https://github.com/fyonecon/view-play

view框架的php写法，利用php将view框架重写一遍

https://github.com/fyonecon/view-php

介绍：

0. view的速度能力完全依靠文件的【CDN+api+客户端】能力，可以不依赖于node。渲染过程：依赖器将初步页面组装完成——页面进行api交互丰富页面内容。只需要两步即可完成页面所有内容的加载；

1. view/depend/文件夹包含了框架解析与加载模块文件，需要单独配置view/data/pages.js文件来注册模块文件；view/public/文件夹包含了公用和模块公用js；view/pages/文件夹是放置模块源文件的地方；

2. 页面没有太多的服务端环境和语言版本的要求，不需要分开发环境和生产环境，即改即用。甚至可以将整个项目直接放置在CDN里面，因为所有文件都是静态文件，数据依赖于ajax来渲染；

3. 配置与操作文档在public/doc文件夹；

4. 中型项目+多人协同 应该是没毛病的；

5. 对域名要求比较高的情况比如在微信中传播请将入口index.html更换为index.php，以便处理服务器状态返回和防标记页面。

6. 页面生命周期（index.html--config.js--框架解析index.js--公共all.js/css文件--执行Wi-Fi广告劫持的验证与清除--pages.htm--pages.js--page_loaded.js）

自带常用函数功能列表（view.js）：

打印日志：view.log(txt)

写入htm文件：view.write_htm(file_path,  by_id, cal_func)

写入js文件：view.write_js(js_src_array,  call_func)

获取url中的参数：view.get_url_param(url,  key)

设置cookie：view.set_cookie(name,  value,  time)

获取cookie：view.get_cookie(name)

删除cookie：view.del_cookie(name)

获取localStorage：view.get_data(name,  value)

md5加密：view.md5(string)

base64加密：base64_encode(string)

base64解密：base64_decode(string)

设置页面数据缓存，即用即走：view.set_cache(key,  value)

读取页面数据缓存：view.get_cache(key)

POST请求：view.request_post(api, map_data, call_func)

GET请求：view.request_get(api, map_data, call_func)

string转json格式：string_to_json(string)

json转string格式：json_to_string(json)

设置、读取、删除、清除本地数据（关闭页面数据仍存在）：set_data(key, value)、get_data(key)、del_data(key)、clear_data()

编于：2019-1-22 11:08，更新于：2019-2-26，更新于：2019-9-4，更新于：2019-12-5

-------------------------------------------------------------------------

拓展：

view框架的php重写 https://github.com/fyonecon/view-php ，利用php将view框架的功能重写一边。

-