我的web框架

2017-09-05

引言

逐步迭代，最终形成属于自己的web框架 WeCat.js,目前更新0.1版本(不完全)

基于koa.js进一步封装形成极简的后台框架(目的就是让用户用写js的方法快速的搭建属于自己前台后台);

2017-11-13注：目前一方面忙于实现的工作，同时在进行框架的开发：本博客内容暂不更新，已完成模板和路由部分，稍后进行分享
预计分享时间： 2018-3-30

整体实现

0.1版本项目结构

WeCat.js 0.1
->assets
->img
->other
->component
->home.js
->cat.js
->router
->index.js
->template
->header.js
->left.js
->app.html

项目截图

简单实践

1. 路由

借助hash实现路由，这部分正在持续改进

切换页面：捕获url的hash展示对应组件
注册路由：
异步加载对应组件的js：动态创建script标签来达到动态引用的效果
参数传递
组件切换前、切换后的钩子函数
^后续扩展

实例访问地址在这，点击这里访问，here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对路由的实现</title>
</head>
<body>
<a href="#/home">HOME</a>
<a href="#/cart">CART</a>
<h1>    利用锚点和hash来实现基本的框架路由功能    </h1>
<router-view></router-view>
<div>


    <<<<<<<<<<<<<<<<<<<<<<<<<<<br>
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<br>
    <br>
    <br>
    路由下面的内容
    <br>
    <br>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>><br>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>><br>



</div>
</body>
</html>
<script>
    // 根据地址栏锚值的没同在router-view位置显示不同的内容
    var Home = {template: '<div><h3>我是Home!!!!!!!!!!!!!!!!!!!</h3></div>'}
    var Cart = {template: '<div><h3>我是Cart..................</h3></div>'}

    var routes = [
        {name:'home',path:'/home',component:Home},
        {name:'cart',path:'/cart',component:Cart}
    ]

    // 1.监听地址栏锚点改变的事件hashchange
    window.onhashchange = function () {
        console.log('当锚发生变化的时候， 执行下面的方法')
        // 2.要判断当前地址栏中锚点值是什么
        // 如果当前的锚点值与我们写的规则中的routes对应，就显示相应的component
        var hash = location.hash; // #/xxx
        // splice
        hash = hash.slice(1, hash.length) ;

        // 3.遍历routes，去判断每个元素的path 是否与hash相等
        for (var i = 0; i < routes.length; i++) {
            var item = routes[i]

            if(item.path === hash){
                // 当相等时，就把当前元素的component属性的对应的内容插入到页面
                // router-view
                var oView = document.querySelector('router-view')
                oView.innerHTML = item.component.template
            }
        }

    }
</script>

进一步拓展，也当成自己接下来11-17号分享的基本模板

2.实现双向绑定MVVM

思路

1.首先，需要利用Object.defineProperty，将要观察的对象，转化成getter/setter，以便拦截对象赋值与取值操作，称之为Observer；

2.需要将DOM解析，提取其中的指令与占位符，并赋与不同的操作，称之为Compiler；

3.需要将Compile的解析结果，与Observer所观察的对象连接起来，建立关系，在Observer观察到对象数据变化时，接收通知，同时更新DOM，称之为Watcher；

4.最后，需要一个公共入口对象，接收配置，协调上述三者，称为Vue;


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>

        .test {
            height: 200px;
            width: 70%;
            background-color: red;
            color: black;
            margin-left: 200px;
            margin-top: 20px;
            font-size: 50px;

            -moz-user-select:none;

            -webkit-user-select:none;

            user-select:none;

        }

        .test2 {
            height: 100px;
            width: 100px;
            background-color: black;
            margin-left: 200px;
        }


    </style>
</head>
<body>

<div id="test" class="test">这是一个测试</div>

<div onclick="set()" class="test2"></div>
<script>
    var view = document.getElementById("test");
    var data = {};
    var i = 0,msg="data.b的值更新了，我要更新视图";
    Object.defineProperty(data, "b", {
        set: function (newValue) {
            msg = "data.b的值更新了，我要更新视图" + i ;
            view.textContent = newValue;
        },
        get: function () {
        }
    });


    function set() {
        i++;
        data["b"] = msg;
    }
</script>
</body>
</html>

持续修改中…..