前端FISH框架学习笔记

Fish

0. 学习路线

前期自学

fish基础组件（写简单demo） -> 模块化开发（写简单demo） -> 实际项目代码阅读

实际开发

看组件示例
看fish API
看代码示例
百度

1. 环境搭载

下载fihs发布包
工具的安装和使用：git、node、fish-cli
前端编辑器：vs code、hbuilder、sublime…

2. 前端基础入门

2.1 css

1. position
   定义和用法
   position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

2. aria-hidden：
   Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用（特别是那些由 Ajax 和 JavaScript 开发的）对于残障人士更易使用的各种机制。例如，ARIA 提供了易用的导航地标、JavaScript 组件、表单提示以及错误信息、实时内容更新等。

3. display属性：display 属性规定元素应该生成的框的类型

4. HTML<label>标签的for属性：规定label与哪个表单元素绑定。
5. ajax
6. 实现左侧导航栏高度自适应右边内容：js实现，css也可以。

2.2 js/jQuery

1. fish封装js函数

2. js函数语法

indexView.index(function(result){
   
        if(result){
            indexView.render();//渲染首页,
        }
        fish.history.start();//启动路由
    });

index: function (callback) {
   
            Http.isLogin({callback:function(result){
   
                    callback.call(this,result);

                }})
        },

isLogin: function(json) {
   
                //判断是否有用户变量数据
                var userData = Http.getCacheMap("userData");
                if (userData) { //存在用户数据
                    json.callback.call(this, true);
                } else {
                    //请求用户数据
                    Http.ajax({
                        url: apiJson.login.getUserData,
                        success: function(result, status, response) {
   
                            var isLogin = false;
                            if (result && result.result) { //拿到用户数据
                                Http.setCacheMap("userData", result.result);
                                isLogin = true;
                            }
                            json.callback.call(this, isLogin);
                        }
                    });
                }
            }