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

丁韬
2023-12-01

以上对前端服务端环境和语言的单纯性要求太过复杂,所以我编写了一个轻量化、较为灵活、模块的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框架的功能重写一边。

-

 

 类似资料: